zhgdyun/src/views/projectAdmin/fourEngin/sourse/leftBottom.vue

<template>
  <Card title="地磅监控">
    <VideoModule  class="playVideoBox"
    style="height:200px;width:600px"
    :type="'1x2'"
        :value="selectList"
        :displayBottomMod="false"
        :winNumBer="9"
        :autoplay="false"
        :showCaptrue="false"
        :showControl="false"
        :showPlayback="false"
        :xxx="7"
      ></VideoModule> 
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
import { getReceiptOrIssueRecord } from "@/assets/js/api/markingRoom";
import {
  getComapnyStatisticsListApi,
  getComapnyVideoListApi,
  getComapnyParentNameApi,
} from "@/assets/js/api/company/project";
import VideoModule from "@/components/videoModule/videoModule.vue";
export default {
  components: {
    Card,
    VideoModule
  },
  data() {
    return {
      typeList: {
        1: "入库",
        2: "出库",
        3: "出库",
      },
      sn: "",
      carList: [],
      selectList: [],
      value1: "2",
      typeList: [
        {
          value: "1",
          label: "2屏",
        },
        {
          value: "2",
          label: "4屏",
        },
        {
          value: "3",
          label: "9屏",
        },
      ],
     
      nowIndex: -1,
      isShow:false,
      tableDataTest: {},
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    //查询监控
    getList() {
      this.sn = this.$store.state.projectSn;
      getReceiptOrIssueRecord({ projectSn: this.sn }).then(res => {
        this.selectList = res.result
        console.log('this.carList ',this.selectList);
      })

      getComapnyStatisticsListApi({
        sn: this.sn,
        videoType: 1,
        standardType: 1,
      }).then((res) => {
        this.treeData = res.result.companyList
          ? res.result.companyList
          : res.result.projectList
          ? res.result.projectList
          : res.result.videoList;
        this.treeData.forEach((element) => {
          if (element.serialNumber == "c857ef822c014c7cbd40ad463ff84da7") {
            this.selectList = [element];
          }
        });
        console.log("-----tree", this.treeData);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.playVideoBox {
  box-sizing: border-box;
  padding-top: 20px;
}
.security-list {
  // margin-top: -4%;
  height: 108%;
  color: #fff;
  margin-left: 35px;
  margin-top: 20px;
  .thead {
    color: #6ae3eb;
    margin-bottom: 5px;
    margin-right: 20px;
  }

  .tbody {
    height: calc(100% - 70px);
    font-size: 12px;
  }

  .row {
    display: flex;
    align-items: center;

    &:not(:last-child) {
      // margin-bottom: 12px;
      height: 30px;
    }

    div {
      text-align: center;

      &:last-child {
        flex: 1;
        margin: 0px 0 0 33px;
      }

      &:first-child {
        width: 100px;
      }

      &:not(:last-child) {
        width: 120px;
        text-overflow: ellipsis;

        overflow: hidden;

        white-space: nowrap;
        margin: 0px 0 0 0;
      }

      img {
        width: 80px;
        height: 50px;
      }
    }
    .person {
      margin-top: 4%;
      margin-left: 37%;
      height: 20px;
      line-height: 25px;
      display: flex;
    }
  }
}
.active {
  background-color: #6ae3eb;
}
.informationDialog{
  width: 22%;
    height: 32%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAuQAAAJGCAYAAAATcJCAAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAzZSURBVHgB7doxq9ZlGIDx5//6ejwqLqdjdSoSpxApoSgoMlv7CIo4NPgZ/AgthWtDi0sfw4ZwCQqhCBwEDbTIHKLO8XT0PWVLs5DnepHfb3l4tpt7uoZ7On9r8/KYxqmxpBaLxbeP5vPPBwAAPKH9Ozvnxr59Z8aS2h3ju/njGH+0tf3B5t37W2MJ/Xnz7on73/z40QAAgCd09PQb66svrR8aS+jQxtrBfasHduePP5t3fnvwwydXbg8AAHiG/H7zp3tjGU3TOHnpwqtHjm+M2QAAADKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQtP525tXr3184cMBAADsqfe+uHJ1vjubfbpx+uyxX65dfzAAAICnb5rGC++eWtndN/ts9nCMG1s/3xfjAACwZ3bHPw2+/XB7+4YbcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAICXIAAAgJcgAACAlyAAAIzeZjcXHt7RNrAwAA2CPTOPr+68/vX1k5O5sW463Dx188MgAAgD2z+vL6wbHYPeNkBQAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCghwAAEKCHAAAQoIcAABCg
    background-size: 100% 100%;
    position: absolute;
    margin: -36% 0px 0px 41%;
  .titleText{
    font-size: 18px;
    margin: 25px 0 0 150px;
  }
  .content{
    margin: 61px 0 0 80px;
    div{
      margin-bottom: 15px;
    }
  }
  
}
</style>