luobisheng
2022-11-25 0e68368c1df02acb4e96c14b7f4a307d369f1415
src/views/systemSetting/device/point/index.vue
@@ -1,7 +1,7 @@
<template>
  <el-container style="height: 100%;">
    <el-aside heigth="100%" width="200px ">
      <department-aside />
      <department-aside @selectedDepartment="selectedDepartment" />
    </el-aside>
    <el-container>
@@ -14,13 +14,11 @@
      </el-header>
      <el-main style="display:flex;flex-wrap: wrap;overflow-y: scroll;">
        <div v-for="item in videoData " style="height: 240px ;width: 210px; position: relative;margin-left:20px ;">
        <div v-for="item in videoData" style="height: 240px ;width: 210px; position: relative;margin-left:20px ;">
          <div
            style="color:rgb(75, 155, 183); font-size: 11px;line-height: 18px; position: absolute; z-index: 1;left: 50px;">
            {{ item.steert }}{{ item.community }}</div>
          <video id="my-video" class="video-js" controls preload="auto" width="210px" height="150px"
            :poster="item.imageUrl" data-setup="{}">
            <source :src="item.videoUrl" type="video/mp4" />
            {{ item.name }}{{ item.community }}</div>
          <video id="my-video" :src="item.urlAddress" class="video-js" controls preload="auto" width="210px" height="150px">
          </video>
          <div class="bottonOne" @click="">查看视频</div>
          <div class="bottonTwo">视频上报</div>
@@ -138,80 +136,40 @@
</style>
<script>
import departmentAside from "@/views/operate/fivepack/threepack/components/aside";
import videoPoint from "@/api/system/videoPoint";
  export default {
    components: { departmentAside },
    created() {
      this.getVideoPointList();
    },
    data() {
      return {
        currentPage: 1,
        totalNum: 7,
        totalNum: 10,
        pageSize: 10,
        videoData:[
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          },
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          },
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          }
          ,
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          },
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          }
          ,
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          },
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          },
          {
            id:12,
            steert:"xx街道",
            community:"xxx社区",
            imageUrl:"https://img2.baidu.com/it/u=2526846893,15288996&fm=253&fmt=auto&app=138&f=JPG?w=738&h=500",
            videoUrl:"http://vali-g1.cp31.ott.cibntv.net/youku/65730720cb94e7220271a3c96/0300080100632D30A3E43019FD116537F5162F-1035-48AC-BE1B-602DF0E92893.mp4?sid=166729534400010004780_00_Bda935cf9a33346c593fc27da8e694df3&sign=db39289573d143cf6e1ad8d8dff36682&ctype=50&si=183&psid=c732c4364319e7ef4685d8f1a568015941346"
          }
        ],
        videoData: [],
        value:''
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      getVideoPointList(data) {
        let communityId, streetId;
        if (data) {
          communityId = data.parentId;
          streetId = data.id;
        }
        videoPoint.getVideoPointList({ current: this.currentPage, size: this.pageSize, communityId, streetId })
            .then(({ records, total }) => {
              this.videoData = records;
              this.totalNum = total;
            })
            .catch(err => this.$message.error(err))
      },
      selectedDepartment(data) {
        if (!data.children) {
          this.getVideoPointList(data);
        }
      }
    }
  };