<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div class="xtjc-left-side" v-show="mapStore.leftSideMenu">
    <div class="leafTotal">
      <i>监测设备状态统计</i>
    </div>
    <div class="total" :class="{ nopadding: !isStatusListShow }">
      <div class="totalLeaf" v-if="isStatusListShow">
        <div>
          <!-- <count :maxCount="Number.parseInt(devicesTotal)" /> -->
          <!-- <count :maxCount="87" /> -->
          <i>{{ devicesTotal }}</i>
          <b>&nbsp;个</b>
        </div>
      </div>
      <ul v-if="isStatusListShow">
        <li @click="sbState(1)"
          ><i></i>设备在线数<b>{{ online }}</b
          >个</li
        >
        <li @click="sbState(0)"
          ><i></i>设备离线数<b>{{ offline }}</b
          >个</li
        >
        <li @click="sbState(1)"
          ><i></i>设备在线率<b>{{ onlineRatio }}</b
          >%</li
        >
        <li @click="sbState(0)"
          ><i></i>设备离线率<b>{{ offlineRatio }}</b
          >%</li
        >
      </ul>
      <status class="status" style="" @showStatus="showStatus" :statusList="statusList" v-if="!isStatusListShow" />
    </div>
    <div class="leafTotal leafTotal1">
      <i>监测设备类型统计</i>
    </div>
    <div class="container">
      <a-carousel arrows style="height: 100%" autoplay autoplay-speed="50" v-show="isDeviceListShow">
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px" @click="prevSlide">
            <img src="/src/assets/lunbo/left.png" alt="Previous Arrow" />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px" @click="prevSlide">
            <img src="/src/assets/lunbo/right.png" alt="Next Arrow" />
          </div>
        </template>

        <!-- <template v-slot:prevArrow>
            <div class="left-arrow"
                 style="left: 10px;">
              <left-circle-outlined />
            </div>
          </template>
          <template v-slot:nextArrow>
            <div class="right-arrow"
                 style="right: 10px">
              <right-circle-outlined />
            </div>
          </template> -->

        <div v-for="(item, index) in deviceKind" :key="index" style="height: 100%">
          <ul>
            <li v-for="value in item" :key="value.id" class="box" @click="typeEvent(value, item)">
              <img :name="value.code" :src="value.imgUrl" alt="图片" class="image" />
              <div class="text">
                <p class="title">{{ value.text }}</p>
                <p class="count">
                  <span class="number">{{ value.count }}</span>
                  <span class="unit">个</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </a-carousel>

      <device-list class="device" style="" @showTime="showTime" :deviceModel="deviceModel" v-if="!isDeviceListShow" />
      <!-- <ul>
        <li v-for="item in devicesTypeCount" :key="item.id" class="box">
          <img :src="item.imgUrl" alt="图片" class="image" />
          <div class="text">
            <p class="title">{{ item.name }}</p>
            <p class="count">
              <span class="number">{{ item.value }}</span>
                      <span class="unit">个</span>
                    </p>
                  </div>
                </li>
              </ul> -->
    </div>
    <!-- <div class="leafTotal leafTotal2">
      <i>工程列表</i>
    </div>
    <div class="total projectList">
      <span
        v-for="item in geologicalStore.getGcList.records"
        @click="changeProject(item)"
        :key="item.id"
        :class="{ active: selectedOption === item.id }"
      >
        {{ item.gcmc }}
      </span>
    </div> -->
    <dzfxxxtjlb />

    <!-- <div>
      <a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk" />
    </div> -->
  </div>
</template>

<script>
import { SearchOutlined, LineChartOutlined, LeftCircleOutlined, RightCircleOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue';
import { useMonitorDevicesStore } from '/@/store/modules/monitorDevices';
import { useGeologicalStore } from '/@/store/modules/geological';
import { useModal } from '/@/components/Modal';
import gnss from '../../assets/images/g-sy.png';
import lfwyj from '../../assets/images/lfwyj-sy.png';
import qxz from '../../assets/images/qxt-sy.png';
import nwj from '../../assets/images/nwj-sy.png';
import spjcy from '../../assets/images/spjcy-sy.png';
import wzjcz from '../../assets/images/wzjcz-sy.png';
import xscgq from '../../assets/images/xscgq-sy.png';
import yczdj from '../../assets/images/yczdj-sy.png';
import yljcz from '../../assets/images/yljcz.png';

import WZJC from '../../assets/images/sblxtj/wzjc.png';
import XSZ from '../../assets/images/sblxtj/xsz.png';
import CSJC from '../../assets/images/sblxtj/csjc.png';
import YLJC from '../../assets/images/yljcz.png';
import HSJC from '../../assets/images/sblxtj/hsjc.png';
import SWSYJC from '../../assets/images/sblxtj/swsyjc.png';
import LFWY from '../../assets/images/sblxtj/lfwy.png';
import SBJC from '../../assets/images/sblxtj/sbjcz.png';
import KPDZY from '../../assets/images/sblxtj/kpdzy.png';
import QXZ from '../../assets/images/sblxtj/qxt.png';
import SPJC from '../../assets/images/sblxtj/spjc.png';
import HeSWJC from '../../assets/images/sblxtj/hswjc.png';
import NSWJC from '../../assets/images/sblxtj/nwjcz.png';
import HuSWJC from '../../assets/images/sblxtj/huswjc.png';
import CZSJX from '../../assets/images/sblxtj/czsjxjcz.png';
import FWSYFS from '../../assets/images/sblxtj/fwsyfs.png';
import JXTX from '../../assets/images/sblxtj/jxtzfx.png';
import XBQLJC from '../../assets/images/sblxtj/ythxbql.png';
import SMGSLJ from '../../assets/images/sblxtj/smgslj.png';
import LDJXYLJC from '../../assets/images/sblxtj/ldjxyljc.png';
import CXY from '../../assets/images/sblxtj/cxy.png';
import XSFSWDCL from '../../assets/images/sblxtj/xswdfsjc.png';
import JGMCXBJC from '../../assets/images/sblxtj/jgmcxbjc.png';
import { message } from 'ant-design-vue';
import { emit } from 'process';
import deviceList from './components/deviceList.vue';
import status from './components/status.vue';
import dzfxxxtjlb from './dzfxxxtjlb.vue';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import { any } from 'vue-types';
import { useMapStore } from '/@/store/modules/map';
import Count from './components/count.vue';
export default defineComponent({
  name: 'LeftSide',
  components: {
    SearchOutlined,
    LineChartOutlined,
    LeftCircleOutlined,
    RightCircleOutlined,
    LeftOutlined,
    RightOutlined,
    deviceList,
    status,
    dzfxxxtjlb,
    Count,
  },
  setup() {
    const statusPanelShow = ref(true);
    const monitorDevicesStore = useMonitorDevicesStore();
    const geologicalStore = useGeologicalStore();
    const devicesTotal = ref(0);
    const online = ref([]);
    const offline = ref([]);
    const onlineRatio = ref(0);
    const offlineRatio = ref(0);
    const mapStore = useMapStore();
    // const items = [
    //   { id: 1, L1SL: gnss, name: 'GNSS' },
    //   { id: 2, L1SW: lfwyj, name: '裂缝位移计' },
    //   { id: 3, imgUrl: qxz, name: '综合气象站' },
    //   { id: 4, null: nwj, name: '泥位计' },
    //   { id: 5, imgUrl: spjcy, name: '视频监测仪' },
    //   { id: 6, imgUrl: wzjcz, name: '微震监测站' },
    //   { id: 7, L4XS: xscgq, name: '雪深传感器' },
    //   { id: 8, imgUrl: yczdj, name: '遥测终端机' },
    // ];
    const devicesImg = {
      L1SL: yczdj,
      L1SW: lfwyj,

      WZJC: WZJC,
      XSZ: XSZ,
      CSJC: CSJC,
      YLJC: YLJC,
      HSJC: HSJC,
      SWSYJC: SWSYJC,
      LFWY: LFWY,
      SBJC: SBJC,
      KPDZY: KPDZY,
      SPJC: SPJC,
      HeSWJC: HeSWJC,
      NSWJC: NSWJC,
      QXZ: QXZ,
      HuSWJC: HuSWJC,
      CZSJX: CZSJX,
      FWSYFS: FWSYFS,
      JXTX: JXTX,
      XBQLJC: XBQLJC,
      SMGSLJ: SMGSLJ,
      LDJXYLJC: LDJXYLJC,
      CXY: CXY,
      XSFSWDCL: XSFSWDCL,
      JGMCXBJC: JGMCXBJC,

      L4XS: xscgq,
      GNSS: gnss,
      L1GP: gnss,
      L1JZ: gnss,
      L3YL: yljcz,
    };
    const devicesTypeCount = ref({});
    const data = reactive({});
    const items = [
      { id: 1, imgUrl: gnss, name: 'GNSS' },
      { id: 2, imgUrl: lfwyj, name: '裂缝位移计' },
      { id: 3, imgUrl: qxz, name: '综合气象站' },
      { id: 4, imgUrl: nwj, name: '泥位计' },
      { id: 5, imgUrl: spjcy, name: '视频监测仪' },
      { id: 6, imgUrl: wzjcz, name: '微震监测站' },
      { id: 7, imgUrl: xscgq, name: '雪深传感器' },
      { id: 8, imgUrl: yczdj, name: '遥测终端机' },
    ];

    //设备类型统计
    const deviceKind = ref([]);
    const deviceModel = ref(any);
    const statusList = ref(any);
    let isDeviceListShow = ref(true); //监测类型统计
    let isStatusListShow = ref(true); //监测状态统计

    onMounted(() => {
      monitorDevicesStore.LiGongDeviceKind().then((res) => {
        console.log('设备类型统计11111111111:', res);
        const deviceTypeList = res.result.map((e) => {
          // return { ...e, imgUrl: '../../assets/images/lfwyj-sy.png' };
          // return { ...e, imgUrl: devicesImg[e.code] || devicesImg.HeSWJC };
          var url = `./static/img/sblx/${e.code}.png`;
          return { ...e, imgUrl: url || devicesImg.HeSWJC };
        });
        deviceKind.value = filtNavArr(
          deviceTypeList.sort((a, b) => {
            return b.count - a.count;
          })
        );

        // console.log('设备类型统计11111111111:', deviceKind.value);
      });
    });
    function showPanel() {
      //  mapStore.leftSideMenu=!mapStore.leftSideMenu
      //   statusPanelShow.value = !statusPanelShow.value
    }
    function filtNavArr(arr) {
      const many = [];
      arr.forEach((v, i) => {
        v.code = v.code.replace('\r', '');
        // v.isDeviceListShow = true;
        const index = Math.floor(i / 6);
        if (!many[index]) {
          many[index] = [];
        }
        many[index].push(v);
      });
      return many;
    }

    //设备在线统计在线率统计
    onMounted(() => {
      monitorDevicesStore.LigongDeviceSensorOnline().then((res) => {
        console.log('设备在线统计在线率统计', res);
        // statusList.value=res
        res.result.map((i) => {
          if (i.typeCode == 'onlineDevice') {
            online.value = i.count;
          } else if (i.typeCode == 'offlineDevice') {
            offline.value = i.count;
          }
        });
        devicesTotal.value = online.value + offline.value;
        onlineRatio.value = ((online.value / devicesTotal.value) * 100).toFixed(2);
        offlineRatio.value = ((offline.value / devicesTotal.value) * 100).toFixed(2);
      });
    });

    const projectList = [
      { id: 1, name: 'ML' },
      { id: 2, name: 'YS' },
      { id: 3, name: 'ANQ' },
      { id: 4, name: 'YJ' },
      { id: 5, name: 'XR' },
    ];
    /**要求修改为初始化不默认2023-5-28-梁罗*/
    // const selectedOption = ref(1);
    const selectedOption = ref(0);

    const changeProject = (i) => {
      selectedOption.value = i.id;
      //Cesium.Math.toRadians(-40.0) ||
      //-1.5688928482139568
      var offX = -0.0011020644091672693;
      var offY = -0.10000597031959854;
      let op = {
        destination: { x: i.x + offX, y: i.y + offY, z: 15000 },
        orientation: { heading: 6.283185307179586, pitch: -0.8647515185678438, roll: 6.283185307179586 },
      };
      map.flyTo(op, 1, () => {
        TFMapUitl.mapPointLocation_list([i.x, i.y]);
        var html = TFMapUitl.gcdMarkerDom(i);
        map.openInfoWindowHtml(html, { position: [i.x, i.y] }, () => {
          TFMapUitl.clearPointLocation_list(map);
        });
        map.popup.setOffset(0, -200);
      });
    };

    //设备类型统计事件
    var sbType = [];
    const typeEvent = (i, e) => {
      console.log('typeEvent:', i, e);
      if (i.count == 0) {
        message.info('所选设备类型无数据!');
        return;
      }

      //获取点击数据,并进入列表界面
      isDeviceListShow.value = false;
      deviceModel.value = i;

      var dom = document.getElementById('popupClear');
      if (dom) dom.click();
      if (i.count) {
        sbType.map((m) => (m.entity.billboard.scale = 1));
        var cla = `sbd${i.code}marker*`;
        sbType = map.findOverlay(cla);
        if (sbType.length) {
          sbType.map((m) => (m.entity.billboard.scale = 1.5));
          TFMapUitl.addBw(map, sbType);
          map.flyToRectangle(sbType, 0.1, {
            complete: () => map.showOverlay(cla, true),
          });
        }
      }
    };

    const value = ref('');
    const focus = () => {
      console.log('focus');
    };

    const handleChange = (value) => {
      console.log(`selected ${value}`);
    };
    const onSearch = (value) => {
      console.log(`selected ${value}`);
    };
    const editItem = (index) => {
      // 编辑操作
    };
    const deleteItem = (index) => {
      // 删除操作
    };
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };
    const handleOk = () => {};
    //在线设备
    var list = [];

    const sbState = (type) => {
      statusList.value = type;
      isStatusListShow.value = false;
      var dom = document.getElementById('popupClear');
      if (dom) dom.click();
      // list.map((m) => m.update());
      // var cla = `sbd${type}marker*`;
      // list = map.findOverlay(cla);
      // if (!list.length) return;
      // list.map((m) => m.update());
      // TFMapUitl.addBw(map, list);
      // map.flyToRectangle(list, 0.5, {
      //   complete: () => map.showOverlay(cla, true),
      // });
    };
    const [registerModal, { openModal }] = useModal();

    /**
     * @description 子组件实现
     */
    const showTime = (value) => {
      console.log('子组件的值', value);
      isDeviceListShow.value = value;
      if (sbType.length) sbType.map((m) => (m.entity.billboard.scale = 1));
    };
    const showStatus = (value) => {
      console.log('子组件的值', value);
      isStatusListShow.value = value;
      // if (sbType.length) sbType.map((m) => (m.entity.billboard.scale = 1));
    };

    function prevSlide() {
      console.log('触发了');
    }

    return {
      showPanel,
      mapStore,
      statusPanelShow,
      prevSlide,
      typeEvent,
      deviceModel,
      isDeviceListShow,
      isStatusListShow,
      showTime,
      showStatus,
      statusList,
      sbState,
      onlineRatio,
      offlineRatio,
      devicesTypeCount,
      geologicalStore,
      devicesTotal,
      online,
      offline,
      handleOk,
      visible,
      showModal,
      ...toRefs(data),
      items,
      changeProject,
      projectList,
      selectedOption,
      value1: ref('lucy'),
      editItem,
      deleteItem,
      handleChange,
      focus,
      onSearch,
      deviceKind,
      registerModal,
    };
  },
});
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'AgencyFB';
  src: url('../../assets/font/AgencyFB-Bold.ttf');
}

@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
}

::v-deep .ant-carousel .slick-slider {
  height: 100%;
}

::v-deep .slick-list {
  height: 100%;
}

::v-deep .slick-track {
  height: 100%;
}

::v-deep .slick-slide > div {
  height: 100%;
}

::v-deep .slick-slide > div > div {
  height: 100%;
}

::v-deep .slick-slide > div > div > ul {
  height: 100%;
}

::v-deep .ant-carousel .slick-dots li.slick-active button {
  background: #1785df !important;
}

::v-deep .ant-carousel .slick-dots li button {
  background: #5b727e !important;
}

::v-deep .ant-carousel .slick-dots li button {
  width: 30px !important;
  height: 5px !important;
}

.leafTotal :global(.ant-select-selector) {
  box-shadow: 0px 0px 10px 5px rgba(3, 49, 79, 0) !important;
}

:deep(.ant-select-selector) {
  border: 0px solid #303030 !important;
}

.projectList span {
  width: 83px;
  height: 29px;
  margin: 8px 10px;
  display: inline-block;
  text-align: center;
  line-height: 29px;
  cursor: pointer;
  background: url('../../assets/images/projectList2.png') no-repeat;
}

.projectList span.active {
  background: url('../../assets/images/projectList.png') no-repeat;
}

ul > li:nth-child(2) {
  margin-right: 0px;
}

.container {
  width: 400px;
  height: 304px;
  // height: 35%;
  // height: calc(100% - 600px);
  // border: 1px solid rgba(39, 209, 238, 0.3);

  position: relative;
}

.container:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -1px;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.container:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}
.container ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style-type: none;
  color: #fff;
  background: rgba(3, 49, 79, 0.6);
  height: 200px;
}

li.box:nth-child(2n) {
  margin-right: 0px;
}

li.box {
  display: inline-block;
  width: 190px;
  height: 25%;
  background: rgba(3, 49, 79, 0);
  opacity: 1;
  box-shadow: 0px 0px 10px 5px rgba(3, 49, 79, 0), inset 0px 0px 3px 3px rgba(4, 143, 231, 0);
  margin: 10px 20px 8px 0px;
  border: 0px solid #1778ab;
  cursor: pointer;
  padding: 5px;
  box-sizing: border-box;
}

.image {
  float: left;
  width: auto;
  height: 100%;
  margin-right: 30px;
  margin-left: 7px;
}

.text {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title {
  font-size: 14px;
  height: 30px;
  line-height: 18px;
  margin: 0;
  color: #fff;
}

.count {
  font-size: 14px;
  margin: 0;
}

.number {
  font-family: 'AgencyFB';
  font-size: 24px;
  font-weight: bold;
  font-style: italic;
  margin-right: 5px;
}

.unit {
  font-size: 14px;
  color: #fff;
}

.sblb tr {
  background: rgba(3, 49, 79, 0.4);
  margin-bottom: 10px;
}

::v-deep .ant-input-search-button {
  background: rgba(8, 39, 55, 0) !important;
  border: 0px;
}

::v-deep .ant-input-affix-wrapper {
  background: rgba(8, 39, 55, 0) !important;
  border: 0px;
}

::v-deep .ant-input {
  background: rgba(8, 39, 55, 0) !important;
  border: 0px;
}

.my-select {
  background: rgba(8, 39, 55, 0) !important;
  border: #096589 solid 0px;
}

.total ul i {
  margin-right: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  0% {
    background-color: #06a94d;
    box-shadow: 0 0 5px 3px #06a94d;
  }
  50% {
    background-color: #00fb5c;
    box-shadow: 0 0 5px 3px #00fb5c;
  }
  100% {
    background-color: #06a94d;
    box-shadow: 0 0 5px 3px #06a94d;
  }
}

.total ul b {
  font-family: 'AgencyFB';
  font-style: italic;
  font-size: 24px !important;
  margin: 0 5px 0px 15px;
}

.total ul li:nth-child(2) i,
.total ul li:nth-child(4) i {
  // font-size: 20px;
  // width: 24px;
  // height: 24px;
  // margin-right: -14px;
  // background: linear-gradient(to right, #d34947, #ffb14b);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
  // font-weight: 500;

  margin-right: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: gray !important;
  box-shadow: 0 0 5px 3px gray !important;
}

.total ul li {
  cursor: pointer;
  height: 39px;
}

.total ul li:first-child {
  margin-top: 0px;
}

.total ul li:last-child {
  margin-top: 0px;
}

.total ul {
  display: inline-block;
  width: 175px;
  position: relative;
  top: -20px;
}

.totalLeaf div {
  position: relative;
  top: 35px;
  left: 10px;
}

.totalLeaf i {
  font-family: 'AgencyFB';
  font-size: 30px;
  text-shadow: 0 0 7px #4ef9e1;
  color: #fff;
  // line-height: 142px;
  text-align: center;
  margin-left: 26px;
}

.totalLeaf b {
  color: #fff;
}

.totalLeaf {
  width: 180px;
  height: 148px;
  // background: url('../../assets/images/totalLeaf2.png') no-repeat;
  background: url('../../assets/images/totalLeaf3.png') no-repeat;
  display: inline-block;
  position: relative;
  top: -125px;
  background-size: contain;
  left: 20px;
}

.total {
  padding: 20px;
  padding-top: 26px;
  width: 400px;
  height: 186px;
  color: #fff;
  // border: 1px solid rgba(39, 209, 238, 0.3);
  border-radius: 3px;
  position: relative;
  background: rgba(3, 49, 79, 0.4);
}
.total:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
  // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.total:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient(rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}

.xtjc-left-side {
  // position: fixed;
  position: absolute;
  left: 20px;
  top: 90px;
  z-index: 3;
  width: 430px;
  // height: calc(100% - 135px);
  // overflow-y: auto;
  // overflow-x: hidden;
}

.xtjc-left-side {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes move {
  0% {
    left: -400px;
  }

  100% {
    left: 20px;
  }
}

.leafTotal2 {
  margin: 20px 0px 20px 0px;
}

.leafTotal {
  width: 400px;
  height: 47px;
  background: url('../../assets/images/jcsbtj.png') no-repeat;
  // background: url('../../assets/images/panels.png') no-repeat;
  // background-position: -14px -13px;
  //   background-size: 101% 131%;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
  line-height: 38px;
  margin: 0px 0px 5px 0px;
}

.leafTotal2 {
  margin: 20px 0px 5px 0px !important;
}

.leafTotal i {
  font-family: 'AlimamaShuHeiTi';
  margin-right: 98px;
  font-weight: bold;
  // font-style: normal;
  margin-left: 32px;

  // background-image:-webkit-linear-gradient(bottom,#6FCFFF,#fff);
  //   -webkit-background-clip:text;
  //   -webkit-text-fill-color:transparent;
}

.leafTotal b {
  font-weight: normal;
  font-size: 15px;
  color: #a7e6fa;
}
.leftPanel {
  position: absolute;
  left: 400px;
  /* width: 400px; */
  height: 31px;
  top: 30px;
}

.leafTotal1 {
  margin-top: 20px;
}

.projectList {
  height: calc(100vh - 930px);
  padding: 10px 20px;
  min-height: 100px;
  overflow: auto;
}

@media screen and (min-width: 2160px) {
  li.box {
    margin: 25px 20px 28px 0px;
  }
}

/* For demo */
// .ant-carousel :deep(.slick-slide) {
//   text-align: center;
//   height: 160px;
//   line-height: 160px;
//   background: #364d79;
//   overflow: hidden;
// }

.ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
  // width: 25px;
  // height: 25px;
  // font-size: 25px;
  // color: #fff;
  // background-color: rgba(31, 45, 61, 0.11);
  // opacity: 0.3;
  z-index: 999;
}
.ant-carousel :deep(.custom-slick-arrow:before) {
  display: none;
  z-index: 999;
}
.ant-carousel :deep(.custom-slick-arrow:hover) {
  opacity: 0.5;
  z-index: 12;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
  z-index: 12;
}
.device {
  height: 319px;
}
.status {
  height: 186px;
}
.nopadding {
  padding: 0 !important;
}
</style>
