sis_zhfx/src/views/SandTable/SandTable.vue

<template>
  <div class="sand-table">
    <img :src="require('@assets/png/3dback.png')" class="i3dback" />
    <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
    <StBack></StBack>
    <ThreeModel1
      class="three-model-layer"
      :data="mapSource"
      @when="when"
    ></ThreeModel1>
    <div class="sand-table-left" v-if="showPanel">
      <PanelSand
        class="left-panel"
        title="气象预测"
        :subTitle="timeStr + '实况'"
      >
        <weather class="pd-t-16" :data="tqmap1" />
      </PanelSand>
      <PanelSand class="left-panel mg-t-16" title="健康推荐">
        <RankTable :data="levelTableData"></RankTable>
      </PanelSand>
      <PanelSand class="left-panel mg-t-16" title="停机信息">
        <RankTable :data="sels" @rowClick="clickRow"></RankTable>
        <!-- <ComTable :data="sels"></ComTable> -->
      </PanelSand>
      <PanelSandToolbar class="left-panel mg-t-16" title="部件">
        <template v-slot:tools>
          <div class="exchange" @click="exchange1">
            <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
            <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
            <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
          </div>
        </template>
        <template v-slot:default>
          <RadarPieChart height="20.6vh" />
        </template>
      </PanelSandToolbar>
    </div>
    <div class="sand-table-right" v-if="showPanel">
      <PanelSand class="right-panel" title="板块标题">
        <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
          <el-col
            :span="12"
            class="pre-img-box"
            v-for="(cItem, cIndex) in pItem"
            :key="cIndex"
            @click="openVideoDialog(cItem)"
          >
            <div class="mask"></div>
            <iframe
              class="pre-img videoBoxiframe"
              width="95%"
              height="8.657vh"
              :src="cItem.url + cItem.token"
              v-if="cItem.switch"
            />
          </el-col>
        </el-row>
      </PanelSand>
      <PanelSand class="right-panel mg-t-16" title="工单管理">
        <div
          class="person-info-box mg-t-16 animated a0"
          :class="peopleClass"
          v-if="workData.data[0]"
        >
          <img
            class="header mg-r-8 bg-green"
            style="width: 75px; height: 75px"
            :src="workData.data[workDataIndex].imgurl"
          />
          <div class="person-info">
            <div class="green font-lg" style="font-weight: bold">
              {{ workData.data[workDataIndex].laborname }}
            </div>
            <div class="white font-sm">
              <span>职务：{{ workData.data[workDataIndex].jobcode }}</span>
              <!-- <span class="mg-l-16">当前任务编号 000000</span> -->
            </div>
            <div class="white font-sm">
              <!-- 平均检修时间 <span class="green">5</span> 小时 -->
              开始时间
              <span class="green">{{
                workData.data[workDataIndex].starttime
              }}</span>
            </div>
          </div>
        </div>
        <div class="table mg-t-8">
          <Table :data="workData" />
        </div>
      </PanelSand>
      <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
        <template v-slot:tools>
          <div class="exchange" @click="exchange">
            <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
            <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
            <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
          </div>
        </template>
        <template v-slot:default>
          <RadarPieChart height="21vh" />
        </template>
      </PanelSandToolbar>
    </div>
    <div class="sand-table-bottom" v-if="showPanel">
      <!-- <Ppanel
        title="利用小时"
        :data="riseNumber(gxkmap.bg_dxkyss)"
        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.ydxkyss"
        :data1Icon="gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="gxkmap.tb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
        :data2Icon="gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="gxkmap.hb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
      ></Ppanel>
      <Ppanel title="设备可利用率"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_sbklyl)"
        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.ysbklyl"
        :data1Icon="gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="gxkmap.hb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
        :data2Icon="gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="gxkmap.tb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
      ></Ppanel>
      <Ppanel
        title="MTBF"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_mtbf)"
        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.mtbf"
        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="gxkmap.hb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="gxkmap.tb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
      ></Ppanel>
      <Ppanel
        title="MTTR"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_mttr)"
        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.mttr"
        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="gxkmap.hb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="gxkmap.tb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
      ></Ppanel>
      <Ppanel
        title="MTTF"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_mttf)"
        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.mttf"
        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="gxkmap.hb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="gxkmap.tb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
      ></Ppanel> -->
      <Ppanel
        title="利用小时"
        :data="riseNumber(gxkmap.bg_dxkyss)"
        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.ydxkyss"
        :data1Icon="
          gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data1IconClass="
          gxkmap.tb_dxkyss < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="
          gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data2IconClass="
          gxkmap.hb_dxkyss < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="设备可利用率"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_sbklyl)"
        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.ysbklyl"
        :data1Icon="
          gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data1IconClass="
          gxkmap.hb_sbklyl < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="
          gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'
        "
        :data2IconClass="
          gxkmap.tb_sbklyl < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="MTBF"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_mtbf)"
        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.mtbf"
        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="
          gxkmap.hb_mtbf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="
          gxkmap.tb_mtbf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="MTTR"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_mttr)"
        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.mttr"
        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="
          gxkmap.hb_mttr < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="
          gxkmap.tb_mttr < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
      <Ppanel
        title="MTTF"
        class="stb-p"
        :data="riseNumber(gxkmap.bg_mttf)"
        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
        :days="gxkmap.mttf"
        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data1IconClass="
          gxkmap.hb_mttf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
        :data2IconClass="
          gxkmap.tb_mttf < 0
            ? 'svg-icon-sm svg-icon-yellow'
            : 'svg-icon-sm svg-icon-green'
        "
      ></Ppanel>
    </div>
    <el-dialog
      top="50px"
      title="查看视频"
      :custom-class="videoDialogClass"
      v-model="showVideoDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          videoDialogClass = 'modal animated a1 bounceOut';
          delaylyFn(450, done);
        }
      "
      @closed="
        dialogVideoUrl = '';
        videoDialogClass = 'modal animated a1 bounceIn';
      "
    >
      <iframe
        class="videoBoxiframe"
        width="95%"
        height="800px"
        :src="dialogVideoUrl"
      />
    </el-dialog>
    <el-dialog
      title="停机详情"
      :custom-class="tableDialogClass"
      v-model="showTableDialog"
      width="80%"
      :destroy-on-close="true"
      :before-close="
        (done) => {
          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
          delaylyFn(450, done);
        }
      "
      @closed="
        dialogVideoUrl = '';
        tableDialogClass = 'modal animated a1 fadeInLeftBig';
      "
    >
      <el-form style="margin: 30px 0" label-width="120px" inline>
        <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.windTurbineId" readonly></el-input>
        </el-form-item>
        <el-form-item label="所属风场" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.wpName" readonly></el-input>
        </el-form-item>
        <el-form-item label="停机类型" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.statusName" readonly></el-input>
        </el-form-item>
        <el-form-item label="停机时间" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.stopTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="恢复时间" style="width: 45%; margin-bottom: 25px">
          <el-input v-model="tableItem.startTime" readonly></el-input>
        </el-form-item>
        <el-form-item
          label="停机时长(小时)"
          style="width: 45%; margin-bottom: 25px"
        >
          <el-input v-model="tableItem.stopHours" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import ThreeModel1 from "./component/ThreeModel1.vue";
import PanelSand from "@com/coms/panel/panel-sand.vue";
import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
import Weather from "./component/weather.vue";
import StBack from "./component/st-back.vue";
import Table from "@com/coms/table/table.vue";
import RankTable from "./component/rank-table.vue";
import Ppanel from "./component/p-panel.vue";
import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";

export default {
  // 名称
  name: "SandTable",
  // 使用组件
  components: {
    ThreeModel1,
    PanelSand,
    PanelSandToolbar,
    Weather,
    Table,
    RadarPieChart,
    StBack,
    RankTable,
    Ppanel,
  },
  // 数据
  data() {
    const that = this;
    return {
      videoShow: true,
      showPanel: false,
      exchangeBtn: false,
      exchangeBtn1: false,
      timmer1: null,
      showTableDialog: false,
      videoDialogClass: "modal animated a1 bounceIn",
      tableDialogClass: "modal animated a1 fadeInLeftBig",
      peopleClass: "",
      timeStr: "",
      wpId: "0",
      tqmap1: {},
      gxkmap: {},
      tableItem: {},
      mapSource: {},
      videoArray: [
        [
          {
            url: "http://10.155.32.4:9984/ws.html",
            token: "?token=SG01_48_TD&autoplay=true",
            switch: true,
          },
          {
            url: "http://10.155.32.4:9984/ws.html",
            token: "?token=SG01_48_TD&autoplay=true",
            switch: true,
          },
        ],
        [
          {
            url: "http://10.155.32.4:9984/ws.html",
            token: "?token=SG01_01_TD&autoplay=true",
            switch: true,
          },
          {
            url: "http://10.155.32.4:9984/ws.html",
            token: "?token=SG01_02_TD&autoplay=true",
            switch: true,
          },
        ],
        [
          {
            url: "http://10.155.32.4:9984/ws.html",
            token: "?token=SG01_03_TD&autoplay=true",
            switch: true,
          },
          {
            url: "http://10.155.32.4:9984/ws.html",
            token: "?token=SG01_04_TD&autoplay=true",
            switch: true,
          },
        ],
      ],
      showVideoDialog: false,
      dialogVideoUrl: "",
      ForecastPower: [
        {
          name: "今日预测电量",
          value: 103.62,
          total: 150,
        },
        {
          name: "月预测发电量",
          value: 98.62,
          total: 100,
        },
      ],
      workDataIndex: 0,
      workData: {
        column: [
          {
            name: "人员",
            field: "laborname",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
          {
            name: "职务",
            field: "jobcode",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
          {
            name: "开始时间",
            field: "starttime",
            width: "150px",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
          {
            name: "原因",
            field: "problem",
            is_num: false,
            is_light: false,
            click(e, row) {
              that.changePeople(row.index);
            },
          },
        ],
        data: [],
      },
      levelTableData: {
        column: [
          {
            name: "编号",
            field: "no",
          },
          {
            name: "等级",
            field: "level",
          },
          {
            name: "分数",
            field: "score",
          },
        ],
        data: [
          {
            no: "MHS_A01",
            level: "AAA",
            score: 98,
          },
          {
            no: "MHS_A02",
            level: "AAA",
            score: 95,
          },
          {
            no: "MHS_A01",
            level: "AA",
            score: 94,
          },
          {
            no: "MHS_A02",
            level: "BB",
            score: 92,
          },
          {
            no: "MHS_A01",
            level: "BB",
            score: 90,
          },
        ],
      },
      sels: {
        column: [
          {
            name: "风机编号",
            field: "windTurbineId",
          },
          {
            name: "时间",
            field: "stopTime",
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    openVideoDialog(item) {
      if (item.url && item.token) {
        this.dialogVideoUrl = item.url + item.token;
        this.showVideoDialog = true;
      }
    },

    getWtInfo() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "sandtable/findWtInfo",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          console.log(11111, res);

          that.tqmap1 = res.data.tqmap1;

          res.data.sels.forEach((ele) => {
            ele.stopTime = new Date(ele.stopTime).formatDate(
              "yyyy-MM-dd hh:mm:ss"
            );
            ele.startTime = new Date(ele.stopTime).formatDate(
              "yyyy-MM-dd hh:mm:ss"
            );
          });

          that.sels.data = res.data.sels;
          that.gxkmap = res.data.gxkmap;
        },
      });
    },

    // 获取中部地图数据
    getWpHealthInfo() {
      let that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "sandtable/judgeWpHealth",
        data: {
          wpId: that.wpId,
        },
        success(res) {
          that.mapSource = res.data;
        },
      });
    },

    // 获取中部地图数据
    getTop4Info() {
      let that = this;
      that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:9988/",
        subUrl: "equoperationrecord/top4",
        data: {
          stId: that.wpId,
        },
        success(res) {
          res.data.forEach((ele, index) => {
            ele.index = index;
          });
          that.workData.data = res.data;
        },
      });
    },

    clickRow(row) {
      this.tableItem = row;
      this.showTableDialog = true;
    },

    delaylyFn(time, fn) {
      setTimeout(() => {
        fn();
      }, time);
    },

    riseNumber(number) {
      if (number < 0) {
        return (number - number * 2) / 100;
      } else {
        return number / 100;
      }
    },

    // 切换人员展示
    changePeople(index) {
      if (!this.peopleAnmLock && this.workDataIndex !== index) {
        this.peopleAnmLock = true;
        this.peopleClass = "fadeOutRight";
        setTimeout(() => {
          this.workDataIndex = index;
          this.peopleClass = "fadeInRight";
          this.peopleAnmLock = false;
        }, 150);
      }
    },

    when: function () {
      this.showPanel = true;
    },

    exchange: function () {
      this.exchangeBtn = !this.exchangeBtn;
    },

    exchange1: function () {
      this.exchangeBtn1 = !this.exchangeBtn1;
    },
  },
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    this.getWtInfo();
    this.getWpHealthInfo();
    this.getTop4Info();
    this.timeStr = new Date().formatDate("MM-dd hh:mm");
    this.timmer1 = setInterval(() => {
      this.timeStr = new Date().formatDate("MM-dd hh:mm");
    });
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },

  unmounted() {
    clearInterval(this.timmer1);
    this.timmer1 = null;
  },
};
</script>

<style lang="less">
.sand-table {
  width: 100%;
  height: 91.667vh;
  position: relative;

  .i3dback {
    position: fixed;
    z-index: -1;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }

  .i3dcloud {
    position: absolute;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
  }

  .left-panel {
    width: 360px;
  }

  .right-panel {
    width: 36.852vh;
  }

  .three-model-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .sand-table-left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }

  .sand-table-right {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }

  .sand-table-bottom {
    position: absolute;
    right: calc(50vw - 50.463vh);
    bottom: 0;
    z-index: 2;
    display: flex;

    .stb-p {
      margin-left: 0.926vh;
    }
  }

  .pre-img-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.556vh;
    padding: 0;
    position: relative;
    cursor: pointer;

    .sand-table-bottom {
      position: absolute;
      right: calc(50vw - 545px);
      bottom: 0;
      z-index: 2;
      display: flex;
    }

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
    }

    .pre-img {
      position: relative;
      width: 95%;
      height: 8.657vh;
      z-index: 4;
    }
  }

  .person-info-box {
    display: flex;

    .header {
      width: 75px;
    }
  }

  .table {
    width: calc(100% + 2.963vh);
    margin-left: -1.481vh;
    margin-bottom: -1.481vh;

    tr {
      cursor: pointer;
    }

    .com-table thead tr th,
    .com-table tr td {
      padding: 0.556vh 0;
      color: #fff;
    }
  }

  .animated.a0 {
    animation-duration: 0.35s;
  }

  .animated.a1 {
    animation-duration: 0.5s;
  }

  .el-overlay {
    overflow: hidden;
  }
}

.exchange {
  cursor: pointer;
}

.videoBoxiframe {
  border: none;
  overflow: hidden;
  cursor: pointer;
}

.modal {
  animation-duration: 0;
  @keyframes dialog-fade-in {
    0% {
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 1;
    }
  }

  @keyframes dialog-fade-out {
    0% {
      // transform: translate3d(0, 0, 0);
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 1;
    }
    100% {
      // transform: translate3d(0, -100%, 0);
      transform: translate3d(-1000%, -1000%, 0);
      opacity: 0;
    }
  }
}
</style>