<script setup name="portraitScreen">

import { ref, onMounted } from 'vue'
import { portrait } from '@/http/apis/portraitScreen'
import { useRoute } from 'vue-router'
import store from '@/store'
import { dictionary } from '@/http/apis/projectCollection/projectCollectionEnter'

const route = useRoute(),
  { statusOptions } =
    store.dictStore.globalDicts || {},
  tabActive = ref(0),
  detailData = ref(),
  statusSituation = ref(),
  getDetail = async () => {
    const res = await portrait(route.query.projectCode)
    detailData.value = res.data
    statusSituation.value = res.data?.projectInfo?.statusSituation.reverse()
  },
  dictionaryList = ref([]),
  isShowBox = ref([false, false, false]),
  dialogVisible = ref(false),
  showDialog = (index) => {
    dialogVisible.value = true
    isShowBox.value.forEach((i, key) => {
      if (key === index) {
        isShowBox.value[key] = true
      } else {
        isShowBox.value[key] = false
      }
    })
    console.log(isShowBox.value)
  }
onMounted(async () => {
  getDetail()
  dictionaryList.value = (await dictionary()).data
  console.log(dictionaryList.value?.filter(i => i.type === 'PROJECT_STATUS'))
})

</script>

<template>
  <div class="portraitScreen">
    <div class="head">
      <img src="@/assets/images/portraitScreen/title.png" class="mx-auto" />
    </div>
    <div class="content">
      <div class="top">
        <p class="back flex items-center" @click="$router.go(-1)">
          <img src="@/assets/images/cockpit/backIcon.png" class="backIcon" />
          <span>返回首页</span>
        </p>
        <!--        <div class="title">项目画像</div>-->
        <div class="center">
          <img src="@/assets/images/portraitScreen/centerImg.png" class="centerBoxImg" />
          <img src="@/assets/images/portraitScreen/rotaBase.png" class="rotaBaseImg" />
          <img src="@/assets/images/portraitScreen/rotaBg.png" class="rotaBgImg" />
          <img src="@/assets/images/portraitScreen/bigBottom.png" class="bigBottomImg" />
        </div>
        <div class="box3">
          <div class="tit">
            {{ detailData?.projectInfo?.projectName }}
          </div>
          <div class="main">
            <div class="info flex flex-wrap">
              <div class="info-item w-[100%] flex items-start">
                <span class="label flex items-center flex-shrink-0">系统定位：</span>
                <span class="flex-1 ellipsis" :title="detailData?.projectInfo?.systemPosition||detailData?.projectInfo?.projectIntroduction">{{ detailData?.projectInfo?.systemPosition||detailData?.projectInfo?.projectIntroduction||'-' }}</span>
              </div>
              <div class="flex w-full">
                <div class="flex-1">
                  <div class="info-item w-[100%] flex items-start">
                    <span class="label flex items-center flex-shrink-0">投资金额：</span>
                    <span class="flex-1">{{ detailData?.projectInfo?.approvalAmount||'-' }}万元</span>
                  </div>
                  <div class="w-[100%] flex justify-between">
                    <div class="info-item flex">
                      <span class="label flex items-center flex-shrink-0">项目状态：</span>
                      <span v-if="detailData?.projectInfo?.status*1>100">{{ statusOptions[detailData?.projectInfo?.status*1]?.name||'-' }}</span>
                      <span v-else>{{ dictionaryList?.filter(i => i.type === 'PROJECT_STATUS').find(i=>i.value===detailData?.projectInfo?.status)?.label ||'-' }}</span>
                    </div>
                  </div>
                </div>
                <div class="flex-1">
                  <div class="w-[100%] flex justify-between">
                    <div class="info-item flex">
                      <span class="label flex items-center flex-shrink-0">项目状态：</span>
                      <span v-if="detailData?.projectInfo?.status*1>100">{{ statusOptions[detailData?.projectInfo?.status*1]?.name||'-' }}</span>
                      <span v-else>{{ dictionaryList?.filter(i => i.type === 'PROJECT_STATUS').find(i=>i.value===detailData?.projectInfo?.status)?.label ||'-' }}</span>
                    </div>
                  </div>
                  <div class="info-item w-[100%] flex items-start">
                    <span class="label flex items-center flex-shrink-0">部门：</span>
                    <span class="flex-1">{{ detailData?.projectInfo?.buildOrgName||'-' }}</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="boxCircle1 flex flex-col items-center justify-center cursor-pointer z-10" @click="showDialog(0)">
          <img src="@/assets/images/portraitScreen/smallCir.png" class="smallCirImg" />
          <img src="@/assets/images/portraitScreen/bigCir.png" class="bigCirImg" />
          <p>项目</p>
          <p>简介</p>
        </div>
        <div class="boxCircle2 flex flex-col items-center justify-center cursor-pointer z-10" @click="showDialog(1)">
          <img src="@/assets/images/portraitScreen/smallCir.png" class="smallCirImg" />
          <img src="@/assets/images/portraitScreen/bigCir.png" class="bigCirImg" />
          <p>特征</p>
          <p>标签</p>
        </div>
        <div class="boxCircle3 flex flex-col items-center justify-center cursor-pointer z-10" @click="showDialog(2)">
          <img src="@/assets/images/portraitScreen/smallCir.png" class="smallCirImg" />
          <img src="@/assets/images/portraitScreen/bigCir.png" class="bigCirImg" />
          <p>产出</p>
          <p>标签</p>
        </div>
      </div>
    </div>
    <div class="bgWave">
      <img src="@/assets/images/portraitScreen/bgWave.png" class="img" />
    </div>
    <div v-if="dialogVisible" class="customMask">
      <div class="customDialog customDialog1">
        <svg-icon name="dialogClose" class="closeIcon" @click="dialogVisible=false" />
        <div v-if="isShowBox[1]" class="box1">
          <div class="mid">
          </div>
          <div v-for="(item,index) in detailData?.projectFeatures?.slice(0, 14)" :key="index" :class="`div${index+1}`">
            <p class="tag">{{ item.name }}</p>
          </div>
          <div v-if="detailData?.projectFeatures?.length>14" class="div15">
            <p class="tag">......</p>
          </div>
        </div>
        <div v-if="isShowBox[0]" class="box2">
          <div class="main">
            {{ detailData?.projectInfo?.projectIntroduction }}
          </div>
        </div>
        <div v-if="isShowBox[2]" class="box5">
          <div class="main">
            <div v-if="false" class="tabBox flex justify-center">
              <div class="tab flex">
                <div :class="['tabItem',tabActive===0?'active':'']" @click="tabActive =0">项目体征</div>
                <div :class="['tabItem',tabActive===1?'active':'']" @click="tabActive = 1">云值守</div>
              </div>
            </div>
            <div class="tabContent">
              <div class="tableTit flex items-center">
                <img src="@/assets/images/portraitScreen/tabContentIcon.png" alt="" />
                <span>云资源使用情况</span>
              </div>
              <table>
                <tr>
                  <td class="label">云资源实例使用数</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.cloudResourceUsage.instancesNum }}</td>
                  <td class="label">云资源利用率</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.cloudResourceUsage.utilizationRate }}</td>
                </tr>
              </table>

              <div class="tableTit flex items-center">
                <img src="@/assets/images/portraitScreen/tabContentIcon.png" alt="" />
                <span>数据使用情况</span>
              </div>
              <table>
                <tr>
                  <td class="label">数据共享申请量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.dataUsage.sharedApplicationVolume }}</td>
                  <td class="label">数据共享使用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.dataUsage.sharedUsage }}</td>
                </tr>
                <tr>
                  <td class="label">数据共享接口调用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.dataUsage.sharedInterfaceCallVolume }}</td>
                  <td class="label">协同接口调用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.dataUsage.collaborativeInterfaceCallVolume }}</td>
                </tr>
              </table>

              <div class="tableTit flex items-center">
                <img src="@/assets/images/portraitScreen/tabContentIcon.png" alt="" />
                <span>组件使用情况</span>
              </div>
              <table>
                <tr>
                  <td class="label">组件申请量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.componentUsage.applicationVolume }}</td>
                  <td class="label">组件使用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.componentUsage.useVolume }}</td>
                </tr>
                <tr>
                  <td class="label">组件调用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.componentUsage.unifyCallolVolume||'暂无' }}</td>
                  <td class="label">统一组件调用量</td>
                  <td class="value">暂无</td>
                </tr>
              </table>

              <div class="tableTit flex items-center">
                <img src="@/assets/images/portraitScreen/tabContentIcon.png" alt="" />
                <span>产生数据</span>
              </div>
              <table>
                <tr>
                  <td class="label">产生数据量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.generateData.volume||'暂无' }}</td>
                  <td class="label">产生数据共享申请量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.generateData.sharedApplicationVolume||'暂无' }}</td>
                </tr>
                <tr>
                  <td class="label">产生数据共享使用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.generateData.sharedUseVolume||'暂无' }}</td>
                  <td class="label">产生数据审批通过率</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.generateData.approvalPassRate||'暂无' }}</td>
                </tr>
                <tr>
                  <td class="label">数据接口被调用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.generateData.dataInterfaceCallsVolume||'暂无' }}</td>
                  <td class="label">协同接口被调用量</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.generateData.collaborativeInterfaceCallVolume||'暂无' }}</td>
                </tr>
              </table>

              <div class="tableTit flex items-center">
                <img src="@/assets/images/portraitScreen/tabContentIcon.png" alt="" />
                <span>试运行报告</span>
              </div>
              <table>
                <tr>
                  <td class="label">试运行报告通过率</td>
                  <td class="value">{{ detailData?.projectOutput?.['项目体征']?.operationReport.passRate||'暂无' }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less">
@screenW:1920px;
@screenH:1080px;
.px2vw(@name, @px) {
    @{name}: (@px / @screenW) * 100vw;
}
.px2vh(@name, @px) {
    @{name}: (@px / @screenH) * 100vh;
}

.px2font(@px) {
  font-size: (@px / @screenW) * 100vw;
}
.scale-up-br {
  -webkit-animation: scale-up-br 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-br 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-br {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
}
@keyframes scale-up-br {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
  }
}
.scale-up-tr {
  -webkit-animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-tr 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-tr {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}
@keyframes scale-up-tr {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}
.scale-up-tl {
  -webkit-animation: scale-up-tl 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  animation: scale-up-tl 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes scale-up-tl {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
@keyframes scale-up-tl {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
@-webkit-keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}
@keyframes shake-vertical {
  0%,
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10%,
  30%,
  50%,
  70% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  20%,
  40%,
  60% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  80% {
    -webkit-transform: translateY(6.4px);
    transform: translateY(6.4px);
  }
  90% {
    -webkit-transform: translateY(-6.4px);
    transform: translateY(-6.4px);
  }
}
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-center {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.portraitScreen{
  width: 100%;
  height: 100%;
  background-image: url('@/assets/images/portraitScreen/bg.jpg');
  background-size: 100% 100%;
  padding: 11px 24px 45px;
  position: relative;
  color: #ffffff;
  .head{
    img{
      .px2vw(width,835);
      .px2vh(height,51);
    }
  }
  .content{
    position: relative;
    z-index: 99;
    height: 100%;
    .top{
      .backIcon{
        .px2vw(width,28);
        .px2vh(height,28);
        .px2vw(margin-right,9);
      }
      .back{
        cursor: pointer;
        background: url('@/assets/images/cockpit/regionTextBg.png');
        background-size: 100% 100%;
        .px2vw(width,166);
        .px2vw(padding-left,3);
        .px2vw(padding-right,30);
        .px2vh(padding-top,6);
        .px2vh(padding-bottom,7);
      }
    }
    .box3{
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      .px2vh(bottom,38);
      .px2vw(width,580);
      border-radius: 10px;
      overflow: hidden;
      .tit{
        text-align: center;
        color: #fff;
        .px2font(24);
        .px2vh(padding-top,13);
        .px2vh(padding-bottom,13);
        background-color: rgba(7, 56, 151, 0.8);
      }
      .main {
        width: 100%;
        //.px2vh(max-height,200);
        //overflow-y: auto;
        background-color: rgba(7, 56, 151, 0.4);
        .px2vh(padding-top,13);
        &::-webkit-scrollbar {
          .px2vw(width,10);
        }

        &::-webkit-scrollbar-track {
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background-color: #0E4579;
          border-radius: 4px;
        }
        .info {
          .info-item {
            .px2vh(padding-left,13);
            .px2vh(padding-right,13);
            .px2vh(margin-bottom,8);
            .label {
              &::before {
                content: '';
                .px2vw(width,8);
                .px2vh(height,8);
                .px2vw(margin-right,10);
                border-radius: 50%;
                background-color: #fff;
              }
            }
          }
        }
      }
    }
    .title{
      background-image: url('@/assets/images/portraitScreen/titleBg.png');
      background-size: 100% 100%;
      position: absolute;
      z-index: 5;
      left: 50%;
      transform: translateX(-50%);
      .px2vh(bottom,316);
      .px2vw(width,172);
      .px2vh(height,57);
      display: flex;
      align-items: center;
      justify-content: center;
      .px2font(24)
    }
    .center{
      position: relative;
      width: 100%;
      //left: 50%;
      //transform: translateX(-50%);
      //.px2vh(top,298);
      .px2vh(margin-top,208);
      //background-image: url('@/assets/images/portraitScreen/centerImg.png');
      //background-size: 100% 100%;
      .line1{
        position: absolute;
        .px2vw(width,201);
        .px2vh(height,235);
        .px2vw(left,-75);
        .px2vh(top,-129);
      }
      .line2{
        position: absolute;
        .px2vw(width,211);
        .px2vh(height,225);
        .px2vw(right,-75);
        .px2vh(top,-139);
      }
      .line3{
        position: absolute;
        .px2vw(width,195);
        .px2vh(height,114);
        .px2vw(left,-110);
        .px2vh(top,143);
      }
      .line4{
        position: absolute;
        .px2vw(width,653);
        .px2vh(height,224);
        .px2vw(left,371);
        .px2vh(top,205);
      }
      .centerBoxImg{
        position: relative;
        z-index: 3;
        margin: 0 auto;
        .px2vw(width,461);
        .px2vh(height,368);
        -webkit-animation: shake-vertical 10.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
        animation: shake-vertical 10.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
      }
      .rotaBaseImg{
        position: absolute;
        z-index: 2;
        .px2vw(width,738);
        left: 50%;
        transform: translateX(-50%);
        .px2vh(bottom,-140);
      }
      .rotaBgImg{
        position: absolute;
        top: 0;
        z-index: 3;
        left: 40%;
        .px2vw(width,380);
        -webkit-animation: rotate-center 4s linear infinite both;
        animation: rotate-center 4s linear infinite both;
      }
      .bigBottomImg{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        .px2vw(width,338);
        .px2vh(bottom,-90);
      }
    }
    .boxCircle1{
      .px2vw(width,612);
      .px2vw(height,612);
      position: absolute;
      .px2vw(left,34);
      .px2vh(bottom,176);
      //background-image: url('@/assets/images/portraitScreen/boxCircle1.png');
      //background-size: contain;
      //background-repeat: no-repeat;
      //background-position: center;
      .px2font(51);
      .smallCirImg{
        .px2vw(width,248);
        position: absolute;
        z-index: 1;
        -webkit-animation: rotate-center 4s linear infinite both;
        animation: rotate-center 4s linear infinite both;
      }
      .bigCirImg{
        .px2vw(width,354);
        position: absolute;
        z-index: 1;
        -webkit-animation: rotate-center 4s linear infinite reverse both;
        animation: rotate-center 4s linear infinite reverse both;
      }
      p{
        position: relative;
        z-index: 2;
      }
    }
    .boxCircle2{
      .px2vw(width,433);
      .px2vw(height,434);
      position: absolute;
      .px2vw(right,218);
      .px2vh(top,61);
      .px2font(32);
      .smallCirImg{
        .px2vw(width,188);
        position: absolute;
        z-index: 1;
        -webkit-animation: rotate-center 4s linear infinite both;
        animation: rotate-center 4s linear infinite both;
      }
      .bigCirImg{
        .px2vw(width,254);
        position: absolute;
        z-index: 1;
        -webkit-animation: rotate-center 4s linear infinite reverse both;
        animation: rotate-center 4s linear infinite reverse both;
      }
      p{
        position: relative;
        z-index: 2;
      }
    }
    .boxCircle3{
      .px2vw(width,535);
      .px2vw(height,536);
      position: absolute;
      .px2vw(right,0);
      .px2vh(bottom,49);
      .px2font(51);
      .smallCirImg{
        .px2vw(width,248);
        position: absolute;
        z-index: 1;
        -webkit-animation: rotate-center 4s linear infinite both;
        animation: rotate-center 4s linear infinite both;
      }
      .bigCirImg{
        .px2vw(width,354);
        position: absolute;
        z-index: 1;
        -webkit-animation: rotate-center 4s linear infinite reverse both;
        animation: rotate-center 4s linear infinite reverse both;
      }
      p{
        position: relative;
        z-index: 2;
      }
    }
  }
  .bgWave{
    position: absolute;
    top:0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
   .img{
     -webkit-animation: scale-up-center 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
     animation: scale-up-center 5s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite alternate both;
   }
  }
  //自定义弹窗
  .customMask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;

    .customDialog {
      width: 78%;
      height: 77%;
      background: linear-gradient(135deg, rgba(0, 33, 135, 0.55) 0%, rgba(0, 17, 68, 0.87) 51%, rgba(0, 33, 135, 0.55) 100%), linear-gradient(138deg, rgba(0, 41, 102, 0.5) 0%, rgba(0, 0, 0, 0.42) 100%), linear-gradient(180deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%), linear-gradient(180deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%), linear-gradient(176deg, rgba(43, 134, 255, 0.5) 0%, rgba(9, 42, 79, 0) 100%);
      border-radius: 10px;
      border: 1px solid #2D99FF;
      position: absolute;
      left: 50%;
      top: 10%;
      transform: translateX(-50%);
      padding: 3.5% 4% 10px;
      &.customDialog1{
        width: 50%;
        height: 50%;
        overflow-y: auto;
        &::-webkit-scrollbar-thumb{
          background-color: #2D99FF;
          border-radius: 3px;
          width: 6px;
        }
      }
      .tit {
        .px2vw(width, 610);
        .px2vh(height, 46);
        background: url("@/assets/images/cockpit/dialogTitBg.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        .px2vh(margin-bottom, 30);
      }

      .customTable {
        background: none;
        max-height: 480px;
        overflow-y:auto ;
        thead {
          tr {
            background: none;
          }

          th {
            background: rgba(26, 90, 160, 0.8);
            box-shadow: 0px 1px 0px 0px rgba(45, 153, 255, 1);
            //box-shadow: 0px 1px 0px 0px rgba(45,153,255,1);
            color: #ffffff;
            border: none;

            &.is-leaf {
              border: none;
            }

            &.el-table-fixed-column--right {
              background: rgba(26, 90, 160, 0.8);
            }

            .px2font(16)
          }
        }

        .el-table__inner-wrapper::before {
          background: none;
        }

        .el-table-fixed-column--right {
          background: none;
        }

        .el-table__row {
          color: #ffffff;
          background: rgba(11, 51, 95, 0);

          &.el-table__row--striped {
            background: rgba(11, 51, 95, 0.55);
          }

          .el-table__cell {
            background: none;
            color: #ffffff;
            border: 0;
            .px2font(16);
          }
        }

        .btn {
          background: linear-gradient(180deg, rgba(2, 197, 209, 0.8) 0%, rgba(45, 153, 255, 0.5) 100%);
          border-radius: 5px;
          border: 1px solid #2D99FF;
          display: inline-block;
          .px2vw(width, 118);
          .px2vh(height, 28);
          .px2font(16);
          justify-content: center;
          display: flex;
          align-items: center;
          line-height: 1.5;

          .icon {
            .px2font(24)
          }
        }
      }

      .el-pagination {
        .px2vh(margin-top, 30);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);

        button {
          background: none;
          border:1px solid #2D99FF;
          color: #2D99FF;
        }

        .el-pager {
          .number,.more{
            background: none;
            border:1px solid #2D99FF;
            color: #2D99FF;
            &.is-active{
              background: #2657C7;
              border-radius: 2px;
              color:#ffffff;
              border:0;
            }
          }
        }
      }

      .closeIcon {
        position: absolute;
        .px2vw(right, 30);
        .px2vw(top, 30);
        .px2font(28);
        cursor: pointer;
      }
      .box1{
        width: 100%;
        height: 100%;
        .px2vh(padding-top,60);
        .px2vh(padding-bottom,19);
        .px2vw(padding-left,19);
        .px2vw(padding-right,12);
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(6, 1fr);
        .px2vw(grid-row-gap,5);
        .px2vh(grid-column-gap,5);
        .px2font(20);
        .tag{
          background-image: url('@/assets/images/portraitScreen/textBg.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          background-position: center;
          .px2vw(padding-left,34);
          .px2vw(padding-right,34);
          position: absolute;
        }
        //.div1 { grid-area: 1 / 1 / 2 / 2; }
        //.div2 { grid-area: 2 / 2 / 3 / 3; }
        //.div3 { grid-area: 1 / 3 / 2 / 4; }
        //.div4 { grid-area: 2 / 4 / 3 / 5; }
        //.div5 { grid-area: 1 / 5 / 2 / 6; }
        //.div6 { grid-area: 3 / 1 / 4 / 2; }
        //.div7 { grid-area: 4 / 2 / 5 / 3; }
        //.div8 { grid-area: 3 / 3 / 4 / 4; }
        //.div9 { grid-area: 4 / 4 / 5 / 5; }
        //.div10 { grid-area: 3 / 5 / 4 / 6; }
        //.div11 { grid-area: 5 / 1 / 6 / 2; }
        //.div12 { grid-area: 5 / 3 / 6 / 4; }
        //.div13 { grid-area: 6 / 4 / 7 / 5; }
        //.div14 { grid-area: 5 / 5 / 6 / 6; }
        //.div15 { grid-area: 7 / 1 / 8 / 2; }
        //.div16 { grid-area: 6 / 2 / 7 / 3; }
        //.div17 { grid-area: 7 / 3 / 8 / 4; }
        //.div18 { grid-area: 8 / 2 / 9 / 3; }
        //.div19 { grid-area: 8 / 4 / 9 / 5; }
        //.div20 { grid-area: 7 / 5 / 8 / 6; }
        .div1 { grid-area: 1 / 1 / 2 / 2; }
        .div2 { grid-area: 2 / 2 / 3 / 3; }
        .div3 { grid-area: 1 / 3 / 2 / 4; }
        .div4 { grid-area: 2 / 4 / 3 / 5; }
        .div5 { grid-area: 1 / 5 / 2 / 6; }
        .div6 { grid-area: 3 / 1 / 4 / 2; }
        .div7 { grid-area: 3 / 3 / 4 / 4; }
        .div8 { grid-area: 4 / 4 / 5 / 5; }
        .div9 { grid-area: 3 / 5 / 4 / 6; }
        .div10 { grid-area: 4 / 2 / 5 / 3; }
        .div11 { grid-area: 5 / 1 / 6 / 2; }
        .div12 { grid-area: 5 / 3 / 6 / 4; }
        .div13 { grid-area: 5 / 5 / 6 / 6; }
        .div14 { grid-area: 6 / 2 / 7 / 3; }
        .div15 { grid-area: 6 / 4 / 7 / 5; }
        .mid{
          .px2vw(width,355);
          .px2vh(height,355);
          background-image: url('@/assets/images/portraitScreen/box1Cricle.png');
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
        }
      }
      .box5{
        width: 100%;
        height: 100%;
        .px2vh(padding-bottom,28);
        .px2vw(padding-left,20);
        .px2vw(padding-right,20);
        .px2font(16);
        .main {
          .px2vh(padding-top,30);
          .tabItem {
            .px2vw(width,115);
            .px2vh(padding-top,12);
            .px2vh(padding-bottom,12);
            border: 1px solid #2D99FF;
            text-align: center;
            .px2font(16);
            cursor: pointer;
            color: #2D99FF;
            &:first-child {
              border-right: none;
              border-radius: 5px 0px 0px 5px;
            }
            &:last-child {
              border-radius: 0px 5px 5px 0px;
            }
            &.active {
              background: #ECFEFF linear-gradient(180deg, #2D99FF 0%, rgba(70,230,120,0.67) 100%);
              box-shadow: 0px 0px 35px 5px rgba(0,240,255,0.47);
              color: #021330;
              font-weight: bold;
            }
          }
          .tabContent {
            .px2vh(padding-top,15);
            .tableTit {
              .px2vh(margin-bottom,10);
              color: #2D99FF;
              .px2font(20);
              font-weight: bold;
              img {
                .px2vw(width,39);
                .px2vh(height,26);
                .px2vh(margin-top,6);
              }
            }
            table {
              width: 100%;
              border-collapse: collapse;
              &:not(:last-child){
                .px2vh(margin-bottom,25);
              }
              td {
                background-repeat: no-repeat;
                background-position: center;
                background-size: 100% 100%;
                .px2vw(padding-left,12);
                .px2vh(padding-top,12);
                .px2vh(padding-bottom,12);
              }
            }

            .label {
              background-image: url('@/assets/images/portraitScreen/tabContentLabelBg.png');
              .px2vw(width,161);
              color: #2D99FF;
            }
            .value {
              background-image: url('@/assets/images/portraitScreen/tabContentValueBg.png');
            }
          }
        }
      }
    }
  }
  .ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
</style>
