<template>
  <div class="home-wrapper" :class="{ 'loading': pageLoading }">
    <div v-if="pageLoading" class="my-loader"></div>

    <div class="top">
      <h2 class="t-title">杨浦低空经济运营管理平台</h2>
    </div>

    <div class="bottom">
      <button class="bottom-collapse" @click="toggleAside()"></button>
      <ul class="tools">
        <li v-for="item in tools" @click="handleClickTool(item)">
          <span :class="{ 'active': item.isOn }">{{ item.label }}</span>
        </li>
      </ul>
    </div>

    <div class="left">
      <div class="weather">
        <img src="../assets/images/weather-cloudy.png" alt="">
        <div>
          <div>
            <span class="w-type">{{ weather.type }}&nbsp;&nbsp;湿度&nbsp;{{ weather.humidity }}</span>
            <span class="w-rh">RH%</span>
          </div>
          <span class="w-temp">{{ weather.temp1 + '~' + weather.temp2 + '℃' }}</span>
        </div>
      </div>
      <button class="aside-collapse" @click="toggleAside('left')"></button>
      <div class="aside-deco"></div>
      <div class="aside-shadow" :class="{ 'is-hide': panelHide.left }"></div>
      <div class="aside-main left-main" :class="{ 'is-hide': panelHide.left }">
        <div class="title-block" @dblclick="handleResetCamera"><span>区域信息</span></div>
        <ul class="block-qyxx">
          <li v-for="(item, index) in panelData.qyxx" :key="item.title" @click="handleClickQyxx(item)">
            <img :src="item.icon" alt="">
            <div>
              <span :class="{ 'active': qyxxActive === item.title }">{{ item.title }}</span>
              <div>
                <span>{{ item.count }}</span>
                <span>个</span>
              </div>
            </div>
          </li>
        </ul>

        <div class="dialog dialog-jld" v-if="dialogShow.jldList">
          <div class="header">
            <span>降落点</span>
            <i @click="dialogShow.jldList = false"></i>
          </div>
          <div class="main">
            <table class="table-default">
              <thead>
                <tr>
                  <th style="padding-left: 20px;">序号</th>
                  <th>降落点名称</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in dialogData.jldList">
                  <td style="padding-left: 20px;">{{ index + 1 }}</td>
                  <td>{{ item.name }}</td>
                  <td>
                    <button class="my-button" @click="handleClickJld(item)">定位</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="title-block"><span>空域规划</span></div>
        <ul class="block-kygh">
          <li v-for="(item, index) in panelData.kygh" :key="item.title" @click="handleClickWggh(item)">
            <img :src="item.icon" alt="">
            <div v-if="item.isOn" style="color: yellow;">{{ item.title }}</div>
            <div v-else>{{ item.title }}</div>
          </li>
        </ul>

        <div class="dialog legend" v-if="dialogShow.legend">
          <div class="header"><span>网格规划</span></div>
          <ul class="main">
            <li v-for="item in dialogData.legend">
              <input checked type="checkbox" class="form-check-input mt-0" @change="(e)=>handleToggleLayer(e, item)">
              <i :style="{ backgroundColor: item.color }"></i>
              <span>{{ item.label }}</span>
            </li>
          </ul>
        </div>

        <div class="title-block"><span>航线规划</span></div>
        <div class="block-hxgh">
          <table class="table-row4">
            <thead>
              <tr>
                <th>起飞点</th>
                <th>降落点</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in panelData.hxgh" :key="item.id">
                <td style="padding-left: 10px;">{{ item.from }}</td>
                <td>{{ item.to }}</td>
                <td>
                  <button class="my-button" :class="{ 'orange': item.hasChecked }"
                    @click="handleClickCkhl(item)">查看航路</button>
                  <button v-if="item.hasPlaned > 0" class="my-button orange"
                    @click="handleLCickCxgh(item)">重新规划</button>
                  <button v-else class="my-button" @click="handleClickHxgh(item)">航线规划</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="title-block"><span>安全评估</span></div>
        <div class="block-aqpg">
          <table class="table-row4">
            <thead>
              <tr>
                <th style="padding-left: 10px;">航线名称</th>
                <th>当日航行次数</th>
                <th>综合评估</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in panelData.aqpg">
                <td style="padding-left: 10px;">{{ item.name }}</td>
                <td>{{ item.count }}</td>
                <td style="color: #00FF80;">{{ item.grade }}</td>
              </tr>
            </tbody>
          </table>
        </div>

      </div>
    </div>

    <div class="right">
      <div class="date-time">
        <span class="now-date">{{ date }}</span>
        <span class="now-time">{{ time }}</span>
      </div>
      <button class="aside-collapse" @click="toggleAside('right')"></button>
      <div class="aside-deco"></div>
      <div class="aside-shadow" :class="{ 'is-hide': panelHide.right }"></div>
      <div class="aside-main right-main" :class="{ 'is-hide': panelHide.right }">
        <div class="title-block"><span>实时飞行</span></div>
        <ul class="block-ssfx">
          <li v-for="item in panelData.ssfx" @click="handleClickSsfx(item)">
            <span>{{ item.title }}</span>
            <div>
              <span>{{ item.count }}</span>
              <span>{{ item.unit }}</span>
            </div>
            <img :src="item.icon" alt="">
          </li>
        </ul>

        <div class="dialog dialog-uav" v-if="dialogShow.uavList">
          <div class="header">
            <span>无人机</span>
            <i @click="dialogShow.uavList = false"></i>
          </div>
          <div class="main">
            <table class="table-default">
              <thead>
                <tr>
                  <th style="padding-left: 10px;">序号</th>
                  <th>航空器序列号</th>
                  <th>持有人</th>
                  <th>类别</th>
                  <th>飞行航线</th>
                  <th>当前状态</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in dialogData.uavList" @click="handlePickUav(item)" :class="{'active': item.isOn}">
                  <td style="padding-left: 10px;">{{ index + 1 }}</td>
                  <td>{{ item.seriesNo }}</td>
                  <td>{{ item.owner }}</td>
                  <td>{{ item.class }}</td>
                  <td>{{ item.route }}</td>
                  <td>
                    <span class="state-label">{{ item.status }}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="title-block"><span>飞行审批</span></div>
        <div class="block-fxsp">
          <table class="table-row4">
            <thead>
              <tr>
                <th style="padding-left: 20px;">申请时间</th>
                <th>申请人</th>
                <th>审批状态</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in panelData.fxsp">
                <td style="padding-left: 20px;">{{ item.time }}</td>
                <td>{{ item.applyBy }}</td>
                <td v-if="item.status === '已审批'" style="color: #A6FFD2;">{{ item.status }}</td>
                <td v-else style="color: #FF4000;">{{ item.status }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="title-block"><span>时段统计</span></div>
        <div id="chart-sdtj"></div>

        <div class="title-block"><span>异常预警</span></div>
        <div class="block-ycyj">
          <img src="../assets/images/icon-ycyj.png" alt="">
          <div v-for="item in panelData.ycyj">
            <span>{{ item.title }}</span>
            <span>{{ item.count }}</span>
          </div>
        </div>
      </div>
    </div>

    <UeVideo class="ue" />

  </div>
</template>

<script setup>
import { ref, onBeforeMount, reactive, onMounted, getCurrentInstance } from 'vue'
import { getAssetsFile } from '@/utils/require'
import { setSdtj } from '@/echarts/options.js'
import { useNow, useDateFormat } from '@vueuse/core'
import getUeFn from '@/utils/UIInteractions'
import UeVideo from '@/components/UeVideo.vue'

const pageLoading = ref(true)

const { proxy } = getCurrentInstance()

const panelHide = reactive({
  left: false,
  right: false
})

function toggleAside(target) {
  Object.keys(dialogShow).forEach(key => dialogShow[key] = false)
  if (target) {
    panelHide[target] = !panelHide[target]
  } else {
    panelHide.left = panelHide.right = !(panelHide.left && panelHide.right)
  }
}

const tools = ref([
  // { label: '场景游览', isOn: false },
  // { label: '网格游览', isOn: false },
  // { label: '预警航线', isOn: false },
  // { label: '航线游览', isOn: false },
  // { label: '飞行全景', isOn: false },
  { label: '坠落模拟', isOn: false },
  { label: '停止跟随', isOn: false, onAction: getUeFn('endFollowUav') },
])

// 开始无人机模拟
function startUavDemo(routeName) {
  proxy.$bus.emit('callUE', getUeFn(routeName))
  setTimeout(() => {
    proxy.$bus.emit('callUE', getUeFn('startUav'))
  }, 1000);
  setTimeout(() => {
    proxy.$bus.emit('callUE', getUeFn('startFollowUav'))
  }, 1500);
}

// 结束无人机模拟
function endUavDemo(reset = true) {
  proxy.$bus.emit('callUE', getUeFn('endFollowUav'))
  setTimeout(() => {
    proxy.$bus.emit('callUE', getUeFn('destroyUav'))
  }, 1000);
  if (reset) {
    setTimeout(() => {
      proxy.$bus.emit('callUE', getUeFn('resetCamera'))
    }, 1500);
  }
}

function handleClickTool(tool) {
  tool.isOn = !(tool.isOn)
  if (tool.isOn && tool.onAction) {
    proxy.$bus.emit('callUE', tool.onAction)
    if (!(tool.offAction)) {
      setTimeout(() => {
        tool.isOn = false
      }, 300);
    }
  } else if (!(tool.isOn) && tool.offAction) {
    proxy.$bus.emit('callUE', tool.offAction)
  } else {
    switch (tool.label) {
      case '坠落模拟':
        if (tool.isOn) {
          startUavDemo('initUavFall')
        } else {
          endUavDemo()
        }
        break;
    }
  }
}

const time = useDateFormat(useNow(), 'HH:mm:ss')
const date = useDateFormat(useNow(), 'YYYY-MM-DD')

const weather = ref({
  type: '晴',
  humidity: '42.3',
  temp1: '18',
  temp2: '26'
})

const panelData = reactive({
  qyxx: [
    {
      title: '信号塔', count: 3, icon: getAssetsFile('icon-xinht.png'),
      onAction: getUeFn('toggleSignalTower', { Visible: true }),
      offAction: getUeFn('toggleSignalTower', { Visible: false })
    },
    { title: '起飞点', count: 1, icon: getAssetsFile('icon-qifd.png'), onAction: getUeFn('locateTakeoff') },
    { title: '降落点', count: 7, icon: getAssetsFile('icon-jiangld.png') },
  ],
  kygh: [
    { title: '空域网格', icon: getAssetsFile('icon-kywg.png'), isOn: false },
    { title: '网格规划', icon: getAssetsFile('icon-wggh.png'), isOn: false },
  ],
  hxgh: [
    { from: '合生汇', to: '黄兴公园', hasPlaned: 0, hasChecked: false },
    { from: '合生汇', to: '互联宝地', hasPlaned: 0, hasChecked: false },
    { from: '合生汇', to: '复旦大学北区第三教学楼', hasPlaned: 0, hasChecked: false },
    { from: '合生汇', to: '复旦大学北区学生公寓', hasPlaned: 0, hasChecked: false },
  ],
  aqpg: [
    { name: '合生汇-黄兴公园', count: '19次', grade: '优' },
    { name: '合生汇-互联宝地', count: '15次', grade: '优' },
    { name: '合生汇-同济大学', count: '10次', grade: '优' },
    { name: '合生汇-共青森林公园', count: '6次', grade: '优' },
  ],
  ssfx: [
    { title: '在飞航空器', count: 12, unit: '架', icon: getAssetsFile('icon-ssfx-1.png') },
    { title: '飞行架次', count: 57, unit: '次', icon: getAssetsFile('icon-ssfx-2.png') },
  ],
  fxsp: [
    { time: '2024-09-25 15:30', applyBy: '美团', status: '已审批' },
    { time: '2024-09-25 15:30', applyBy: '美团', status: '已审批' },
    { time: '2024-09-25 15:30', applyBy: '美团', status: '未审批' },
    { time: '2024-09-25 15:30', applyBy: '美团', status: '未审批' },
  ],
  ycyj: [
    { title: '异常天气', count: 2 },
    { title: '飞行坠落', count: 0 },
    { title: '资质到期', count: 1 },
    { title: '违规飞行', count: 1 },
  ]
})

function handleClickHxgh(item) {
  item.hasPlaned = 1
  proxy.$bus.emit('callUE', getUeFn('toggleLine', { Visible: true, Id: 'Block' }))
}

function handleLCickCxgh(item) {
  if (item.hasPlaned === 1) {
    proxy.$bus.emit('callUE', getUeFn('toggleLine', { Visible: false, Id: 'Block' }))
    proxy.$bus.emit('callUE', getUeFn('toggleLine', { Visible: true, Id: 'Normal' }))
    item.hasPlaned++
  } else if (item.hasPlaned === 2) {
    proxy.$bus.emit('callUE', getUeFn('toggleLine', { Visible: false, Id: 'Normal' }))
    item.hasPlaned = 0
  }
}

function handleClickCkhl(item) {
  item.hasChecked = !(item.hasChecked)
  proxy.$bus.emit('callUE', getUeFn('toggleRoute', { Visible: item.hasChecked }))
}

const qyxxActive = ref('')

function handleClickQyxx(item) {
  if (item.title === '降落点') {
    dialogShow.jldList = true
    dialogShow.uavList = false
    return
  }
  qyxxActive.value = item.title === qyxxActive.value ? '' : item.title
  if (qyxxActive.value && item.onAction) {
    proxy.$bus.emit('callUE', item.onAction)
  } else if (item.offAction) {
    proxy.$bus.emit('callUE', item.offAction)
  }
  if (!item.offAction) {
    setTimeout(() => {
      qyxxActive.value = ''
    }, 300);
  }
}

function handleClickWggh(item) {
  item.isOn = !(item.isOn)
  if (item.title === '空域网格') {
    proxy.$bus.emit('callUE', getUeFn('toggleGrid', { Id: 'Green', Visible: item.isOn }))
    proxy.$bus.emit('callUE', getUeFn('toggleGrid', { Id: 'Red', Visible: false }))
  }
  if (item.title === '网格规划') {
    proxy.$bus.emit('callUE', getUeFn('toggleGrid', { Id: 'Green', Visible: item.isOn }))
    proxy.$bus.emit('callUE', getUeFn('toggleGrid', { Id: 'Red', Visible: item.isOn }))
    dialogShow.legend = item.isOn
  }
}

const dialogShow = reactive({
  uavList: false,
  legend: false,
  jldList: false
})

const dialogData = reactive({
  uavList: [],
  legend: [
    { label: '适飞区', color: 'green', id: 'Green', isOn: true },
    { label: '风险区', color: 'yellow', isOn: true },
    { label: '禁飞区', color: 'red', id: 'Red', isOn: true },
  ],
  jldList: [
    { name: '黄兴公园' },
    { name: '互联宝地' },
    { name: '复旦大学北区第三教学楼' },
    { name: '复旦大学北区学生公寓' },
    { name: '上海财经大学绿叶步行街' },
    { name: '同济大学' },
    { name: '共青森林公园' }
  ]
})

function handleToggleLayer(e, item) {
  item.isOn = e.target.checked
  if(!(item.id)) return
  proxy.$bus.emit('callUE', getUeFn('toggleGrid', { Id: item.id, Visible: item.isOn }))
}

function handlePickUav(item) {
  item.isOn = !(item.isOn)
  if(item.isOn) {
    startUavDemo('initUavNormal')
  } else {
    endUavDemo()
  }
}

function handleClickJld(item) {
  if (item.name === '黄兴公园') {
    proxy.$bus.emit('callUE', getUeFn('locateLandfall'))
  }
}

function handleClickSsfx(item) {
  if (item.title === '在飞航空器') {
    dialogShow.uavList = true
    dialogShow.jldList = false
  }
}

function getDialogData() {
  let uavTemp = []
  const classArr = ['小型', '中型', '大型']
  const ownerArr = ['美团', '饿了么']
  for (let i = 0; i < panelData.ssfx[0].count; i++) {
    uavTemp.push({
      seriesNo: '1581F0254DSA65324',
      owner: ownerArr.at(Math.floor(Math.random() * ownerArr.length)),
      class: classArr.at(Math.floor(Math.random() * classArr.length)),
      route: '合生汇-黄兴公园',
      status: '正常',
      isOn: false
    })
  }
  dialogData.uavList = uavTemp
}

onBeforeMount(() => {
  getDialogData()
})

function initCharts() {
  setSdtj(document.getElementById('chart-sdtj'), null)
}

function handleResetCamera() {
  proxy.$bus.emit('callUE', getUeFn('resetCamera'))
}

onMounted(() => {
  // 加载echarts
  initCharts()
  // 启用全局事件监听
  proxy.$bus.on('toggleLoading', (val) => {
    pageLoading.value = val
  })
  proxy.$bus.on('ueConnected', () => {
    // 重置视角
    /* setTimeout(() => {
      handleResetCamera()
    }, 1000); */
    proxy.$bus.emit('callUE', getUeFn('setRotateSpeed'))
  })
  // 禁用右键菜单
  document.addEventListener('contextmenu',function(e){
    e.preventDefault();
  })
})

</script>

<style lang="scss" scoped>
$header_height: 106px;
$bottom_height: 63px;
$panel_width: 450px;

.home-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #444;
  color: #fff;
  user-select: none;

  &.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba($color: #000000, $alpha: 0.8);
    z-index: 99;
  }

  .top {
    position: absolute;
    top: 0;
    width: 100%;
    height: $header_height;
    background: url('../assets/images/bg-header.png') no-repeat;
    background-size: cover;
    z-index: 2;

    .t-title {
      position: absolute;
      width: fit-content;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      font-family: YSBTH;
      line-height: 35px;
      font-size: 35px;
      color: transparent;
      background: linear-gradient(0deg, #6FC2FF 0%, #CCDAE6 35%, #FFFFFF 60%);
      -webkit-background-clip: text;
    }
  }

  .bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: $bottom_height;
    background: url('../assets/images/bg-bottom.png') no-repeat;
    background-size: cover;
    z-index: 2;

    .bottom-collapse {
      position: absolute;
      top: 0;
      left: calc(50% - 20px);
      width: 40px;
      height: 25px;
      opacity: 0;
      cursor: pointer;
    }

    .tools {
      position: absolute;
      left: 50%;
      bottom: 80px;
      transform: translateX(-50%);
      z-index: 6;
      display: flex;

      li {
        cursor: pointer;
        width: 113px;
        height: 38px;
        background: url('../assets/images/button-large.png') no-repeat;
        background-size: cover;
        margin: 0 5px;
        text-align: center;

        &:hover {
          filter: brightness(1.1);
        }

        span {
          line-height: 38px;
          font-family: YSBTH;
          font-style: italic;
          font-size: 18px;
          color: #eee;

          &.active {
            color: #ffea01;
          }
        }

      }
    }
  }

  .left,
  .right {
    position: absolute;
    height: 100%;
    z-index: 3;

    .aside-deco {
      position: absolute;
      top: 25px;
      display: block;
      width: 169px;
      height: calc(100% - 40px);
      background: url('../assets/images/aside-handle.png') no-repeat;
      background-size: contain;
      z-index: 5;
    }

    .aside-collapse {
      position: absolute;
      top: calc(50% - 15px);
      width: 25px;
      height: 40px;
      opacity: 0;
      cursor: pointer;
      z-index: 7;
    }

    .aside-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      height: calc(100% - 180px);
      width: calc($panel_width - 50px);
      box-sizing: border-box;
      margin: 130px 0 50px;
      transition: all 0.5s ease;
      z-index: 6;
    }

    .aside-shadow {
      position: absolute;
      width: $panel_width;
      height: 100%;
      transition: all 0.5s ease;
      z-index: 4;
    }
  }

  .left {
    left: 0;

    .aside-shadow {
      left: 0;
      background: url('../assets/images/shadow-panel.png') no-repeat;
      background-size: cover;

      &.is-hide {
        left: -$panel_width;
      }
    }

    .aside-deco {
      left: 0;
    }

    .aside-collapse {
      left: 15px;
    }

    .aside-main {
      left: 50px;
      padding-right: 50px;

      &.is-hide {
        left: calc(-50px - $panel_width);
      }
    }

    .weather {
      position: absolute;
      left: 30px;
      top: 50px;
      color: #99CCFF;
      font-family: Barlow;
      font-weight: 500;
      z-index: 6;
      display: flex;
      align-items: center;

      img {
        width: 65px;
        height: 65px;
      }

      &>div {
        opacity: 0.71;
        width: 150px;

        &>div {
          display: flex;
          align-items: flex-start;
          margin-bottom: 3px;

          .w-type {
            font-size: 14px;
            line-height: 14px;
            color: #99CCFF;
          }

          .w-rh {
            font-size: 10px;
            margin-left: 4px;
          }
        }

        .w-temp {
          font-family: PFlight;
          font-size: 22px;
          color: #99CCFF;
        }
      }
    }
  }

  .right {
    right: 0;

    .aside-shadow {
      right: 0;
      background: url('../assets/images/shadow-panel.png') no-repeat;
      background-size: cover;
      transform: rotateY(180deg);

      &.is-hide {
        right: -$panel_width;
      }
    }

    .aside-deco {
      right: 0;
      transform: rotateY(180deg);
    }

    .aside-collapse {
      right: 15px;
    }

    .aside-main {
      right: 50px;
      padding-left: 50px;

      &.is-hide {
        right: calc(-50px - $panel_width);
      }
    }

    .date-time {
      position: absolute;
      right: 55px;
      top: 60px;
      color: #99CCFF;
      font-family: Barlow;
      font-weight: 500;
      z-index: 6;

      span {
        display: block;
        width: 150px;
        text-align: right;
      }

      .now-date {
        font-size: 14px;
      }

      .now-time {
        font-size: 22px;
      }
    }
  }

  .ue {
    z-index: 1;
  }
}

.title-block {
  width: 100%;
  height: 40px;
  background: url('../assets/images/bg-title.png') no-repeat;
  background-size: cover;
  box-sizing: border-box;
  padding: 13px 0 0 45px;

  span {
    font-family: YSBTH;
    font-size: 22px;
    line-height: 22px;
    color: transparent;
    background: linear-gradient(0deg, #FBFEFF 0%, #A7D3FF 100%);
    -webkit-background-clip: text;
  }
}

.left-main {
  .block-qyxx {
    display: flex;
    justify-content: space-between;

    li {
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        width: 55px;
        height: 55px;
      }

      &>div {
        &>span {
          display: block;
          font-size: 16px;
          color: #FFFFFF;
          line-height: 29px;
          text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
          font-style: italic;
          background: url('../assets/images/textbg-1-1.png') no-repeat;
          background-size: 100% 15px !important;
          background-position-y: 12px !important;

          &.active {
            color: #ffea01;
          }
        }

        &>div {
          margin-top: 5px;
          background: url('../assets/images/textbg-1-2.png') no-repeat;
          background-size: cover !important;
          display: flex;
          align-items: end;
          justify-content: center;

          span:first-child {
            margin-right: 5px;
            font-family: BarlowBold;
            font-size: 26px;
            line-height: 26px;
            color: transparent;
            background: linear-gradient(0deg, rgba(29, 128, 224, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
            -webkit-background-clip: text !important;
          }

          span:last-child {
            font-size: 14px;
            color: #FFFFFF;
            font-style: italic;
          }
        }
      }

      &:nth-child(2) {
        &>div {
          &>span {
            background: url('../assets/images/textbg-2-1.png') no-repeat;
          }

          &>div {
            background: url('../assets/images/textbg-2-2.png') no-repeat;

            &>span:first-child {
              background: linear-gradient(0deg, rgba(224, 224, 29, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
            }
          }
        }
      }

      &:nth-child(3) {
        &>div {
          &>span {
            background: url('../assets/images/textbg-3-1.png') no-repeat;
          }

          &>div {
            background: url('../assets/images/textbg-3-2.png') no-repeat;

            &>span:first-child {
              background: linear-gradient(0deg, rgba(29, 224, 224, 0.64) 0%, rgba(255, 255, 255, 0.64) 100%);
            }
          }
        }
      }
    }
  }

  .block-kygh {
    display: flex;
    justify-content: space-around;
    margin-right: 10px;

    li {
      text-align: center;
      cursor: pointer;

      img {
        width: 110px;
        height: 115px;
      }

      div {
        display: block;
        margin-top: 10px;
        width: 164px;
        height: 39px;
        font-size: 18px;
        color: #FFFFFF;
        line-height: 20px;
        text-shadow: 1px 2px 0px rgba(17, 20, 22, 0.22);
        background: url('../assets/images/textbg-kygh.png') no-repeat;
        background-size: cover;
      }
    }
  }

  .legend {
    width: 247px;
    height: 233px;
    right: -200px;
    bottom: 70px;
    box-sizing: border-box;
    padding: 15px 15px 8px;
    background: url('../assets/images/bg-legend.png') no-repeat;
    background-size: 100% 100%;

    ul.main {
      margin: 22px 15px 0;
      overflow: hidden;

      li {
        height: 50px;
        display: flex;
        align-items: center;

        input {
          margin-right: 10px;
        }

        i {
          display: block;
          width: 11px;
          height: 11px;
          margin-right: 13px;
        }

        span {
          font-size: 18px;
          color: #d9cfc5;
          line-height: 50px;
        }
      }
    }
  }

  .dialog-jld {
    width: 617px;
    height: 388px;
    right: -580px;
    top: -20px;
    box-sizing: border-box;
    padding: 30px;
    background: url('../assets/images/bg-list.png') no-repeat;
    background-size: 100% 100%;
  }

}

.right-main {
  .block-ycyj {
    position: relative;
    height: 145px;
    box-sizing: border-box;
    padding: 20px 35px;
    background: url('../assets/images/bg-ycyj.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;

    img {
      position: absolute;
      top: calc(50% - 30px);
      left: calc(50% - 30px);
      width: 60px;
      height: 60px;
    }

    &>div {
      width: 50%;
      margin-top: 5px;
      text-align: left;

      &:nth-child(2n-1) {
        text-align: right;

        span:last-child {
          transform: translateX(-45px);
        }
      }

      span {
        display: block;

        &:first-child {
          font-weight: 400;
          font-size: 14px;
          color: #839ECB;
        }

        &:last-child {
          transform: translateX(45px);
          font-family: BarlowBold;
          font-size: 18px;
          color: transparent;
          background: linear-gradient(0deg, rgb(132, 163, 214, 1) 0%, rgba(255, 255, 255, 0.7) 100%);
          -webkit-background-clip: text;
        }
      }
    }
  }

  .block-ssfx {
    display: flex;
    justify-content: space-around;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      &>span {
        font-size: 16px;
        color: #99CCFF;
        font-style: italic;
      }

      &>div {
        display: flex;
        align-items: flex-end;
        margin: 10px 0 4px;

        span:first-child {
          padding-right: 8px;
          font-family: BarlowBold;
          font-size: 32px;
          line-height: 32px;
          color: transparent;
          font-style: italic;
          background: linear-gradient(0deg, rgba(255, 195, 45, 1) 0%, rgba(255, 219, 77, 1) 100%);
          -webkit-background-clip: text !important;
        }

        span:last-child {
          font-size: 14px;
          color: #B4C1D8;
          font-style: italic;
        }
      }

      &:last-child {
        &>div>span:first-child {
          background: linear-gradient(0deg, rgba(46, 252, 255, 1) 0%, rgba(77, 254, 255, 1) 100%);
        }
      }
    }
  }

  .dialog-uav {
    width: 617px;
    height: 388px;
    left: -580px;
    top: -20px;
    box-sizing: border-box;
    padding: 30px;
    background: url('../assets/images/bg-list.png') no-repeat;
    background-size: 100% 100%;

    tr.active td {
      color: #ffea01;
    }

    .state-label {
      display: block;
      width: 64px;
      height: 34px;
      line-height: 34px;
      background: url('../assets/images/label-green.png') no-repeat;
      background-size: cover;
      text-align: center;
      color: #eee;
    }
  }

  #chart-sdtj {
    height: 160px;
    width: 100%;
  }
}

ul {
  padding-left: 0;
}
</style>