v3_yyz/src/components/home.vue

<template>
  <!-- <div class="container" > -->
  <Header />
  <!-- <div @click="isShowLeftAndRight =!isShowLeftAndRight" style="position:fixed;top:10px;left:10px;width:50px;height:50px;background-color:red;z-index:99999"></div> -->
  <img class="bg-shadow" :src="bgShadow" alt="" srcset="">
  <div v-show="isShowLeftAndRight">
    <Left ref="childRef" @childMethod="childMethod" :isShow="isShowLeftAndRight"></Left>
  </div>

  <right v-if="isShowLeftAndRight"></right>
  <div ref="linedomRef" style="
      width: 1px;
      height: 1px;
      position: absolute;
      z-index: 228;
      background: #ccc;
    "></div>

  <!-- </el-container> -->
  <div ref="popoverRef" id="popoverRef" class="modelInfo">
    <div v-if="orientation == 'Left' || orientation == 'Right'" class="model-detail">
      <div v-for="item in classDeviceInfo" class="listbox">
        <div class="list">
          {{ item[0].value }}
        </div>
        <div v-for="item2 in item" class="listtitle">
          <div v-if="item2.name !== '设备名称'" style="height: 30px; display: flex; align-items: center">
            <span class="name"> {{ item2.name }} :</span>
            <span v-if="item2.value != '在线'" class="value">{{
    item2.value
  }}</span>
            <span v-else style="font-family: 100; margin-left: 5px; color: #10c383">{{ item2.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="model-detail2">
      <div style="display: flex">
        <div v-for="item in classDeviceInfo" class="listbox2">
          <div class="list" style="text-align: center; width: 100%">
            {{ item[0].value }}
          </div>

          <div class="listtitlebox">
            <div v-for="item2 in item" class="listtitle">
              <div v-if="item2.name !== '设备名称'">
                <span class="name"> {{ item2.name }} :</span>
                <span v-if="item2.value != '在线'" class="value" style="font-weight: 400">{{ item2.value }}</span>
                <span v-else style="font-family: 100; margin-left: 5px; color: #10c383">{{ item2.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 视频播放弹框 -->
  <el-dialog class="videoDialog" v-model="videoDialog" :title="titleDialog" width="62%" align="center" top="7%"
    style="padding: 0">
    <videoPlay v-bind="videoData" @play="onPlay" />
  </el-dialog>

  <el-dialog class="deviceDialog" v-model="deviceDialog" title="设备明细" width="40%" align="left" top="30vh"
    style="z-index: 2015; background: rgba(0, 0, 0, 0); padding: 0px">
    <el-table :data="deviceDetailsList" border :resizable="false" height="350px"
      style="width: 100%; background: rgba(0, 0, 0, 0)">
      <el-table-column align="center" type="index" label="序号" width="100px"></el-table-column>
      <el-table-column align="center" prop="device_name" label="设备名称"></el-table-column>
      <el-table-column align="center" prop="heart_status" label="设备状态">
        <template #default="scope">
          <div :class="{
    normal: scope.row.heart_status == 1,
    error: scope.row.heart_status == 0,
  }">
            <div>{{ scope.row.heart_status == 1 ? "在线" : "异常" }}</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 class="deviceDetailsDialog" v-model="isShowDeviceDetails" title="详情" width="15%" align="left" top="40vh"
      style="z-index: 2019; background: rgba(0, 0, 0, 0); padding: 0px" :modal="false">
      <div class="details-container">
        <div>设备名称：{{ deviceDetails.device_name }}</div>
        <div>
          设备状态：<span :style="{
    color: deviceDetails.heart_status == 1 ? '#30fcaa' : '#ff352e',
  }">{{ deviceDetails.heart_status == 1 ? "在线" : "异常" }}</span>
        </div>
        <div>位置：{{ deviceDetails.teach_name }}</div>
        <div>型号：{{ deviceDetails.device_type_name }}</div>
        <!-- <div>质保期：5年</div> -->
      </div>
    </el-dialog>
  </el-dialog>
  <!-- </div> -->
</template>

<script>
import {
  reactive,
  onMounted,
  ref,
  toRefs,
  onBeforeUnmount,
  getCurrentInstance,
  nextTick,
} from "vue";
import {
  ElScrollbar,
  ElPagination,
  ElDialog,
  ElCarousel,
  ElCarouselItem,
  ElMessage,
} from "element-plus";
import "vue3-video-play/dist/style.css";
// import { addResponseEventListener } from "../webrtcVideo.js";
import { videoPlay } from "vue3-video-play";
import CircleProgress from "./CircleProgress.vue";
import Left from "./left.vue";
import Right from "./right.vue";
import Login from "./Login.vue";
import LeaderLine from "../../public/js/leaderline.js";
import { getClassDetail } from "../request/api.js";
import Header from "./Header.vue";
// import {
//     callUIInteraction,
// } from "../webrtcVideo";

import { getVideoUrl, equipmentDetailsApi } from "../request/api";

export default {
  name: "Histogram",
  components: {
    Login,
    Left,
    Right,
    ElScrollbar,
    ElPagination,
    ElDialog,
    videoPlay,
    ElCarousel,
    ElCarouselItem,
    CircleProgress,
    Header,
  },

  setup() {
    const titleDialog = ref("");
    const orientation = ref("");
    // const isShowLeft = ref(true);
    // const isShowRight = ref(true);
    const isShowLeftAndRight = ref(true);
    // const isShowLeftAndRight = ref(true);



    // 视频数据
    const videoData = reactive({
      width: "100%", //播放器高度
      height: "66.5vh", //播放器高度
      color: "red", //主题色
      title: "互动教室", //视频名称
      // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
      type: "m3u8",
      src: "",
      muted: false, //静音
      webFullScreen: false,
      // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: false, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制
      currentTime: 0, //跳转到固定播放时间
      controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
      ], //显示所有按钮,
    });
    // 物联设备类型统计
    const interDevice = ref([]);
    // 位置弹框
    let centerDialogVisible = ref(false);
    // 获取点击点数据
    let clickData = reactive({});
    const triggerRef = ref({
      getBoundingClientRect() {
        // console.log("positon----方法返回元素的大小及其相对于视口的位置", position.value)
        return position.value;
      },
    });
    const position = ref({
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
    });
    // 点击某个模型跟随移动
    const mousemoveHandler = (x, y) => {
      position.value = DOMRect.fromRect({
        width: 0,
        height: 0,
        x: x,
        y: y,
      });
    };

    //视频播放弹框
    const videoDialog = ref(false);

    // 播放视频
    const lookVideo = function () {
      videoDialog.value = true;
      console.log("点击了播放视频", 12312312);
    };
    // 播放视频
    const onPlay = function () {
      console.log("播放视频");
    };

    const linedomRef = ref(null);
    let lineContainer = ref(null);
    const popoverRef = ref(null);
    const lineStyleOption = ref({
      startPlug: "disc",
      endPlug: "disc",
      dash: true,
      color: "#2AC367",
      startPlugColor: "#fff",
      startPlugOutlineColor: "#2AC367",
      endPlugColor: "#fff", // translucent
      endPlugOutlineColor: "#2AC367",
      size: 3,
      startPlugSize: 1.5,
      startPlugOutlineSize: 2,
      endPlugSize: 1.5,
      endPlugOutlineSize: 2,
    });
    const classDeviceInfo = ref([]);
    const classDataLoaded = ref(false);
    // const classDevice = async function (deviceCode) {
    //     let res = await getClassDetail(deviceCode)
    //     console.log("获取到了当前点击物体得详情", res)
    //     classDeviceInfo.value = res.data;
    //     classDataLoaded.value = true

    // }
    const clickData1 = ref({});
    const mouseClick = function (e) {
      // console.log("屏幕点击位置看", e)
      clickData1.value.x = e.clientX;
      clickData1.value.y = e.clientY;
    };

    //消失线的方法
    const childMethod = () => {
      if (lineContainer.value) {
        lineContainer.value.remove();
        lineContainer.value = null;
      }
    };

    const childRef = ref(null);
    let isShowDeviceDetails = ref(false);
    let deviceDialog = ref(false);
    let deviceDetailsList = ref([

    ]);
    let deviceDetails = ref({});

    const lookDetails = (data) => {
      console.log("darta", data);
      isShowDeviceDetails.value = true;
      deviceDetails.value = data;
    };

    const handleResponseFunction = (data) => {
      console.log("从UE返回过来的值", data);

      popoverRef.value.style.display = "none";
      if (lineContainer.value) {
        lineContainer.value.remove();
        lineContainer.value = null;
      }

      //如果退出教室
      if (data == "quit_class") {
        //消失线
        if (lineContainer.value) {
          lineContainer.value.remove();
          lineContainer.value = null;
        }
        //消失点击详情
        popoverRef.value.style.display = "none";
        //消失面板
        if (childRef.value) {
          childRef.value.clearPanel();
        }

        return;
      }

      if (data == "{isrotate}") {
        // console.log("旋转场景了", lineContainer, lineContainer.value);
        if (lineContainer.value) {
          lineContainer.value.remove();
          lineContainer.value = null;
        }
        popoverRef.value.style.display = "none";
        return;
      }
      let json = eval("(" + data + ")"); //转对象
      console.log("clickData---点击的数据", json);
      if (json.url) {
        videoDialog.value = true;
        titleDialog.value = json.name;
        getVideoUrl({ rtsp: json.url }).then((res) => {
          videoData.src = res.data.httpFlv;
          console.log("32424", videoData.src);
        });

        return;
      }
      clickData.value = json;

      orientation.value = clickData.value.direction;

      console.log("看看这个", clickData.value.direction);
      if (json.deviceCode) {
        console.log("sadasd", json.deviceCode);

        let replacedStr = json.deviceCode.replace(/\//g, "A");
        // let replacedStr = replacedStr2.replace("/", "A");

        console.log("replacedStr", replacedStr);
        getClassDetail(replacedStr).then((res) => {
          console.log("sad21312", res);
          classDeviceInfo.value = res.data;

          console.log("asd2121", classDeviceInfo.value);
          // classDeviceInfo.value.map(i => {
          //     if (i.value == "在线") {
          //         i.online = true
          //     }
          //     if (i.value == "离线") {
          //         i.online = false
          //     }
          // })
          console.log("json.y ", json);
          linedomRef.value.style.top = clickData.value.y + "px";
          linedomRef.value.style.left = clickData.value.x + "px";
          console.log("可以开始移动");
          console.log("看一下---小圆点的值--top", linedomRef.value.style.top);
          console.log("看一下---小圆点的值--left", linedomRef.value.style.left);

          // 弹出框位置
          popoverRef.value.style.display = "block";
          switch (json.direction) {
            case "Left":
              popoverRef.value.style.top = json.y - 30 + "px";
              popoverRef.value.style.left = json.x - 320 + "px";
              break;
            case "Up":
              popoverRef.value.style.top = json.y - 300 + "px";
              popoverRef.value.style.left = json.x - 120 + "px";
              break;
            case "Right":
              popoverRef.value.style.top = Number(json.y) - 150 + "px";
              popoverRef.value.style.left = Number(json.x) + 100 + "px";

              break;
            case "Down":
              popoverRef.value.style.top = Number(json.y) + 100 + "px";
              popoverRef.value.style.left = Number(json.x) + "px";
              break;
            default:
              popoverRef.value.style.top = json.y - 60 + "px";
              popoverRef.value.style.left = json.x + "px";
              break;
          }

          if (lineContainer.value) {
            lineContainer.value.remove();
          }

          lineContainer.value = new LeaderLine(
            linedomRef.value,
            popoverRef.value,
            lineStyleOption.value
          );

          lineContainer.value.show("draw", {
            duration: 100, //持续时长
            timing: "ease-in", // 动画函数
          });
          lineContainer.value.endPlugOutline = true;
          lineContainer.value.startPlugOutline = true;
          lineContainer.value.position();
        });
      }
      console.log("data---------------------", JSON.parse(data));

      if (JSON.parse(data).MainServiceName == "JianKong") {
        getVideoUrl({ rtsp: JSON.parse(data).MonitorURL }).then((res) => {
          videoData.src = res.data.httpFlv;
          // videoData.src =
          //   "https://weizhi.huanghuai.edu.cn/jk/hls/9159eba9-b4c6-4a4b-a8ff-a1dd94c88bae.m3u8";
          videoDialog.value = true;
        });
      }
      if (JSON.parse(data).MainServiceName == "SheBeiLieBiao") {
        equipmentDetailsApi(JSON.parse(data).ClassroomCode).then((res) => {
          deviceDialog.value = true;
          deviceDetailsList.value = res.data;
        });
      }
      if (JSON.parse(data).MainServiceName == "KanBanShouQi") {
        console.log("看板收起展开", JSON.parse(data));
        let isShow = JSON.parse(data).PutAwayState == "true" ? true : false;
        //localStorage.setItem("isShow-left-Right", isShow);
        isShowLeftAndRight.value = isShow;
        // isShowLeftAndRight = isShow;
        // isShowLeft.value = JSON.parse(data).PutAwayState == "true" ? true : false;
        // isShowRight.value = JSON.parse(data).PutAwayState == "true" ? true : false;
      }
    };
    const windowSize = function () {
      // console.log("监听一下窗口是不是改了--click", lineContainer);
      callUIInteraction("windowSize");
    };

    onMounted(() => {
      setTimeout(() => {
        addResponseEventListener("444", handleResponseFunction);

      }, 500)
      // isShowLeftAndRight.value = localStorage.getItem("isShow-left-Right") == "true" ? true : false;
      // window.addEventListener("resize", windowSize);
      //   addResponseEventListener("jiankong", openVideo);

      // window.addEventListener('click', windowSize);
      // addResponseEventListener("widowSizeChange", windoChangeFunction);
    });

    const headImg = ref("./img/head.png");
    const bgShadow = ref("./img/bg-shadow.png");
    return {
      centerDialogVisible,
      interDevice,
      clickData,

      triggerRef,
      videoData,
      onPlay,
      videoDialog,
      lookVideo,
      linedomRef,
      popoverRef,
      lineContainer,
      classDeviceInfo,
      mouseClick,
      headImg,
      titleDialog,
      orientation,
      childMethod,
      childRef,
      bgShadow,
      isShowDeviceDetails,
      lookDetails,
      deviceDetailsList,
      deviceDialog,
      deviceDetails,
      isShowLeftAndRight
    };
  },
};
</script>

<style scoped lang="scss">
@import "../assets/css/home.scss";

:deep(.el-dialog__header) {
  height: 49px;
  line-height: 49px;
  padding: 0;
  background-color: #1b67d9;
  margin-right: 0;
}
</style>