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 title-mt " :style="{ background: `url(${frame})` }">
        <div class="text">物联设备类型统计</div>
      </div>
      <div class="contentwrap">
        <div class="count" v-for="(item, index) in interDevice" :key="index">
          <CircleProgress
            :target-value="item.number"
            :color="item.color"
            text-position="top"
          >
            <img :src="deviceImg + item.icon + '.png'" alt="" />
            <!-- <img :src="'src/assets/img/' + item.icon + '.png'" alt=""> -->
          </CircleProgress>

          <div class="text">{{ item?.text }}</div>

          <!-- <el-tooltip placement="bottom">
                        <template    #content> multiple lines<br />second line </template>
                        <el-text style="width: 100px;" class="w-100px mb-2" truncated>
                            测试测试测试
                        </el-text>
                    </el-tooltip> -->
        </div>
      </div>
    </div>

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

      <div class="monitorContent">
        <el-carousel class="monitor">
          <el-carousel-item v-for="(item, index) in carouselData" :key="index">
            <p style="margin-left: 12px; margin-bottom: 3px; font-size: 14px">
              {{ item.activeMonitor?.title }}
            </p>
            <div class="interactclass">
              <div
                class="room"
                v-for="(item, index) in item.activeMonitor?.array"
                :key="index"
              >
                <span style="z-index: 99">{{ item?.title }}</span>
                <!-- <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item)"> -->
                <div
                  v-if="item.src"
                  style="width: 100%; height: 100%"
                  @click="lookVideo(item)"
                >
                  <div class="vue3VideoPlay">
                    <vue3VideoPlay
                      width="100%"
                      height="8.8vh"
                      style="object-fit: fill"
                      :src="item.src"
                      :type="videoData.type"
                      :autoPlay="true"
                      :control="false"
                      :preload="meta"
                    />
                  </div>
                </div>
              </div>
            </div>

            <p
              style="
                margin-top: 18px;
                margin-left: 12px;
                margin-bottom: 3px;
                font-size: 14px;
              "
            >
              {{ item.activeMonitor?.title1 }}
            </p>
            <div class="interactclass">
              <div
                class="room"
                v-for="(item, index) in item.activeMonitor?.array1"
                :key="index"
              >
                <span style="z-index: 99">{{ item?.title }}</span>
                <!-- <br>
                                <div>
                                    {{ item.src }}
                                </div> -->
                <div style="width: 100%; height: 100%" @click="lookVideo(item)">
                  <div class="vue3VideoPlay">
                    <vue3VideoPlay
                      width="100%"
                      height="9vh"
                      style="object-fit: fill"
                      :src="item.src"
                      :type="videoData.type"
                      :autoPlay="true"
                      :control="false"
                      :preload="meta"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </el-aside>

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

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

<script >
import { reactive, onMounted, ref, nextTick, onBeforeUnmount } 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";

export default {
  name: "Histogram",
  components: { videoPlay, ElCarousel, ElCarouselItem },
  setup() {
    // 视频数据
    const videoData = reactive({
      width: "100%", //播放器高度
      height: "66.5vh", //播放器高度
      color: "red", //主题色
      // title: "互动教室", //视频名称
      // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
      src: "",
      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  videoshow = ref(true)
    const dialogTitle = ref("");
    // 播放视频
    const lookVideo = function (item) {
      videoDialog.value = true;
      dialogTitle.value = item.title;
      let copysrc = JSON.parse(JSON.stringify(item));
      console.log("sadi2", copysrc);
      // videoData.src = item.scr
      videoData.src = copysrc.src;
      console.log("kankna222", videoData.src);

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

      //     videoData.src = res.data.httpFlv
      // })
      // videoData.src = src
    };
    // 播放视频
    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();
      console.log("s12312123", res);
      if (res.code !== 200) {
        ElMessage.error("数据请求出错");
      }
      let { category, monitor, status } = res.data;
      //物联设备统计
      equipmentTotal.value = status;
      // 物联设备类型数据
      console.log("sadui12u31", category);
      //截取数组前6项
      interDevice.value = category;

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

      carouselData.value.map((res) => {
        console.log("sadhi2", res.activeMonitor);

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

      //开启物联网统计数据定时刷新
      startdeviceInterval();

      // setTimeout(() => {
      //     console.log('处理后监控视频数据===',carouselData.value);
      // }, 2000);
    };

    // 定时刷新物联网统计数据

    let deviceInterval = ref(null);
    const startdeviceInterval = () => {
      //清除物联网统计数据刷新定时器
      clearTimeout(deviceInterval.value);
      deviceInterval.value = setInterval(() => {
        getDeviceData();
      }, 5000);
    };

    onMounted(() => {
      getDeviceData();
    });

    onBeforeUnmount(() => {
      //清除物联网统计数据刷新定时器
      clearTimeout(deviceInterval.value);
    });

    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");

    return {
      interDevice,
      videoData,
      onPlay,
      videoDialog,
      lookVideo,
      carouselData,
      equipmentTotal,
      d1img,
      d12img,
      d2img,
      d3img,
      deviceImg,
      dialogTitle,
      startdeviceInterval,
      frame
    };
  },
};
</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;
  }
}
</style>