<template>
  <div class="Screen cm-layout">
    <!-- <gobacktohome></gobacktohome> -->
    <!-- <div class="a_0">
      <cesium
        ref="CesiumMap"
        :mapinfo="mapinfo"
        :onload="mapOnload"
        @click="mapClick"
      />
    </div> -->
    <div class="b_0">
      <iframe
        frameborder="0"
        src="/huangshi/index.html"
        style="
          width: 100%;
          height: 100vh;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
        "
      ></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')"
              >
                <span class="font20">首页总览</span>
              </li>
              <li
                :class="{ actv: navActv === 1 }"
                @click="navEvent(1, 'navActv')"
              >
                <span class="font20">边坡监测</span>
              </li>
              <li
                :class="{ actv: navActv === 2 }"
                @click="navEvent(2, 'navActv')"
              >
                <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')"
              >
                <span class="font20">环境监测</span>
              </li>
              <li
                :class="{ actv: navActv === 4 }"
                @click="navEvent(4, 'navActv')"
              >
                <span class="font20">储量管理</span>
              </li>
              <li
                :class="{ actv: navActv === 5 }"
                @click="navEvent(5, 'navActv')"
              >
                <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> -->
    <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"></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="first-hjjc">
              <div class="hjjc-select">
                <el-select
                  v-model="hjjcvalue"
                  placeholder="请选择"
                  @change="hjjcselectChange"
                >
                  <el-option
                    v-for="(item, index) in hjjcList"
                    :key="index"
                    :label="item.name"
                    :value="index"
                  >
                  </el-option>
                </el-select>
              </div>
              <el-carousel
                width="500px"
                height="70px"
                direction="vertical"
                :autoplay="true"
                :interval="5000"
                indicator-position="none"
                @change="hjjccarousel"
                ref="itemcarousel"
              >
                <el-carousel-item
                  class="el-carousel__item1"
                  v-for="(item, index) in hjjcList"
                  :key="index"
                >
                  <div class="hjjc-flex">
                    <div class="hjjc-single">
                      <span class="hjjc-jcName">pm2.5</span>
                      <span class="hjjc-jcDanwei">mg/m3</span>
                      <span class="hjjc-jcValue">{{ item.pm25value }}</span>
                      <span class="hjjc-jdt"></span>
                    </div>
                    <div class="hjjc-single">
                      <span class="hjjc-jcName">pm10</span>
                      <span class="hjjc-jcDanwei">mg/m3</span>
                      <span class="hjjc-jcValue">{{ item.pm10value }}</span>
                      <span class="hjjc-jdt"></span>
                    </div>
                    <div class="hjjc-single">
                      <span class="hjjc-jcName">噪音</span>
                      <span class="hjjc-jcDanwei">mg/m3</span>
                      <span class="hjjc-jcValue">{{ item.zyvalue }}</span>
                      <span class="hjjc-jdt"></span>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="stitle">
              <div class="stit">水质监测</div>
              <div class="hjjc-flex">
                <div class="hjjc-single">
                  <span class="hjjc-jcName">PH值</span>

                  <span class="hjjc-jcValue">{{ "100" }}</span>
                  <span class="hjjc-jdt"></span>
                </div>
                <div class="hjjc-single">
                  <span class="hjjc-jcName">氨氮</span>

                  <span class="hjjc-jcValue">{{ "100" }}</span>
                  <span class="hjjc-jdt"></span>
                </div>
              </div>
              <div class="hjjc-flex">
                <div class="hjjc-single">
                  <span class="hjjc-jcName">浊度</span>

                  <span class="hjjc-jcValue">{{ "100" }}</span>
                  <span class="hjjc-jdt"></span>
                </div>
                <div class="hjjc-single">
                  <span class="hjjc-jcName">OPR</span>

                  <span class="hjjc-jcValue">{{ "100" }}</span>
                  <span class="hjjc-jdt"></span>
                </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="first-cl first-cl1">
              <div class="cl1bg"></div>
              <div ref="liquidEchart" class="liquidData"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ d_1 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>
        </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>
        </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>
        </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>
                <h6>基准点</h6>
                <span class="span1"></span>
              </div>
              <div>
                <h6>表面位移</h6>
                <span class="span2"></span>
              </div>
            </div>
            <div class="d_1_2 dx">表面位移X位移变化量： {{ "0.14656" }}mm</div>
            <div class="d_1_2 dy">表面位移Y位移变化量： {{ "0.14656" }}mm</div>
            <div class="d_1_2 dz">表面位移Z位移变化量： {{ "0.14656" }}mm</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="donline donline1">
              <h5>基准站在线离线状态</h5>
              <div class="online online1">
                <div>
                  <h6>当前设备在线</h6>
                  <span class="span1"></span>
                </div>
                <div class="active">
                  <h6 class="bph61">当前设备离线</h6>
                  <span class="span2"></span>
                </div>
              </div>
            </div>
            <div class="donline donline2">
              <h5>表面位移在线离线状态</h5>
              <div class="online online1">
                <div>
                  <h6>当前设备在线</h6>
                  <span class="span1"></span>
                </div>
                <div class="active">
                  <h6 class="bph61">当前设备离线</h6>
                  <span class="span2"></span>
                </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="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 bpList" :key="index">
                      <div>{{ item.name }}</div>
                      <div>{{ item.time }}</div>
                      <div>{{ item.value }}</div>
                      <div>{{ item.lv }}</div>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ e_ e_0" :class="{ actv: navActv === 2 }">
      <div class="e-1">
        <div class="e1-a">
          <div class="e1a1 e1a-1">
            <div class="e1a1-a">
              <div class="layerWd1">
                <div class="in-box">
                  <div class="tit-bg"></div>
                  <h3 class="el-icon-s-unfold">区域报警统计</h3>
                  <div class="c2a1-2">
                    <div class="card">
                      <div class="item">
                        <font class="colf ft16">报警数量</font>
                      </div>
                      <div class="item">
                        <span class="ft24 col01f">{{
                          hjjc.areaAlarmStatistics.sum
                        }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="tabel-w">
                    <div class="e1a1-c" id="e1a1c"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e1a1-b">
              <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 grid4">
                      <div v-for="(item, index) in hjjc.jcxsssj" :key="index">
                        <div>
                          <h4>
                            <div>{{ item.datavalue + item.unit }}</div>
                          </h4>
                          <span>{{ item.tit }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e1a1-c">
              <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">
                            <div>监测项目</div>
                            <div>报警值</div>
                            <div>报警阈值</div>
                            <div>报警时间</div>
                          </dt>
                          <dd
                            v-for="(item, index) in hjjc.bjzsssj"
                            :key="index"
                          >
                            <div>{{ item.tit }}</div>
                            <div>{{ item.datavalue + " " + item.unit }}</div>
                            <div>{{ item.bjvalue + " " + item.unit }}</div>
                            <div>{{ item.addtime }}</div>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="e1a1 e1a-2">
            <div class="e1a2-a">
              <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="weather" id="weather1"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e1a2-b">
              <div class="layerWd1">
                <div class="in-box">
                  <div class="tit-bg"></div>
                  <h3 class="el-icon-s-unfold">监测数据信息</h3>
                  <ul class="tabel-w c3b1-a">
                    <li v-for="(item, index) in hjjc.baseInfo" :key="index">
                      <div class="card">
                        <div class="column">
                          <font class="colf">{{ item.name }}</font>
                          <div>
                            <span class="value">{{ item.value }}</span>
                            <span class="col01f">{{ item.unit }}</span>
                          </div>
                        </div>
                        <i class="adorn"></i>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="e1a2-c">
              <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">
                            <div>设备名称</div>
                            <div>设备状态</div>
                            <div>设备类型</div>
                            <div>设备ID</div>
                          </dt>
                          <dd
                            v-for="(item, index) in hjjc.jcdList"
                            :key="index"
                          >
                            <div>{{ item.devicename }}</div>
                            <div>
                              <template v-if="item.statusdev === '1'">
                                <span class="col-green1">在线</span>
                              </template>
                              <template v-else>
                                <span class="col-red1">离线</span>
                              </template>
                            </div>
                            <div>4G设备</div>
                            <div>{{ item.deviceid }}</div>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ e_ f_ f_0" :class="{ actv: navActv === 3 }" id="f_00">
      <div class="e-1">
        <div class="e1-a">
          <div class="e1a1 e1a-1">
            <div class="g1a1-a">
              <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="f1a1-a" id="f1a1a"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="g1a1-b">
              <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="f1a1-b" id="f1a1b"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="e1a1 e1a-2">
            <div class="e1a2-a">
              <div class="layerWd1">
                <div class="in-box">
                  <div class="tit-bg"></div>
                  <h3 class="el-icon-s-unfold">边坡基本信息</h3>
                  <ul class="tabel-w c3b1-a">
                    <li v-for="(item, index) in bpjc.baseInfo" :key="index">
                      <div class="card">
                        <div class="column">
                          <font class="colf">{{ item.disname }}</font>
                          <div>
                            <span class="value">{{ item.devsize }}</span>
                            <span class="col01f">个</span>
                          </div>
                        </div>
                        <i class="adorn"></i>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="e1a2-b" id="e1a2_b">
              <div class="layerWd1">
                <div class="in-box">
                  <div class="title-box">
                    <div class="tit-bg"></div>
                    <h3 class="el-icon-s-unfold">地表位移统计</h3>
                    <select size="1" id="e1a2b_sel"></select>
                  </div>
                  <div class="tabel-w">
                    <div class="e1a2-b" id="e1a2b"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="d_ e_ f_ g_0" :class="{ actv: navActv === 4 }">
      <div class="e-1">
        <div class="e1-a">
          <div class="e1a1 e1a-1">
            <div class="g1a1-a">
              <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="g1a1-a" id="g1a1a"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="g1a1-b">
              <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="g1a1-b" id="g1a1b"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="e1a1 e1a-2">
            <div class="e1a2-a">
              <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">
                            <div>姓名</div>
                            <div>进出区域</div>
                            <div>时间</div>
                            <div>状态</div>
                          </dt>
                          <dd
                            v-for="(item, index) in rcgl1.personInfoList"
                            :key="index"
                          >
                            <div>{{ item.name }}</div>
                            <div>{{ item.disname }}</div>
                            <div>{{ item.time }}</div>
                            <div
                              :class="[
                                item.direction === '离开'
                                  ? 'col-green1'
                                  : 'col-red1',
                              ]"
                            >
                              {{ item.direction }}
                            </div>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="e1a2-b">
              <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">
                            <div>车牌号</div>
                            <div>进出区域</div>
                            <div>时间</div>
                            <div>状态</div>
                          </dt>
                          <dd
                            v-for="(item, index) in rcgl.carInfoList"
                            :key="index"
                          >
                            <div>{{ item.license }}</div>
                            <div>{{ item.ipaddr }}</div>
                            <div>{{ item.addtime }}</div>
                            <div
                              :class="[
                                item.direction === '离开'
                                  ? 'col-green1'
                                  : 'col-red1',
                              ]"
                            >
                              {{ item.direction }}
                            </div>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/api/qf_web_1.0413_simple.min.js";
import { Tools } from "@/assets/ls/js/common.js";
import Highcharts from "highcharts";
// import { Notification } from "element-ui";
import * as echarts from "echarts";
import { bpdev } from "@/api/bigscreen/index.js";
import "echarts-liquidfill"; // 引入水球图的组件
export default {
  // components: { cesium },
  data() {
    return {
      chartsLiquid: "", // 初始化水球图表
      carouselnum: 0,
      hjjcvalue: "环境监测1", //下拉框
      hjjcList: [
        {
          name: "环境监测1",
          pm25: 199,
          pm25value: 10,
          pm25danwei: "mb/m3",
          pm10: 130,
          pm10value: 110,
          pm10danwei: "mb/m3",
          zy: 199,
          zyvalue: 10,
          zydanwei: "mb/m3",
        },
        {
          name: "环境监测2",
          pm25: 199,
          pm25value: 10,
          pm25danwei: "mb/m3",
          pm10: 120,
          pm10value: 120,
          pm10danwei: "mb/m3",
          zy: 199,
          zyvalue: 10,
          zydanwei: "mb/m3",
        },
        {
          name: "环境监测3",
          pm25: 199,
          pm25value: 10,
          pm25danwei: "mb/m3",
          pm10: 150,
          pm10value: 110,
          pm10danwei: "mb/m3",
          zy: 199,
          zyvalue: 10,
          zydanwei: "mb/m3",
        },
      ],
      bpList: [
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
        { name: "bp1", time: "2022-06-06", value: 10, lv: "1" },
      ],
      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)",
      ],
      qedata: [
        {
          asvaliditydate: "2027-07-11",
          rname: "张庆斌",
          type: "1",
          awarddate: "2018-07-12",
        },
        {
          asvaliditydate: "2027-10-07",
          rname: "刘强",
          type: "1",
          awarddate: "2010-06-26",
        },
        {
          asvaliditydate: "2026-04-05",
          rname: "褚夫华",
          type: "1",
          awarddate: "2020-04-06",
        },
        {
          asvaliditydate: "2027-10-07",
          rname: "王道峰",
          type: "1",
          awarddate: "2021-10-08",
        },
        {
          asvaliditydate: "2026-05-31",
          rname: "张源",
          type: "2",
          awarddate: "2020-06-01",
        },
        {
          asvaliditydate: "2026-12-04",
          rname: "张强",
          type: "2",
          awarddate: "2020-12-05",
        },
        {
          asvaliditydate: "2026-08-31",
          rname: "邵长勇",
          type: "2",
          awarddate: "2020-09-01",
        },
        {
          asvaliditydate: "2023-12-30",
          rname: "李选",
          type: "12",
          awarddate: "2020-12-31",
        },
        {
          asvaliditydate: "2023-12-09",
          rname: "张辉",
          type: "12",
          awarddate: "2020-12-10",
        },
        {
          asvaliditydate: "2023-08-17",
          rname: "杨胜利",
          type: "12",
          awarddate: "2020-08-18",
        },
        {
          asvaliditydate: "2027-02-10",
          rname: "刘世付",
          type: "2",
          awarddate: "2021-02-11",
        },
        {
          asvaliditydate: "2023-08-17",
          rname: "钟聪",
          type: "12",
          awarddate: "2020-08-18",
        },
        {
          asvaliditydate: "2023-08-17",
          rname: "袁飞",
          type: "12",
          awarddate: "2020-08-18",
        },
      ],

      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: [],
      },
    };
  },
  created() {
    this.$nextTick(() => {});
  },
  mounted() {
    qf.openCalcLayout();
    this.$nextTick(() => {
      this.initLiquidEchart();
    });

    this.chartConfig = {
      alarms: [
        {
          title: "黄色警戒线",
          color: "yellow",
        },
        {
          title: "橙色警戒线",
          color: "orange",
        },
        {
          title: "红色警戒线",
          color: "red",
        },
        {
          title: "蓝色警戒线",
          color: "blue",
        },
      ],
    };
  },
  methods: {
    initLiquidEchart() {
      setTimeout(() => {
        this.chartsLiquid = echarts.init(this.$refs["liquidEchart"]);
        // 把配置和数据放这里
        this.chartsLiquid.setOption({
          series: [
            {
              type: "liquidFill",
              name: "开采比率",
              color: ["rgba(255,255,255,.2)", "rgba(22,162,249)"],
              waveLength: "60%",
              data: [0.52, 0.52], // 两条水波
              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}",
                  textStyle: {
                    fontSize: 18,
                  },
                },
              },
            },
          ],
        });
      }, 50);
    },
    setActive(num) {
      this.$refs.itemcarousel.setActiveItem(num);
    },
    hjjcselectChange(e) {
      this.setActive(e);
    },
    hjjccarousel(e) {
      //跑马灯滚动时select变化
      for (let i = 0; i < this.hjjcList.length; i++) {
        if (i === e) {
          this.hjjcvalue = this.hjjcList[i].name;
        }
      }
    },
    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,
          //   },
          // },
        },
        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();
        };
      }, 100);
      this.$nextTick(() => {
        myChart.resize();
      });
    },
    bianpodev1() {
      bpdev()
        .then((res) => {
          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) {
      if (this[key] === id) {
        return (this[key] = null);
      } else {
        this[key] = ~~id;
      }

      if (id === 0) {
        // 首页
        this.eventTrigger(3, "ctrl_aqxx");
      } else if (id === 1) {
        // 边坡
        this.bianpodev1();
        // this.reqMonitor();
      } else if (id === 2) {
        // 生产
        this.reqEnvironmentInfo();
      } else if (id === 3) {
        // 环境
        this.reqSideslopeInfo(this.bpjc);
      } else if (id === 4) {
        // 储量
        this.reqCarInfoList();
      } else if (id === 5) {
        //视频
        window.location.href = key;
      }
    },

    initChartC2a3(list) {
      var seriesData = [],
        maxVal = 0,
        mark = 0;
      var len = list.length;
      for (var i = 0; i < len; i++) {
        var item = list[i];
        var count = item.typecount * 1;
        count > maxVal && ((maxVal = count), (mark = i));
        seriesData.push({ name: item.etype, y: count });
      }
      seriesData[mark].sliced = true;
      seriesData[mark].selected = true;
      seriesData[mark].color = "#00d7e9";

      return new Highcharts.chart(this.c2c3, {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0,
            viewDistance: 200,
          },
          marginTop: 0,
          marginLeft: 0,
          marginBottom: 0,
          spacingLeft: 0,
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 25,
            dataLabels: {
              enabled: true,
              format: "{point.name}",
            },
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "Test",
            data: seriesData,
          },
        ],
      });
    },
    initChartC4a1(list) {
      var seriesData = [];
      var colors = {
        1: { color: "#ff414b", value: "1" },
        2: { color: "#f88f12", value: "2" },
        3: { color: "#fefa03", value: "3" },
        4: { color: "#057afd", value: "4" },
      };
      for (var item of list) {
        seriesData.push({
          // name: item.risklevel,
          name: 4,
          y: 26,
          // y: ~~item.count,
          color: colors[item.value].color,
        });
      }

      return new Highcharts.chart(
        this.c4a1,
        {
          chart: {
            backgroundColor: "transparent",
          },
          title: {
            floating: true,
            text: "总数<br/>26",
            style: {
              color: "#00f6ff",
            },
          },
          tooltip: {
            pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              borderWidth: 0,
              cursor: "pointer",
              dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                style: {
                  color:
                    (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                    "black",
                },
              },
            },
          },
          credits: {
            enabled: false,
          },
          series: [
            {
              type: "pie",
              innerSize: "60%",
              name: "",
              data: seriesData,
            },
          ],
        },
        function (c) {
          // 图表初始化完毕后的会掉函数
          // 环形图圆心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
          // 动态设置标题位置
          c.setTitle({
            y: centerY,
          });
        }
      );
    },
    initChartC4a2(list) {
      var seriesData = [],
        names = [];
      for (var item of list) {
        names.push(item.districtname);
        seriesData.push({ name: item.districtname, y: ~~item.count });
      }
      return new Highcharts.chart(this.c4a2, {
        chart: {
          type: "column",
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          categories: names,
          labels: {
            style: {
              color: "#fff",
            },
          },
          //crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
          },
          labels: {
            style: {
              color: "#fff",
            },
          },
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            name: "",
            data: seriesData,
          },
        ],
      });
    },
    initChartC4b1(list) {
      var seriesData = [],
        sumCount = 0;
      var colors = {
        1: { color: "#ff414b", value: "1" },
        2: { color: "#f88f12", value: "2" },
        3: { color: "#fefa03", value: "3" },
        4: { color: "#057afd", value: "4" },
      };
      for (var item of list) {
        var count = ~~item.count;
        seriesData.push({
          name: item.htclevel,
          y: count,
          color: colors[item.value].color,
        });
        sumCount += count;
      }
      return new Highcharts.chart(
        this.c4b1,
        {
          chart: {
            backgroundColor: "transparent",
          },
          title: {
            floating: true,
            text: "总数<br/>" + sumCount,
            style: {
              color: "#00f6ff",
            },
          },
          tooltip: {
            pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              borderWidth: 0,
              cursor: "pointer",
              dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                style: {
                  color:
                    (Highcharts.theme && Highcharts.theme.contrastTextColor) ||
                    "black",
                },
              },
            },
          },
          credits: {
            enabled: false,
          },
          series: [
            {
              type: "pie",
              innerSize: "60%",
              name: "",
              data: seriesData,
            },
          ],
        },
        function (c) {
          // 图表初始化完毕后的会掉函数
          // 环形图圆心
          var centerY = c.series[0].center[1],
            titleHeight = parseInt(c.title.styles.fontSize);
          // 动态设置标题位置
          c.setTitle({
            y: centerY,
          });
        }
      );
    },
    initChartC4b2(list) {
      var seriesData = [],
        names = [];
      for (var item of list) {
        names.push(item.months);
        seriesData.push({ name: item.months, y: ~~item.monthcount });
      }
      return new Highcharts.chart(this.c4b2, {
        chart: {
          type: "column",
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          categories: names,
          labels: {
            style: {
              color: "#fff",
            },
          },
          //crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
          },
          labels: {
            style: {
              color: "#fff",
            },
          },
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            name: "",
            data: seriesData,
          },
        ],
      });
    },
    initChartD1a1c(list) {
      var colors = ["#FEFA03", "#94CDFF", "#FF5963", "#19FFFF"],
        maxData = {};
      var len = list.length,
        seriesData = [];
      for (var i = 0; i < len; i++) {
        var item = list[i];
        var value = ~~item.size;
        seriesData.push({
          name: item.disname + "(" + value + ")",
          y: value,
          color: colors[i],
        });

        // 记录最大值
        if (value > ~~maxData.value) {
          maxData.value = value;
          maxData.index = i;
        }
      }
      seriesData[maxData.index].sliced = true;
      seriesData[maxData.index].selected = true;

      return new Highcharts.chart(this.d1a1c, {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0,
            viewDistance: 200,
          },
          marginTop: 0,
          marginLeft: 0,
          marginBottom: 0,
          spacingLeft: 0,
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 25,
            dataLabels: {
              enabled: true,
              format: "{point.name}",
            },
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "Test",
            data: seriesData,
          },
        ],
      });
    },
    initChartE1a1c(dom, list) {
      var colors = ["#FEFA03", "#94CDFF", "#FF5963", "#19FFFF"],
        maxData = {};
      var len = list.length,
        seriesData = [];
      for (var i = 0; i < len; i++) {
        var item = list[i];
        var value = ~~item.bjsize;
        seriesData.push({
          name: item.area + "(" + value + ")",
          y: value,
          color: colors[i],
        });

        // 记录最大值
        if (value > ~~maxData.value) {
          maxData.value = value;
          maxData.index = i;
        }
      }
      seriesData[maxData.index].sliced = true;
      seriesData[maxData.index].selected = true;

      return new Highcharts.chart(dom, {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 60,
            beta: 0,
            viewDistance: 200,
          },
          marginTop: 0,
          marginLeft: 0,
          marginBottom: 0,
          spacingLeft: 0,
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 25,
            dataLabels: {
              enabled: true,
              format: "{point.name}",
            },
          },
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "报警占比：",
            data: seriesData,
          },
        ],
      });
    },

    initChartG1a1a(list) {
      // 人员数量统计
      var seriesData = [];
      for (var item of list) {
        var size = ~~item.size;
        seriesData.push({
          name: item.disname + item.direction + " " + size + "(人)",
          y: size,
        });
      }

      return new Highcharts.chart(this.g1a1a, {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
          },
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        plotOptions: {
          pie: {
            innerSize: 100,
            depth: 45,
          },
          /* pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						depth: 35,
						innerSize: 180,
						dataLabels: {
							enabled: false
						}
					} */
        },
        credits: {
          enabled: false,
        },
        series: [
          {
            type: "pie",
            name: "人员数量",
            data: seriesData,
          },
        ],
      });
    },
    initChartG1a1b(list) {
      var seriesData = [];
      for (var item of list) {
        var month = item.yearmonth;
        seriesData.push([month, item.clsize * 1]);
      }
      return new Highcharts.chart(this.g1a1b, {
        chart: {
          type: "column",
          backgroundColor: "transparent",
          marginBottom: 50,
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          type: "category",
          labels: {
            rotation: -45, // 设置轴标签旋转角度
            style: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
          },
          labels: {
            style: {
              color: "#fff",
            },
          },
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          pointFormat: "",
        },
        series: [
          {
            name: "车辆总数",
            data: seriesData,
            dataLabels: {
              enabled: true,
              rotation: -90,
              color: "#FFFFFF",
              align: "right",
              //format: '{point.y:.1f}', // :.1f 为保留 1 位小数
              y: 10,
            },
          },
        ],
      });
    },
    initChartF1a1a(list) {
      // 降雨量
      var dataList = [];
      for (var item of list) {
        dataList.push([item.yearmonth.split("-")[1] + "月", item.clsize * 1]);
      }

      return new Highcharts.chart(this.f1a1a, {
        chart: {
          type: "column",
          backgroundColor: "transparent",
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          type: "category",
          labels: {
            rotation: -45, // 设置轴标签旋转角度
            style: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          min: 0,
          title: {
            text: "",
          },
          labels: {
            style: {
              color: "#fff",
            },
          },
        },
        plotOptions: {
          column: {
            borderWidth: 0,
          },
        },
        legend: {
          enabled: false,
        },
        credits: {
          enabled: false,
        },
        tooltip: {
          formatter: function (a, b, c) {
            return (
              "时间：" +
              this.key +
              "<br/>" +
              "降雨量：" +
              this.y.toFixed(1) +
              " 毫米"
            );
          },
        },
        series: [
          {
            name: "降雨量",
            data: dataList,
            dataLabels: {
              enabled: true,
              rotation: -90,
              color: "#FFFFFF",
              align: "right",
              format: "{point.y:.1f}", // :.1f 为保留 1 位小数
              y: 10,
            },
          },
        ],
      });
    },
    initChartF1a1b(list, config) {
      var series = [],
        dataList = [],
        xAxisData = [],
        alarmArr = config.alarmvalue.split("|");
      var alarmsConfig = this.chartConfig.alarms;

      for (var item of list) {
        dataList.push({
          x: new Date(item.jctime).getTime(),
          y: ~~(item.value2 * 10000) / 10000,
          color: "#02F6FF",
          lineWidth: 5,
        });
      }
      series.push({ name: "变化移动量", data: dataList, type: "spline" });

      // 添加报警线
      var len = alarmArr.length;
      for (var i = 0; i < len; i++) {
        var value = ~~alarmArr[i],
          alarmConfig = alarmsConfig[i],
          data = [];
        var alarmData = [
          { x: dataList[0].x, y: value },
          { x: dataList[dataList.length - 1].x, y: value },
        ];
        series.push({
          name: alarmConfig.title,
          type: "spline",
          data: alarmData,
          color: alarmConfig.color,
        });
      }

      return new Highcharts.chart(this.f1a1b, {
        chart: {
          type: "spline",
          backgroundColor: "transparent",
          marginTop: 30,
          marginBottom: 40,
          marginLeft: 70,
        },
        title: {
          text: "",
        },
        subtitle: {
          text: "",
        },
        xAxis: {
          type: "datetime",
          title: {
            text: "时间",
          },
          tickInterval: 1,
          tickmarkPlacement: "on",
          labels: {
            overflow: "justify",
            style: {
              color: "#fff",
            },
            rotation: -25,
          },
          dateTimeLabelFormats: {
            second: "%H:%M:%S",
            //minute: '%e日%H:%M',
            minute: "%e %H:%M",
            //hour: '%e日/%H:%M',
            hour: "%e/%H:%M",
            day: "%e日/%m月",
            week: "%e日/%m月",
            month: "%m月 %y年",
            year: "%Y",
          },
        },
        yAxis: {
          //tickInterval : 2, //自定义刻度
          //gridLineWidth : 1,
          labels: {
            style: {
              color: "#ccc",
            },
            format: "{value:.,0f}",
            //x:-20,
            x: -5,
          },
          title: {
            rotation: 0,
            text: "高<br/>度<br/>(毫米)",
          },

          //showFirstLabel: false
        },
        tooltip: {
          formatter: function () {
            return (
              "时间：" +
              Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
              "<br/>" +
              "传感器：" +
              this.series.name +
              ": " +
              this.y.toFixed(3) +
              " 米"
            );
          },
        },
        credits: { enabled: false },
        legend: {
          enabled: series.length > 0 ? true : false,
          //enabled: false,
          // 图例定位
          layout: "horizontal", // 水平布局:“horizontal”, 垂直布局:“vertical”
          floating: false, // 图列是否浮动
          align: "right",

          // 图例容器
          //width:'100%',		// number	|| String
          padding: 2, // 内边距
          margin: 2,
          borderRadius: 8,
          //borderWidth:1,
          verticalAlign: "top",

          // 图例项
          //itemWidth:120,		// 宽度
          itemDistance: 5, // 间距	20
          y: -10,
          itemMarginTop: 2,
          itemStyle: { color: "#fff" },
          itemHoverStyle: { color: "#fff" },
        },
        series: series,
      });
    },
    initChartE1a1b(list, config) {
      // 地表位移
      var series = [],
        dataList = [],
        xAxisData = [],
        alarmArr = config.alarmvalue.split("|"),
        dataListY = [],
        dataListZ = [];
      var alarmsConfig = this.chartConfig.alarms;

      for (var item of list) {
        dataList.push({ x: new Date(item.jctime).getTime(), y: item.disx * 1 });
        dataListY.push({
          x: new Date(item.jctime).getTime(),
          y: item.disy * 1,
        });
        dataListZ.push({
          x: new Date(item.jctime).getTime(),
          y: item.disz * 1,
        });
      }
      series.push({
        name: config.name + "移动量X",
        data: dataList,
        type: "spline",
        color: "#FA8334",
      });
      series.push({
        name: config.name + "移动量Y",
        data: dataListY,
        type: "spline",
        color: "#02F6FF",
      });
      series.push({
        name: config.name + "移动量Z",
        data: dataListZ,
        type: "spline",
        color: "#E6DCB4",
      });

      // 添加报警线
      var len = alarmArr.length > 3 ? 3 : alarmArr.length;
      for (var i = 0; i < len; i++) {
        var value = ~~alarmArr[i],
          alarmConfig = alarmsConfig[i],
          data = [];
        var alarmData = [
          { x: dataList[0].x, y: value },
          { x: dataList[dataList.length - 1].x, y: value },
        ];
        series.push({
          name: alarmConfig.title,
          type: "spline",
          data: alarmData,
          color: alarmConfig.color,
        });
      }

      return new Highcharts.chart(this.e1a2b, {
        chart: {
          type: "spline",
          backgroundColor: "transparent",
          marginTop: 15,
          marginBottom: 45,
          marginLeft: 58,
        },
        title: {
          text: "",
        },
        subtitle: {
          //text: config.name,
          y: 0,
          style: {
            color: "#fff",
          },
        },
        xAxis: {
          type: "datetime",
          title: {
            //text: '时间',
          },
          //tickInterval :1,
          tickmarkPlacement: "on",
          labels: {
            overflow: "justify",
            style: {
              color: "#fff",
            },
            rotation: -28,
          },
          dateTimeLabelFormats: {
            second: "%H:%M:%S",
            //minute: '%e日%H:%M',
            minute: "%e %H:%M",
            //hour: '%e日/%H:%M',
            hour: "%e/%H:%M",
            day: "%e日/%m月",
            week: "%e日/%m月",
            month: "%m月 %y年",
            year: "%Y",
          },
        },
        yAxis: {
          //tickInterval : 2, //自定义刻度
          //gridLineWidth : 1,
          labels: {
            style: {
              color: "#ccc",
            },
            format: "{value:.,0f}",
            x: -10,
            width: 100,
          },
          title: {
            rotation: 0,
            text: "高<br/>度<br/>(毫米)",
          },
          //showFirstLabel: false
        },
        tooltip: {
          formatter: function () {
            return (
              "时间：" +
              Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) +
              "<br/>" +
              "传感器：" +
              this.series.name +
              ": " +
              this.y.toFixed(3) +
              " 毫米"
            );
          },
        },
        credits: { enabled: false },
        legend: {
          //enabled: series.length > 0 ? true : false,
          enabled: false,
          // 图例定位
          layout: "horizontal", // 水平布局:“horizontal”, 垂直布局:“vertical”
          floating: false, // 图列是否浮动
          align: "right",

          // 图例容器
          //width:'100%',		// number	|| String
          padding: 2, // 内边距
          margin: 2,
          borderRadius: 8,
          //borderWidth:1,
          verticalAlign: "top",

          // 图例项
          //itemWidth:120,		// 宽度
          itemDistance: 5, // 间距	20
          y: -10,
          itemMarginTop: 2,
          itemStyle: { color: "#fff" },
          itemHoverStyle: { color: "#fff" },
        },
        series: series,
      });
    },

    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);
    },
  },
};
</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;
}
.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);
}
.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: #80cbd3;
              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-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: relative;
    .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_1_2 {
        width: 427px;
        height: 52px;
        border: 1px solid #00f0ff;
        margin: 0 auto;
        line-height: 52px;
        margin-bottom: 16px;
        font-family: Source Han Sans CN;
        font-size: 20px;
        text-align: center;
      }
      .dx {
        margin-top: 10px;

        color: #0cbbfc;
      }
      .dy {
        color: #3dfbeb;
      }
      .dz {
        color: #00f20e;
      }
    }
    .d-2 {
      top: 340px;
      .donline {
        width: 500px;
        height: 100px;
        margin: 0 auto;
        margin-top: 20px;
        h5 {
          font-size: 20px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #3dfbeb;
        }
        .online {
          div {
            width: 236px;
            height: 63px;
            margin-left: 6px;
            background-image: url("~@/assets/images/bpdevmsg.png");
            background-repeat: no-repeat;
            background-position: 100%;
            float: left;
            margin-top: 6px;
            position: relative;
            opacity: 1;
            span {
              width: 47px;
              height: 42px;
              position: absolute;
              left: 6%;
              top: 12px;
            }
            .span1 {
              background-image: url("~@/assets/images/bpjzz.png");
              background-repeat: no-repeat;
              background-position: 100%;
            }
            .span2 {
              background-image: url("~@/assets/images/alarm.png");
              background-repeat: no-repeat;
              background-position: 100%;
            }
            h6 {
              position: absolute;
              left: 29%;
              top: 18px;
              font-size: 24px;
              font-family: Source Han Sans CN;
              // font-weight: bold;
              color: #3dfbeb;
            }
            .bph61 {
              color: #eadb1f;
            }
          }
          .active {
            opacity: 0.3;
          }
        }
      }

      .donline2 {
        h5 {
          color: #0cbbfc;
        }
        .online {
          div {
            .span1 {
              background-image: url("~@/assets/images/bpbmwy.png");
              background-repeat: no-repeat;
              background-position: 100%;
            }
          }
        }
      }
    }
    .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;
}
.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: 30px 0px 8px 100px;
  background-image: url("~@/assets/images/hu1.png");
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 100%;
}
.liquidData {
  position: absolute;
  left: -96px;
  top: -59px;
  width: 200px;
  height: 200px;
}
</style>