iotc/ruoyi-ui-vue3/src/views/device/sensordash/video.vue

<template>
  <div style="padding: 10px 15px">
    <el-row>
      <el-col :span="6" style="padding-right: 10px">
        <el-card class="box-card" style="min-height: 80vh;">
          <template #header>
            <div class="card-header">
              <span>视频设备</span>
              <div>
              <el-button v-if="isvideoshow" @click="isvideoshow=false">
                  返回
                </el-button></div>
            </div>
          </template>
          <div class="tree">
            <LayTree :data="data" :tail-node-icon="false" :onlyIconControl="true" v-model:selectedKey="selectedKey"
              @node-click="handleClick">
              <template #title="{ data }">
                <div style="display: flex;flex-direction: row;justify-content: space-around;">
                  <div>{{ data.name }}</div>
                </div>
              </template>
            </LayTree>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18"  v-if="isvideoshow">
        <div style="height: 100%;">
           <!-- <div id="container" style="margin-top: 0px;width:100%;height:80vh"></div> -->
           <!-- <iframe id="FrameID" :key="currenturl" style="width: 100%;height:100%" :src="currenturl"/> -->
           <div v-if="currenturl==''||currenturl==null" id="container" style="margin-top: 0px;width:100%;height:80vh"></div>
          <iframe v-if="currenturl!=''&&currenturl!=null" id="FrameID" :key="currenturl" style="width: 100%;height:100%" :src="currenturl"/>
        </div>
      </el-col>
      <el-col :span="18" v-if="!isvideoshow">
        <el-card class="box-card">
          <div style="display: flex; flex-direction: row; justify-content: space-between">
            <div>
              <div style="
                  display: flex;
                  flex-direction: row;
                  flex-wrap: nowrap;
                  align-items: center;
                ">
                <div style="font-size: 12px; width: 80px">设备名称:</div>
                <el-input v-model="searchform.name" placeholder="设备名称"></el-input>
              </div>
            </div>
            <div>
              <el-button type="primary" plain>重置</el-button>
              <el-button type="danger" @click="deleteall" style="display: none">批量删除</el-button>
              <el-button type="primary" @click="getVideoList">搜索</el-button>
            </div>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-top: 10px;">
          <template #header>
            <div class="card-header">
              <span>主要设备</span>
              <div>
                <el-button type="primary" @click="goAdd()" style="display: none">添加</el-button>
                <el-button type="warning" style="display: none">同步</el-button>
              </div>
            </div>
          </template>

          <el-row>
            <el-col :span="24" style="padding-left: 10px">
              <el-table :data="devicetabledata" :border="true" ref="tableref" >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="设备名称" prop="name"></el-table-column>
                <el-table-column label="平台编码" prop="sn"></el-table-column>
                <el-table-column label="设备类型" prop="type"></el-table-column>
                <el-table-column label="主要设备协议类型" prop="protocolType"></el-table-column>
                <el-table-column label="设备互联编码" prop="connectCode"></el-table-column>
                <el-table-column label="设备型号" prop="model"></el-table-column>

              </el-table>


            </el-col>
            <el-col :span="24" style="margin-top: 10px;">
              <el-pagination style="float: right;" small background layout="prev, pager, next" :total="pagedata.total"
                :page-size="pagedata.size" :current-page="pagedata.current" @current-change="onchangepage" class="mt-4" />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="Units">
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { LayTree } from "@layui/layui-vue";
import "@layui/layui-vue/lib/index.css";
import { listVideo, getVideo, delVideo, addVideo, updateVideo } from "@/api/data/video";
import { listVideoDetail, getVideoDetail, delVideoDetail, addVideoDetail, updateVideoDetail } from "@/api/data/videoDetail";
import { ElMessage, ElMessageBox } from "element-plus";

const isvideoshow = ref(false);
const route = useRoute();
const router = useRouter();

const treeList = ref([])

const currenturl = ref("");

// const tableref = ref(null);

const vidoeParams = ref({
    id: null,
    name: "",
    sn: "",
    type: "",
    protocolType: '',
    connectCode: "",
    model: "",
    videoFormat: "",
    vendorType: '',
    serialNumber: ''
})




const handleClick = (node) => {
  if (node.videoId != null) {
    searchform.value.id = node.videoId
  } else {
    searchform.value.id = node.id
  }

  isvideoshow.value = true;


  if (node.remark != null && node.remark != "") {
    currenturl.value = node.remark;
  } else {

     setTimeout(() => {
      var $container = document.getElementById('container');
      jessibuca = new Jessibuca({
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
           text: "",
            decoder:"/iot/jess/decoder.js",
            loadingText: "",
            useMSE: false,
            debug: true,
            showBandwidth: true, // 显示网速
            operateBtns: {
                fullscreen: true,
                screenshot: false,
                play: true,
                audio: false,
                recorder: false
            },
            forceNoOffscreen: true,
            isNotMute: false,
   },);
         jessibuca.play(node.voiceOutCode);
    }, 1000);

  }






};
const selectedKey = ref(1);
const data = ref([
  {
    title: "大华西门nvr1",
    id: 1,
    checked: true,
    spread: true,
    children: [
      {
        title: "东门立柱摄像机",
        id: 2,
        href: "https://www.layui.com/",
      },
      {
        title: "东门立柱摄像机",
        id: 3,
        href: "https://www.layui.com/",
      },
      {
        title: "东门立柱摄像机",
        id: 4,
        href: "https://www.layui.com/",
      },
      {
        title: "东门立柱摄像机",
        id: 5,
        href: "https://www.layui.com/",
      },
      {
        title: "东门立柱摄像机",
        id: 6,
        href: "https://www.layui.com/",
      },
    ],
  },
]);

const handleClickTitle = (data) => {
  console.log(data)
}

const pagedata = ref({
  total: 0,
  size: 10,
  current: 1
});


const devicetabledata = ref([1]);

const searchform = ref({
  name: "",
  id: null,
});

const onchangepage = (page) => {
  pagedata.value.current = page;
  getVideoList();
}

// const godetail = () => {
//   router.push("/device/camera/detail")
// }

const godelVideo = (item) => {
  console.log(item)
  delVideo(item.id).then(res => {
    if (res.code == 200) {
      getVideoList();
    }
  })
}

const getVideoDetailList = () => {
  listVideoDetail({ pageSize: 10000 }).then(res => {
    console.log(treeList.value);
    treeList.value.forEach(video => {
      video.children = [];
      video["spread"] = true;
      video["disabled"] = true;
      res.rows.forEach(detail => {
        if (video.id == detail.videoId) {
          detail.name = detail.cameraName
          video.children.push(detail);
        }
      })
    })
    console.log(treeList.value);
    data.value = treeList.value
    return res
  })
}

const tableref = ref(null);

const deleteall = () => {
  let selected = tableref.value.getSelectionRows();
  if (selected.length == 0) {
    ElMessage.warning("请选择要删除的行");
    return;
  }

  if (selected.length > 0) {
    ElMessageBox.confirm(
      `是否删除${selected.length}条数据`,
      "警告",
      {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: 'warning',
      }
    ).then(() => {

      delVideo(selected.map(i => i.id).join(",")).then((res) => {
        ElMessage.success("删除成功");
        getVideoList();
        getVideoDeviceList();
      })

    });
  }

}

 function getVideoDeviceList() {
  listVideo({ pageSize: 10000 }).then(res => {
    treeList.value = res.rows;
    getVideoDetailList()
  })
}

const goDetail = (item ) => {
  router.push({ path: '/device/camera/detail',query: { id: item.id } })
}

const getVideoList = () => {
  console.log(searchform.value);
  listVideo({ ...searchform.value, pageSize: pagedata.value.size, pageNum: pagedata.value.current }).then(res => {
    devicetabledata.value = res.rows
  })
}

const goAdd = () => {
  router.push({ path: '/device/camera/add'})
}

const goUpdate = (item) => {
  router.push({ path: '/device/camera/add', query: { id: item.id } })
}

getVideoDeviceList();
getVideoList();
// const res = videoTreeList();
// console.log(res);
</script>

<style></style>

<style lang="scss" scoped>
.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.tree {

  *,
  *:before,
  *:after {
    box-sizing: content-box !important;
  }

}

</style>

<style lang="scss">
.layui-disabled{
    color: #000 !important;
  }
   #container {
            background: rgba(13, 14, 27, 0.7);
            width: 50vw;
            height: 398px;
        }
</style>