v3_yyz/src/components/right.vue

<template>
  <el-aside class="right">
    <div class="right_top">
      <div class="title" :style="{ background: `url(${frame})` }">
        <div class="text">物联设备统计</div>
      </div>
      <div class="content">
        <div class="logo">
          <span>{{ equipmentTotal.total }}</span>
          <img class="animate" :src="d1img" alt="" />
          <img :src="d12img" alt="" />
          <span><b>总数</b>(个)</span>
        </div>
        <div class="list">
          <div class="item_r">
            <img :src="d2img" alt="" />
            <div
              class="percent"
              style="display: flex; justify-content: space-between"
            >
              <a>在线</a> <a>{{ equipmentTotal.online }} <span>(个)</span> </a>
            </div>
          </div>
          <div class="item_r">
            <img :src="d3img" alt="" />
            <div
              class="percent"
              style="display: flex; justify-content: space-between"
            >
              <a>离线</a>
              <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right_center">
      <div class="title" :style="{ background: `url(${frame})` }">
        <div class="text">物联设备类型统计</div>
      </div>
      <div class="contentwrap">
        <div class="count" v-for="(item, index) in interDevice" :key="index">
          <countTo
            :startVal="0"
            :endVal="item.number"
            :decimals="0"
            :duration="3000"
          ></countTo>
          <img :src="deviceImg + item.icon + '.png'" alt="" />
          <div class="text">{{ item?.text }}</div>
        </div>
      </div>
    </div>

    <div class="right_bottom">
      <div class="title" :style="{ background: `url(${frame})` }">
        <div class="text">教室实时监控</div>
      </div>

      <!-- <div class="monitorContent" :style="{ background: `url(${videoBorder})` }"> -->
      <div class="monitorContent">
        <img
          @click="swiperRef.prev()"
          class="change-left"
          :src="swiperLeft"
          alt=""
          srcset=""
        />
        <el-carousel
          class="swiper-container"
          ref="swiperRef"
          :autoplay="false"
          indicator-position="none"
          @change="monitorchange"
          arrow="never"
        >
          <!-- <img src="swiper-left" alt="" srcset=""> -->

          <el-carousel-item
            v-for="(item, index) in carouselData"
            :key="index"
            @click="lookVideo(item)"
            style="height: 100%"
          >
            <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px">
              {{ item.title }}
            </p>
            <div class="video-container" v-if="videoindex == index">
              <VideoJs
                style="height: 100%"
                class="video"
                :videoSrc="item.src"
                autoPlay
              />
            </div>
          </el-carousel-item>
        </el-carousel>
        <img
          class="video-border"
          style="height: 100%; width: 100%"
          :src="videoBorder"
          alt=""
          srcset=""
        />
        <img
          @click="swiperRef.next()"
          class="change-right"
          :src="swiperRight"
          alt=""
          srcset=""
        />
      </div>
    </div>
  </el-aside>

  <!-- 视频播放弹框 -->
  <el-dialog
    class="videoDialog"
    v-model="videoDialog"
    :title="dialogTitle"
    width="62%"
    align="center"
    top="8%"
    style="z-index: 2015; padding: 0"
  >
    <videoPlay v-bind="videoData" />

    <!-- {{ videoData.src }} -->
  </el-dialog>

  <el-dialog
    custom-class="deviceDialog"
    v-model="deviceDialog"
    title="设备明细"
    width="40%"
    align="left"
    top="30vh"
    style="z-index: 2015; background: rgba(0, 0, 0, 0)"
  >
    <el-table
      :data="deviceDetailsList"
      border
      height="100%"
      style="width: 100%; background: rgba(0, 0, 0, 0)"
    >
      <el-table-column
        align="center"
        type="index"
        label="序号"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="设备名称"
      ></el-table-column>
      <el-table-column align="center" prop="status" label="设备状态">
        <template #default="scope">
          <div
            :class="{
              normal: scope.row.status == '正常',
              error: scope.row.status == '异常',
            }"
          >
            <div>{{ scope.row.status }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="mini" @click="lookDetails(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      custom-class="deviceDetailsDialog"
      v-model="isShowDeviceDetails"
      title="详情"
      width="15%"
      align="left"
      top="40vh"
      style="z-index: 2019; background: rgba(0, 0, 0, 0)"
      :modal="false"
    >
      <div class="details-container">
        <div>设备名称：多媒体设备</div>
        <div>设备状态：<span :style="{ online: true }">在线</span></div>
        <div>位置：一号教学楼A101</div>
        <div>型号：教学设备</div>
        <div>质保期：5年</div>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script >
import { reactive, onBeforeMount, ref, nextTick, onMounted } from "vue";
import { ElCarousel, ElCarouselItem } from "element-plus";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue3-video-play";
// import CircleProgress from './CircleProgress.vue';
import { getDevice, getVideoUrl, getvideo } from "../request/api";
//找到你的组件地址引入进来
import VideoJs from "./VideoJs.vue";
import { CountTo } from "vue3-count-to";

export default {
  name: "Histogram",
  components: {
    videoPlay,
    ElCarousel,
    ElCarouselItem,
    CountTo,
    VideoJs,
  },
  setup() {
    onMounted(() => {});

    const data = reactive({
      videoSrc:
        "http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8",
    });
    // 视频数据
    const videoData = reactive({
      width: "100%", //播放器高度
      height: "66.5vh", //播放器高度
      color: "red", //主题色
      // title: "互动教室", //视频名称
      // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
      src: "https://scpull04.scjtonline.cn/scgro4/C436715B032077D498730AC93826DE29.m3u8?t=67c9399e&k=fe0359a57220382aa6a8bc859e918ade",
      type: "m3u8",
      muted: true, //静音
      webFullScreen: false,
      // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: true, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: false, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制
      currentTime: 0, //跳转到固定播放时间
      controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
      ], //显示所有按钮,
    });
    //视频播放弹框
    const videoDialog = ref(false);
    const asd = ref(false);

    //播放视频索引
    let videoindex = ref(0);
    let monitorchange = function (val) {
      // let videos = document.querySelectorAll('.interactclass video');

      // setTimeout(() => {
      //     for (let video of videos) {
      //     console.log("sbdadbdbdb",video);
      // video.pause();

      // video.removeAttribute('src'); // empty source
      // video.load();
      // // video.remove();
      // video.destroy();
      // video.load();
      // video.scr='';

      // video.style.display = 'none';

      // video=null;
      // // video.dispose();
      // }
      // }, 500);

      setTimeout(() => {
        videoindex.value = val;
      }, 500);
    };

    // const  videoshow = ref(true)
    const dialogTitle = ref("");
    // 播放视频
    const lookVideo = function (item) {
      console.log("item", item);

      videoDialog.value = true;
      dialogTitle.value = item.title;

      getVideoUrl({ rtsp: item.src }).then((res) => {
        console.log("视频处理", res);
        console.log("视频处理2", res.data.httpFlv);

        videoData.src = res.data.httpFlv;
      });
      // videoData.src = src;
      // videoData.src =
      //   "https://weizhi.huanghuai.edu.cn/jk/hls/c7a1e790-b3bc-4092-a975-40d0e35d54c2.m3u8";
    };
    // 播放视频
    const onPlay = function () {
      console.log("播放视频");
    };
    // 物联设备
    let equipmentTotal = ref({});
    // 物联设备类型统计
    let interDevice = ref([]);

    // 智慧教室
    let carouselData = ref([]);

    //获取页面数据
    const getDeviceData = async () => {
      //视频转码
      // getvideo({
      //  "rtsp": "rtsp://admin:admin@10.116.255.67:554",
      // }).then((res)=>{
      //     console.log('sadnuq21',res);
      // })

      let res = await getDevice();
      if (res.code !== 200) {
        ElMessage.error("数据请求出错");
      }
      let { category, monitor, status } = res.data;
      //物联设备统计
      equipmentTotal.value = status;
      // 物联设备类型数据
      console.log("sadui12u31", category);
      //截取数组前6项
      interDevice.value = category;

      // monitor.map((res) => {
      // console.log('sadhi2', res.activeMonitor);
      // if(res.activeMonitor.array){
      // res.activeMonitor.array.map(array => {
      // //视频转码
      // getvideo({
      // "rtsp": array.src,
      // }).then((res) => {
      // // array.src = 'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
      // array.src=res.data.httpFlv
      // })
      // })
      // }
      //     if ( res.activeMonitor.array1) {
      // res.activeMonitor.array1.map(array1 => {
      // //视频转码
      // getvideo({
      // "rtsp": array1.src,
      // }).then((res) => {
      // // array1.src = 'http://kbs-dokdo.gscdn.com/dokdo_300/_definst_/dokdo_300.stream/playlist.m3u8'
      // array1.src=res.data.httpFlv
      // })
      // })
      // }

      // })
      // 互动教室
      carouselData.value = monitor;

      console.log("hshshhs", carouselData.value);
    };

    onBeforeMount(() => {
      getDeviceData();

      setTimeout(() => {
        asd.value = true;
      }, 1000);
    });
    let deviceDialog = ref(false);
    const showDeviceDialog = () => {
      deviceDialog.value = true;
    };
    let deviceDetailsList = ref([
      {
        name: "多媒体设备",
        status: "正常",
      },
      {
        name: "多媒体设备",
        status: "异常",
      },
    ]);
    let isShowDeviceDetails = ref(false);
    const lookDetails = (data) => {
      console.log("darta", data);
      isShowDeviceDetails.value = true;
    };

    let swiperRef = ref(null);
    const d1img = ref("./img/d1_1.png");
    const d12img = ref("./img/d1_2.png");
    const d2img = ref("./img/d2.png");
    const d3img = ref("./img/d3.png");
    const deviceImg = ref("./img/");
    const frame = ref("./img/frame.png");
    const videoBorder = ref("./img/video-border.png");
    const swiperLeft = ref("./img/swiper-left.png");
    const swiperRight = ref("./img/swiper-right.png");

    return {
      interDevice,
      videoData,
      onPlay,
      videoDialog,
      lookVideo,
      carouselData,
      equipmentTotal,
      d1img,
      d12img,
      d2img,
      d3img,
      deviceImg,
      dialogTitle,
      monitorchange,
      videoindex,
      data,
      asd,
      frame,
      videoBorder,
      deviceDialog,
      deviceDetailsList,
      lookDetails,
      isShowDeviceDetails,
      swiperLeft,
      swiperRight,
      swiperRef,
    };
  },
};
</script>

<style scoped lang="scss">
@import "../assets/css/right.scss";
</style>
<style lang="scss" >
.videoDialog {
  .el-dialog__header {
    height: 49px;
    line-height: 49px;
    padding: 0;
    background-color: #1b67d9;
    margin-right: 0;

    .el-dialog__title {
      color: #fff;
      font-family: Inter;
    }

    .el-dialog__headerbtn {
      top: 0px;

      i {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: 0 !important;
  }
}
.deviceDialog {
  .el-dialog__header {
    height: 39px;
    line-height: 39px;
    padding: 0;
    background-color: #1b67d9;
    margin-right: 0;
    text-indent: 14px;

    .el-dialog__title {
      color: #fff;
      font-family: Inter;
    }

    .el-dialog__headerbtn {
      top: 0px;

      i {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }
  .el-dialog__body {
    // padding: 10px !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    .el-table {
      --el-table-border-color: #253f48;
      --el-table-row-hover-bg-color: rgba(0, 0, 0, 0.7);
      .normal {
        text-align: center;
        /* text/pc/02-55-Regular */
        font-family: "Alibaba PuHuiTi 2.0";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          width: 50px;
          height: 26px;
          background-color: #0b4935;
          // line-height: 30px;
          line-height: 26px;
          color: #13eb7f;
          box-sizing: border-box;
          border-radius: 4px;
          // padding: 4px 6px;
        }
      }
      .error {
        text-align: center;
        /* text/pc/02-55-Regular */
        font-family: "Alibaba PuHuiTi 2.0";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display: flex;
        justify-content: center;
        align-items: center;
        div {
          width: 50px;
          height: 26px;
          background-color: #442124;
          // line-height: 30px;
          line-height: 26px;
          color: #ff352e;
          box-sizing: border-box;
          border-radius: 4px;
          // padding: 4px 6px;
        }
      }
    }
    .el-table th.el-table__cell {
      background-color: rgba(0, 0, 0, 0.5);
    }
    .el-table tr {
      background-color: rgba(0, 0, 0, 0.5);
    }
    .el-table td.el-table__cell,
    .el-table th.el-table__cell.is-leaf {
      border-color: #253f48;
    }
  }
}

.deviceDetailsDialog {
  .el-dialog__header {
    height: 39px;
    line-height: 39px;
    padding: 0px;
    background-color: #1b67d9;
    margin-right: 0;
    text-indent: 10px;

    .el-dialog__title {
      color: #fff;
      font-family: Inter;
    }

    .el-dialog__headerbtn {
      top: 0px;

      i {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: 10px !important;
    background-color: rgba(0, 0, 0, 0.2) !important;

    .details-container {
      color: #fff;

      /* text/pc/03-55-Regular */
      font-family: "Alibaba PuHuiTi 2.0";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      line-height: 30px;

      .online {
        color: #30fcaa !important;
      }
    }
  }
}

.el-tag .el-tag--success {
  --el-tag-text-color: #000;
}
.d-player-video {
  display: flex;
}

.el-drawer {
  background-color: transparent !important;
  padding: 0px !important;
  box-shadow: none !important;
}
</style>