<template>
  <div class="bigscreen">
    <header class="screen-header">
      <!-- <div class="top-bg"></div> -->
      <div class="header-title">
        <div class="header-left">
          <div class="now-page headerchoice">当前主页</div>
          <div class="now-date">{{ nowDate.date }}</div>
        </div>
        <div class="header-right">
          <a href="/" class="go-index headerchoice">后台管理</a>
          <div class="now-time font_digit">{{ nowDate.time }}</div>
          <div class="go-index headertime"></div>
        </div>
        <h1>
          {{ screenTitle }}
          <!-- <div class="shine shine2">star</div> -->
        </h1>
      </div>
    </header>
    <section class="screen-section">
      <div class="section-left">
        <div class="section-content card">
          <div class="card-title"><i>天气预报</i></div>
          <div class="card-content">
            <div id="weather1" class="weather">
              <div class="rt1-info">
                <p style="color: #fff">天气接口暂停服务</p>
              </div>
            </div>
          </div>
        </div>

        <div class="section-content card">
          <div class="card-title">
            <i>累计降雨量柱状图</i>
          </div>
          <div class="card-content">
            <div class="left-chart" ref="left1" id="left1"></div>
          </div>
        </div>
        <div class="section-content card">
          <div class="card-title">
            <i>气象环境曲线图</i>
          </div>

          <div class="card-content">
            <ChartsForLine
              :ChartsForLineParant="singleLineLeft2"
              v-if="singleLineLeft2"
            />
          </div>
        </div>
        <div class="section-content card">
          <div class="card-title">
            <i>地下水位曲线图</i>
          </div>

          <div class="card-content">
            <ChartsForLine
              :ChartsForLineParant="singleLineLeft3"
              v-if="singleLineLeft3"
            />
          </div>
        </div>
      </div>
      <div class="section-mid">
        <div class="mid-top"></div>
        <div class="mid-fir">
          <div class="section-content card">
            <div class="card-title"><i>雷达实时图</i></div>
            <div class="card-content">
              <div class="map"></div>
            </div>
          </div>
          <!--  -->
        </div>
        <div class="mid-sec">
          <div class="section-content card" style="margin-right: 4px">
            <div class="card-title">
              <i>爆破振动曲线图</i>
            </div>
            <div class="card-content">
              <ChartsForLine
                :ChartsForLineParant="singleLineMid1"
                v-if="singleLineMid1"
              />
            </div>
          </div>
          <div class="section-content card" style="margin-left: 4px">
            <div class="card-title">
              <i>地表裂缝曲线图</i>
            </div>
            <div class="card-content">
              <div id="mid2"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-right">
        <div class="section-content card">
          <div class="card-title">
            <i>设备在线率</i>
          </div>

          <div class="card-content">
            <div id="pie" class="pie3d"></div>
            <!-- <div class="left-chart" ref="left1" id="left1"></div> -->
          </div>
        </div>
        <div class="section-content card">
          <div class="card-title">
            <i>土压力监测图</i>
          </div>
          <div class="card-content">
            <div id="ground-pre"></div>
          </div>
        </div>
        <div class="section-content card">
          <div class="card-title">
            <i>地面隆起监测图</i>
          </div>

          <div class="card-content">
            <div id="right3"></div>
          </div>
        </div>
        <div class="section-content card">
          <div class="card-title">
            <i>实时报警数据列表</i>
          </div>
          <div class="card-content">
            <div class="yinhuan">
              <div class="yinhuan-left">
                <div class="yinhuan-lefttop yinhuan-left-item">
                  <span class="yinhuan-item-top" v-if="troubleNum[0].value1">{{
                    troubleNum[0].value1
                  }}</span>
                  <span class="yinhuan-item-top" v-else>{{ 1 }}</span>
                  <span class="yinhuan-item-bottom">隐患数量</span>
                </div>
                <div class="yinhuan-leftbottom yinhuan-left-item">
                  <span class="yinhuan-item-top" v-if="troubleNum[0].value2">{{
                    troubleNum[0].value2
                  }}</span>
                  <span class="yinhuan-item-top" v-else>{{ 1 }}</span>
                  <span class="yinhuan-item-bottom">已经处理</span>
                </div>
              </div>
              <div class="yinhuan-right">
                <div class="lcl-table">
                  <div class="lcl-table-header">
                    <span>日期</span>
                    <span>发现方式</span>
                    <span>处置方式</span>
                  </div>
                  <div class="lcl-table-body scrollingout">
                    <div
                      class="lcl-tr"
                      v-for="item in troubleData"
                      :key="item.id"
                    >
                      <span class="lcl-td" :title="item.plandisposaltime">{{
                        item.plandisposaltime
                      }}</span>
                      <span class="lcl-td" :title="item.troublename">{{
                        item.troublename
                      }}</span>
                      <span class="lcl-td">
                        {{ item.status | yinhuanFilter }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'
//npm install echarts@4.9.0 --save
import Vue from "vue";
import ElementUI from "element-ui";
Vue.use(ElementUI);
import * as echarts from "echarts";
// import cuAmap from "@/components/AMap";
import lineCharts from "@/components/lclEcharts/lineCharts";
import nLineCharts from "@/components/lclEcharts/nLineCharts";
import ChartsForLine from "@/components/lclEcharts/ChartsForLine";
import { getSevenTime, getAfterSevenTime } from "@/components/lclEcharts/time";
import { getWeather } from "@/api/lclApi/lclapi";
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
import HighchartsDrilldown from "highcharts/modules/drilldown";
import Highcharts3D from "highcharts/highcharts-3d";

HighchartsMore(Highcharts);
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
(function (H) {
  Highcharts.wrap(
    Highcharts.seriesTypes.pie.prototype,
    "translate",
    function (proceed) {
      proceed.apply(this, [].slice.call(arguments, 1));
      if (!this.chart.is3d()) {
        return;
      }
      this.data.forEach((d) => {
        // 修改 3
        if (d.options.depth && typeof d.options.depth === "number") {
          d.shapeArgs.depth = d.shapeArgs.depth * 0.75 + d.options.depth;
        }
      });
    }
  );
  var cos = Math.cos,
    sin = Math.sin,
    PI = Math.PI,
    dFactor = (4 * (Math.sqrt(2) - 1)) / 3 / (PI / 2);
  function curveTo(cx, cy, rx, ry, start, end, dx, dy) {
    var result = [],
      arcAngle = end - start;
    if (end > start && end - start > Math.PI / 2 + 0.0001) {
      result = result.concat(
        curveTo(cx, cy, rx, ry, start, start + Math.PI / 2, dx, dy)
      );
      result = result.concat(
        curveTo(cx, cy, rx, ry, start + Math.PI / 2, end, dx, dy)
      );
      return result;
    }
    if (end < start && start - end > Math.PI / 2 + 0.0001) {
      result = result.concat(
        curveTo(cx, cy, rx, ry, start, start - Math.PI / 2, dx, dy)
      );
      result = result.concat(
        curveTo(cx, cy, rx, ry, start - Math.PI / 2, end, dx, dy)
      );
      return result;
    }
    return [
      [
        "C",
        cx +
          rx * Math.cos(start) -
          rx * dFactor * arcAngle * Math.sin(start) +
          dx,
        cy +
          ry * Math.sin(start) +
          ry * dFactor * arcAngle * Math.cos(start) +
          dy,
        cx + rx * Math.cos(end) + rx * dFactor * arcAngle * Math.sin(end) + dx,
        cy + ry * Math.sin(end) - ry * dFactor * arcAngle * Math.cos(end) + dy,
        cx + rx * Math.cos(end) + dx,
        cy + ry * Math.sin(end) + dy,
      ],
    ];
  }
  Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
    let cx = shapeArgs.x || 0, // x coordinate of the center
      cy = shapeArgs.y || 0, // y coordinate of the center
      start = shapeArgs.start || 0, // start angle
      end = (shapeArgs.end || 0) - 0.00001, // end angle
      r = shapeArgs.r || 0, // radius
      ir = shapeArgs.innerR || 0, // inner radius
      d = shapeArgs.depth || 0, // depth
      alpha = shapeArgs.alpha || 0, // alpha rotation of the chart
      beta = shapeArgs.beta || 0; // beta rotation of the chart
    // Derived Variables
    const cs = Math.cos(start), // cosinus of the start angle
      ss = Math.sin(start), // sinus of the start angle
      ce = Math.cos(end), // cosinus of the end angle
      se = Math.sin(end), // sinus of the end angle
      rx = r * Math.cos(beta), // x-radius
      ry = r * Math.cos(alpha), // y-radius
      irx = ir * Math.cos(beta), // x-radius (inner)
      iry = ir * Math.cos(alpha), // y-radius (inner)
      dx = d * Math.sin(beta), // distance between top and bottom in x
      dy = d * Math.sin(alpha); // distance between top and bottom in y
    // 修改 1
    cy -= dy;
    // TOP
    let top = [["M", cx + rx * cs, cy + ry * ss]];
    top = top.concat(curveTo(cx, cy, rx, ry, start, end, 0, 0));
    top.push(["L", cx + irx * ce, cy + iry * se]);
    top = top.concat(curveTo(cx, cy, irx, iry, end, start, 0, 0));
    top.push(["Z"]);
    // OUTSIDE
    const b = beta > 0 ? Math.PI / 2 : 0,
      a = alpha > 0 ? 0 : Math.PI / 2;
    const start2 = start > -b ? start : end > -b ? -b : start,
      end2 = end < PI - a ? end : start < PI - a ? PI - a : end,
      midEnd = 2 * PI - a;
    // When slice goes over bottom middle, need to add both, left and right
    // outer side. Additionally, when we cross right hand edge, create sharp
    // edge. Outer shape/wall:
    //
    //            -------
    //          /    ^    \
    //    4)   /   /   \   \  1)
    //        /   /     \   \
    //       /   /       \   \
    // (c)=> ====         ==== <=(d)
    //       \   \       /   /
    //        \   \<=(a)/   /
    //         \   \   /   / <=(b)
    //    3)    \    v    /  2)
    //            -------
    //
    // (a) - inner side
    // (b) - outer side
    // (c) - left edge (sharp)
    // (d) - right edge (sharp)
    // 1..n - rendering order for startAngle = 0, when set to e.g 90, order
    // changes clockwise (1->2, 2->3, n->1) and counterclockwise for
    // negative startAngle
    let out = [["M", cx + rx * cos(start2), cy + ry * sin(start2)]];
    out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0));
    // When shape is wide, it can cross both, (c) and (d) edges, when using
    // startAngle
    if (end > midEnd && start < midEnd) {
      // Go to outer side
      out.push(["L", cx + rx * cos(end2) + dx, cy + ry * sin(end2) + dy]);
      // Curve to the right edge of the slice (d)
      out = out.concat(curveTo(cx, cy, rx, ry, end2, midEnd, dx, dy));
      // Go to the inner side
      out.push(["L", cx + rx * cos(midEnd), cy + ry * sin(midEnd)]);
      // Curve to the true end of the slice
      out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end, 0, 0));
      // Go to the outer side
      out.push(["L", cx + rx * cos(end) + dx, cy + ry * sin(end) + dy]);
      // Go back to middle (d)
      out = out.concat(curveTo(cx, cy, rx, ry, end, midEnd, dx, dy));
      out.push(["L", cx + rx * cos(midEnd), cy + ry * sin(midEnd)]);
      // Go back to the left edge
      out = out.concat(curveTo(cx, cy, rx, ry, midEnd, end2, 0, 0));
      // But shape can cross also only (c) edge:
    } else if (end > PI - a && start < PI - a) {
      // Go to outer side
      out.push([
        "L",
        cx + rx * Math.cos(end2) + dx,
        cy + ry * Math.sin(end2) + dy,
      ]);
      // Curve to the true end of the slice
      out = out.concat(curveTo(cx, cy, rx, ry, end2, end, dx, dy));
      // Go to the inner side
      out.push(["L", cx + rx * Math.cos(end), cy + ry * Math.sin(end)]);
      // Go back to the artifical end2
      out = out.concat(curveTo(cx, cy, rx, ry, end, end2, 0, 0));
    }
    out.push([
      "L",
      cx + rx * Math.cos(end2) + dx,
      cy + ry * Math.sin(end2) + dy,
    ]);
    out = out.concat(curveTo(cx, cy, rx, ry, end2, start2, dx, dy));
    out.push(["Z"]);
    // INSIDE
    let inn = [["M", cx + irx * cs, cy + iry * ss]];
    inn = inn.concat(curveTo(cx, cy, irx, iry, start, end, 0, 0));
    inn.push([
      "L",
      cx + irx * Math.cos(end) + dx,
      cy + iry * Math.sin(end) + dy,
    ]);
    inn = inn.concat(curveTo(cx, cy, irx, iry, end, start, dx, dy));
    inn.push(["Z"]);
    // SIDES
    const side1 = [
      ["M", cx + rx * cs, cy + ry * ss],
      ["L", cx + rx * cs + dx, cy + ry * ss + dy],
      ["L", cx + irx * cs + dx, cy + iry * ss + dy],
      ["L", cx + irx * cs, cy + iry * ss],
      ["Z"],
    ];
    const side2 = [
      ["M", cx + rx * ce, cy + ry * se],
      ["L", cx + rx * ce + dx, cy + ry * se + dy],
      ["L", cx + irx * ce + dx, cy + iry * se + dy],
      ["L", cx + irx * ce, cy + iry * se],
      ["Z"],
    ];
    // correction for changed position of vanishing point caused by alpha
    // and beta rotations
    let angleCorr = Math.atan2(dy, -dx),
      angleEnd = Math.abs(end + angleCorr),
      angleStart = Math.abs(start + angleCorr),
      angleMid = Math.abs((start + end) / 2 + angleCorr);
    /**
     * set to 0-PI range
     * @private
     */
    function toZeroPIRange(angle) {
      angle = angle % (2 * Math.PI);
      if (angle > Math.PI) {
        angle = 2 * Math.PI - angle;
      }
      return angle;
    }
    angleEnd = toZeroPIRange(angleEnd);
    angleStart = toZeroPIRange(angleStart);
    angleMid = toZeroPIRange(angleMid);
    // *1e5 is to compensate pInt in zIndexSetter
    const incPrecision = 1e5,
      a1 = angleMid * incPrecision,
      a2 = angleStart * incPrecision,
      a3 = angleEnd * incPrecision;
    let result = {
      top: top,
      // max angle is PI, so this is always higher
      zTop: Math.PI * incPrecision + 1,
      out: out,
      zOut: Math.max(a1, a2, a3),
      inn: inn,
      zInn: Math.max(a1, a2, a3),
      side1: side1,
      // to keep below zOut and zInn in case of same values
      zSide1: a3 * 0.99,
      side2: side2,
      zSide2: a2 * 0.99,
    };
    // 修改 2
    result.zTop = (result.zOut + 0.5) / 100;
    return result;
  };
})(Highcharts);
export default {
  data() {
    return {
      screenTitle: "边坡结构稳定性监测系统",
      nowDate: "2023-01-01",
      nowTime: "23:59:59",
      jxlEquipno: 19,
      swEquipno: 2,
      fsdEquipno: 18,
      jrxDevList: [{ equipname: "双山水库渗压1-1", equipno: "ss0511" }],
      jrxDevValue: "ss0511",
      wyDevList: [{ equipname: "双山水库渗压1-1", equipno: "ss0511" }],
      wyDevValue: "ss0511",
      troubleNum: [{ value1: "1", value2: "1" }],
      troubleData: [
        {
          plandisposaltime: "2023-03-20",
          troublename: "人工巡检",
          status: "1",
        },
      ],
      cgxObj: {
        num: 4,
        arr: [{ id: 1, cgq: [] }],
      },
      left1Data: [2, 4, 5, 2, 2, 1, 2],
      singleLineLeft2: {
        chartId: "chartid2",
      },
      singleLineLeft3: {
        chartId: "chartid3",
      },
      singleLineLeft4: {
        chartId: "chartid4",
      },
      singleLineRight1: {
        chartId: "chartid4",
      },
      singleLineJrx: {
        chartId: "chartid4",
      },
      nLineChartsWy: {
        chartId: "chartidwy",
      },
      singleLineMid1: {
        chartId: "chartid5",
      },
      satellite: false,
      //视频
      videoList: [
        { id: "1", url: "", name: "视频1" },
        { id: "2", url: "", name: "视频2" },
        { id: "3", url: "", name: "视频3" },
        { id: "4", url: "", name: "视频4" },
      ],
      mapBtn: 0,
      mapOptions: {
        zooms: [4, 20],
        center: [120.08, 36.95],
        zoom: 10,
        mapStyle: "amap://styles/blue",
        layers: null,
      },
      mapBaseInfor: [{ longitude: "122.05", latitude: "37.49", name: "水库1" }],
      beforeSevenDay: ["03-25"],
      d3nterval: null,
      d3data: [
        { name: "离线", y: 1, sliced: true, selected: true, depth: 5 },
        { name: "在线", y: 3, sliced: true, selected: true, depth: 8 },
      ],
    };
  },
  components: {
    lineCharts,
    nLineCharts,
    ChartsForLine,
  },
  created() {
    var that = this;
    this.$nextTick(() => {
      // this.amapInfor();
      // var satellite = new AMap.TileLayer.Satellite();
      // var roadNet = new AMap.TileLayer.RoadNet();
      // new AMap.Map("A_Map", that.mapOptions);
    });
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      this.beforeSevenDay = getSevenTime(7);
      console.log(this.beforeSevenDay, "this.beforeSevenDay");
      setInterval(this.getNowTime, 1000);
      this.weather();
      this.left1Year();
      // this.pieFun();
      that.highchart3d();
      this.d3nterval = setInterval(function () {
        if (that.d3data[1].depth == 5) {
          that.d3data = [
            { name: "离线", y: 1, sliced: true, selected: true, depth: 5 },
            { name: "在线", y: 3, sliced: true, selected: true, depth: 8 },
          ];
        } else {
          that.d3data = [
            { name: "离线", y: 1, sliced: true, selected: true, depth: 8 },
            { name: "在线", y: 3, sliced: true, selected: true, depth: 5 },
          ];
        }
        that.highchart3d();
      }, 5000);
      this.groundFun();
      this.mid2Fun();
      this.right3Fun();
      this.loading();
    });
  },
  beforeDestroy() {
    clearInterval(this.d3nterval);
  },
  filters: {
    yinhuanFilter(v) {
      let value = Number(v);
      if (value === 1) {
        return "已处理";
      } else {
        return "未处理";
      }
    },
  },
  methods: {
    loading() {
      this.singleLineLeft2 = {
        chartId: "left2",
        color: ["#00FFDE"],
        chartType: "line",
        unit: "",
        axisLabel: "#BAE7FF",
        grid: {
          left: "10%",
          right: "5%",
          bottom: "10%",
          top: "15%",
          z: 22,
        },
        showlegend: false,
        legendItem: ["气象"],
        xAxisData: this.beforeSevenDay,
        yData: [[0.2, 0.4, 0.5, 0.2, 0.2, 0.1, 0.2]],
      };
      this.singleLineLeft3 = {
        chartId: "left3",
        color: ["#18AAF6"],
        chartType: "line",
        unit: "mm",
        axisLabel: "#BAE7FF",
        grid: {
          left: "10%",
          right: "5%",
          bottom: "10%",
          top: "15%",
          z: 22,
        },
        showlegend: false,
        legendItem: ["地下水"],
        xAxisData: this.beforeSevenDay,
        yData: [[0.5, 0.2, 0.3, 0.1, 0.2, 0.1, 0.3]],
      };
      this.singleLineMid1 = {
        chartId: "mid1",
        color: ["#F9EB0C"],
        chartType: "line",
        unit: "mm",
        axisLabel: "#BAE7FF",
        grid: {
          left: "10%",
          right: "5%",
          bottom: "10%",
          top: "15%",
          z: 22,
        },
        showlegend: false,
        legendItem: ["爆破振动"],
        xDataShow: "1",
        xAxisData: "",
        yData: [
          [
            200, 444, 300, 10, 200, 123, 200, 200, 444, 300, 10, 200, 123, 200,
            200, 444, 300, 200, 200, 123, 200, 200, 444, 300, 200, 200, 123,
            200, 200, 444, 300, 200, 200, 123, 200, 200, 444, 1000, 200, 200,
            123, 200, 200, 600, 1000, 200, 200, 123, 200, 200, 600, 1000, 10,
            200, 123, 200, 200, 600, 1000, 10, 200, 123, 200, 200, 600, 500, 10,
            200, 123, 200, 200, 444, 500, -500, 200, 123, 200, 200, 444, 500,
            -500, 200, 123, 200,
          ],
        ],
      };
    },

    left1Year() {
      let that = this;
      let myChart = echarts.init(document.getElementById("left1"));

      let option = {
        // backgroundColor: "#0a142f",
        color: ["#0EECE4"],
        tooltip: {
          // trigger: 'axis',
          confine: true,
          // axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //   type: 'line', // 默认为直线，可选为：'line' | 'shadow'
          //   lineStyle: {
          //     color: 'transparent',
          //   },
          // },
        },
        grid: {
          left: "12%",
          right: "5%",
          bottom: "15%",
          top: "10%",
          z: 22,
        },
        xAxis: [
          {
            type: "category",
            // gridIndex: 0,
            data: that.beforeSevenDay,
            axisLine: {
              lineStyle: {
                color: "#BAE7FF",
              },
            },
            axisLabel: {
              show: true,
              color: "#BAE7FF",
              fontSize: 11,
              // formatter: (value) => {
              //   let labelArr = value.split("");
              //   labelArr.splice(4, 0, "\n\n");
              //   return labelArr.join("");
              // },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            nameTextStyle: {
              fontSize: 11,
              color: "#68B4DD",
              align: "left",
            },
            splitArea: { show: false },
            gridIndex: 0,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(186,231,255,.3)",
                type: "dashed ",
              },
            },
            axisTick: {
              show: false,
            },
            min: 0,
            axisLine: {
              show: true,
              // inside: true,
              lineStyle: {
                color: "#BAE7FF",
              },
            },
            axisLabel: {
              show: true,
            },
            max: Math.max.apply(null, that.left1Data) * 1.5,
          },
          {
            type: "value",
            splitArea: { show: false },
            gridIndex: 0,
            min: 0,
            splitNumber: 12,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            max: Math.max.apply(null, that.left1Data) * 1.5,
          },
        ],
        series: [
          {
            data: that.left1Data,
            name: "",
            type: "bar",
            barWidth: "30%",
            xAxisIndex: 0,
            yAxisIndex: 0,
            label: {
              show: true,
              position: "top",
              distance: 15,
              color: "#fff",
              fontSize: 11,
              formatter: "{c}",
            },
            itemStyle: {
              normal: {
                //圆角
                barBorderRadius: [30, 30, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#0EECE4",
                  },
                  {
                    offset: 1,
                    color: "#058FE7",
                  },
                ]),
              },
            },

            zlevel: 11,
          },
          {
            name: "",
            type: "bar",
            barWidth: "50%",
            xAxisIndex: 0,
            yAxisIndex: 1,
            barGap: "-135%",
            data: that.left1Data.map(
              () => Math.max.apply(null, that.left1Data) * 1.5
            ),
            tooltip: {
              backgroundColor: "transparent",
              formatter: " ",
            },
            itemStyle: {
              normal: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            zlevel: 9,
          },
        ],
      };
      myChart.setOption(option);
      setTimeout(() => {
        myChart.resize();
      }, 600);
    },
    // 水位趋势图

    weather() {
      getWeather({
        c: "code",
        a: "getcode",
        id: 48,
        icon: 1,
        py: "jianping"// "weihai", // 建平
      }).then((res) => {
        var body = document.createElement("div");
        var weather = this.$el.querySelector("#weather1");
        setTimeout(function () {
          body.innerHTML = res;
          var styles = body.querySelectorAll("link");
          for (var style of styles) {
            body.removeChild(style);
          }
          var scripts = body.querySelectorAll("script");
          for (var script of scripts) {
            script.parentNode.removeChild(script);
          }
          // 查看图片
          var img = body.querySelector("#day_1 .img").firstElementChild;
          img.src =
            "http://plugin.tianqistatic.com/static/" +
            img.src.split("static/")[1];

          // 修剪dom
          var mobile05 = body.querySelector("#mobile05");
          mobile05.removeChild(mobile05.firstElementChild);
          mobile05.removeChild(mobile05.lastElementChild);
          var childs = mobile05.children;
          for (var child of childs) {
            child.innerHTML = child.firstElementChild.innerHTML;
          }

          weather.innerHTML = body.innerHTML;
        }, 300);
      });
    },
    //设备在线率
    pieFun() {
      let that = this;
      var isSet = true;
      var charPie3currentIndex = 0;
      let myChart = echarts.init(document.getElementById("pie"));
      var colorList = ["#22D7BB", "#24AAFF", "#5EDDF8", "#FCB840", "#F9D660"];
      let color1 = [
        ["rgba(34,215,187,0.5)", "rgba(34,215,187,1)"],
        ["rgba(36,170,255,0.5)", "rgba(36,170,255,1)"],
      ];
      var scale = 1;
      var echartData = [
        { name: "离线", value: 1 },
        { name: "在线", value: 3 },
      ];
      let unit = "个";
      let option = {
        color: colorList,
        grid: {
          bottom: 150,
          left: 0,
          right: "10%",
        },
        legend: {
          show: false,
          orient: "vertical",
          top: "middle",
          right: "5%",
          textStyle: {
            color: "#f2f2f2",
            fontSize: 25,
          },
          icon: "roundRect",
        },
        series: [
          // 主要展示层的
          {
            radius: "82%",
            center: ["50%", "50%"],
            name: "",
            type: "pie",
            hoverAnimation: true,
            color: [
              "#c487ee",
              "#deb140",
              "#49dff0",
              "#034079",
              "#6f81da",
              "#00ffb4",
            ],
            label: {
              normal: {
                formatter: function (params, ticket, callback) {
                  var total = 0; //考生总数量
                  var percent = 0; //考生占比
                  echartData.forEach(function (value, index, array) {
                    total += value.value;
                  });
                  percent = ((params.value / total) * 100).toFixed(1);
                  return (
                    "{normal|" +
                    params.name +
                    " " +
                    percent +
                    "%}\n{value|" +
                    params.value +
                    "}{unit|" +
                    unit +
                    "}"
                  );
                },
                padding: [0, -0],
                rich: {
                  normal: {
                    fontSize: 12 * scale,
                    padding: [15, 4],
                    align: "center",
                  },
                  value: {
                    align: "center",
                    fontSize: 26 * scale,
                  },
                  unit: {
                    padding: [0, 0, 5 * scale, 0],
                  },
                },
              },
            },
            labelLine: {
              length: 20 * scale,
              length2: 30,
            },
            itemStyle: {
              borderColor: "#03213E",
              borderWidth: 7,
            },
            data: echartData,
          },
        ],
      };
      myChart.setOption(option);

      setTimeout(() => {
        // myChart.clear();
        // window.onresize = function () {
        myChart.resize();
        // };
      }, 900);
    },
    //highchart3d
    highchart3d() {
      var echartData = this.d3data;

      var chart = Highcharts.chart("pie", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0,
          },
          animation: false,
        },
        colors: [
          //扇形颜色
          "#00A8FF",
          "#00D7E9",
          "#5f75e5",
          "#67acfe",
          "#5f75e5",
          "#7ca2ff",
          "#4bcdec",
          "#6648ff",
          "#5f75e5",
          "#5a9be7",
        ],
        title: {
          text: "",
        },
        credits: {
          enabled: false, // 禁用版权信息
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 5, //高度
            dataLabels: {
              enabled: true,
              // format: "{point.name}: <b>{point.percentage:.1f}%</b>",
              formatter: function () {
                return `<p style="color:${this.point.color};font-size:14px;">${this.point.options.name}：<span style="font-family: diget year;font-size:26px;font-wight:blod;">${this.point.options.y}</span>个</p>`;
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "在线率",
            data: echartData,
            animation: false,
          },
        ],
      });
    },
    //土压力
    groundFun() {
      let myChart = echarts.init(document.getElementById("ground-pre"));
      let yLabel = ["W1", "W2", "W3", "W4", "W5", "W6", "W7"];
      let yData = [10, 2, 3, 5, 6, 8, 1, 2, 6, 1];
      let bgData = [];
      for (let i in yData) {
        bgData.push(20);
      }
      let option = {
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "10%",
          containLabel: true,
        },
        dataZoom: [
          {
            start: 0, //默认为0
            end: 50, //默认为100
            type: "slider",
            maxValueSpan: 9, //显示数据的条数(默认显示10个)
            show: true,
            handleSize: 0, //滑动条的 左右2个滑动条的大小
            height: "80%", //组件高度
            left: 600, //左边的距离
            right: 8, //右边的距离
            top: 20, //上边边的距离
            borderColor: "rgba(43,48,67,0.8)",
            fillerColor: "#33384b", //滑动块的颜色
            backgroundColor: "rgba(13,33,117,0.5)", //两边未选中的滑动条区域的颜色
            showDataShadow: false, //是否显示数据阴影 默认auto
            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
            realtime: true, //是否实时更新
            filterMode: "filter",
            yAxisIndex: [0], //控制的y轴
          },
          //滑块的属性
          {
            type: "inside",
            show: true,
            yAxisIndex: [0, 1],
            start: 0, //默认为1
            end: 50, //默认为100
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0].name +
              "<br/>" +
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              params[0].seriesName +
              " : " +
              params[0].value +
              " <br/>"
            );
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: yLabel,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            // axisLabel: {
            //   textStyle: {
            //     color: "#FFF",
            //     fontSize: "12",
            //   },
            // },
            data: yData,
          },
        ],
        series: [
          {
            name: "土压力值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 30, 30, 0],
                color: "#2a82fd",
                shadowBlur: 0,
                shadowColor: "rgba(87,220,222,0.7)",
              },
            },
            barWidth: 10,
            data: yData,
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#fff",
                formatter: (params) => {
                  var value = params.value;
                  var suffix = params.data.suffix || "KPa"; //标签显示单位
                  return value + suffix;
                },
              },
            },
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 10,
            barGap: "-100%",
            data: bgData,
            itemStyle: {
              normal: {
                color: "rgba(24,31,68,1)",
                barBorderRadius: [0, 30, 30, 0],
              },
            },
          },
        ],
      };
      myChart.setOption(option);

      setTimeout(() => {
        // myChart.clear();
        // window.onresize = function () {
        myChart.resize();
        // };
      }, 900);
    },
    //mid2 地表
    mid2Fun() {
      let myChart = echarts.init(document.getElementById("mid2"));
      // mock数据
      const dataArr = {
        xdata: [
          "12:05",
          "12:06",
          "12:07",
          "12:08",
          "12:09",
          "12:10",
          "12:11",
          "12:12",
          "12:13",
          "12:14",
          "12:15",
          "12:16",
          "12:17",
          "12:18",
          "12:19",
          "12:20",
        ],

        // xdata: ['12:05', '12:06', '12:07', '12:08', '12:09'],
        vaccination: [
          0.2, 0.3, 0.02, 0.1, 0.05, 0.1, 0.09, 0.2, 0.3, 0.02, 0.1, 0.05, 0.1,
          0.09, 0.2, 0.3,
        ],
      };

      // tooltip
      const tooltip = {
        trigger: "axis",
        textStyle: { fontSize: "100%" },
        formatter: (params) => {
          let rander = params
            .map(
              (item) =>
                // item.seriesType !== 'pictorialBar'
                //     ? `<div>${item.seriesName}: ${item.seriesType !== 'line' ? item.value : item.value + '%'}</div>`
                //     : ''
                `<div>${item.seriesName}: ${item.value}</div>`
            )
            .join("");
          return `
            <div>${params[0].axisValue}</div>
            ${rander}
        `;
        },
      };
      const legend = {
        data: ["地表裂隙"],
        textStyle: { fontSize: 14, color: "#000" },
        itemWidth: 25,
        itemHeight: 15,
        itemGap: 15,
        bottom: "5%",
        show: false,
      };
      const grid = {
        left: "10%",
        right: "5%",
        bottom: "10%",
        top: "15%",
        z: 22,
      };
      // xAxis
      const xAxis = {
        // boundaryGap: false,
        type: "category",
        gridIndex: 0,
        axisTick: { show: true },
        axisLine: {
          lineStyle: {
            color: "#BAE7FF",
          },
          onZero: false,
        },
        // splitLine: { lineStyle: { color: "#0562AF" } },
        axisLabel: { textStyle: { fontSize: 10, color: "#BAE7FF" } },
        data: dataArr.xdata,
      };

      // yAxis
      const yAxis = [
        {
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(186,231,255,.3)",
              type: "dashed ",
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#BAE7FF",
            },
          },

          axisLabel: { textStyle: { fontSize: 10, color: "#BAE7FF" } },
        },
      ];

      // series
      const series = [
        {
          name: "地表裂隙",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbol: "circle",
          symbolSize: 5,
          lineStyle: {
            normal: {
              color: "#00FFFC",
              // shadowColor: "rgba(0, 0, 0, .3)",
              // shadowBlur: 0,
              // shadowOffsetY: 3,
              // shadowOffsetX: 3,
            },
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              color: "#F9EB0C",
            },
          },

          itemStyle: {
            color: "#F9EB0C",
            // borderColor: "#fff",
            // borderWidth: 1,
            // shadowColor: "rgba(0, 0, 0, .3)",
            // shadowBlur: 0,
            // shadowOffsetY: 2,
            // shadowOffsetX: 2,
          },

          data: dataArr.vaccination,
        },
      ];
      let option = {
        tooltip,
        xAxis,
        yAxis,
        series,
        grid,
      };
      myChart.setOption(option);

      setTimeout(() => {
        // myChart.clear();
        // window.onresize = function () {
        myChart.resize();
        // };
      }, 900);
    },
    //right3
    right3Fun() {
      let myChart = echarts.init(document.getElementById("right3"));
      var ageArea = this.beforeSevenDay;
      var FbarData = [3100, 2142, 1218, 581, 431, 581, 431]; //男
      var MbarData = [-3010, -2742, -218, -381, -521, -381, -521]; //女

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params, ticket, callback) {
            console.log(params);
            var res = params[0].name;
            for (var i = 0, l = params.length; i < l; i++) {
              res +=
                "<br/>" +
                params[i].seriesName +
                " : " +
                Math.abs(params[i].value);
            }
            setTimeout(function () {
              // 仅为了模拟异步回调
              callback(ticket, res);
            }, 10);
            return "loading...";
          },
        },
        legend: {
          center: true,
          top: 5,
          data: ["监测值1", "监测值2"],
          textStyle: {
            color: "#BAE7FF",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "15%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              color: "#BAE7FF",
              fontSize: 10,
              formatter: function (value) {
                return Math.abs(value); //显示的数值都取绝对值
              },
            },
            nameTextStyle: {
              fontSize: 10,
              color: "#BAE7FF",
              align: "left",
              padding: [5, -5, 0, 0], // 上右下左与原位置距离
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(186,231,255,.3)",
                type: "dashed ",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#BAE7FF",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            type: "category",
            axisTick: { show: false },
            nameTextStyle: {
              fontSize: 10,
              color: "#BAE7FF",
              align: "left",
              padding: [5, -5, 0, 0], // 上右下左与原位置距离
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#BAE7FF",
              },
            },
            axisTick: {
              show: false,
            },
            data: ageArea,
          },
        ],
        series: [
          {
            name: "监测值1",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#fff",
              },
            },

            data: FbarData,
          },
          {
            name: "监测值2",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "left",
                color: "#fff",
                formatter: function (v) {
                  return Math.abs(v.data);
                },
              },
            },

            // data:[-120, -132, -101, -134, -190, -230, -210]
            data: MbarData,
          },
        ],
      };

      myChart.setOption(option);

      setTimeout(() => {
        // myChart.clear();
        // window.onresize = function () {
        myChart.resize();
        // };
      }, 900);
    },
    //时间
    getNowTime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let mins = date.getMinutes();
      let second = date.getSeconds();
      this.nowDate = {
        date: `${year}-${this.addZero(month)}-${this.addZero(day)}`,
        time: `${this.addZero(hour)}:${this.addZero(mins)}:${this.addZero(
          second
        )}`,
      };
    },
    addZero(s) {
      return s < 10 ? "0" + s : s;
    },
  },
};
window.onload = function () {
  let testsk = document.querySelector("#testsk");
  testsk.onclick = function (e) {
    console.log(e);
  };
};
</script>




<style lang="scss" scoped>
@keyframes opacity-change {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes opacity-change {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-moz-keyframes opacity-change {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@-o-keyframes opacity-change {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@font-face {
  font-family: "diget year";
  src: url("~@/assets/fonts/DS-Digital.ttf");
}
.font_digit {
  font-family: diget year;
}
.bigscreen {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #0d1d34;
  background-image: radial-gradient(#082b3f 7.4%, transparent 0);
  background-size: 0.2rem 0.2rem;
  color: #fff;
  ::v-deep .el-dialog {
    background: url("~@/assets/images/bigscreen/videoBg.png") no-repeat center;
    background-size: 100%;
  }
  ::v-deep .el-dialog__header {
    border-bottom: none;
  }
  ::v-deep .el-dialog__body {
    padding: 10px 20px;
    width: 100%;
    height: 40vh;
    .video-infor {
      width: 100%;
      height: 37vh;
      display: block;
      border: 1px solid red;
    }
  }
  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  ::v-deep .el-dialog__title {
    color: #fff;
  }
  .lcl-table {
    width: 100%;
    height: 100%;
    .lcl-table-header {
      width: 100%;
      height: 0.3rem;
      background: url("~@/assets/images/bigscreen/table-header.png") no-repeat;
      background-position: 0 -600%;
      background-size: 100%;
      font-size: 0.12rem;
      font-weight: 400;
      color: #00f0ff;
      display: flex;
      justify-content: space-around;
    }
    .lcl-table-body {
      width: 100%;
      max-height: 1.3rem;
      .lcl-tr {
        width: 100%;
        height: 0.36rem;
        line-height: 0.36rem;
        display: flex;
        justify-content: space-between;
        .lcl-td {
          display: inline-block;
          width: 33%;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .lcl-td:nth-child(3) {
          text-align: center;
        }
      }
      .lcl-tr:nth-child(2n) {
        background: rgba(29, 100, 221, 0.22);
      }
    }
    // @media only screen and (min-width: 1440px) {
    //   .lcl-table-header {
    //     background: url("~@/assets/images/bigscreen/table-header.png") no-repeat;
    //     background-position: 0 -600%;
    //     background-size: 100%;
    //   }
    // }
    // @media only screen and (max-width: 1440px) {
    //   .lcl-table-header {
    //     background: url("~@/assets/images/bigscreen/table-header.png") no-repeat;
    //     background-position: 0 200%;
    //     background-size: 100%;
    //   }
    // }
  }
  .card {
    width: 100%;
    height: 100%;
    .card-title {
      position: relative;
      width: 100%;
      height: 0.32rem;
      color: #fff;
      background: url("~@/assets/images/bigscreen/title.png") no-repeat center;
      background-size: cover;
      padding-left: 0.38rem;
      i {
        font-size: 0.18rem;
        font-style: italic;
        line-height: 0.32rem;
        font-weight: bold;
        text-shadow: 0px 0px 9px rgba(32, 22, 0, 0.45);
      }
      &:before {
        content: "";
        position: absolute;
        left: 0.08rem;
        top: 0.03rem;
        display: block;
        height: 0.22rem;
        width: 0.21rem;
        background: no-repeat url("~@/assets/images/bigscreen/title-before.png");
        background-size: cover;
      }
      .card-select {
        width: 1.2rem;
        height: 0.24rem;
        position: absolute;
        right: 0.08rem;
        top: 0.03rem;
        display: inline-block;
        // 修改input默认值颜色 兼容其它主流浏览器
        ::v-deep input::-webkit-input-placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
        ::v-deep input::-moz-input-placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
        ::v-deep input::-ms-input-placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
        // input框
        ::v-deep .el-select,
        ::v-deep .el-input,
        ::v-deep .el-input__inner {
          height: 0.24rem;
          background-color: rgba(8, 148, 255, 0.3);
          border: 1px solid #1d80da;
          // background-color: rgba(255, 255, 255, 0.04);
          color: rgba(255, 255, 255, 1);
          border: none; // 去掉边框
          // border-color: #XXXXXX // 默认边框的颜色
          text-align: left;
          border-radius: 4px;
          line-height: 0.24rem;
        }

        // 选中时边框颜色
        // ::v-deep .el-input__inner:focus{
        //     border-color: #XXXXXX;
        // }

        // 鼠标悬浮时 input框颜色
        ::v-deep .el-input__inner:hover {
          background-color: rgba(255, 255, 255, 0.12);
        }
        ::v-deep .el-input__suffix-inner {
          display: inline-block;
        }
        // input框 右侧的箭头
        ::v-deep .el-select .el-input .el-select__caret {
          transform: rotate(180deg);
          color: rgba(255, 255, 255, 1);
        }
        ::v-deep .el-select .el-input .el-select__caret.is-reverse {
          transform: rotate(0deg);
        }
        ::v-deep .el-input__icon {
          position: relative;
          line-height: 0.24rem;
          width: 0.12rem;
        }
        ::v-deep .el-select .el-input .el-select__caret:before {
          position: absolute;
          content: "\E6E1";
          text-align: center;
          line-height: 3px;
          display: inline-block;
          top: 0.11rem;
          left: -0.01rem;
        }

        // option选项 上面的箭头
        ::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {
          border-bottom-color: rgba(43, 45, 55, 0.8);
          z-index: 9999;
        }
        ::v-deep .popper__arrow {
          border: none;
        }
        // option选项 最外层
        ::v-deep .el-select-dropdown {
          border: none !important;
          background: rgba(43, 45, 55, 0.8) !important;
          z-index: 9999;
        }
        // option选项 文字样式
        ::v-deep .el-select-dropdown__item {
          color: rgba(255, 255, 255, 1) !important;
          z-index: 9999;
        }
        ::v-deep .el-select-dropdown__item.selected span {
          color: rgba(255, 255, 255, 0.8) !important;
          z-index: 9999;
        }
        // 移入option选项 样式调整
        ::v-deep .el-select-dropdown__item.hover {
          background-color: rgba(255, 255, 255, 0.06);
          color: rgba(255, 255, 255, 0.8) !important;
          z-index: 9999;
        }

        // 下拉框垂直滚动条宽度
        ::v-deep .el-scrollbar__bar.is-vertical {
          width: 10px;
          top: 2px;
        }
        // 下拉框最大高度
        ::v-deep .el-select-dropdown__wrap {
          max-height: 2rem;
        }
      }
      .card-select-dev {
        right: 1.3rem;
      }
    }
  }
  .screen-header {
    // left: 0;
    // top: 0;
    // right: 0;
    width: 100%;
    height: 1.52rem;

    // border: 1px solid red;
    // background-color: #00164e;
    .header-title {
      position: relative;
      // width: 18.6rem;
      width: 100%;
      height: 1.52rem;
      margin: 0 auto;
      background: url("~@/assets/images/bigscreen/header.png") no-repeat center;
      background-size: 100%;
      .headerchoice {
        color: #fff;
        width: 1.74rem;
        height: 0.8rem;
        background: url("~@/assets/images/bigscreen/headerchoice.png") no-repeat
          center;
        background-size: 100%;
        font-size: 0.2rem;
        line-height: 0.4rem;
        text-align: center;
        cursor: pointer;
        font-weight: bold;
        -webkit-text-stroke: 1px #0085c0;
        text-stroke: 1px #0085c0;
        font-style: italic;
      }
      .header-left {
        position: absolute;
        width: 30%;
        height: 0.48rem;
        left: 0.07rem;
        .now-page {
          float: left;
        }
        .now-date {
          float: left;
          width: 1.5rem;
          font-weight: normal;
          font-style: italic;
          font-size: 0.2rem;
          color: #c3e1ff;
          line-height: 0.6rem;
        }
      }
      .header-right {
        position: absolute;
        width: 30%;
        height: 0.48rem;
        right: 0.07rem;
        a {
          text-decoration: none;
          display: block;
        }
        .go-index {
          float: right;
        }
        .now-time {
          float: right;
          width: 1.1rem;
          font-weight: normal;
          font-style: italic;
          font-size: 0.3rem;
          color: #25eef0;
          line-height: 0.6rem;
        }
      }
      h1 {
        font-size: 0.44rem;
        font-family: Source Han Sans CN;
        text-align: center;
        font-weight: bold;
        color: #ffffff;
        line-height: 0.7rem;
        text-shadow: 0px 2px 14px rgba(0, 121, 177, 0.88);
        margin: 0;
      }
    }
    // .title {
    //   .shine {
    //     background-image: url("https://static.oschina.net/uploads/space/2018/0521/211357_VOTl_3549294.png");
    //     background-repeat: no-repeat;
    //     background-position: center;
    //     width: 155px;
    //     height: 155px;
    //     position: absolute;
    //     animation: opacity-change 1s ease-in-out infinite;
    //     -webkit-animation: opacity-change 1s ease-in-out infinite;
    //     -moz-animation: opacity-change 1s ease-in-out infinite;
    //     -o-animation: opacity-change 1s ease-in-out infinite;
    //   }

    //   .shine2 {
    //     animation: opacity-change 1.75s ease-in-out infinite;
    //     -webkit-animation: opacity-change 1.75s ease-in-out infinite;
    //     -moz-animation: opacity-change 1.75s ease-in-out infinite;
    //     -o-animation: opacity-change 1.75s ease-in-out infinite;
    //   }
    // }
  }
  .screen-section {
    position: absolute;
    left: 0;
    top: 0.7rem;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    width: 100%;
    height: calc(100% - 0.7rem);
    flex-direction: row;
    flex: 1;
    padding: 0 0.08rem;
    overflow: hidden;
    .section-left {
      width: 100%;
      height: 100%;
      display: flex;
      // margin-left: 0.08rem;
      // margin-right: 0.08rem;
      flex-direction: column;
      flex: 1;
      .section-content {
        width: 100%;
        height: 100%;
        flex: 1;
        border: 1px solid #127baa;
        box-sizing: border-box;
        margin-bottom: 0.08rem;
        .card-title {
          .card-choice {
            position: absolute;
            right: 1.3rem;
            top: 0.03rem;
            width: 0.56rem;
            height: 0.24rem;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .card-year-month {
              width: 0.26rem;
              height: 0.24rem;
              text-align: center;
              line-height: 0.24rem;
              display: inline-block;
              cursor: pointer;
            }
            .choice-normal {
              background: url("~@/assets/images/bigscreen/normal.png") no-repeat
                center;
              background-size: 100%;
            }
            .choice-active {
              background: url("~@/assets/images/bigscreen/active.png") no-repeat
                center;
              background-size: 100%;
            }
          }
        }
        .card-content {
          width: 100%;
          height: calc(100% - 0.32rem);
          flex: 1;
          .left-chart {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .section-mid {
      display: flex;
      flex-shrink: 0;
      height: 100%;

      flex-direction: column;
      flex: 1;

      > div {
        width: 10rem;

        flex: 1;
        border: 1px solid #127baa;
        box-sizing: border-box;
        margin: 0 0.08rem 0.08rem;
      }
      .mid-top {
        flex: 0.12;
        border: none;
      }

      .mid-fir {
        flex: 2.94;
        margin-top: 0;
        .nothing {
          height: 0.32rem;
          width: 100%;
        }
        .card-content {
          width: 100%;
          height: calc(100% - 0.32rem);
          position: relative;
          .map {
            width: 100%;
            height: 100%;
            padding: 0.08rem;
            background: url("~@/assets/images/radar/007.jpg") no-repeat center;
            background-size: cover;
          }
        }
      }
      .mid-sec {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;
        border: none;
        .section-content {
          border: 1px solid #0085c0;
          .card-content {
            height: calc(100% - 0.32rem);
            #mid2 {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .section-right {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      // margin-right: 0.08rem;
      flex: 1;
      > div {
        width: 100%;
        height: 100%;
        flex: 1;
        border: 1px solid #127baa;
        box-sizing: border-box;
        margin-bottom: 0.08rem;
        margin-right: 0.08rem;
      }
      .card-content {
        width: 100%;
        height: calc(100% - 0.32rem);
        flex: 1;
        overflow: hidden;

        .left-chart,
        #pie,
        #ground-pre,
        #mid2,
        #right3 {
          width: 100%;
          height: 100%;
        }
        .yinhuan {
          width: 100%;
          height: 100%;
          display: flex;
          .yinhuan-left {
            width: 1.12rem;
            height: 100%;
            margin-right: 0.08rem;
            margin-left: 0.08rem;
            .yinhuan-left-item {
              position: relative;
              width: 1.12rem;
              height: 0.64rem;
              background: url("~@/assets/images/bigscreen/yinhuanleft.png")
                no-repeat;
              background-size: 100%;
              margin-top: 0.2rem;
              .yinhuan-item-top {
                text-align: center;
                font-family: diget year;
                font-weight: 400;
                color: #22f2ff;
                font-size: 0.2rem;
                display: block;
                padding-top: -0.2rem;
              }
              .yinhuan-item-bottom {
                text-align: center;
                font-family: diget year;
                font-size: 0.18rem;
                font-weight: bold;
                display: block;
              }
            }
          }
          .yinhuan-right {
            width: calc(100% - 1.28rem);
            height: 100%;
            padding: 0.08rem;
          }
        }
      }
    }
  }
}
/* 滚动条 */
.scrollingout {
  // max-height: 250px;
  width: 100%;
  overflow-y: scroll;
}

.scrollingout {
  scrollbar-width: thin;
  scrollbar-color: #1674ee rgba(255, 255, 255, 0);
}
.scrollingout::-webkit-scrollbar {
  width: 3px;
  height: 5px;
  cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #1674ee;
  margin-right: 10px;
  cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb:hover {
  background-color: #1854e8;
}
.scrollingout::-webkit-scrollbar-track {
  border-radius: 10px;
  // background: rgba(255, 255, 255, 0.1);
  margin-right: 10px;
}

/* 滚动条-火狐 */
.scrollingout {
  scrollbar-width: thin;
  scrollbar-color: #1674ee rgba(255, 254, 254, 0.993);
}
.scrollingout::-webkit-scrollbar {
  width: 3px;
  height: 5px;
  cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #1674ee;
  margin-right: 10px;
  cursor: pointer;
}
.scrollingout::-webkit-scrollbar-thumb:hover {
  background-color: #1854e8;
}
.scrollingout::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0);
  margin-right: 10px;
}
/* 滚动条-火狐 */
.scrollingout {
  scrollbar-width: thin;
  scrollbar-color: #1674ee rgba(255, 255, 255, 0);
}
</style>

<style lang="scss"  >
.bigscreen {
  .screen-section {
    .section-left {
      .card-content {
        .weather {
          font-size: 11px;
          // margin: 15px;
          padding: 0.08rem;
          .mleft {
            display: none;
          }
          .wtpath {
            display: none;
          }
          .mright {
            flex: 1;
            text-align: center;
          }
          img {
            display: block;
            width: 2vw !important;
            height: auto !important;
            margin: 0 auto;
          }
          ul {
            margin: 5px 0;
            color: #d0d2ff;
            width: 100%;
            padding: 0;
            li {
              width: 100%;
              list-style: none;
              text-align: center;
              overflow: hidden;
              span {
                width: 100%;
                display: inline-block;
                float: left;
              }
            }
          }
          #mobile05 {
            display: flex;
            position: relative;
            padding-top: 7vh !important;
          }
          #mobile05 > div:last-child {
            display: none;
          }
          #mright_1 {
            position: absolute;
            top: 0;
            left: 0;
            height: auto;
            width: 100%;

            ul {
              margin: 0;
              color: #03d3fe;
              li {
                list-style: none;
              }
            }
            .wt {
              display: flex;
              align-items: center;
              margin-left: 140px;
            }
            .day {
              display: none;
            }
            span:last-child {
              display: block;
              position: absolute;
              top: -5px;
              left: 8px;
              height: auto;
              font-size: 26px;
            }
            #day_1 {
              margin-left: 30px;
              span:last-child {
                position: relative;
              }
            }
          }
        }
      }
    }
  }
}
</style>