<template>
  <div class="Screen cm-layout">
    <!-- <gobacktohome></gobacktohome> -->
    <!-- <div class="a_0">
      <cesium
        ref="CesiumMap"
        :mapinfo="mapinfo"
        :onload="mapOnload"
        @click="mapClick"
      />
    </div> -->
    <div
      class="el-icon-message-solid aniicon"
      v-show="alarmBell"
      @click="bellClick"
    ></div>
    <div class="alarmDiaout" v-show="alarmList"></div>
    <div class="alarmDiain" v-show="alarmList">
      <div class="tit">
        {{ "报警信息"
        }}<i
          style="cursor: pointer; float: right"
          class="el-icon-circle-close"
          @click="alarmList = false"
        ></i>
      </div>
      <div
        class="scrolling"
        v-for="(item, index) in newAlarmListData"
        :key="index"
      >
        <!-- <p>
          报警类型：<span>{{ " newAlarmListData[index].area" }}</span>
        </p> -->
        <p>
          报警信息：<span>{{ newAlarmListData[index].equipname }}</span>
        </p>
        <!-- <p>
          报警值：<span>{{ newAlarmListData[index].weight }}</span>
        </p> -->
        <p>
          报警级别：<span>{{ newAlarmListData[index].alarmlevel }}</span>
        </p>
        <p>
          报警时间：<span>{{ newAlarmListData[index].time }}</span>
        </p>
      </div>
    </div>
    <div class="b_0">
      <iframe
        ref="iframe"
        frameborder="0"
        src="/huangshi/index.html"
        style="
          width: 100%;
          height: 100vh;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        "
        @click="iframeclick"
      ></iframe>
      <header class="bg-o85">
        <div class="b0 b-1">
          <div class="b1-a"></div>
          <div class="b1-b">
            <ul class="b1b-1">
              <li
                :class="{ 'b1b1-a': 1, actv: navActv === 0 }"
                @click="
                  navEvent(0, 'navActv');
                  to3d('首页|');
                "
              >
                <span class="font20">首页总览</span>
              </li>
              <li
                :class="{ actv: navActv === 1 }"
                @click="
                  navEvent(1, 'navActv');
                  to3d('边坡|');
                "
              >
                <span class="font20">在线监测</span>
              </li>
              <li
                :class="{ actv: navActv === 2 }"
                @click="
                  navEvent(2, 'navActv');
                  to3d('生产|');
                "
              >
                <span class="font20">隐患排查</span>
              </li>
            </ul>
            <!-- <div class="b1b-2"></div> -->
          </div>
        </div>
        <div class="b-2">
          <div class="b2-a">
            <h1>尾矿库生产安全监测平台</h1>
            <div class="b2a-2"></div>
          </div>
        </div>
        <div class="b0 b-3">
          <div class="b1-a"></div>
          <div class="b1-b">
            <ul class="b1b-1">
              <li
                :class="{ actv: navActv === 3 }"
                @click="
                  navEvent(3, 'navActv');
                  to3d('环境|');
                "
              >
                <span class="font20">应急管理</span>
              </li>
              <li
                :class="{ actv: navActv === 4 }"
                @click="
                  navEvent(4, 'navActv');
                  to3d('储量|');
                "
              >
                <span class="font20">视频监控</span>
              </li>
              <li
                :class="{ actv: navActv === 5 }"
                @click="
                  navEvent(5, 'navActv');
                  to3d('视频|');
                "
              >
                <span class="font20">后台管理</span>
              </li>
            </ul>
            <!-- <div class="b1b-2"></div> -->
          </div>
        </div>
      </header>
    </div>
    <!-- <div class="c_0" :class="{ actv: navActv === 0 }">
      <div class="c-1"></div>
    </div> -->
    <el-dialog
      title="企业介绍视频"
      :visible.sync="comIntroShow"
      :before-close="handleClose1"
      width="70%"
    >
      <video style="width: 100%" controls :src="playUrl"></video>
    </el-dialog>
    <div class="d_ d_0 first" :class="{ actv: navActv === 0 }">
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">后台管理</h3>
            <div class="cpintro" @click="comIntVideo"></div>
          </div>
        </div>
      </div>
      <div class="d0 d-2">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">视频监控</h3>
            <indexenvi :air="navActv"></indexenvi>
            <indexwater :air="navActv"></indexwater>
          </div>
        </div>
      </div>
      <div class="d0 d-3">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">储量管理</h3>
            <div class="first-cl first-cl1">
              <div class="cl1bg"></div>
              <div class="cl1left">
                <div class="cltop">
                  <span>{{ indexClData.mining }} </span> t
                </div>
                <div class="clbottom">已开采数量</div>
              </div>
              <div class="cl1right">
                <div class="cltop">
                  <span>{{ indexClData.kaicaizl }} </span> t
                </div>
                <div class="clbottom">总储量数量</div>
              </div>
              <div
                id="liquidEchart11"
                ref="liquidEchart1"
                class="liquidData liquidData1"
              ></div>
            </div>
            <div class="stitle">
              <div class="stit">生产管理</div>
            </div>
            <div class="first-cl first-cl2">
              <div class="cl2bg"></div>
              <div class="cl2left">
                <div class="cltop">
                  <span>{{ "1000" }} </span> 个
                </div>
                <div class="clbottom">生产设备总数量</div>
              </div>
              <div class="cl2right">
                <div class="cltop">
                  <span>{{ "300" }} </span> 个
                </div>
                <div class="clbottom">生产设备在线</div>
              </div>
              <div
                id="liquidEchart22"
                ref="liquidEchart2"
                class="liquidData liquidData2"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ d_1 first" :class="{ actv: navActv === 0 }">
      <div style="position: relative">
        <div class="d0 d-1">
          <div class="layerWd1">
            <div class="in-box">
              <div class="tit-bg"></div>
              <h3 class="el-icon-s-unfold">气象情况</h3>
              <div id="weather1" class="weather">
                <div class="rt1-info">
                  <p>接口暂停服务</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d0 d-2">
          <div class="layerWd1">
            <div class="in-box">
              <div class="tit-bg"></div>
              <h3 class="el-icon-s-unfold">报警信息</h3>
              <div class="tabel-w">
                <div class="scrolling km-table">
                  <div class="table-box linef35">
                    <dl>
                      <!-- <div class="op"></div>
                    <div style="width: 100%; height: 35px"></div> -->
                      <dt class="km-thead col02d upop">
                        <div>设备名称</div>
                        <div>报警时间</div>
                        <div>报警级别</div>
                      </dt>
                      <dd v-for="(item, index) in indexAlarmData" :key="index">
                        <div>{{ item.equipname }}</div>
                        <div>
                          {{ parseTime(item.time, "{y}-{m}-{d}") }}
                        </div>

                        <div
                          :style="{
                            color:
                              item.alarmlevel == '1'
                                ? '#FA060C'
                                : item.alarmlevel == '2'
                                ? '#FA7205'
                                : item.alarmlevel == '3'
                                ? '#D5FB05'
                                : '#15B4FE',
                          }"
                        >
                          {{ item.alarmlevel | indexalarm }}
                        </div>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="d0 d-3">
          <div class="layerWd1">
            <div class="in-box">
              <div class="tit-bg"></div>
              <h3 class="el-icon-s-unfold">后台管理</h3>
              <div class="indexjiankong" @click="jiankong('all')"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ d_0" :class="{ actv: navActv === 1 }">
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">表面位移X方向变化趋势图</h3>
            <div
              class="ctn-absfull"
              id="bmwyx"
              ref="chartX"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </div>
      <div class="d0 d-2">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">表面位移Y方向变化趋势图</h3>
            <div
              class="ctn-absfull"
              id="bmwyy"
              ref="chartY"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </div>
      <div class="d0 d-3">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">表面位移Z方向变化趋势图</h3>
            <div
              class="ctn-absfull"
              id="bmwyz"
              ref="chartZ"
              style="width: 100%; height: 100%"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ d_1" :class="{ actv: navActv === 1 }">
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">表面位移实时数据</h3>
            <div class="d_1_1">
              <div @click="to3d('边坡|基准点')" style="cursor: pointer">
                <h6>基准点</h6>
                <span class="span1"></span>
              </div>
              <div @click="to3d('边坡|边坡监测点')" style="cursor: pointer">
                <h6>表面位移</h6>
                <span class="span2"></span>
              </div>
              <bpwyxyz :air="navActv"></bpwyxyz>
            </div>
          </div>
        </div>
      </div>
      <div class="d0 d-3">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">表面位移设备状态</h3>
            <bpdevicestutas :air="navActv"></bpdevicestutas>
          </div>
        </div>
      </div>
      <div class="d0 d-2">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">报警信息</h3>
            <div class="tabel-w">
              <div class="scrolling km-table">
                <div class="table-box linef35">
                  <dl>
                    <!-- <div class="op"></div>
                    <div style="width: 100%; height: 35px"></div> -->
                    <dt class="km-thead col02d upop">
                      <div>设备名称</div>
                      <div>报警时间</div>
                      <div>报警值</div>
                      <div>报警级别</div>
                    </dt>
                    <dd v-for="(item, index) in bpAlarmData" :key="index">
                      <div>{{ item.equipname }}</div>
                      <div>{{ parseTime(item.time, "{y}-{m}-{d}") }}</div>
                      <div>{{ item.evalue }}</div>

                      <div
                        :style="{
                          color:
                            item.alarmlevel == '1'
                              ? '#FA060C'
                              : item.alarmlevel == '2'
                              ? '#FA7205'
                              : item.alarmlevel == '3'
                              ? '#D5FB05'
                              : '#15B4FE',
                        }"
                      >
                        {{ item.alarmlevel | indexalarm }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d0 third" :class="{ activ: navActv === 2 }">
      <proddev :air="navActv"></proddev>
    </div>
    <!-- <div class="d_ d_0 proddev" :class="{ actv: navActv === 2 }">
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">生产设备数据列表</h3>
            <div class="tabel-w">
              <div class="scrolling km-table">
                <div class="table-box linef35">
                  <dl>
                
                    <dt class="km-thead col02d upop" style="font-size: 16px">
                      <div>设备名称</div>
                      <div>启停状态</div>
                      <div>电流</div>
                      <div>电压</div>
                      <div>定位</div>
                    </dt>
                    <dd
                      v-for="(item, index) in scglList"
                      :key="index"
                      style="font-size: 14px"
                    >
                      <div style="color: #a6f6f9">{{ item.name }}</div>
                      <div
                        :style="{
                          color: item.status == '启动' ? '#FFC30C' : '#0C90FF',
                        }"
                      >
                        {{ item.status }}
                      </div>
                      <div style="color: #a6f6f9">{{ item.A }}A</div>
                      <div style="color: #a6f6f9">{{ item.V }}V</div>
                      <div style="color: #a6f6f9">
                        <template>
                          <i
                            class="el-icon-location"
                            style="font-size: 20px; cursor: pointer"
                          ></i>
                        </template>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
    <div class="d_ d_0" :class="{ actv: navActv === 3 }" id="hjjctab">
      <!-- <enviLeft :air="navActv"></enviLeft> -->
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3
              class="el-icon-s-unfold"
              @click="to3d('环境|1#环境监测站')"
              style="cursor: pointer"
            >
              {{ "1#环境监测站" }}七天变化趋势图
            </h3>
            <el-carousel
              :interval="4000"
              arrow="never"
              style="width: 500px; height: 250px"
            >
              <el-carousel-item v-for="item in 3" :key="item">
                <div
                  class="ctn-absfull"
                  :id="['dw1' + item]"
                  :ref="['charthj1' + item]"
                  style="width: 100%; height: 100%"
                ></div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="d0 d-2">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3
              class="el-icon-s-unfold"
              @click="to3d('环境|2#环境监测站')"
              style="cursor: pointer"
            >
              {{ "2#环境监测站" }}七天变化趋势图
            </h3>
            <el-carousel
              :interval="4000"
              arrow="never"
              style="width: 500px; height: 250px"
            >
              <el-carousel-item v-for="item in 3" :key="item">
                <div
                  class="ctn-absfull"
                  :id="['dw2' + item]"
                  :ref="['charthj2' + item]"
                  style="width: 100%; height: 100%"
                ></div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
      <div class="d0 d-3">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3
              class="el-icon-s-unfold"
              @click="to3d('环境|3#环境监测站')"
              style="cursor: pointer"
            >
              {{ "3#环境监测站" }}七天变化趋势图
            </h3>
            <el-carousel
              :interval="3500"
              arrow="never"
              style="width: 500px; height: 250px"
            >
              <el-carousel-item v-for="item in 3" :key="item">
                <div
                  class="ctn-absfull"
                  :id="['dw3' + item]"
                  :ref="['charthj3' + item]"
                  style="width: 100%; height: 100%"
                ></div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ d_1" :class="{ actv: navActv === 3 }">
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3
              class="el-icon-s-unfold"
              @click="to3d('环境|水质监测点')"
              style="cursor: pointer"
            >
              水质监测变化趋势图
            </h3>
            <div
              class="hjjc-flex"
              style="width: 500px; height: 36px; margin: 0 auto"
            >
              <div class="hjjc-single">
                <span class="hjjc-jcName">PH值</span>

                <span class="hjjc-jcValue">{{
                  hjjcList1[0].items["水环境PH"]
                }}</span>
                <span class="hjjc-jdt"></span>
                <span
                  class="hjjc-location"
                  @click="to3d('环境|水质监测点')"
                  style="cursor: pointer"
                  ><i class="el-icon-location"></i>定位图标</span
                >
              </div>
              <div class="hjjc-single">
                <span class="hjjc-jcName">氨氮</span>

                <span class="hjjc-jcValue">{{
                  hjjcList1[0].items["水质氨氮"]
                }}</span>
                <span class="hjjc-jdt"></span>
                <span
                  class="hjjc-location"
                  @click="to3d('环境|水质监测点')"
                  style="cursor: pointer"
                  ><i class="el-icon-location"></i>定位图标</span
                >
              </div>
            </div>
            <div
              class="hjjc-flex"
              style="width: 500px; height: 36px; margin: 0 auto"
            >
              <div class="hjjc-single">
                <span class="hjjc-jcName">浊度</span>

                <span class="hjjc-jcValue">{{
                  hjjcList1[0].items["浊度"]
                }}</span>
                <span class="hjjc-jdt"></span>
                <span
                  class="hjjc-location"
                  @click="to3d('环境|水质监测点')"
                  style="cursor: pointer"
                  ><i class="el-icon-location"></i>定位图标</span
                >
              </div>
              <div class="hjjc-single">
                <span class="hjjc-jcName">铅离子</span>

                <span class="hjjc-jcValue">{{
                  hjjcList1[0].items["铅离子"]
                }}</span>
                <span class="hjjc-jdt"></span>
                <span
                  class="hjjc-location"
                  @click="to3d('环境|水质监测点')"
                  style="cursor: pointer"
                  ><i class="el-icon-location"></i>定位图标</span
                >
              </div>
            </div>
            <div
              id="szjcChart"
              style="width: 500px; height: 174px; margin: 0 auto"
            ></div>
          </div>
        </div>
      </div>
      <div class="d0 d-2">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">设备信息</h3>
            <div class="showOnline">
              <div class="online">
                <span>设备在线比率</span
                ><span class="onlineVal">{{ onlineBilv }}%</span>
              </div>
            </div>
            <div
              class="chart3dPie"
              ref="chart3dPie"
              style="width: 430px; height: 180px; margin: 0 auto"
            ></div>
          </div>
        </div>
      </div>
      <div class="d0 d-3">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">报警信息</h3>
            <div class="tabel-w">
              <div class="scrolling km-table">
                <div class="table-box linef35">
                  <dl>
                    <!-- <div class="op"></div>
                    <div style="width: 100%; height: 35px"></div> -->
                    <dt class="km-thead col02d upop">
                      <div>点位</div>
                      <div>报警时间</div>
                      <div>报警值</div>
                      <div>报警级别</div>
                    </dt>
                    <dd v-for="(item, index) in enviAlarmData" :key="index">
                      <div>{{ item.pointName }}</div>
                      <div>{{ parseTime(item.time, "{y}-{m}-{d}") }}</div>
                      <div>{{ item.evalue }}</div>

                      <div
                        :style="{
                          color:
                            item.alarmlevel == '1'
                              ? '#FA060C'
                              : item.alarmlevel == '2'
                              ? '#FA7205'
                              : item.alarmlevel == '3'
                              ? '#D5FB05'
                              : '#15B4FE',
                        }"
                      >
                        {{ item.alarmlevel | indexalarm }}
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="d_ d_0" :class="{ actv: navActv === 4 }" id="hjjctab">
      <div
        v-for="(item, index) in clLeftData"
        class="d0"
        :class="'d-' + (index + 1)"
        :key="index"
      >
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">
              <span v-if="item">{{ item.month }}</span
              ><span v-else>暂无</span>开采计划
            </h3>
            <div class="clgl-left-content" v-if="item">
              <p>
                计划量：<span>{{ item.amount }}</span
                >吨
              </p>
              <p>
                开采量：<span>{{ item.mining }}</span
                >吨
              </p>
              <p>计划范围：{{ item.middleName }}</p>
            </div>
            <div class="clgl-left-content" v-else>
              <p>暂无开采计划</p>
            </div>

            <div
              v-if="item"
              :id="'clglwaterball' + (index + 1)"
              :ref="'clglwaterball' + (index + 1)"
              style="
                width: 200px;
                height: 200px;
                position: absolute;
                left: 300px;
                top: 50px;
              "
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ d_1 clgl" :class="{ actv: navActv === 4 }">
      <div class="d0 d-1" style="height: 943px">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">中段名称列表</h3>
            <div class="tabel-w">
              <div class="scrolling km-table">
                <div class="table-box linef35">
                  <div
                    v-for="(item, index) in zdList"
                    :key="index"
                    class="clLi"
                    @click="zdDetail(item)"
                    style="cursor: pointer"
                  >
                    <div>{{ item.name }}</div>
                    <div class="outclbg">
                      <div
                        :class="[
                          item.state == '3'
                            ? 'clactive1'
                            : item.state == '1'
                            ? 'clactive2'
                            : 'clactive3',
                        ]"
                      >
                        <span v-if="item.state == '3'">已开采</span>
                        <span v-else-if="item.state == '1'">未开采</span>
                        <span v-else>开采中</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cpDetailsout" v-show="cqdetshow === true"></div>
        <div class="cpDetailsin" v-show="cqdetshow === true">
          <div class="tit">
            {{ cqDetail.name
            }}<i
              style="cursor: pointer; float: right"
              class="el-icon-circle-close"
              @click="cqdetshow = false"
            ></i>
          </div>
          <p>
            面积：<span>{{ cqDetail.area }}</span> m²
          </p>
          <p>
            体积：<span>{{ cqDetail.volume }}</span> 10⁴m³
          </p>
          <p>
            重量：<span>{{ cqDetail.weight }}</span> 10⁴t
          </p>
          <p>
            氧化钙平均含量：<span>{{ cqDetail.cao }}</span> %
          </p>
          <p>
            氧化镁平均含量：<span>{{ cqDetail.mgo }}</span> %
          </p>
          <p>
            氧化钾平均含量：<span>{{ cqDetail.ko }}</span> %
          </p>
          <p>
            开采状态：<span v-if="cqDetail.state == '3'">已开采</span>
            <span v-else-if="cqDetail.state == '1'">未开采</span>
            <span v-else>开采中</span>
          </p>
        </div>
      </div>
    </div>
    <div
      class="clbtn"
      :class="{ actv1: navActv === 4 }"
      @click="to3d('储量|最终边界')"
      style="cursor: pointer"
    >
      <i class="el-icon-menu"></i> 最终边界模型
    </div>
    <div class="d_ d_0 proddev" :class="{ actv: navActv === 5 }">
      <div class="d0 d-1">
        <div class="layerWd1">
          <div class="in-box">
            <div class="tit-bg"></div>
            <h3 class="el-icon-s-unfold">视频监控</h3>
            <div class="tabel-w">
              <div class="scrolling km-table">
                <div class="table-box linef35">
                  <dl>
                    <!-- <div class="op"></div>
                    <div style="width: 100%; height: 35px"></div> -->
                    <dt class="km-thead col02d upop" style="font-size: 16px">
                      <div>视频监控名称</div>
                      <div>定位图标</div>
                      <div>摄像头播放</div>
                    </dt>
                    <dd
                      v-for="(item, index) in spjkList"
                      :key="index"
                      style="font-size: 14px"
                      :style="{
                        color: item.status == '0' ? '#FFC30C' : '#0C90FF',
                      }"
                    >
                      <div style="color: #a6f6f9">{{ item.name }}</div>
                      <div
                        style="cursor: pointer"
                        @click="to3d(`视频|${item.name}`)"
                      >
                        {{ "点击定位" }}
                      </div>

                      <div
                        class="spjkicon1"
                        style="color: #a6f6f9; cursor: pointer"
                        @click="jiankong(index)"
                      >
                        <template>
                          <i></i>
                          <!-- <i v-if="item.status == '0'" class="spjkicon1">1</i>
                          <i v-else class="spjkicon2">2</i> -->
                        </template>
                      </div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <videobig ref="videoflag" :videoflag="videoflag"></videobig> -->
    <el-dialog
      :title="videoname"
      :visible.sync="videoshow"
      :before-close="handleClose"
      width="70%"
    >
      <iframe
        style="width: 100%; height: 600px"
        :src="videourl"
        frameborder="0"
      ></iframe>
      <!-- <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>

      <span slot="footer" class="dialog-footer">
        <el-button @click="videoshow = false">取 消</el-button>
        <el-button type="primary" @click="videoshow = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
// 需要添加的配置
// videojs -- videoPlayer 核心
import videojs from "video.js";
import "vue-video-player/src/custom-theme.css";
// 根据官方文档配置发现没有效果
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";

//自己的组件
import indexenvi from "@/views/bigscreen/indexenvi.vue";
import indexwater from "@/views/bigscreen/indexwater.vue";
import bpdevicestutas from "@/views/bigscreen/bpdevicestutas.vue";
import bpwyxyz from "@/views/bigscreen/bpwyxyz.vue";
import proddev from "@/views/bigscreen/prod.vue";
// import enviLeft from "@/views/bigscreen/enviLeft.vue";
// import videobig from "@/views/bigscreen/videobig.vue";
import "@/api/qf_web_1.0413_simple.min.js";

import * as echarts from "echarts";
import {
  bpdev,
  envisearch,
  alarmNowData,
  waterNowData,
  bpAlarmData,
  enviAlarmData,
  envOnlineInfo,
  getWeather,
  LeftReserves,
  indexReserves,
  isNewAlarm,
  newAlarmList,
} from "@/api/bigscreen/index.js";
import { getComVideo } from "@/api/company.js";
import "echarts-liquidfill"; // 引入水球图的组件
import "echarts-gl";
import { getPie3D, getParametricEquation } from "@/views/bigscreen/chart.js";
import { listMiddle } from "@/api/reSave/middle";
export default {
  // components: { cesium },
  components: {
    indexenvi,
    videoPlayer,
    indexwater,
    bpdevicestutas,
    bpwyxyz,
    proddev,
    // enviLeft,
    // videobig,
  },
  data() {
    return {
      playUrl: "",
      comIntroShow: false,
      newAlarmListData: [],
      alarmBell: false,
      alarmList: false,
      cqdetshow: false,
      cqDetail: {},
      indexClData: [],
      clLeftData: [],
      onlineBilv: null,
      envAllDev: null,
      envOnlineDev: null,
      startData: "",
      endData: "",
      hjjcList1: [
        {
          name: "点位",
          items: { 水环境PH: 1, 水质氨氮: 2, 浊度: 5000, 铅离子: 0 },
        },
      ],
      indexAlarmData: [],
      bpAlarmData: [],
      enviAlarmData: [],
      videoname: "D7西侧环路拐角",
      videourl: "/video/index1.html",
      videoshow: false,
      videoflag: false,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4",
            src: "http://localhost/1.mp4",
          },
        ],

        // [
        //   {
        //     type: "application/x-mpegURL", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
        //     src: "http://localhost:9999/hls/video18s.m3u8", //url地址
        //   },
        // ],
        // poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按钮
        },
      },
      spjkList: [
        {
          name: "D6西侧环路上",
          status: 1,
          url: "http://localhost:9999/hls/video11s.m3u8",
        },
        {
          name: "D7西侧环路拐角",
          status: 1,
          url: "http://localhost:9999/hls/video18s.m3u8",
        },
        {
          name: "D10西侧环路拐角",
          status: 1,
          url: "http://localhost:9999/hls/video4s.m3u8",
        },
        {
          name: "D14成品库过道东",
          status: 0,
          url: "http://localhost:9999/hls/video6s.m3u8",
        },
        {
          name: "D15门卫大门东外",
          status: 1,
          url: "http://localhost:9999/hls/video26s.m3u8",
        },
        {
          name: "D19西装车楼",
          status: 1,
          url: "http://localhost:9999/hls/video28s.m3u8",
        },
        {
          name: "D20西装车围墙内",
          status: 1,
          url: "http://localhost:9999/hls/video39s.m3u8",
        },
        {
          name: "D22门卫大门西内",
          status: 1,
          url: "http://localhost:9999/hls/video20s.m3u8",
        },
        {
          name: "绿色矿山",
          status: 1,
          url: "http://localhost:9999/hls/video242s.m3u8",
        },
        {
          name: "517皮带机",
          status: 1,
          url: "http://localhost:9999/hls/video104s.m3u8",
        },
        {
          name: "518皮带机",
          status: 1,
          url: "http://localhost:9999/hls/video103s.m3u8",
        },
        {
          name: "西仓3车道磅尾",
          status: 1,
          url: "http://localhost:9999/hls/video91s.m3u8",
        },
        {
          name: "西仓2车道磅尾",
          status: 1,
          url: "http://localhost:9999/hls/video89s.m3u8",
        },
        {
          name: "东仓2车道磅尾",
          status: 1,
          url: "http://localhost:9999/hls/video83s.m3u8",
        },
        {
          name: "西仓1车道磅尾",
          status: 1,
          url: "http://localhost:9999/hls/video87s.m3u8",
        },
        {
          name: "东仓1车道磅尾",
          status: 1,
          url: "http://localhost:9999/hls/video80s.m3u8",
        },
      ],
      //中段名称列表
      zdList: [{ name: "采区145-145", status: 1 }],
      chartsLiquid: "", // 初始化水球图表
      chartsLiquid1: "", // 初始化水球图表

      //生产设备数据列表
      scglList: [
        {
          name: "一级粉碎",
          status: "启动",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "停止",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "启动",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "启动",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "启动",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "停止",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "启动",
          A: "12",
          V: "12",
        },
        {
          name: "一级粉碎",
          status: "启动",
          A: "12",
          V: "12",
        },
      ],

      bpList: [
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "二级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "三级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "四级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "一级" },
      ],
      bpdevData: [], //边坡xyz数据
      bpdevDataTime: ["2022-06"], //边坡xyz数据时间
      bpdevDataX: [3, 2], ////边坡xyz数据X
      bpdevDataY: [3, 2], ////边坡xyz数据Y
      bpdevDataZ: [3, 2], ////边坡xyz数据Z
      bpColor: ["#00BEFF", "#07FEBE", "#00F20E"],
      bpColor2: [
        "rgba(0, 171, 252, 0.5)",
        "rgba(0, 213, 158, 0.5)",
        "rgba(0, 252, 12, 0.5)",
      ],
      bpColor3: [
        "rgba(62, 124, 235, 0)",
        "rgba(62, 124, 235, 0)",
        "rgba(0, 171, 252, 0)",
      ],

      navActv: 0,
      ctrl_aqxx: null,

      zjjk: {
        qybjtj: { sum: "" },
        bjkxxtj: { allsize: "", jcsize: "" },
        bjkxxList: [],
      },
      hjjc: {
        baseInfo: [],
        jcdList: [],
        bjzsssj: [],
        jcxsssj: [],
        areaAlarmStatistics: { sum: "" },
      },
      bpjc: {
        load: false,
        baseInfo: [],
        //alarmList:[],
        md4: {
          select: [],
          selectInex: 0,
        },
      },
      rcgl: {
        personInfoList: [],
        carInfoList: [],
      },
      rcgl1: {
        personInfoList: [
          { name: "张三", disname: "disname", time: "2022-01-01" },
        ],
        carInfoList: [],
      },
      dwchartsParmas: {
        id: null,
        pm25color1: null,
        pm25color2: null,
        pm10color1: null,
        pm10color2: null,
        zycolor1: null,
        zycolor2: null,
        pm25: null,
        pm10: null,
        zy: null,
        time: null,
      },
      hjjcchartdata: {
        pm25data: [],
        pm10data: [],
        zydata: [],
        hjtime: [],
        szjctime: [],
        PHdata: [],
        qlzdata: [],
        zddata: [],
        adData: [],
      },
      old3d: null,
      new3d: null,
      optionData: [
        {
          name: "设备在线",
          value: 176,
        },
        {
          name: "设备离线",
          value: 288,
        },
      ],
      statusChart: null,
      option: {},
    };
  },
  created() {
    this.$nextTick(() => {
      this.hjjcszjc();
      this.setLabel();
      localStorage.removeItem("name");
      localStorage.removeItem("to3d");
      this.$refs.iframe.contentWindow.addEventListener("message", (e) => {
        // console.log(e, 1); // 跨域的话就要通过postMessage通信
      });
      this.$refs.iframe.contentWindow.addEventListener("click", (e) => {
        let nowlocalStorage = localStorage.getItem("name");
        // console.log(e.target, 2); // 不跨越的话就可以操作内部的dom啥的
        // console.log(nowlocalStorage, "localStorage");
        if (this.old3d === nowlocalStorage) {
          // console.log("一样");
        } else {
          // console.log("不一样");
          this.old3d = nowlocalStorage;
        }
      });
    });
  },
  mounted() {
    qf.openCalcLayout();
    this.$nextTick(() => {
      // console.log(this.$refs.iframe.contentWindow); // 获取iframe里面window对象
      this.nowAlarm();
      // 加载天气
      var weather = this.$el.querySelector("#weather1");
      getWeather({
        c: "code",
        a: "getcode",
        id: 48,
        icon: 1,
        py: "huangshi",
      }).then((res) => {
        var body = document.createElement("div");
        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);
      });
      this.indexAlarmList();

      this.initLiquidEchart2();
      this.nowWaterData();
      this.indexCl();
    });

    this.chartConfig = {
      alarms: [
        {
          title: "黄色警戒线",
          color: "yellow",
        },
        {
          title: "橙色警戒线",
          color: "orange",
        },
        {
          title: "红色警戒线",
          color: "red",
        },
        {
          title: "蓝色警戒线",
          color: "blue",
        },
      ],
    };
  },
  filters: {
    indexalarm(value) {
      // console.log(value);
      if (value == 1) {
        return "一级";
      } else if (value == 2) {
        return "二级";
      } else if (value == 3) {
        return "三级";
      } else if (value == 4) {
        return "四级";
      }
    },
  },
  methods: {
    //首页企业介绍视频
    handleClose1() {
      this.comIntroShow = false;
      this.playUrl = "";
    },
    comIntVideo() {
      getComVideo()
        .then((res) => {
          // console.log(res);
          if ((res.code = 200)) {
            let url = "http://192.168.0.233:90//" + res.data.filename;
            // let url = "http://192.168.3.216:90//" + res.data.filename;
            let name = res.data.filename;
            // console.log(name);
            this.playUrl = url;

            // this.fileList = [{ name, url }];
          }
        })
        .then(() => {
          this.comIntroShow = true;
        });
    },
    //实时报警
    nowAlarm() {
      let tempTimernowAlarm = 12000;
      (function reqData() {
        clearTimeout(this.timeoutFalgnowAlarm);
        isNewAlarm()
          .then((res) => {
            if (res.data.isNewAlarm === true) {
              this.alarmBell = true;
            }
          })
          .then(() => {
            this.timeoutFalgnowAlarm = setTimeout(
              reqData.bind(this),
              tempTimernowAlarm
            );
          });
      }.bind(this)());
    },
    bellClick() {
      this.alarmBell = false;
      newAlarmList()
        .then((res) => {
          if (res.code == 200) {
            // console.log(res);
            this.newAlarmListData = res.rows;
          }
        })
        .then(() => {
          this.alarmList = true;
        });
    },
    //首页储量
    indexCl() {
      indexReserves()
        .then((res) => {
          // console.log(res);
          this.indexClData = res.data;
        })
        .then(() => {
          this.initLiquidEchart1();
        });
    },
    //储量管理里左侧数据
    clLeft() {
      LeftReserves()
        .then((res) => {
          let data = res.data;
          this.clLeftData = data;

          // console.log(this.clLeftData);
        })
        .then(() => {
          this.initclglLeft1();
          this.initclglLeft2();
          this.initclglLeft3();
        });
    },
    //中段信息详情
    zdDetail(e) {
      this.cqdetshow = true;
      // console.log(e, "中段信息详情");
      this.cqDetail = e;
    },
    // 储量管理-中段信息
    getZdList() {
      // zdList
      listMiddle({
        pageNum: 1,
        pageSize: 999,
      }).then((response) => {
        this.zdList = response.rows;
      });
    },
    //水质实时
    nowWaterData() {
      this.hjjcList1 = [];
      let items = [];
      waterNowData().then((res) => {
        for (let key in res) {
          items.push({ name: key, items: res[key] });
        }
        // console.log(items, "shuizhi");

        this.hjjcList1 = items;
      });
      // console.log(items);
    },
    getThreeDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 30); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      this.startData = startData;
    },
    getSevenDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 7); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
        lastY +
        "-" +
        (lastM < 10 ? "0" + lastM : lastM) +
        "-" +
        (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      this.startData = startData;
    },
    // 获取当前日期
    getToday() {
      //获取当前日期
      let myDate = new Date();
      let nowY = myDate.getFullYear();
      let nowM = myDate.getMonth() + 1;
      let nowD = myDate.getDate();
      let endDate =
        nowY +
        "-" +
        (nowM < 10 ? "0" + nowM : nowM) +
        "-" +
        (nowD < 10 ? "0" + nowD : nowD); //当前日期
      this.endDate = endDate;
    },

    enviAlarmList() {
      this.getSevenDaysAgo();
      this.getToday();
      // console.log(this.startData, this.endDate);

      let param = {
        beginTime: this.startData,
        endTime: this.endDate,
      };
      enviAlarmData(param).then((res) => {
        this.enviAlarmData = res.data;
      });
    },
    bpAlarmList() {
      this.getSevenDaysAgo();
      this.getToday();
      // console.log(this.startData, this.endDate);

      let param = {
        beginTime: this.startData,
        endTime: this.endDate,
      };
      bpAlarmData(param).then((res) => {
        this.bpAlarmData = res.data;
      });
    },

    indexAlarmList() {
      this.getThreeDaysAgo();
      this.getToday();
      // console.log(this.startData, this.endDate);

      let param = {
        beginTime: this.startData,
        endTime: this.endDate,
      };
      alarmNowData(param).then((res) => {
        // console.log(res, "首页报警列表");
        this.indexAlarmData = res;
      });
    },
    handleClose() {
      this.videourl = "";
      this.videoshow = false;
    },
    jiankong(e) {
      if (e == "all") {
        this.videourl = "/video/indexall.html";
        this.videoname = "所有监控";
        this.videoflag = true;
        this.videoshow = true;
      } else {
        this.videourl = `/video/index${e}.html`;
        this.videoname = this.spjkList[e].name;
        this.videoflag = true;
        this.videoshow = true;
      }
    },
    //边坡实时数据
    //水质监测图表
    hjjcszjc() {
      envisearch({ monitorType: "水质监测" })
        .then((res) => {
          // console.log(res);
          let that = this;
          if (res.code === 200) {
            let data = res.rows;
            // console.log(data, "dataq");

            for (let i = 0; i < data.length; i++) {
              if (data[i].items === "水环境PH") {
                that.hjjcchartdata.PHdata.push(data[i].evalue);
                that.hjjcchartdata.szjctime.push(data[i].time);
              } else if (data[i].items === "铅离子") {
                that.hjjcchartdata.qlzdata.push(data[i].evalue);
              } else if (data[i].items === "浊度") {
                that.hjjcchartdata.zddata.push(data[i].evalue);
              } else if (data[i].items === "水质氨氮") {
                that.hjjcchartdata.adData.push(data[i].evalue);
              }
            }
          }
        })
        .then(() => {
          let that = this;
          let legendData = ["PH", "氨氮", "浊度", "铅离子"],
            color1 = ["#1EFF00", "#FF9600", "#007EFF ", "#3FFFEA"];
          let myChart = echarts.init(document.getElementById("szjcChart"));
          let option = {
            tooltip: {
              trigger: "axis",
              // axisPointer: {
              //   type: "cross",
              //   label: {
              //     backgroundColor: color1,
              //   },
              // },
            },
            legend: {
              data: legendData,
              show: true,
              orient: "horizontal",
              top: 5,
              left: 30,
              textStyle: {
                fontSize: 12, //字体大小
                color: "#ffffff", //字体颜色
              },
              // data: ["x轴"],
              // padding: [0, 0, 0, 0],
            },
            grid: {
              top: "18%",
              bottom: "2%",
              left: "1%",
              right: "3%",
              containLabel: true,
            },

            // lineStyle: {
            //   // 折线拐点的样式

            //   // 线条样式
            //   color: {
            //     colorStops: [
            //       {
            //         offset: 0,
            //         color: color1,
            //       },
            //       {
            //         offset: 1,
            //         color: color2,
            //       },
            //     ],
            //   },
            //   // width: 2, // 线条粗细
            //   // shadowOffsetY: 12, // 阴影线条的偏移量
            //   // shadowColor: "rgba(59, 138, 254, 0.1)", // 阴影线条的颜色
            // },
            areaStyle: {
              // 区域样式
              color: "none",
            },

            dataZoom: [
              //给x轴设置滚动条

              //下面这个属性是里面拖到
              {
                type: "inside",
                show: true,
                xAxisIndex: [0],
                start: 0, //默认为1
                end: 100, //默认为100
              },
            ],
            xAxis: {
              type: "category",
              boundaryGap: false,
              axisLine: {
                //x轴线的颜色以及宽度
                show: true,
                lineStyle: {
                  color: "#fff",
                  width: 0,
                  type: "solid",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                //x轴文字的配置
                show: true,
                textStyle: {
                  color: "#BFF7FF",
                },
              },
              splitLine: {
                //分割线配置
                show: false,
                lineStyle: {
                  color: "#306269",
                },
              },

              data: that.hjjcchartdata.szjctime,
            },
            yAxis: {
              type: "value",
              axisLabel: {
                //y轴文字的配置
                textStyle: {
                  color: "#BFF7FF",
                  margin: 15,
                },
                // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                //y轴线的颜色以及宽度
                show: false,
                lineStyle: {
                  color: "#fff",
                  width: 1,
                  type: "solid",
                },
              },
              splitLine: {
                //分割线配置
                show: false,
                lineStyle: {
                  color: "#fff",
                },
              },
            },

            series: [
              {
                name: legendData[0],
                data: that.hjjcchartdata.PHdata,
                type: "line",
                smooth: true,
                areaStyle: {},
                showSymbol: false,
                symbolSize: 2, //设定实心点的大小
                itemStyle: {
                  normal: {
                    // 静止时：
                    color: color1[0],
                  },
                  emphasis: {
                    // 鼠标经过时：
                    // color: color1,
                    borderColor: color1[0],
                  },
                },
              },
              {
                name: legendData[1],
                data: that.hjjcchartdata.adData,
                type: "line",
                smooth: true,
                areaStyle: {},
                showSymbol: false,
                symbolSize: 2, //设定实心点的大小
                itemStyle: {
                  normal: {
                    // 静止时：
                    color: color1[1],
                  },
                  emphasis: {
                    // 鼠标经过时：
                    // color: color1,
                    borderColor: color1[1],
                  },
                },
              },
              {
                name: legendData[2],
                data: that.hjjcchartdata.zddata,
                type: "line",
                smooth: true,
                areaStyle: {},
                showSymbol: false,
                symbolSize: 2, //设定实心点的大小
                itemStyle: {
                  normal: {
                    // 静止时：
                    color: color1[2],
                  },
                  emphasis: {
                    // 鼠标经过时：
                    // color: color1,
                    borderColor: color1[2],
                  },
                },
              },
              {
                name: legendData[3],
                data: that.hjjcchartdata.qlzdata,
                type: "line",
                smooth: true,
                areaStyle: {},
                showSymbol: false,
                symbolSize: 2, //设定实心点的大小
                itemStyle: {
                  normal: {
                    // 静止时：
                    color: color1[3],
                  },
                  emphasis: {
                    // 鼠标经过时：
                    // color: color1,
                    borderColor: color1[3],
                  },
                },
              },
            ],
          };
          // myChart.setOption(option, true);

          setTimeout(() => {
            myChart.setOption(option, true);
            window.onresize = function () {
              myChart.resize();
            };
          }, 100);
          this.$nextTick(() => {
            myChart.resize();
          });
        });
    },
    hjjcTab1() {
      // envisearch({ monitorType: "空气监测" }).then((res) => {
      //   let that = this;
      //   if (res.code === 200) {
      //     let data = res.rows;
      //     console.log(data, "空气监测");
      //   }
      // });

      envisearch({ monitorType: "空气监测", pointName: "点位1" })
        .then((res) => {
          let that = this;
          if (res.code === 200) {
            let data = res.rows;
            for (let i = 0; i < data.length; i++) {
              if (data[i].items === "pm2.5") {
                that.hjjcchartdata.pm25data.push(data[i].evalue);
                that.hjjcchartdata.hjtime.push(data[i].time);
              } else if (data[i].items === "pm10") {
                that.hjjcchartdata.pm10data.push(data[i].evalue);
              } else if (data[i].items === "噪声") {
                that.hjjcchartdata.zydata.push(data[i].evalue);
              }
            }
          }
        })
        .then(() => {
          let that = this;
          let param = {
            id: "dw11",
            color1: that.bpColor[0],
            color2: that.bpColor2[0],
            color3: that.bpColor3[0],
            lData: ["PM2.5"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.pm25data,
          };
          this.dwchart(param);
        })
        .then(() => {
          let that = this;

          let param = {
            id: "dw12",
            color1: that.bpColor[1],
            color2: that.bpColor2[1],
            color3: that.bpColor3[1],
            lData: ["PM10"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.pm10data,
          };
          this.dwchart(param);
        })
        .then(() => {
          let that = this;
          let param = {
            id: "dw13",
            color1: that.bpColor[2],
            color2: that.bpColor2[2],
            color3: that.bpColor3[2],
            lData: ["噪音"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.zydata,
          };
          this.dwchart(param);
        });
    },
    hjjcTab2() {
      envisearch({ monitorType: "空气监测", pointName: "点位2" })
        .then((res) => {
          let that = this;
          if (res.code === 200) {
            let data = res.rows;
            // console.log(data, "data");
            for (let i = 0; i < data.length; i++) {
              if (data[i].items === "PM5") {
                that.hjjcchartdata.pm25data.push(data[i].evalue);
                that.hjjcchartdata.hjtime.push(data[i].time);
              } else if (data[i].items === "PM10") {
                that.hjjcchartdata.pm10data.push(data[i].evalue);
              } else if (data[i].items === "噪音") {
                that.hjjcchartdata.zydata.push(data[i].evalue);
              }
            }
          }
        })
        .then(() => {
          let that = this;
          let param = {
            id: "dw21",
            color1: that.bpColor[0],
            color2: that.bpColor2[0],
            color3: that.bpColor3[0],
            lData: ["PM2.5"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.pm25data,
          };
          this.dwchart(param);
        })
        .then(() => {
          let that = this;

          let param = {
            id: "dw22",
            color1: that.bpColor[1],
            color2: that.bpColor2[1],
            color3: that.bpColor3[1],
            lData: ["PM10"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.pm10data,
          };
          this.dwchart(param);
        })
        .then(() => {
          let that = this;
          let param = {
            id: "dw23",
            color1: that.bpColor[2],
            color2: that.bpColor2[2],
            color3: that.bpColor3[2],
            lData: ["噪音"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.zydata,
          };
          this.dwchart(param);
        });
    },
    hjjcTab3() {
      envisearch({ monitorType: "空气监测", pointName: "点位3" })
        .then((res) => {
          let that = this;
          if (res.code === 200) {
            let data = res.rows;
            // console.log(data, "data");
            for (let i = 0; i < data.length; i++) {
              if (data[i].items === "PM5") {
                that.hjjcchartdata.pm25data.push(data[i].evalue);
                that.hjjcchartdata.hjtime.push(data[i].time);
              } else if (data[i].items === "PM10") {
                that.hjjcchartdata.pm10data.push(data[i].evalue);
              } else if (data[i].items === "噪音") {
                that.hjjcchartdata.zydata.push(data[i].evalue);
              }
            }
          }
        })
        .then(() => {
          let that = this;
          let param = {
            id: "dw31",
            color1: that.bpColor[0],
            color2: that.bpColor2[0],
            color3: that.bpColor3[0],
            lData: ["PM2.5"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.pm25data,
          };
          this.dwchart(param);
        })
        .then(() => {
          let that = this;

          let param = {
            id: "dw32",
            color1: that.bpColor[1],
            color2: that.bpColor2[1],
            color3: that.bpColor3[1],
            lData: ["PM10"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.pm10data,
          };
          this.dwchart(param);
        })
        .then(() => {
          let that = this;
          let param = {
            id: "dw33",
            color1: that.bpColor[2],
            color2: that.bpColor2[2],
            color3: that.bpColor3[2],
            lData: ["噪音"],

            pm25color1: that.bpColor[0],
            pm25color2: that.bpColor[1],
            pm10color1: that.bpColor2[0],
            pm10color2: that.bpColor2[2],
            zycolor1: that.bpColor3[0],
            zycolor2: that.bpColor3[0],
            pm25: that.hjjcchartdata.pm25data,
            pm10: that.hjjcchartdata.pm10data,
            zy: that.hjjcchartdata.zydata,
            time: that.hjjcchartdata.hjtime,
            ydata: that.hjjcchartdata.zydata,
          };
          this.dwchart(param);
        });
    },
    //iframe
    iframeclick() {},
    to3d(e) {
      // console.log(e, "to3d");
      localStorage.removeItem("to3d");
      localStorage.setItem("to3d", e);
    },
    //环境点位charts
    dwchart(param) {
      let idname = param.id,
        xdata = param.time,
        ydata = param.ydata,
        color1 = param.color1, //"#00BEFF"
        color2 = param.color2,
        color3 = param.color3,
        legendData = param.lData;
      //

      let myChart = echarts.init(document.getElementById(idname));
      // console.log(myChart);
      let option = {
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: color1,
          //   },
          // },
        },
        legend: {
          data: legendData,
          show: true,
          orient: "horizontal",
          top: 10,
          left: 30,
          textStyle: {
            fontSize: 12, //字体大小
            color: "#ffffff", //字体颜色
          },
          // data: ["x轴"],
          // padding: [0, 0, 0, 0],
        },
        grid: {
          top: "18%",
          bottom: "15%",
          right: "5%",
          containLabel: true,
        },

        lineStyle: {
          // 折线拐点的样式

          // 线条样式
          color: {
            colorStops: [
              {
                offset: 0,
                color: color1,
              },
              {
                offset: 1,
                color: color2,
              },
            ],
          },
          // width: 2, // 线条粗细
          // shadowOffsetY: 12, // 阴影线条的偏移量
          // shadowColor: "rgba(59, 138, 254, 0.1)", // 阴影线条的颜色
        },
        areaStyle: {
          // 区域样式
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color2, // 0% 处的颜色
              },
              {
                offset: 1,
                color: color3, // 100% 处的颜色
              },
            ],
          },
        },

        dataZoom: [
          //给x轴设置滚动条

          //下面这个属性是里面拖到
          {
            type: "inside",
            show: true,
            xAxisIndex: [0],
            start: 0, //默认为1
            end: 100, //默认为100
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#BFF7FF",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "#306269",
            },
          },

          data: xdata,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#BFF7FF",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: legendData[0],
            data: ydata,
            type: "line",
            smooth: true,
            areaStyle: {},
            showSymbol: false,
            symbolSize: 2, //设定实心点的大小
            itemStyle: {
              normal: {
                // 静止时：
                color: color1,
              },
              emphasis: {
                // 鼠标经过时：
                // color: color1,
                borderColor: color1,
              },
            },
          },
        ],
      };
      // myChart.setOption(option, true);

      setTimeout(() => {
        myChart.setOption(option, true);
        window.onresize = function () {
          myChart.resize();
        };
      }, 100);
      this.$nextTick(() => {
        myChart.resize();
      });
    },
    initLiquidEchart2() {
      setTimeout(() => {
        this.chartsLiquid = echarts.init(
          document.getElementById("liquidEchart22")
        );
        // this.chartsLiquid = echarts.init(this.$refs["liquidEchart2"]);
        // 把配置和数据放这里
        this.chartsLiquid.setOption({
          series: [
            {
              type: "liquidFill",
              name: "开关比率",
              color: ["rgba(255,255,255,.2)", "rgba(4,252,252)"],
              waveLength: "70%",
              data: [0.6528, 0.6528], // 两条水波
              outline: {
                show: true,
                borderDistance: 5,

                itemStyle: {
                  borderColor: "rgba(4,252,252,.5)",
                  borderWidth: 1,
                  shadowBlur: 5,
                  shadowColor: "#fff",
                },
              },
              backgroundStyle: {
                color: "rgba(255,255,255,0.1)",
                borderWidth: 2,
                borderColor: "rgba(4,252,252,.5)",
                itemStyle: {
                  shadowBlur: 5,
                  shadowColor: "#fff",
                  opacity: 0.5,
                },
              },
              itemStyle: {
                opacity: 0.9,
                shadowBlur: 2,
                shadowColor: "#fff",
              },
              emphasis: {
                itemStyle: {
                  opacity: 1,
                },
              },
              label: {
                normal: {
                  position: ["50%", "50%"],
                  // formatter: "{a} \n {c}",
                  // formatter: "{a} \n {c}({d}%)",
                  formatter: function (params) {
                    // console.log(params, "valllll");
                    // let num = params.value * 100;
                    // let newnum = String(num).indexOf(".") + 1;
                    return "开关比率\n" + (params.value * 100).toFixed(2) + "%";
                  },
                  textStyle: {
                    fontSize: 18,
                    color: "#04fcfc",
                  },
                },
              },
            },
          ],
        });
      }, 50);
    },
    initLiquidEchart1() {
      // indexClData
      setTimeout(() => {
        let data1 = this.indexClData;
        // console.log(data1, "indexClData");
        let num = (Number(data1.mining) / Number(data1.kaicaizl)).toFixed(2);
        let num1 = (
          (Number(data1.mining) / Number(data1.kaicaizl)) *
          100
        ).toFixed(2);
        this.chartsLiquid = echarts.init(
          document.getElementById("liquidEchart11")
        );
        // this.chartsLiquid = echarts.init(this.$refs["liquidEchart1"]);
        // 把配置和数据放这里
        this.chartsLiquid.setOption({
          series: [
            {
              type: "liquidFill",
              name: "开采比率",
              color: ["rgba(255,255,255,.2)", "rgba(22,162,249)"],
              waveLength: "70%",
              data: [num, num], // 两条水波
              outline: {
                show: true,
                borderDistance: 5,

                itemStyle: {
                  borderColor: "rgba(71,175,238,.5)",
                  borderWidth: 1,
                  shadowBlur: 5,
                  shadowColor: "#fff",
                },
              },
              backgroundStyle: {
                color: "rgba(255,255,255,0.1)",
                borderWidth: 2,
                borderColor: "rgba(71,175,238,.5)",
                itemStyle: {
                  shadowBlur: 5,
                  shadowColor: "#fff",
                  opacity: 0.5,
                },
              },
              itemStyle: {
                opacity: 0.9,
                shadowBlur: 2,
                shadowColor: "#fff",
              },
              emphasis: {
                itemStyle: {
                  opacity: 1,
                },
              },
              label: {
                normal: {
                  position: ["50%", "50%"],
                  // formatter: "{a} \n {c}",
                  // formatter: "{a} \n {c}({d}%)",
                  formatter: function (params) {
                    // console.log(params, "valllll");
                    // let num = params.value * 100;
                    // let newnum = String(num).indexOf(".") + 1;
                    return "开采比率\n" + (params.value * 100).toFixed(2) + "%";
                  },
                  textStyle: {
                    fontSize: 18,
                    color: "#17a2f7",
                  },
                },
              },
            },
          ],
        });
      }, 50);
    },

    //边坡charts
    bpchart(idname1, xdata1, ydata1, color01, color02, color03) {
      let idname = idname1,
        xdata = xdata1,
        ydata = ydata1,
        color1 = color01, //"#00BEFF"
        color2 = color02,
        color3 = color03;
      //

      let myChart = echarts.init(document.getElementById(idname));
      // console.log(myChart);
      let option = {
        grid: {
          top: "18%",
          bottom: "15%",
          right: "5%",
        },
        legend: {
          // show: true,
          orient: "vertical",
          // data: ["x轴"],
          // padding: [0, 0, 0, 0],
        },

        lineStyle: {
          // 折线拐点的样式

          // 线条样式
          color: {
            colorStops: [
              {
                offset: 0,
                color: color1,
              },
              {
                offset: 1,
                color: color2,
              },
            ],
          },
          // width: 2, // 线条粗细
          // shadowOffsetY: 12, // 阴影线条的偏移量
          // shadowColor: "rgba(59, 138, 254, 0.1)", // 阴影线条的颜色
        },
        areaStyle: {
          // 区域样式
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: color2, // 0% 处的颜色
              },
              {
                offset: 1,
                color: color3, // 100% 处的颜色
              },
            ],
          },
        },

        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          //   label: {
          //     backgroundColor: color1,
          //   },
          // },
        },
        dataZoom: [
          //给x轴设置滚动条

          //下面这个属性是里面拖到
          {
            type: "inside",
            show: true,
            xAxisIndex: [0],
            start: 0, //默认为1
            end: 100, //默认为100
          },
        ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "#fff",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#BFF7FF",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "#306269",
            },
          },

          data: xdata,
        },
        yAxis: {
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "#BFF7FF",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: ydata,
            type: "line",
            smooth: true,
            areaStyle: {},
            showSymbol: false,
            symbolSize: 2, //设定实心点的大小
            itemStyle: {
              normal: {
                // 静止时：
                color: color1,
              },
              emphasis: {
                // 鼠标经过时：
                // color: color1,
                borderColor: color1,
              },
            },
          },
        ],
      };
      // myChart.setOption(option, true);

      setTimeout(() => {
        myChart.setOption(option, true);
        window.onresize = function () {
          myChart.resize();
        };
      }, 50);
      this.$nextTick(() => {
        myChart.resize();
      });
    },
    bianpodev1() {
      bpdev()
        .then((res) => {
          // console.log(res, "xyz曲线图");
          if (res.code === 200) {
            this.bpdevDataTime = [];
            this.bpdevDataX = [];
            this.bpdevDataY = [];
            this.bpdevDataZ = [];

            // console.log(res);
            let data = res.rows;
            // console.log(data);
            for (let i = 0; i < data.length; i++) {
              let date = new Date(data[i].time);
              this.bpdevDataTime.push(date.getHours() + "时");
              this.bpdevDataX.push(data[i].dispX);
              this.bpdevDataY.push(data[i].dispY);
              this.bpdevDataZ.push(data[i].dispH);
            }
          }
        })
        .then(() => {
          this.bpchart(
            "bmwyx",
            this.bpdevDataTime,
            this.bpdevDataX,
            this.bpColor[0],
            this.bpColor2[0],
            this.bpColor3[0]
          );
          this.bpchart(
            "bmwyy",
            this.bpdevDataTime,
            this.bpdevDataY,
            this.bpColor[1],
            this.bpColor2[1],
            this.bpColor3[1]
          );
          this.bpchart(
            "bmwyz",
            this.bpdevDataTime,
            this.bpdevDataZ,
            this.bpColor[2],
            this.bpColor2[2],
            this.bpColor3[2]
          );
        });

      // window.addEventListener("resize", function () {
      //   myChart.resize();
      // });
    },
    navEvent(id, key) {
      localStorage.removeItem("name");
      localStorage.removeItem("to3d");
      if (this[key] === id) {
        return (this[key] = null);
      } else {
        this[key] = ~~id;
      }

      if (id === 0) {
        // 首页
      } else if (id === 1) {
        // 边坡
        this.bianpodev1();
        this.bpAlarmList();
        this.indexCl();
        // this.to3d("边坡");
        // this.reqMonitor();
      } else if (id === 2) {
        // 生产
      } else if (id === 3) {
        this.enviDevOnline();

        // 环境
        // this.to3d("环境");
        this.enviAlarmList();
        this.hjjcszjc();
        this.hjjcTab1();
        this.hjjcTab2();
        this.hjjcTab3();

        //根据窗口变化自动调节图表大小
        const that = this;
        window.onresize = function () {
          that.changeSize();
        };
      } else if (id === 4) {
        // 储量
        this.clLeft();
        this.getZdList();
      } else if (id === 5) {
        // this.to3d("视频");
        //视频
      }
    },

    mapOnload() {},
    mapClick() {
      // console.log("mapClick ________________ ", 1111111111);
    },

    // 环境监测
    // reqEnvironmentInfo() {
    //   // 获取天气
    //   this.reqWeather(this.weather1);

    //   var reqArray = [
    //     { name: "jcxsssj", param: { command: "hj_jcddata2" } },
    //     { name: "bjzsssj", param: { command: "hj_bjzsssj", size: "15" } },
    //     { name: "jcdList", param: { command: "hj_jcdlist" } },
    //     {
    //       name: "areaAlarmStatistics",
    //       param: { command: "hj_qybjtj", days: "1" },
    //     },
    //   ];
    //   var len = reqArray.length;
    //   !function asyncLoop(i) {
    //     var reqItem = reqArray[i];
    //     i < len &&
    //       (() => {
    //         reqApi.getItem(reqItem.param).then((res) => {
    //           if (res && res.stat) {
    //             var body = res.body || {};
    //             var list = body.list || [];
    //             if (reqItem.name === "jcxsssj") {
    //               list = list.slice(0, 12);
    //               this.hjjc[reqItem.name] = list;
    //             } else if (reqItem.name === "areaAlarmStatistics") {
    //               this.hjjc.areaAlarmStatistics.sum = res.body.bjallsize;
    //               this.initChartE1a1c(this.e1a1c, list);
    //             } else {
    //               this.hjjc[reqItem.name] = list;
    //             }
    //             asyncLoop.call(this, ++i);
    //           }
    //         });
    //       })();
    //   }.bind(this)(0);

    //   // 监测数据基本信息
    //   reqApi.getItem({ command: "hj_jcsjxx" }).then((res) => {
    //     if (res && res.stat) {
    //       var body = res.body || {};
    //       this.hjjc.baseInfo = [
    //         { name: body.jcdsizeTit, value: body.jcdsize, unit: "个" },
    //         { name: body.jcsjTit, value: body.jcsj, unit: "条" },
    //         { name: body.bjsjTit, value: body.bjsj, unit: "条" },
    //         { name: body.jcscTit, value: body.jcsc, unit: "天" },
    //       ];
    //     }
    //   });
    // },

    // 边坡监测
    reqSideslopeInfo(module) {
      var f_00 = (this.f_00 = document.getElementById("f_00"));
      var e1a2b_sel = (this.e1a2b_sel = document.getElementById("e1a2b_sel"));

      // 加载条件限制
      if (module.load) {
        return;
      } else {
        module.load = true;
      }

      var reqArray = [
        { name: "", param: { command: "bp_bpjltj" } },
        { name: "baseInfo", param: { command: "bp_bpjbxx" } },
        { name: "", param: { command: "bp_kushuiweitj", size: "10" } },
        {
          name: "",
          param: { command: "bp_bpdbwytj", devname: "表面位移1", size: "10" },
        },
      ];

      var len = reqArray.length;
      // !function asyncLoop(i) {
      //   var reqItem = reqArray[i];
      //   i < len &&
      //     (() => {
      //       !function reqWrap(param) {
      //         reqApi.getItem(param).then((res) => {
      //           if (res && res.stat) {
      //             var body = res.body || {};
      //             var list = body.list || [];
      //             if (reqItem.param.command === "bp_bpjltj") {
      //               // 降雨量
      //               this.initChartF1a1a(list);
      //             } else if (reqItem.name === "baseInfo") {
      //               this.bpjc[reqItem.name] = list;
      //             } else if (reqItem.param.command === "bp_kushuiweitj") {
      //               var config = body.configdata;
      //               this.initChartF1a1b(list, config);
      //             } else if (reqItem.param.command === "bp_bpdbwytj") {
      //               // 边坡
      //               // 表面位移统计
      //               this.initChartE1a1b(list, body.configdata);

      //               if (!e1a2b_sel.firstElementChild) {
      //                 // 创建选择列表
      //                 Tools.CreateSelect(e1a2b_sel, body.names);

      //                 // 激活选择事件
      //                 Tools.SelectEventBind(
      //                   e1a2b_sel,
      //                   function (val, el) {
      //                     var param = {
      //                       command: "bp_bpdbwytj",
      //                       devname: val,
      //                       size: "10",
      //                     };
      //                     reqWrap.call(this, param);
      //                   }.bind(this)
      //                 );
      //               }
      //             }
      //             asyncLoop.call(this, ++i);
      //           }
      //         });
      //       }.call(this, reqItem.param);
      //     })();
      // }.bind(this)(0);
      // },

      // 人车管理
      // reqCarInfoList() {
      //   var reqArray = [
      //     { name: "", param: { command: "cl_personstat" } },
      //     { name: "", param: { command: "cl_personlist", size: "10" } },
      //     { name: "", param: { command: "cl_yearmonth" } },
      //     { name: "", param: { command: "cl_caracclog", size: "10" } },
      //   ];

      //   var len = reqArray.length;
      //   !function asyncLoop(i) {
      //     var reqItem = reqArray[i];
      //     i < len &&
      //       (() => {
      //         !function reqWrap(param) {
      //           reqApi.getItem(param).then((res) => {
      //             if (res && res.stat) {
      //               var body = res.body || {};
      //               var list = body.datalist || [];
      //               var command = reqItem.param.command;
      //               if (command === "cl_personstat") {
      //                 // 人员数量统计
      //                 this.initChartG1a1a(list);
      //               } else if (command === "cl_personlist") {
      //                 // 人员信息表
      //                 this.rcgl.personInfoList = list;
      //               } else if (command === "cl_yearmonth") {
      //                 this.initChartG1a1b(list);
      //               } else if (command === "cl_caracclog") {
      //                 this.rcgl.carInfoList = list;
      //               }
      //               asyncLoop.call(this, ++i);
      //             }
      //           });
      //         }.call(this, reqItem.param);
      //       })();
      //   }.bind(this)(0);
    },
    //饼状图3d
    // envOnlineInfo
    enviDevOnline() {
      envOnlineInfo()
        .then((res) => {
          // console.log(res, "this.enviDevOnline()");
          this.envAllDev = res.allsize;
          this.envOnlineDev = res.onlinesize;
          this.onlineBilv = ((res.onlinesize / res.allsize) * 100).toFixed(0);
          this.optionData = [
            {
              name: "设备在线",
              value: res.onlinesize,
            },
            {
              name: "设备离线",
              value: res.allsize - res.onlinesize,
            },
          ];
        })
        .then(() => {
          this.initChart();
        });
    },
    // 初始化label样式
    setLabel() {
      let color = ["#00A8FF", "#8FDFFE"];
      this.optionData.forEach((item, index) => {
        item.itemStyle = {
          color: color[index],
        };
        item.label = {
          normal: {
            show: true,
            color: color[index],
            formatter: ["{b|{b}}", "{d|{d}%}"].join("\n"), // 用\n来换行
            // formatter: ["{b|{b}}", "{c|{c}}{b|台}", "{d|{d}%}"].join("\n"), // 用\n来换行
            rich: {
              b: {
                color: "#fff",
                lineHeight: 25,
                align: "left",
              },
              c: {
                fontSize: 22,
                color: "#fff",
                textShadowColor: "#1c90a6",
                textShadowOffsetX: 0,
                textShadowOffsetY: 2,
                textShadowBlur: 5,
              },
              d: {
                color: color[index],
                align: "left",
              },
            },
          },
        };
        item.labelLine = {
          normal: {
            lineStyle: {
              width: 1,
              color: "rgba(255,255,255,0.7)",
            },
          },
        };
      });
    },
    // 图表初始化
    initChart() {
      this.statusChart = this.$echarts.init(this.$refs.chart3dPie);
      // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
      this.option = getPie3D(this.optionData, 0, 250, 30, 3, 0.6);
      this.statusChart.setOption(this.option);
      // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      this.option.series.push({
        name: "设备状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          fontSize: 13,
          lineHeight: 20,
        },
        startAngle: -60, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        // radius: ["20%", "50%"],
        // center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.statusChart.setOption(this.option);
      this.bindListen(this.statusChart);
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
    bindListen(myChart, optionName = "option") {
      let selectedIndex = "";
      let hoveredIndex = "";
      // 监听点击事件，实现选中效果（单选）
      myChart.on("click", (params) => {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
        const isSelected =
          !this[optionName].series[params.seriesIndex].pieStatus.selected;
        const isHovered =
          this[optionName].series[params.seriesIndex].pieStatus.hovered;
        const k = this[optionName].series[params.seriesIndex].pieStatus.k;
        const startRatio =
          this[optionName].series[params.seriesIndex].pieData.startRatio;
        const endRatio =
          this[optionName].series[params.seriesIndex].pieData.endRatio;
        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
          this[optionName].series[selectedIndex].parametricEquation =
            getParametricEquation(
              this[optionName].series[selectedIndex].pieData.startRatio,
              this[optionName].series[selectedIndex].pieData.endRatio,
              false,
              false,
              k,
              this[optionName].series[selectedIndex].pieData.value
            );
          this[optionName].series[selectedIndex].pieStatus.selected = false;
        }
        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
        this[optionName].series[params.seriesIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            this[optionName].series[params.seriesIndex].pieData.value
          );
        this[optionName].series[params.seriesIndex].pieStatus.selected =
          isSelected;
        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
        selectedIndex = isSelected ? params.seriesIndex : null;
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", (params) => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected =
              this[optionName].series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio =
              this[optionName].series[hoveredIndex].pieData.startRatio;
            endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
            k = this[optionName].series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            this[optionName].series[hoveredIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[hoveredIndex].pieData.value
              );
            this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              this[optionName].series[params.seriesIndex].pieStatus.selected;
            isHovered = true;
            startRatio =
              this[optionName].series[params.seriesIndex].pieData.startRatio;
            endRatio =
              this[optionName].series[params.seriesIndex].pieData.endRatio;
            k = this[optionName].series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            this[optionName].series[params.seriesIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                this[optionName].series[params.seriesIndex].pieData.value + 60
              );
            this[optionName].series[params.seriesIndex].pieStatus.hovered =
              isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(this[optionName]);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", () => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = this[optionName].series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = this[optionName].series[hoveredIndex].pieStatus.k;
          startRatio = this[optionName].series[hoveredIndex].pieData.startRatio;
          endRatio = this[optionName].series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          this[optionName].series[hoveredIndex].parametricEquation =
            getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              this[optionName].series[hoveredIndex].pieData.value
            );
          this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(this[optionName]);
      });
    },
    // 自适应宽高
    changeSize() {
      this.statusChart.resize();
    },

    //储量管理水晶球
    initclglLeft1(id, name, data, color1, color2, colordata) {
      let data1 = this.clLeftData[0];
      let num = (Number(data1.mining) / Number(data1.amount)).toFixed(2);
      let num1 = ((Number(data1.mining) / Number(data1.amount)) * 100).toFixed(
        2
      );
      let jiaodu = 270 + 3.6 * (num1 / 2);
      setTimeout(() => {
        this.chartsLiquid1 = echarts.init(
          document.getElementById("clglwaterball1")
        );
        // this.chartsLiquid1 = echarts.init(this.$refs["clglwaterball1"]);
        // 把配置和数据放这里
        this.chartsLiquid1.setOption({
          series: [
            {
              type: "liquidFill",
              name: "完成率",
              color: ["rgba(255,255,255,.2)", "rgba(22,162,249)"],
              waveLength: "70%",
              data: [num, num], // 两条水波
              outline: {
                show: true,
                borderDistance: 5,

                itemStyle: {
                  borderColor: "rgba(71,175,238,.5)",
                  borderWidth: 1,
                  shadowBlur: 5,
                  shadowColor: "#fff",
                },
              },
              backgroundStyle: {
                color: "rgba(255,255,255,0.1)",
                borderWidth: 2,
                borderColor: "rgba(71,175,238,.5)",
                itemStyle: {
                  shadowBlur: 5,
                  shadowColor: "#fff",
                  opacity: 0.5,
                },
              },
              itemStyle: {
                opacity: 0.9,
                shadowBlur: 2,
                shadowColor: "#fff",
              },
              emphasis: {
                itemStyle: {
                  opacity: 1,
                },
              },
              label: {
                normal: {
                  position: ["50%", "50%"],
                  // formatter: "{a} \n {c}",
                  // formatter: "{a} \n {c}({d}%)",
                  formatter: function (params) {
                    // console.log(params, "valllll");
                    // let num = params.value * 100;
                    // let newnum = String(num).indexOf(".") + 1;
                    return "开采比率\n" + (params.value * 100).toFixed(2) + "%";
                  },
                  textStyle: {
                    fontSize: 18,
                    color: "#17a2f7",
                  },
                },
              },
            },
            //进度线
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["48%", "53%"], //进度线粗细
              hoverAnimation: false,
              startAngle: jiaodu, //起始角度
              data: [
                {
                  name: "",
                  value: num1 - 0, //进度
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 2,
                      color: "rgba(68,118,255)",
                    },
                  },
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "rgba(68,118,255)",
                    },
                  },
                },
                {
                  //画剩余的刻度圆环
                  name: "",
                  value: 100 - num1,
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        });
      }, 50);
    },
    initclglLeft2(id, name, data, color1, color2, colordata) {
      let data1 = this.clLeftData[1];
      let num = (Number(data1.mining) / Number(data1.amount)).toFixed(2);
      let num1 = ((Number(data1.mining) / Number(data1.amount)) * 100).toFixed(
        2
      );
      let jiaodu = 270 + 3.6 * (num1 / 2);
      setTimeout(() => {
        this.chartsLiquid1 = echarts.init(
          document.getElementById("clglwaterball2")
        );
        // this.chartsLiquid1 = echarts.init(this.$refs["clglwaterball2"]);
        // 把配置和数据放这里
        this.chartsLiquid1.setOption({
          series: [
            {
              type: "liquidFill",
              name: "完成率",
              color: ["rgba(255,255,255,.2)", "rgba(3,253,251)"],
              waveLength: "70%",
              data: [num, num], // 两条水波
              outline: {
                show: true,
                borderDistance: 5,

                itemStyle: {
                  borderColor: "rgba(3,253,251,.5)",
                  borderWidth: 1,
                  shadowBlur: 5,
                  shadowColor: "#fff",
                },
              },
              backgroundStyle: {
                color: "rgba(255,255,255,0.1)",
                borderWidth: 2,
                borderColor: "rgba(3,253,251,.5)",
                itemStyle: {
                  shadowBlur: 5,
                  shadowColor: "#fff",
                  opacity: 0.5,
                },
              },
              itemStyle: {
                opacity: 0.9,
                shadowBlur: 2,
                shadowColor: "#fff",
              },
              emphasis: {
                itemStyle: {
                  opacity: 1,
                },
              },
              label: {
                normal: {
                  position: ["50%", "50%"],
                  // formatter: "{a} \n {c}",
                  // formatter: "{a} \n {c}({d}%)",
                  formatter: function (params) {
                    // console.log(params, "valllll");
                    // let num = params.value * 100;
                    // let newnum = String(num).indexOf(".") + 1;
                    return "开采比率\n" + (params.value * 100).toFixed(2) + "%";
                  },
                  textStyle: {
                    fontSize: 18,
                    color: "rgba(11,203,250)",
                  },
                },
              },
            },
            //进度线
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["48%", "53%"], //进度线粗细
              hoverAnimation: false,
              startAngle: jiaodu, //起始角度
              data: [
                {
                  name: "",
                  value: num1 - 0, //进度
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 2,
                      color: "rgba(3,253,251)",
                    },
                  },
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "rgba(3,253,251)",
                    },
                  },
                },
                {
                  //画剩余的刻度圆环
                  name: "",
                  value: 100 - num1,
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        });
      }, 50);
    },
    initclglLeft3(id, name, data, color1, color2, colordata) {
      let data1 = this.clLeftData[2];
      let num = (Number(data1.mining) / Number(data1.amount)).toFixed(2);
      let num1 = ((Number(data1.mining) / Number(data1.amount)) * 100).toFixed(
        2
      );
      let jiaodu = 270 + 3.6 * (num1 / 2);
      setTimeout(() => {
        this.chartsLiquid1 = echarts.init(
          document.getElementById("clglwaterball3")
        );
        // this.chartsLiquid1 = echarts.init(this.$refs["clglwaterball3"]);
        // 把配置和数据放这里
        this.chartsLiquid1.setOption({
          series: [
            {
              type: "liquidFill",
              name: "开采比率",
              color: ["rgba(255,255,255,.2)", "rgba(11,203,250)"],
              waveLength: "70%",
              data: [num, num], // 两条水波
              outline: {
                show: true,
                borderDistance: 5,

                itemStyle: {
                  borderColor: "rgba(11,203,250,.5)",
                  borderWidth: 1,
                  shadowBlur: 5,
                  shadowColor: "#fff",
                },
              },
              backgroundStyle: {
                color: "rgba(255,255,255,0.1)",
                borderWidth: 2,
                borderColor: "rgba(11,203,250,.5)",
                itemStyle: {
                  shadowBlur: 5,
                  shadowColor: "#fff",
                  opacity: 0.5,
                },
              },
              itemStyle: {
                opacity: 0.9,
                shadowBlur: 2,
                shadowColor: "#fff",
              },
              emphasis: {
                itemStyle: {
                  opacity: 1,
                },
              },
              label: {
                normal: {
                  position: ["50%", "50%"],
                  // formatter: "{a} \n {c}",
                  // formatter: "{a} \n {c}({d}%)",
                  formatter: function (params) {
                    // console.log(params, "valllll");
                    // let num = params.value * 100;
                    // let newnum = String(num).indexOf(".") + 1;
                    return "开采比率\n" + (params.value * 100).toFixed(2) + "%";
                  },
                  textStyle: {
                    fontSize: 18,
                    color: "rgba(11,203,250)",
                  },
                },
              },
            },
            //进度线
            {
              type: "pie",
              center: ["50%", "50%"],
              radius: ["48%", "53%"], //进度线粗细
              hoverAnimation: false,
              startAngle: jiaodu, //起始角度
              data: [
                {
                  name: "",
                  value: num1 - 0, //进度
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 2,
                      color: "rgba(11,203,250)",
                    },
                  },
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "rgba(11,203,250)",
                    },
                  },
                },
                {
                  //画剩余的刻度圆环
                  name: "",
                  value: 100 - num1,
                  itemStyle: {
                    color: "rgba(0,0,0,0)",
                  },
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  emphasis: {
                    labelLine: {
                      show: false,
                    },
                    itemStyle: {
                      color: "rgba(0,0,0,0)",
                    },
                  },
                },
              ],
            },
          ],
        });
      }, 50);
    },
  },
};
</script>

<style lang="scss" scope>
body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
dl,
dt,
dd,
ul,
ol,
li,
pre,
form,
fieldset,
legend,
button,
input,
textarea,
th,
td {
  margin: 0px;
  padding: 0px;
}
li {
  list-style: none;
}
.body1X {
  display: none;
}
.body2X {
}

div.custom-alert {
  width: auto;
}
.cm-layout .colf {
  color: #fff;
}
.cm-layout .font18 {
  font-size: 0.18rem;
}
.cm-layout .font20 {
  font-size: 0.2rem;
}
.cm-layout .font22 {
  font-size: 0.22rem;
}
.cm-layout .font24 {
  font-size: 0.24rem;
}
.cm-layout .font26 {
  font-size: 0.26rem;
}
.cm-layout .font28 {
  font-size: 0.28rem;
}
.cm-layout .ft16 {
  font-size: 16px;
}
.cm-layout .ft18 {
  font-size: 18px;
}
.cm-layout .ft20 {
  font-size: 20px;
}
.cm-layout .ft24 {
  font-size: 24px;
}
.cm-layout .between {
  display: flex;
  justify-content: space-between;
}
.cm-layout .ctn-place,
.cm-layout .ctn-fix {
  display: flex;
}
.cm-layout .ctn-place > div,
.cm-layout .ctn-fix > div {
  flex: 1;
  position: relative;
}
.cm-layout .fix-m1 {
  display: flex;
}
.cm-layout .fix-m1c {
  display: flex;
  flex-direction: column;
}
.cm-layout .fix-m1 > div,
.cm-layout .fix-m1c > div,
.cm-layout .fix-c1r {
  flex: 1;
  position: relative;
}
.cm-layout .fix-m2 {
  display: flex;
}
.cm-layout .fix-c1 {
  flex: 1;
}
.cm-layout .fix-rc {
  justify-content: center;
}
.cm-layout .fix-cc {
  align-items: center;
}
.cm-layout .fix-rcc {
  align-items: center;
  justify-content: center;
}
.cm-layout .grid2 {
  display: grid;
  grid-template-columns: 50% 50%;
}
.cm-layout .grid3 {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
}
.cm-layout .grid4 {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}
.cm-layout .ctn-rel {
  position: relative;
}
.cm-layout .ctn-abs {
  position: absolute;
  top: 0;
  left: 0;
}
.cm-layout .ctn-absfull {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.cm-layout .ctn-range .ctn-abs {
  height: 100%;
  width: 100%;
}
.cm-layout .km-table {
}
.cm-layout .km-table .table-box {
  text-align: center;
}
.cm-layout .km-table dl {
  display: table;
  width: 100%;
}
.cm-layout .km-table dt > div,
.cm-layout .km-table dd > div {
  display: table-cell;
  font-size: 18px;
}
.cm-layout .km-table dt,
.cm-layout .km-table dd {
  display: table-row;
}
.cm-layout .km-table dt {
  font-weight: bold;
}
.cm-layout .km-table dd {
}
.cm-layout .km-table .border dl {
  border: 1px solid #eef1f6;
}
.cm-layout .km-table .border dt > div,
.cm-layout .km-table .border dd > div {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: #677290 #acb6d9;
}
.cm-layout .km-table .bg44 {
  background-color: #4476f9;
}
.cm-layout .km-table .col00a {
  color: #00a4fe;
}
.cm-layout .km-table .even-bg1 dd:nth-child(even) {
  background-color: rgba(14, 45, 109, 0.8);
}
.cm-layout .tinfo {
  color: #888;
  font-size: 13px;
  border-width: 0 0px 1px 1px;
  border-style: solid;
  border-color: #dfe6ec;
}
.cm-layout .tinfo .tr {
  display: flex;
}
.cm-layout .tinfo .td {
  padding: 8px 5px;
  min-height: 40px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  border-color: #dfe6ec;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cm-layout .tinfo .td .cell {
  flex: 1;
  display: flex;
}
.cm-layout .tinfo .td font {
  white-space: nowrap;
}
.cm-layout .tinfo .td span {
  color: #000;
  font-size: 15px;
}
.cm-layout .tinfo .td i {
  font-style: normal;
}

.Screen .bg-o85 {
  // background-color: rgba(13, 29, 55, 0.85);
  background-color: #04153c;
  opacity: 0.8;
}
.Screen .bg2-o80 {
  background-color: rgba(4, 23, 63, 0.8);
}
.Screen .bd-c1 {
  border-color: #0394d0;
}
.Screen .linef35 {
  height: 35px;
  line-height: 35px;
}
.Screen .linef40 {
  height: 40px;
  line-height: 40px;
}
.Screen .line50 {
  height: 0.5rem;
  line-height: 0.5rem;
}
.Screen .line42 {
  height: 0.42rem;
  line-height: 0.42rem;
}
// .Screen .op {
//   width: 100%;
//   height: 35px;
//   line-height: 35px;
//   position: absolute;
//   background-color: #274088;
//   opacity: 0.5;
//   z-index: 0;
// }
// .Screen .upop {
//   width: 100%;
//   position: absolute;
//   z-index: 4;
//   left: 0;
//   top: 0;
//   div {
//     width: 25%;
//   }
// }
.Screen .col02d {
  color: #02daff;
}

.Screen .col-green1 {
  color: #03fd78;
}
.Screen .col-red1 {
  color: #fb2b2b;
}
.Screen .col01f {
  color: #01f5ff;
}
.Hoister .col-1 {
  color: #f2ed0d;
}
.Hoister .col-2 {
  color: #00cfff;
}
.Hoister .col-3 {
  color: #03cdff;
}
.Hoister .col-suc {
  color: #1ff001;
}
.Hoister .col-err {
  color: #ff0000;
}
.Screen .layerWd1 {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(4, 23, 63, 0.8);
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #0394d0;
  user-select: none;
}
// .Screen .layerWd1:before,
// .Screen .layerWd1:after {
//   content: "";
//   position: absolute;
//   border-style: solid;
// }
// .Screen .layerWd1:before {
//   top: -0.18rem;
//   left: -0.01rem;
//   height: 0.18rem;
//   width: 2.48rem;
//   border-width: 1px 1px 0 1px;
//   border-color: #0394d0;
//   transform: scaleY(1.01) perspective(0.05rem) rotateX(2deg);
//   transform-origin: bottom;
//   background-color: rgba(4, 23, 63, 0.8);
// }
// .Screen .layerWd1:after {
//   top: 0rem;
//   left: 2.475rem;
//   right: 0;
//   border-width: 1px 1px 0 1px;
//   border-color: #33708f;
// }
// .Screen .layerWd1 > i {
//   height: 0;
//   width: 0;
// }
// .Screen .layerWd1 > i:before,
// .Screen .layerWd1 > i:after {
//   content: "";
//   position: absolute;
//   height: 0.48rem;
//   width: 0.7rem;
//   z-index: 1;
//   border-style: solid;
//   border-color: #02f6ff;
// }
// .Screen .layerWd1 > i:before {
//   bottom: -2px;
//   left: -2px;
//   border-width: 0 0 3px 3px;
// }
// .Screen .layerWd1 > i:after {
//   top: -1px;
//   right: -2px;
//   border-width: 3px 3px 0 0;
// }
.Screen .layerWd1 .in-box {
  flex: 1;
  position: relative;
  width: 100%;
  // margin: 0.18rem 0;
  display: flex;
  flex-direction: column;
}
.Screen .layerWd1 h3 {
  font-size: 0.28rem;
  line-height: 1;
  margin-left: 0.14rem;
  background-image: linear-gradient(to bottom, #3effec, #30e5ee, #0b95fa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}
// .Screen .layerWd1 h3:before {
//   margin-right: 0.1rem;
//   font-weight: normal;
// }
.Screen .layerWd1 .card {
  display: flex;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 0.1rem;
  box-shadow: inset 0rem 0.4rem 0.4rem -0.2rem rgba(69, 198, 255, 0.5);
}
.Screen .layerWd1 .card:before,
.Screen .layerWd1 .card:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.Screen .layerWd1 .card:before {
  border-width: 0 2px;
  border-style: solid;
  z-index: 2;
  border-image: linear-gradient(to bottom, #47c6fd, #8fffd9, #47c6fd) 1 1;
}
.Screen .layerWd1 .card:after {
  border: 2px solid #44c5fe;
  border-radius: 0.1rem;
}
.Screen .layerWd1 .card .item {
  flex: 1;
  display: flex;
  justify-content: center;
}
.Screen .layerWd1 .card .key {
  color: #a3f7f9;
}
.Screen .layerWd1 .card .value {
  color: #01f5ff;
  font-size: 0.3rem;
  margin-left: 0.18rem;
}
.Screen .layerWd1 .card .adorn {
  display: flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
}
.Screen .layerWd1 .card .adorn:before {
  content: "";
  width: 0.9rem;
  height: 0.06rem;
  background-color: #00fcf9;
  position: absolute;
  top: 0;
  transform: scaleY(1.01) perspective(0.05rem) rotateX(354deg);
}
.Screen .layerWd1 .column {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.Screen .layerWd1 .tabel-w {
  width: 95%;
  margin: 0 auto;
  flex: 1;
  position: relative;
}
.Screen .layerWd1 .scrolling {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
}

.home_manage {
}
.home_manage li {
  list-style: none;
}
.page-bgc1 {
  background-color: #f5f6fb;
}
.page-t1 {
  padding: 0.16rem;
  background-color: #f5f6fb;
}

.common-page {
  flex: 1;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.common-page.dege {
  margin-right: 1.041vw;
}
.common-page h3 {
  line-height: 40px;
  margin: 0;
  padding: 0 0 0 10px;
  font-weight: normal;
  font-size: 16px;
  color: #000;
}
.common-page .page-row {
  margin-top: 10px;
}
.common-page .option {
}
.common-page .panel-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #fff;
}
.common-page .cr-liner {
  height: 100%;
  width: 100%;
}
.common-page .option .head-container {
  padding: 9px;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
}
.common-page .content-within {
  position: relative;
  flex: 1;
  width: 100%;
}
.common-page .content-fix {
  width: 100%;
}
.common-page .content-between {
  display: flex;
  justify-content: space-between;
}
.common-page .ctin-box {
  /* flex:1; */
  display: flex;
  padding: 5px 10px 10px;
  border-radius: 5px;
}
.common-page .ctin-box .toolbar {
  padding: 5px 0 10px;
}
.common-page .el-table {
}
.common-page .el-table .thead {
  color: #666;
}
.common-page .el-table .red {
  color: #ff0000;
}
.common-page .el-table .orange {
  color: orange;
}
.common-page .el-table .normal {
  color: #b3b3b3;
}
.common-page .el-table th,
.common-page .el-table td {
}
.common-page .el-table--small th {
  padding: 7px 0;
}
.common-page .el-table--small td {
  padding: 5px 0;
}
.common-page .el-table th > .cell,
.common-page .el-table td > .cell {
  padding: 0 6px;
}
.common-page .el-input--small,
.common-page .el-range-editor--small {
  margin-right: 5px;
}
.common-page .el-range-editor--small .el-range-separator {
  width: 20px;
}

/* 表单微调 */
body .el-dialog__header {
  border-bottom: 1px solid #ddd;
  padding: 10px;
}
body .el-dialog__header .el-dialog__headerbtn {
  top: 13px;
}
body .el-dialog__body {
  padding: 10px 20px;
}

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

/* 暂无数据提示 */
/* .home_user .el-table__empty-block, .common-page .el-table__empty-block{background-color:#00344D} */

// @import "../../assets/ls/styles/element-ui.scss";
@font-face {
  font-family: "diget year";
  src: url("~@/assets/ls/fonts/DS-Digital.ttf");
}
.font_digit {
  font-family: diget year;
}

.Screen {
  // background-color: #1d2b49;
  // background: url("~@/img/lsbg.png") no-repeat center;
  // background-size: 100%;

  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  .a_0,
  .b_0,
  .c_0,
  .d_0,
  .d_1,
  .e_0,
  .f_0,
  .g_0 {
    position: absolute;
  }
  .c_0,
  .d_0,
  .e_0,
  .f_0,
  .g_0 {
    display: none;
    top: 1.07rem;
    left: 0;
    bottom: 0;
    width: 0;
  }
  .d_1 {
    display: none;
    top: 1.07rem;
    right: 0;
    bottom: 0;
    width: 0;
  }
  > .actv {
    display: block;
  }

  .a_0 {
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .b_0 {
    width: 100%;
    header {
      position: absolute;
      top: 0;
      left: 0;
      height: 1.07rem;
      width: 100%;
      z-index: 5;
      display: flex;
      user-select: none;
      .b0 {
        display: flex;
        flex-direction: column;
        width: 5.65rem;
        .b1-a {
          position: relative;
          height: 0.37rem;
          border-bottom: 2px solid #6fcfff;
          &:before,
          &:after {
            content: "";
            position: absolute;
          }
          &:before {
            top: 0.09rem;
            left: 0.84rem;
            height: 0.21rem;
            width: 1.98rem;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-image: linear-gradient(
              68.6deg,
              transparent 0.07rem,
              rgba(23, 87, 135, 0.1) 0.08rem,
              rgba(23, 87, 135, 0.2) 0.13rem,
              transparent 0.13rem,
              transparent 0.2rem,
              rgba(23, 87, 135, 0.3) 0.21rem,
              rgba(23, 87, 135, 0.3) 0.26rem,
              transparent 0.26rem,
              transparent 0.33rem,
              rgba(23, 87, 135, 0.5) 0.34rem,
              rgba(23, 87, 135, 0.5) 0.39rem,
              transparent 0.39rem,
              transparent 0.46rem,
              rgba(23, 87, 135, 0.7) 0.47rem,
              rgba(23, 87, 135, 0.7) 0.52rem,
              transparent 0.52rem,
              transparent 0.59rem,
              #18416d 0.6rem,
              #164e7f 0.65rem,
              transparent 0.65rem,
              transparent 0.72rem,
              #145285 0.73rem,
              #175989 0.78rem,
              transparent 0.78rem,
              transparent 0.85rem,
              #185e8f 0.86rem,
              #126d9c 0.91rem,
              transparent 0.91rem,
              transparent 0.98rem,
              #1470a3 0.99rem,
              #137cab 1.04rem,
              transparent 1.04rem,
              transparent 1.11rem,
              #1680b2 1.12rem,
              #118eba 1.17rem,
              transparent 1.17rem,
              transparent 1.24rem,
              #1085b0 1.25rem,
              #0ea2c6 1.3rem,
              transparent 1.3rem,
              transparent 1.37rem,
              #0ab7d7 1.38rem,
              #09c7df 1.43rem,
              transparent 1.43rem,
              transparent 1.5rem,
              #08cce2 1.51rem,
              #07d8ec 1.56rem,
              transparent 1.56rem,
              transparent 1.63rem,
              #06ddef 1.64rem,
              #02e9f9 1.69rem,
              transparent 1.69rem,
              transparent 1.76rem,
              #01edfa 1.77rem,
              #01f3fe 1.82rem,
              transparent 1.82rem
            );
          }
          &:after {
            top: 0.1rem;
            right: 0.89rem;
            height: 0.16rem;
            width: 0.8rem;
            background-position: 0px 0.07rem;
            background-size: 0.24rem 0.16rem;
            background-image: linear-gradient(
                315deg,
                transparent 85%,
                #01dbfe 0
              ),
              linear-gradient(225deg, transparent 85%, #01dbfe 0);
            //background-position-x:left;
          }
        }
        .b1-b {
          position: relative;
          flex: 1;
          .b1b-1 {
            display: flex;
            position: absolute;
            top: 0.11rem;
            height: 0.44rem;
            li {
              position: relative;
              display: block;
              width: 1.69rem;
              cursor: pointer;
              line-height: 0.44rem;
              text-align: center;
              color: #84f2ff;
              a {
                position: relative;
                z-index: 2;
                text-decoration: none;
                color: #80cbd3;
              }
            }
            li:before {
              content: "";
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              border: 1px solid #2971a3;
            }
            li:hover:before {
              border: 1px solid #6fcfff;
              box-shadow: 0px 0px 6px #6fcfff inset;
            }
            .actv {
              color: #00ffff;
            }
            .actv:before {
              border: 1px solid #0adde8;
              box-shadow: 0px 0px 6px #00ffff inset;
            }
          }
          .b1b-2 {
            position: absolute;
            top: 0.16rem;
            height: 0.15rem;
            width: 0.68rem;
            background-size: 0.13rem 0.15rem;
            background-image: linear-gradient(
              to right,
              #6ac9f7 0.03rem,
              transparent 0.03rem
            );
          }
        }
      }
      .b-1 {
        .b1-b {
          margin-left: 0.14rem;
          .b1b-1 {
            left: 0;
            li {
              margin-left: 0.2rem;
            }
            li:before {
              transform: skewX(48deg);
            }
            .b1b1-a.actv:hover {
              .b1b1a {
                display: block;
              }
            }
            .b1b1a_ {
              position: absolute;
              top: 0.44rem;
              left: 0;
              height: auto;
              width: 4.97rem;
            }
            .b1b1a {
              border-width: 0 1px 1px 1px;
              border-style: solid;
              border-color: #0394d0;
              display: none;
              position: relative;
              top: 0.27rem;
              left: 0;
              height: 1.29rem;
              width: 100%;
              &:before,
              &:after {
                content: "";
                position: absolute;
              }
              &:before {
                top: -0.1rem;
                left: -0.01rem;
                height: 0.1rem;
                width: 1.05rem;
                border-width: 1px 1px 0 1px;
                border-style: solid;
                border-color: #0394d0;
                transform: scaleY(1.01) perspective(0.05rem) rotateX(5deg);
                transform-origin: bottom;
                background-color: rgba(13, 29, 55, 0.85);
              }
              &:after {
                top: 0rem;
                left: 1.05rem;
                right: 0;
                border-top: 1px solid #33708f;
              }
              .b1b1a-1 {
                display: flex;
                height: 100%;
                width: 100%;
                line-height: 1;
                > div {
                  flex: 1;
                  position: relative;
                  padding-top: 0.95rem;
                }
                i {
                  position: absolute;
                  top: 0;
                  left: 0;
                  height: 1rem;
                  width: 100%;
                  font-size: 0.45rem;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  &:before {
                    border: 1px solid #37d5e1;
                    position: relative;
                    z-index: 2;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 0.7rem;
                    width: 0.7rem;
                    border-radius: 0.1rem;
                    //box-shadow:0px 0px 25px 5px rgba(29,142,186, .9) inset;
                    background-image: linear-gradient(
                      to bottom,
                      #f4fbff,
                      #c4efff,
                      #30aeec
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                  }
                  &:after {
                    content: "";
                    position: absolute;
                    height: 0.7rem;
                    width: 0.7rem;
                    z-index: 1;
                    background-image: linear-gradient(
                      to bottom,
                      transparent 0%,
                      rgba(34, 116, 137, 0.6) 50%,
                      #1caad8 100%
                    );
                    border-radius: 0.1rem;
                  }
                }
              }
              > i {
                height: 0;
                width: 0;
                &:before,
                &:after {
                  content: "";
                  position: absolute;
                  z-index: 1;
                }
                &:before {
                  bottom: -2px;
                  left: -2px;
                  height: 0.22rem;
                  width: 0.31rem;
                  border-width: 0 0 3px 3px;
                  border-style: solid;
                  border-color: #02f6ff;
                }
                &:after {
                  top: -1px;
                  right: -2px;
                  height: 0.22rem;
                  width: 0.31rem;
                  border-width: 3px 3px 0 0;
                  border-style: solid;
                  border-color: #02f6ff;
                }
              }
            }
          }
          .b1b-2 {
            left: 5.72rem;
            transform: skewX(48deg);
          }
        }
      }
      .b-2 {
        flex: 1;
        position: relative;
        .b2-a {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          h1 {
            font-weight: bold;
            font-size: 0.39rem;
            line-height: 1;
            text-align: center;
            margin: 0.2rem 0 0 3px;
            background-image: -webkit-linear-gradient(
              top,
              #f5feff,
              #a2deff,
              #5acdff
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: 0.06rem;
          }
          .b2a-2 {
            border-width: 0 0 2px 0;
            border-style: solid;
            border-image: linear-gradient(
                to right,
                #6dcffe 0%,
                #5ec5ff 28%,
                #53c1fe 50%,
                #5ec5ff 72%,
                #6dcffe 100%
              )
              1 0;
            position: absolute;
            bottom: 0.26rem;
            left: 0.5rem;
            right: 0.5rem;
            height: 0;
            &:before,
            &:after {
              content: "";
              position: absolute;
              width: 2px;
              background-color: #6dcffe;
              height: 0.68rem;
              transform-origin: 100% 100%;
            }
            &:before {
              bottom: 0;
              left: -1px;
              transform: rotate(-48.9deg);
            }
            &:after {
              bottom: -2px;
              right: -1px;
              transform: rotate(48.9deg);
            }
            i {
              position: absolute;
              bottom: 0;
              left: 1.45rem;
              right: 1.45rem;
              height: 0.03rem;
              background-size: 100% 100%;
              background: linear-gradient(
                to right,
                #3a5366 0%,
                #dffcff 45%,
                #dffdff 50%,
                #dffcff 55%,
                #3a5366 100%
              );
              border-radius: 100%;
              overflow: hidden;
              box-shadow: 0px 0px 0.05rem 0.02rem rgba(95, 145, 155, 0.5);
            }
          }
        }
      }
      .b-3 {
        .b1-a {
          transform: rotateY(180deg);
        }
        .b1-b {
          margin-right: 0.14rem;
          .b1b-1 {
            right: 0;
            li {
              margin-right: 0.2rem;
            }
            li:before {
              transform: skewX(-48deg);
            }
          }
          .b1b-2 {
            right: 5.72rem;
            transform: skewX(-48deg);
          }
        }
      }
    }
  }
  .c_0 {
    user-select: none;
    color: #fff;
    .c-1,
    .c-2,
    .c-3,
    .c-4,
    .c-5 {
      display: none;
    }
    > .actv {
      display: flex;
    }

    .c-1 {
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 19.2rem;
      display: flex;
      justify-content: center;
      > div {
        position: absolute;
        height: 0.35rem;
        line-height: 0.32rem;
        width: 1.86rem;
        display: flex;
        justify-content: center;
        background-color: rgba(13, 29, 55, 0.7);
        span,
        .font_digit {
          background-image: linear-gradient(
            to bottom,
            #f5feff,
            #a2deff,
            #5acdff
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        span {
          font-size: 0.15rem;
        }
        &:before,
        &:after {
          content: "";
          position: absolute;
          top: -0.02rem;
          height: 0.37rem;
          width: 0.15rem;
          border: 1px solid #a6d7e5;
          background-color: rgba(13, 29, 55, 0.7);
        }
        &:before {
          left: -0.15rem;
          border-right: 0;
          transform: scaleX(1.01) perspective(0.05rem) rotateY(-13deg);
          transform-origin: right;
        }
        &:after {
          right: -0.15rem;
          border-left: 0;
          transform: scaleX(1.01) perspective(0.05rem) rotateY(13deg);
          transform-origin: left;
        }
        .font_digit {
          margin-left: 0.08rem;
          font-size: 0.3rem;
        }
      }
    }
    .c2 {
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding-top: 0.1rem;
      .mgt20 {
        margin-top: 0.2rem;
      }
      .mgt15 {
        margin-top: 0.15rem;
      }
      .c20 {
        width: 19.2rem;
        height: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        > div {
          position: relative;
          margin-left: 0.15rem;
        }
        > div:first-child {
          margin-left: 0;
        }
      }
      .c20-1 {
        margin-bottom: 4rem;
      }
      .c20-2 {
        margin-top: 0.44rem;
      }
      .c2-a,
      .c2-b,
      .c2-c,
      .c2-d {
        .tabel-w {
          font-size: 14px;
        }
        .table-box {
          margin: 0 0.08rem;
        }
        .c2a1-2 {
          height: 0.7rem;
          line-height: 0.66rem;
          margin: 0.17rem 0.36rem 0;
        }
      }
      .c2-b {
      }
      .c2-d {
      }
    }
    .c-2 {
      .c20 {
        > div {
          height: 4.16rem;
          width: 6.56rem;
        }
      }
      .c2-c {
        .c2c-3 {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
        }
      }
    }
    .c-3 {
      .c20 {
        > div {
          height: 4.16rem;
          width: 6.11rem;
        }
      }
      .c3-b {
        .c3b1-a {
          display: flex;
          flex-wrap: wrap;
          margin: 0.2rem 0.3rem 0;
          li {
            display: flex;
            justify-content: center;
            width: 50%;
            height: 0.9rem;
            margin-top: 0.15rem;
            .card {
              width: 2.25rem;
              font-size: 0.15rem;
            }
          }
        }
      }
    }
    .c-4 {
      .c20 {
        > div {
          height: 4.16rem;
          width: 6.56rem;
        }
        .tabel-w {
          margin-top: 0.15rem;
          > div {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
          }
        }
      }
    }
    .c-5 {
      .c20 {
        > div {
          height: 7rem;
          width: 12rem;
        }
      }
      .c20-1 {
        margin-bottom: 0;
        .table-box {
          margin-top: 15px;
          .td {
            padding: 8px 5px;
            min-height: 30px;
            text-align: left;
            i {
              font-style: normal;
            }
          }
        }
      }
    }
  }

  .d_ {
    position: absolute;
    .tit-bg {
      position: absolute;
      left: 0.1rem;
      width: 500px;
      height: 38px;
      background-image: url("~@/assets/images/alltitle.png");
      background-repeat: no-repeat;

      background-size: 100%;
    }
    .el-icon-s-unfold {
      font-size: 18px;
      line-height: 38px;
      margin-left: 20px;
      z-index: 3;
    }
    .el-icon-s-unfold::before {
      content: none;
    }
  }

  .d_0 {
    .d0 {
      position: absolute;
      // height: 248px;
      // width: 380px;
      width: 520px;
      height: 306px;
      left: 0.14rem;
    }
    .d-1 {
      top: 20px;
    }
    .d-2 {
      top: 340px;
    }
    .d-3 {
      top: 658px;
    }
  }
  .first {
    .cpintro {
      width: 496px;
      height: 247px;
      border-radius: 10px;
      margin-left: 10px;
      margin-top: 5px;
      background-image: url("~@/assets/images/company.png");
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: top;
      background-size: 100%;
      cursor: pointer;
    }
  }
  .d_1 {
    .d0 {
      position: absolute;
      // height: 248px;
      // width: 380px;
      width: 520px;
      height: 295px;
      right: 0.14rem;
    }
    .d-1 {
      top: 20px;
      .d_1_1 {
        width: 100%;
        div {
          float: left;
          width: 50%;
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #3dfbeb;
          position: relative;

          h6 {
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            font-weight: bold;
            background: linear-gradient(
              0deg,
              #3fffea 23.583984375%,
              #007eff 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
          }
          span {
            display: inline-block;
            position: absolute;
          }
          .span1 {
            top: 5px;
            left: 59%;
            width: 48px;
            height: 41px;
            background-image: url("~@/assets/images/bpjzz.png");
            background-repeat: no-repeat;
            background-position-x: center;
          }
          .span2 {
            top: 6px;
            left: 62%;
            width: 48px;
            height: 41px;
            background-image: url("~@/assets/images/bpbmwy.png");
            background-repeat: no-repeat;
            background-position-x: center;
          }
        }
      }
    }
    .d-2 {
      top: 340px;
    }
    .d-3 {
    }
    .d-3 {
      top: 658px;
    }
  }
  .e_ {
    .e-1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      padding-top: 0.1rem;
      .e1-a {
        position: relative;
        width: 19.2rem;
        .e1a1 {
          position: absolute;
          width: 380px;
          height: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          > div {
            position: relative;
            width: 100%;
            flex: none;
          }
          > div:last-child {
            margin-bottom: 0;
          }
          .in-box {
            // margin-top: 5px;
          }
        }
        .e1a-1 {
          left: 8px;
          .grid4 {
            text-align: center;
            h4 {
              margin: 0 0 0.6vh;
              padding: 0;
              font-size: 16px;
              color: #03d3fe;
            }
          }
        }
        .e1a-2 {
          right: 8px;
          .c3b1-a {
            display: flex;
            flex-wrap: wrap;
            margin: 0px 30px 0;
            align-items: center;
            li {
              display: flex;
              justify-content: center;
              width: 50%;
              height: 60px;
              margin-top: 7px;
              .card {
                width: 140px;
                font-size: 12px;
              }
              .value {
                font-size: 20px;
              }
              .adorn:before {
                width: 60px;
                height: 4px;
              }
            }
          }
          .weather {
            font-size: 11px;
            margin: 15px;
            .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;
            }
            #mobile05 {
              display: flex;
              position: relative;
              padding-top: 5vh !important;
            }
            #mobile05 > div:last-child {
              display: none;
            }
            #mright_1 {
              position: absolute;
              top: 0;
              left: 0;
              height: auto;
              width: 100%;
              ul {
                margin: 0;
                color: #03d3fe;
              }
              .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;
              }
            }
          }
        }
      }
    }
  }
  .e_0 {
    .e-1 {
      .e1a1 {
        > div {
          height: 2.85rem;
          min-height: 210px;
          margin-bottom: 20px;
        }
      }
    }
  }
  .f_ {
    .e-1 {
      .e1a1 {
        > div {
          height: 3rem;
          min-height: 260px;
          margin-bottom: 20px;
        }
      }
    }
  }

  .cus-select {
    margin: 5px;
    input {
      display: inline-block;
      width: 150px;
      border: 1px solid #d0d2ff;
      background-color: #014468;
      color: #d0d2ff;
      font-size: 12px;
    }
    .el-input {
    }
    .el-input__inner {
      height: 20px;
      line-height: 20px;
    }
    .el-input__suffix-inner {
      .el-select__caret {
        line-height: 20px;
      }
    }
  }

  select {
    position: absolute;
    right: 20px;
    height: auto;
    min-width: 100px;
    outline: none;
    background-color: #003652;
    color: #2ad7f0;
    font-size: 0.3rem;
    option {
    }
  }
}

/* .el-select-dropdown{border:1px solid #0b2133;
		ul{background-color:#014468;
			li{height:25px;line-height:25px;color:#d0d2ff;}
			li.hover, li:hover{background-color:#0b2133;}
		}
		div.popper__arrow:after{border-bottom-color:#014468 !important;}
	} */
// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

.cell {
  .el-tag {
    margin-right: 0;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0;
    }
  }
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}
.first-hjjc {
  width: 500px;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
  .hjjc-select {
    margin: 8px 0 16px;
    .el-select {
      background: rgba(0, 255, 255, 0.2);
      width: 100%;
    }

    .el-input__inner {
      border: none;
      background-color: transparent;
      color: #00fefc;
    }

    .el-select-dropdown__item {
      color: #fff;
    }

    .el-scrollbar,
    .el-select-dropdown {
      background-color: transparent !important;
      color: #fff !important;
    }

    .el-scrollbar__wrap,
    .el-select-dropdown__list {
      background-color: #0b1a37;
      color: #fff !important;
    }

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
    }
    .el-select .el-input.is-focus .el-input__inner {
      border: none;
    }
    .el-select .el-input__inner:focus {
      border: none;
    }
    .first-hjjc .hjjc-select .el-input__inner {
      border: none;
    }
  }
}
.first-hjjc .el-carousel__item1 h3 {
  // color: #475669;
  // font-size: 14px;
  // opacity: 0.75;
  // line-height: 200px;
  // margin: 0;
}

.first-hjjc .el-carousel__item1:nth-child(2n) {
  // background-color: #99a9bf;
}

.first-hjjc .el-carousel__item1:nth-child(2n + 1) {
  // background-color: #d3dce6;
}
.first-hjjc .el-carousel__item1 .hjjc-flex {
  display: flex;
  flex-direction: row;
  // width: 500px;
  justify-content: space-between;
}
.first-hjjc .el-carousel__item1 .hjjc-flex .hjjc-single {
  position: relative;
  width: 154px;
  height: 50px;
}
.first-hjjc .el-carousel__item1 .hjjc-flex .hjjc-single .hjjc-jcName {
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #bff7ff;
}
.first-hjjc .el-carousel__item1 .hjjc-flex .hjjc-single .hjjc-jcDanwei {
  position: absolute;
  top: 22px;
  left: 0;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #bff7ff;
  line-height: 29px;
  opacity: 0.5;
}
.first-hjjc .el-carousel__item1 .hjjc-flex .hjjc-single .hjjc-jcValue {
  position: absolute;
  top: 2px;
  right: 0;
  font-size: 28px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #03f8fb;
  line-height: 34px;
}
.first-hjjc .el-carousel__item1 .hjjc-flex .hjjc-single .hjjc-jdt {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #58fdec, #06cdf8);
  border-radius: 4px;
}
.hjjc-flex {
  display: flex;
  flex-direction: row;
  // width: 500px;
  justify-content: space-between;
  .hjjc-single {
    position: relative;
    width: 230px;
    height: 50px;
    .hjjc-jcName {
      position: absolute;
      top: 2px;
      left: 0;
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #bff7ff;
    }
    .hjjc-jcValue {
      position: absolute;
      top: 2px;
      right: 92px;
      font-size: 17px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #03f8fb;
      line-height: 21px;
    }
    .hjjc-jdt {
      position: absolute;
      top: 24px;
      left: 0;
      width: 139px;
      height: 5px;
      background: linear-gradient(90deg, #58fdec, #06cdf8);
      border-radius: 2px;
    }
    .hjjc-location {
      position: absolute;
      top: 12px;
      right: 0px;
      font-size: 16px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #0cbbfc;

      background: linear-gradient(0deg, #00a4f9 0%, #07fbd6 98.876953125%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      i {
        font-size: 18px;
      }
    }
  }
}
.stitle {
  width: 500px;
  height: 23px;
  clear: both;
  margin: 0 auto;

  .stit {
    position: relative;
    font-size: 23px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #00ffff;
    line-height: 23px;
    margin: 8px 0 8px 55px;
    background: linear-gradient(0deg, #3fffea 23.583984375%, #007eff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .stit::before {
    content: "";
    width: 39px;
    height: 15px;
    position: absolute;
    left: -44px;
    top: 6px;
    background-image: url("~@/assets/images/stitle.png");
  }
  .hjjc-flex {
    display: flex;
    flex-direction: row;
    // width: 500px;
    justify-content: space-between;
    .hjjc-single {
      position: relative;
      width: 230px;
      height: 50px;
      .hjjc-jcName {
        position: absolute;
        top: 2px;
        left: 0;
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #bff7ff;
      }
      .hjjc-jcValue {
        position: absolute;
        top: 2px;
        right: 0;
        font-size: 28px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #03f8fb;
        line-height: 34px;
      }
      .hjjc-jdt {
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        height: 8px;
        background: linear-gradient(90deg, #58fdec, #06cdf8);
        border-radius: 4px;
      }
    }
  }
}
.first-cl {
  width: 400px;
  height: 79px;
  position: relative;
}
.first-cl1 {
  margin: 20px 0px 18px 77px;
  background-image: url("~@/assets/images/hu1.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 100%;
}
.first-cl2 {
  margin: 28px 0px 8px 30px;
  background-image: url("~@/assets/images/hu2.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 100%;
}
.liquidData {
  position: absolute;

  width: 200px;
  height: 200px;
}
.liquidData1 {
  left: -96px;
  top: -59px;
}
.liquidData2 {
  right: -96px;
  top: -59px;
}
.cl2left {
  position: absolute;
  top: 16px;
  left: 35px;
  width: 130px;
  height: 50px;
  .cltop {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #a6f6f9;
    span {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #03fefe;
    }
  }
  .clbottom {
    font-size: 17px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}
.cl2right {
  position: absolute;
  top: 16px;
  left: 210px;
  width: 130px;
  height: 50px;
  .cltop {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #a6f6f9;
    span {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #03fefe;
    }
  }
  .clbottom {
    font-size: 17px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}
.cl1left {
  position: absolute;
  top: 16px;
  left: 90px;
  width: 130px;
  height: 50px;
  .cltop {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #a6f6f9;
    span {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #03fefe;
    }
  }
  .clbottom {
    font-size: 17px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}
.cl1right {
  position: absolute;
  top: 16px;
  left: 260px;
  width: 130px;
  height: 50px;
  .cltop {
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #a6f6f9;
    span {
      font-size: 20px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #03fefe;
    }
  }
  .clbottom {
    font-size: 17px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #ffffff;
  }
}
.cm-layout .km-table dd > div {
  color: #40d9cd;
}
.Screen .proddev .d0 {
  height: 700px;
}
#hjjctab {
  .el-carousel__container {
    height: 100%;
  }
}
.showOnline {
  width: 423px;
  height: 48px;
  margin: 0 auto;
  margin-top: 20px;
  background: rgba(17, 34, 81, 0.6);
  border: 2px solid;
  border-image: linear-gradient(0deg, #44c4ff, #8fffd9, #44c4ff) 2 2;
  clip-path: inset(0 round 10px);
}
.online {
  width: 250px;
  height: 44px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-size: 19px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
  span {
    align-self: center;
  }

  .onlineVal {
    font-size: 26px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #02f8fb;
    line-height: 30px;
  }
}
/***储量管理 */
.clgl-left-content {
  width: 500px;
  margin: 60px auto 0;

  p {
    font-size: 22px;
    font-family: Source Han Sans CN;
    color: #02fdfb;
    line-height: 2em;
    span {
      font-size: 28px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #02fdad;
    }
  }
}
.clgl {
  .tabel-w {
    .clLi {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      font-size: 25px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: #02fdfb;
      line-height: 55px;
      .outclbg {
        height: 55px;
        padding-top: 10px;
        .clactive1 {
          width: 126px;
          height: 40px;
          line-height: 40px;
          background: linear-gradient(0deg, #30cfbe, #007eff);
          border-radius: 10px;
        }
        .clactive2 {
          width: 126px;
          height: 40px;
          line-height: 40px;
          background: linear-gradient(0deg, #007eff);
          border-radius: 10px;
        }
        .clactive3 {
          width: 126px;
          height: 40px;
          line-height: 40px;
          background: linear-gradient(0deg, #1ad558);
          border-radius: 10px;
        }
      }
      span {
        font-size: 23px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #ffffff;
        line-height: 40px;
      }
    }
  }
}
.spjkicon1 {
  overflow: hidden;
  i {
    width: 29px;
    height: 30px;
    margin-top: 10px;
    display: inline-block;
    background-image: url("~@/assets/images/jk1.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    background-size: 100%;
  }
}
.clbtn {
  display: none;
  position: absolute;
  right: 550px;
  bottom: 10px;
  width: 209px;
  height: 59px;
  background: rgba(6, 22, 91, 0.76);
  border: 1px solid #0388fe;
  text-align: center;
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #05fbf8;
  line-height: 59px;
}
.clbtn:hover {
  cursor: pointer;
  opacity: 0.8;
}
.actv1 {
  display: block;
}
// .weather {
//   width: 475px;
//   height: 240px;
//   margin: 0 auto;
//   background-image: url("~@/assets/images/weather.png");
//   background-repeat: no-repeat;
//   background-position-x: center;
//   background-position-y: top;
//   background-size: 100%;
//   cursor: pointer;
// }
.indexjiankong {
  width: 475px;
  height: 240px;
  margin: 0 auto;
  margin-top: 5px;
  background-image: url("~@/assets/images/jiankong.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 100%;
  cursor: pointer;
}
.weather {
  width: 475px;
  height: 240px;
  margin: 0 auto;
  background-image: url("~@/assets/images/weather.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 100%;
  font-size: 18px;
  .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;
  }
  #mobile05 {
    display: flex;
    position: relative;
    padding-top: 5vh !important;
  }
  #mobile05 > div:last-child {
    display: none;
  }
  #mright_1 {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    ul {
      margin: 0;
      color: #03d3fe;
    }
    .wt {
      display: flex;
      align-items: center;
      margin-left: 140px;
    }
    .day {
      display: none;
    }
    span:last-child {
      display: block;
      position: absolute;
      top: 4px;
      left: 0px;
      height: auto;
      font-size: 26px;
    }
  }
}
.cpDetailsout {
  position: absolute;
  left: -408px;
  top: 170px;
  width: 392px;
  height: 316px;
  background: #112251;
  border: 1px solid #20739e;
  opacity: 0.8;
}
.cpDetailsin {
  position: absolute;
  left: -408px;
  top: 170px;
  width: 392px;
  height: 316px;
  .tit {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    padding-left: 10px;
    color: #37f2e1;
    line-height: 64px;
    border-bottom: 1px solid #37f2e1;
  }
  p {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fff;
    width: 90%;
    margin: 0 auto;
    line-height: 32px;
    span {
      color: #37f2e1;
    }
  }
}
.alarmDiaout {
  position: absolute;
  left: 540px;
  bottom: 1vh;
  z-index: 10;
  width: 392px;
  height: 210px;
  background: #112251;
  border: 1px solid #20739e;
  opacity: 0.8;
}
.alarmDiain {
  position: absolute;
  left: 540px;
  bottom: 1vh;
  z-index: 10;
  width: 392px;
  height: 210px;
  // overflow-y: scroll;
  .tit {
    font-size: 24px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    padding-left: 10px;
    color: #37f2e1;
    line-height: 64px;
    border-bottom: 1px solid #37f2e1;
  }
  p {
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fff;
    width: 90%;
    margin: 0 auto;
    line-height: 32px;
    span {
      color: #37f2e1;
    }
  }
}
.aniicon {
  position: absolute;
  bottom: 1%;
  left: 540px;
  z-index: 11;
  font-size: 40px;
  cursor: pointer;
  animation: warn 0.5s ease-out 0s infinite;
}
@keyframes warn {
  0% {
    color: #112251;
  }

  50% {
    color: #37f2e1;
  }

  100% {
    color: #f56c6c;
  }
}
.third {
  display: none;
}
.activ {
  display: block;
}
</style>
