vent-forewarn-micro/src/views/vent/fire/fireHome/index.vue

<template>
  <div class="fireHome">
    <!-- 模型区域 -->
    <div class="main-container">
      <transition>
        <div class="left-area" v-if="isShow">
          <!-- 左上区域 -->
          <div class="left-t">
            <div class="tcontent-area">
              <div class="tcontent-l">
                <div>全矿井</div>
                <div>监测区域</div>
              </div>
              <div class="tcontent-c">
                <div
                  style="margin-bottom: 15px;color: #009BFF; font-size: 24px;font-weight:bolder;letter-spacing:10px;">
                  低风险</div>
                <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 容易自燃</div>
              </div>
              <div class="tcontent-r">火灾风险</div>
            </div>
          </div>
          <!-- 左中区域 -->
          <div class="left-c">
            <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '524px' }" :bgSize="'large'">
              <workJc :heightT="'25%'" :heightB="'75%'" :echartData="echartDataWork" :cardData="cardData" />
            </DanelBd>
          </div>
          <!-- 左下区域 -->
          <div class="left-b">
            <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '222px' }" commonTitle="selected"
              :selectValue="areaCodeMb" :selectList="selectListMb" @change-select="changeSelect" :bgSize="'middle'">
              <emptyJc :emptyData="emptyData" />
            </DanelBd>
          </div>
          <!-- 左底部区域 -->
          <!-- <div class="left-f">
            <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs" />
          </div> -->
        </div>
      </transition>

      <div :class="isShow ? 'center-area' : 'center-area1'">
        <div :class="isShow ? 'center-t' : 'center-t1'">
          <div class="center-scalc" @click="getScalc">
            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
            <div :class="toggleOpen ? 'scalc-line1' : 'scalc-line'"></div>
            <div :class="toggleOpen ? 'scalc-btn1' : 'scalc-btn'" @click="getScalc1">
              <ExpandOutlined class="scalc-icon" />
            </div>
            <div :class="toggleOpen ? 'scalc-btn2' : 'scalc-btn'">
              <InfoCircleOutlined class="scalc-icon" />
            </div>
          </div>
          <!-- <iframe src="http://172.16.253.23:91/valkyrja/?type=tf" width="100%" height="100%" frameborder="0"></iframe> -->
          <iframe src="http://82.157.13.146:18224/valkyrja/" width="100%" height="100%" frameborder="0"></iframe>
        </div>
        <transition>
          <div class="center-b" v-if="isShow">
            <DanelBd :moduleName="'工作面束管监测｜工作面光纤监测'" :selectValue="pointCode" :moduleSelect="moduleSelect"
              :contentStyle="{ contentH: '222px' }" commonTitle="selected" :selectList="selectList"
              @change-select="changeSelect" :bgSize="''">
              <fiberBunbleJc :bunbleData="bunbleData" />
            </DanelBd>
          </div>
        </transition>
      </div>

      <transition>
        <div class="right-area" v-if="isShow">
          <!-- 右上区域 -->
          <div class="right-t">
            <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }" :bgSize="'small'">
              <systemJc />
            </DanelBd>
          </div>
          <!-- 右中区域 -->
          <div class="right-c">
            <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '228px' }" commonTitle="selected"
              :selectList="selectListDs" :selectValue="dsCode" @change-select="changeSelect" :bgSize="'middle'">
              <outFireJc :outFireData="outFireData" />
            </DanelBd>
          </div>
          <!-- 右下区域 -->
          <div class="right-b">
            <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '228px' }" commonTitle="" :bgSize="'middle'">
              <!-- <substationJc :echartDatas="echartDatas" /> -->
              <substationJc :substationData="substationData"/>
            </DanelBd>
          </div>
          <!-- 右底部区域 -->
          <div class="right-f">
            <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '222px' }" commonTitle="selected"
              :selectList="selectListAq" :selectValue="pointCodeAq" @change-select="changeSelect" :bgSize="'middle'">
              <safetyJc :safetyHead="safetyHead" :safetyList="safetyList" />
            </DanelBd>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref, reactive, onMounted, onUnmounted } from 'vue';
import { ExpandOutlined, InfoCircleOutlined } from '@ant-design/icons-vue';
import DanelBd from '../../common/danelBd.vue';
import workJc from './components/workJc.vue';
import emptyJc from './components/emptyJc.vue';
import fiberBunbleJc from './components/fiberBunbleJc.vue';
import systemJc from './components/systemJc.vue';
import outFireJc from './components/outFireJc.vue';
import substationJc from './components/substationJc.vue';
import safetyJc from './components/safetyJc.vue';
import {
  getFireAreaInfo,
  getMbRealData,
  getSgjcPointInfo,
  getSgjcRealDataByPointCode,
  getInfosByAreaCode,
  getGxcwHistoryDataByPointCode,
  getZcHfWd,
  getHeadingFace,
  getMainTrafficYw,
  getDsWd,
  getFireWarningCntByType
} from './firehome.api';

//GIs按钮切换显示与隐藏
let toggleOpen = ref(false)
let moduleSelect = reactive([
  { label: '工作面束管监测' },
  // { label: '工作面光纤监测' },
]);

//是否显示左侧区域和右侧区域
let isShow = ref(true);

let areaCode = ref('');
let pointCode = ref('');
let areaCodeMb = ref('');
let dsCode = ref('');
let areaCodeBd = ref('');
let pointCodeBd = ref('');
let pointCodeAq = ref('one');

//工作面风险监测数据
let echartDataWork = ref<any[]>([]);
let cardData = reactive<any[]>([]);
let selectList = reactive<any[]>([]);
let bunbleData = reactive<any[]>([]);

//密闭采空区数据
let selectListMb = reactive<any[]>([]);
let emptyData = reactive<any>([]);

//带式输送机防灭火监控系统
let selectListDs = reactive<any[]>([]);
let outFireData = reactive<any[]>([]);

//变电硐室
let selectListBd = reactive<any[]>([]);
let echartDatas = reactive({
  xData: [],
  yData: [],
  yData1: [],
});
let substationData = reactive<any[]>([])


//安全监控
let selectListAq = reactive<any[]>([
  { label: '综采工作面传感器监测', value: 'one' },
  { label: '掘进工作面传感器监测', value: 'two' },
  { label: '主运输系统传感器监测', value: 'three' },
  { label: '机电硐室及配电点传感器监测', value: 'four' },
]);
let safetyHead = reactive<any[]>([]);
let safetyList = reactive<any[]>([]);

//隐藏和显示左右侧区域
function getScalc() {
  toggleOpen.value = !toggleOpen.value

}
function getScalc1() {
  isShow.value = !isShow.value;
}

// https获取监测数据
let timer: null | NodeJS.Timeout = null;
function getMonitor() {
  timer = setTimeout(async () => {
    //工作面
    await getFireWarningCntByTypeList();
    await getFireAreaInfoList();
    //密闭
    await getFireAreaInfoListMb();
    //带式
    await getFireAreaInfoListDs();
    //变电硐室
    await getFireAreaInfoListBd();
    //安全监控
    await getTableList();
    if (timer) {
      timer = null;
    }
    getMonitor();
  }, 5000);
}

//下拉选项切换
function changeSelect(data) {
  switch (data.label) {
    case '密闭采空区监测系统':
      areaCodeMb.value = data.value;
      getMbRealDataList();
      break;
    case '工作面束管监测':
      pointCode.value = data.value;
      getSgjcRealDataByPointCodeList();
      break;
    case '带式输送机防灭火监控系统':
      dsCode.value = data.value;
      getFireAreaInfoListDs();
      break;
    case '变电硐室防灭火监控系统':
      pointCodeBd.value = data.value;
      getGxcwHistoryDataByPointCodeList();
      break;
    case '安全监控系统':
      pointCodeAq.value = data.value;
      getTableList();
      break;
  }
}
//获取工作面风险监测图表数据
async function getFireWarningCntByTypeList() {
  let res = await getFireWarningCntByType({ areaType: 2 })
  if (res.length != 0) {
    echartDataWork.value = res
  }
}
//获取工作面风险监测数据
async function getFireAreaInfoList() {
  let res = await getFireAreaInfo({ fireCauseType: 2 });
  if (res.length != 0) {
    cardData.length = 0;
    let data = res.filter((v) => v.areaType == 2);
    data.forEach((el) => {
      cardData.push({
        title: '风险',
        val:
          el.warningLevel == 1
            ? '低'
            : el.warningLevel == 2
              ? '中'
              : el.warningLevel == 3
                ? '较大'
                : el.warningLevel == 4
                  ? '重大'
                  : '--',
        label: el.areaName,
        title1: '温度最大值',
        val1: el.infoTypeTwo.maxTemperature,
      });
    });
    // areaCode.value = data[0].areaCode;
    areaCode.value = data.filter(m=>m.displayStatus==1)[0].areaCode;
    //工作面束管监测
    getSgjcPointInfoList();
  }
}

//获取密闭下拉列表
async function getFireAreaInfoListMb() {
  let res = await getFireAreaInfo({ fireCauseType: 2 });
  if (res.length != 0) {
    selectListMb.length = 0;
    let dataMb = res.filter((m) => m.areaType == 1);
    if (dataMb.length != 0) {
      dataMb.forEach((m) => {
        selectListMb.push({ label: m.areaName, value: m.areaCode });
      });
      areaCodeMb.value = areaCodeMb.value ? areaCodeMb.value : selectListMb[0]['value'];
      //获取密闭监测实时信息
      getMbRealDataList();
    }
  }
}
//获取密闭监测实时信息
async function getMbRealDataList() {
  let res = await getMbRealData({ areaCode: areaCodeMb.value });
  emptyData.length = 0;
  res.forEach((el) => {
    emptyData.push({ label: el.name, val: el.currentValue, unit: el.unit });
  });
}

//工作面束管监测
async function getSgjcPointInfoList() {
  let res = await getSgjcPointInfo({ areaCode: areaCode.value });
  if (res.length != 0) {
    selectList.length = 0;
    res.forEach((el) => {
      selectList.push({ label: el.pointName, value: el.pointCode });
    });
    pointCode.value = pointCode.value ? pointCode.value : selectList[0]['value'];
    //获取工作面束管测点实时数据
    getSgjcRealDataByPointCodeList();
  }
}
//获取工作面束管测点实时数据
async function getSgjcRealDataByPointCodeList() {
  let res = await getSgjcRealDataByPointCode({ pointCode: pointCode.value });
  if (res.length != 0) {
    bunbleData.length = 0;
    res.forEach((el) => {
      bunbleData.push({
        type: el.name,
        label: '最大浓度',
        val: el.currentValue,
        label1: '位置',
        val1: el.position,
        label2: '时间',
        val2: el.time,
        unit: el.unit,
      });
    });
  }
}

//带式输送机防灭火监控系统
async function getFireAreaInfoListDs() {
  const res = await getFireAreaInfo({});
  if (res.length != 0) {
    selectListDs.length = 0;
    outFireData.length = 0;
    substationData.length = 0
    let dataDs = res.filter((m) => m.areaType == 4);
    dataDs.forEach((el) => {
      selectListDs.push({ label: el.areaName, value: el.areaName });
    });

    dsCode.value = dsCode.value ? dsCode.value : selectListDs[0].value;
    let dataName = dataDs.filter((v) => v.areaName == dsCode.value)[0];
    //带式输送机
    outFireData.push(
      { title: '光纤预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
      {
        title: '一氧化碳预警',
        val: dataName.infoTypeTwo.returnAirCornerCO,
        dw: 'ppm',
        label: '最高浓度',
      },
      // { title: '烟雾预警', val: dataName.infoTypeTwo.hazard, dw: '', label: '状态' },
      { title: '烟雾预警', val: '无烟雾', dw: '', label: '状态' },
      { title: '火焰预警', val: '无火焰', dw: '', label: '状态' },
      { title: '喷淋阀门', val: '关闭', dw: '', label: '状态' },
    );
    //变电硐室
    substationData.push(
      // { title: '光纤预警', val: dataName.infoTypeTwo.maxTemperature, dw: '℃', label: '最高温度' },
      // {
      //   title: '一氧化碳预警',
      //   val: dataName.infoTypeTwo.returnAirCornerCO,
      //   dw: 'ppm',
      //   label: '最高浓度',
      // },
      { title: '烟雾预警', val: 10, dw: '', label: '数量' },
      { title: '火焰预警', val: 10, dw: '', label: '数量' },
      { title: '电磁阀', val: 10, dw: '', label: '数量' },
    )

  }
}

//变电硐室防灭火监控系统
async function getFireAreaInfoListBd() {
  const res = await getFireAreaInfo({});
  if (res.length != 0) {
    let dataBd = res.filter((m) => m.areaType == 5);
    areaCodeBd.value = dataBd[0].areaCode;
    //获取光纤条数及测点编号
    getInfosByAreaCodeList();
  }
}
//获取光纤条数及测点编号
async function getInfosByAreaCodeList() {
  let res = await getInfosByAreaCode({ areaCode: areaCodeBd.value });
  if (res.length != 0) {
    selectListBd.length = 0;
    res.forEach((el) => {
      selectListBd.push({
        label: el.pointName,
        value: el.pointCode,
      });
    });
    pointCodeBd.value = pointCodeBd.value ? pointCodeBd.value : selectListBd[0].value;
    //获取光纤测温图表数据
    getGxcwHistoryDataByPointCodeList();
  }
}

//获取光纤测温图表数据
async function getGxcwHistoryDataByPointCodeList() {
  let res = await getGxcwHistoryDataByPointCode({ pointCode: pointCodeBd.value });
  echartDatas.xData.length = 0;
  echartDatas.yData.length = 0;
  echartDatas.yData1.length = 0;
  res.time.forEach((el) => {
    echartDatas.xData.push(el);
  });
  res.maxValue.forEach((el) => {
    echartDatas.yData.push(el);
  });
  res.minValue.forEach((el) => {
    echartDatas.yData1.push(el);
  });
}

//获取安全监控列表数据
function getTableList() {
  switch (pointCodeAq.value) {
    case 'one':
      getZcHfWdList();
      break;
    case 'two':
      getHeadingFaceList();
      break;
    case 'three':
      getMainTrafficYwList();
      break;
    case 'four':
      getDsWdList();
      break;
    default:
      getZcHfWdList();
      break;
  }
}
//获取综采工作面传感器监测数据
async function getZcHfWdList() {
  let res = await getZcHfWd();
  safetyHead.length = 0;
  safetyList.length = 0;
  safetyHead.push(
    { label: '测点位置' },
    { label: '温度(°C)' },
    { label: '预警级别' },
    // { label: '时间' },
  );
  if (res.length != 0) {
    res.forEach((el) => {
      safetyList.push({
        address: el.nodePlacement,
        temp: el.detectValue || '-',
        grade: el.warningMsg,
        // time: el.dateTime,
      });
    });
  }
}

//获取掘进工作面传感器监测数据
async function getHeadingFaceList() {
  let res = await getHeadingFace();
  safetyHead.length = 0;
  safetyList.length = 0;
  safetyHead.push(
    { label: '测点位置' },
    { label: 'CO浓度(%)' },
    { label: '温度' },
    { label: '预警级别' },
    // { label: '时间' },
  );
  if (res.length != 0) {
    res.forEach((el) => {
      safetyList.push({
        address: el.name,
        nd: el.co || '-',
        temp: el.wd || '-',
        grade: el.warningMsg,
        // time: el.dateTime,
      });
    });
  }
}
//获取运输系统烟雾传感器数据
async function getMainTrafficYwList() {
  let res = await getMainTrafficYw();
  safetyHead.length = 0;
  safetyList.length = 0;
  safetyHead.push(
    { label: '测点位置' },
    { label: '测点值' },
    { label: '预警级别' },
    // { label: '时间' },
  );
  if (res.length != 0) {
    res.forEach((el) => {
      el.detectValue = el.sensorType == 'M0104' ? '0ppm' : el.sensorType == 'K0007' ? el.detectValue == '0' ? '无烟雾' : el.detectValue == '1' ? '有烟雾' : '-' : '-'
      safetyList.push({
        address: el.nodePlacement,
        temp: el.detectValue,
        grade: el.warningMsg,
        // time: el.dateTime,
      });
    });
  }
}

//获取机电硐室传感器数据
async function getDsWdList() {
  let res = await getDsWd();
  safetyHead.length = 0;
  safetyList.length = 0;
  safetyHead.push(
    { label: '测点位置' },
    { label: '温度(°C)' },
    { label: '预警级别' },
    // { label: '时间' },
  );
  if (res.length != 0) {
    res.forEach((el) => {
      safetyList.push({
        address: el.nodePlacement,
        temp: el.detectValue || '-',
        grade: el.warningMsg,
        // time: el.dateTime,
      });
    });
  }
}

onMounted(() => {
  //工作面
  getFireWarningCntByTypeList();
  getFireAreaInfoList();
  //密闭
  getFireAreaInfoListMb();
  //带式
  getFireAreaInfoListDs();
  //变电硐室
  getFireAreaInfoListBd();
  //安全监控
  getTableList();
  getMonitor();
});

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
});

</script>

<style lang="less" scoped>
@font-face {
  font-family: douyuFont;
  src: url('../../../../assets/font/douyuFont.otf');
}

.fireHome {
  position: relative;
  width: 100%;
  height: 1032px;
  background: url('../../../../assets/images/fire/firehome/bg.png') no-repeat center;
  background-size: 100% 100%;

  .main-container {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 15px 30px 35px; 

    .left-area {
      width: calc((100% - 1010px - 40px) / 2);
      height: 100%;

      .left-t {
        position: relative;
        height: 115px;
        margin-bottom: 25px;
        background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
        background-size: 100% 100%;

        .tcontent-area {
          display: flex;
          position: absolute;
          top: 50%;
          left: 0;
          box-sizing: border-box;
          align-items: center;
          justify-content: space-around;
          width: 100%;
          height: 70px;
          padding: 0 15px;
          transform: translate(0, -40%);

          .tcontent-l {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9da5aa;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
          }

          .tcontent-c {
            display: flex;
            flex: 3;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
          }

          .tcontent-r {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #9da5aa;
            font-size: 14px;
            font-weight: bold;
            letter-spacing: 2px;
          }
        }
      }

      .left-c {
        width: 100%;
        margin-bottom: 25px;
      }

      .left-b {
        width: 100%;
      }
    }

    .center-area {
      width: 1010px;
      height: 100%;
      margin: 0 20px;

      .center-t {
        @keyframes harlem-data {
          0% {
            transform: translate(0);

          }

          25% {
            transform: translate(10px, 10px);

          }

          50% {
            transform: translate(-10px, -10px);

          }

          75% {
            transform: translate(2px, 2px);

          }

          100% {
            transform: translate(0);
          }
        }

        position: relative;
        width: 100%;
        height:698px;
        margin-bottom: 25px;
        overflow: hidden;

        .center-scalc {
          position: absolute;
          top: 0;
          right: 0;
          width: 44px;
          height: 44px;
          transition: -webkit-transform .5s ease-in-out .5s;
          border-radius: 50%;
          background-color: #000;
          box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
          cursor: pointer;

          .scalc-line {
            position: absolute;
            z-index: 1000;
            left: 50%;
            width: 22px;
            height: 3px;
            transform: translate(-50%, 0);
            transition: all .4s linear .1s;
            background-color: #fff;

            &:nth-child(1) {
              top: 14px;
            }

            &:nth-child(2) {
              top: 21px;
            }

            &:nth-child(3) {
              bottom: 13px;
            }

          }

          .scalc-line1 {
            position: absolute;
            z-index: 1000;
            width: 22px;
            height: 3px;
            transition: all .4s linear .1s;
            background-color: #fff;

            &:nth-child(1) {
              top: 20px;
              left: 26%;
              transform: rotate(45deg);
            }

            &:nth-child(2) {
              top: 20px;
              left: 26%;
              transform: rotate(-45deg);
            }

            &:nth-child(3) {
              display: none
            }

          }

          .scalc-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
            transition: all .5s ease-in-out;
            border-radius: 50%;
            background-color: #000;
            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
            cursor: pointer;

            .scalc-icon {
              display: none;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 16px;

            }
          }

          .scalc-btn1 {
            position: absolute;
            top: 10px;
            right: 70px;
            width: 34px;
            height: 34px;
            transition: all .5s ease-in-out;
            border-radius: 50%;
            background-color: #000;
            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
            cursor: pointer;

            .scalc-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 16px;

            }

            &:hover {
              animation: harlem-data .5s linear forwards;
            }
          }

          .scalc-btn2 {
            position: absolute;
            top: 60px;
            right: 30px;
            width: 34px;
            height: 34px;
            transition: all .5s ease-in-out;
            border-radius: 50%;
            background-color: #000;
            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
            cursor: pointer;

            .scalc-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 16px;
            }

            &:hover {
              animation: harlem-data .5s linear forwards;
            }
          }
        }
      }

      .center-b {
        width: 100%;
        height: calc(100% - 723px)
      }
    }

    .center-area1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .center-t1 {
        position: relative;
        width: 100%;
        height: 100%;
        margin-bottom: 15px;
        overflow: hidden;

        .center-scalc {
          position: absolute;
          top: 0;
          right: 0;
          width: 44px;
          height: 44px;
          transition: -webkit-transform .5s ease-in-out .5s;
          border-radius: 50%;
          background-color: #000;
          box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
          cursor: pointer;

          .scalc-line {
            position: absolute;
            z-index: 1000;
            left: 50%;
            width: 22px;
            height: 3px;
            transform: translate(-50%, 0);
            transition: all .4s linear .1s;
            background-color: #fff;

            &:nth-child(1) {
              top: 14px;
            }

            &:nth-child(2) {
              top: 21px;
            }

            &:nth-child(3) {
              bottom: 13px;
            }

          }

          .scalc-line1 {
            position: absolute;
            z-index: 1000;
            width: 22px;
            height: 3px;
            transition: all .4s linear .1s;
            background-color: #fff;

            &:nth-child(1) {
              top: 20px;
              left: 26%;
              transform: rotate(45deg);
            }

            &:nth-child(2) {
              top: 20px;
              left: 26%;
              transform: rotate(-45deg);
            }

            &:nth-child(3) {
              display: none
            }

          }

          .scalc-btn {
            position: absolute;
            top: 0;
            right: 0;
            width: 44px;
            height: 44px;
            transition: all .5s ease-in-out;
            border-radius: 50%;
            background-color: #000;
            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
            cursor: pointer;

            .scalc-icon {
              display: none;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 16px;

            }
          }

          .scalc-btn1 {
            position: absolute;
            top: 10px;
            right: 70px;
            width: 34px;
            height: 34px;
            transition: all .5s ease-in-out;
            border-radius: 50%;
            background-color: #000;
            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
            cursor: pointer;

            .scalc-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 16px;

            }

            &:hover {
              animation: harlem-data .5s linear forwards;
            }
          }

          .scalc-btn2 {
            position: absolute;
            top: 60px;
            right: 30px;
            width: 34px;
            height: 34px;
            transition: all .5s ease-in-out;
            border-radius: 50%;
            background-color: #000;
            box-shadow: 0 0 15px 1px rgb(31 179 247 / 70%) inset;
            cursor: pointer;

            .scalc-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 16px;
            }

            &:hover {
              animation: harlem-data .5s linear forwards;
            }
          }
        }
      }
    }

    .right-area {
      width: calc((100% - 1010px - 40px) / 2);
      height: 100%;

      .right-t {
        width: 100%;
        margin-bottom: 25px;
      }

      .right-c {
        width: 100%;
        margin-bottom: 25px;
      }

      .right-b {
        width: 100%;
        margin-bottom: 25px;
      }

      .right-f {
        width: 100%;
      }
    }
  }

  /* fade.css */
  .fade-enter-active {
    transition: opacity 2.5s ease;

    /* 设置过渡时间为1秒 */
  }

  .fade-leave-active {
    transition: opacity 0.5s ease;

    /* 设置过渡时间为1秒 */
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;

    /* 初始状态为不可见 */
  }
}
</style>