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

<template>
  <Card title="材料进场记录">
    <!-- <VideoModule  class="playVideoBox"
    style="height:200px;width:600px"
    :type="'1x1'"
        :value="selectList"
        :displayBottomMod="false"
        :winNumBer="9"
        :autoplay="false"
        :showCaptrue="false"
        :showControl="false"
        :showPlayback="false"
        :xxx="7"
      ></VideoModule> -->
    <div class="box">
      <div class="security-list">
        <div class="thead">
          <div class="row">
            <div class="td">材料类型</div>
            <div class="td" style="margin-left: 100px">进场时间</div>
            <div class="td">进场量</div>
          </div>
        </div>
        <div class="tbody">
          <vue-scroll style="width: 95%; height: 160px">
            <div
              class="row"
              v-for="(item, index) in tableData"
              :key="index"
              @click="showBtn(index)"
              @mouseleave="mouseLeave"
              :class="{ active: nowIndex == index }"
            >
              <div class="td">{{ item.nameType }}</div>
              <div class="td" style="margin-left: 100px">
                {{ item.dateTime }}
              </div>
              <div class="td" style="margin-left: 20px">
                {{ item.mobilization }}
              </div>
            </div>
            <div class="row" v-if="tableData.length == 0">
              <div
                style="
                  font-size: 14px;
                  color: #999;
                  text-align: center;
                  width: 100%;
                  line-height: 200px;
                "
              >
                暂无数据
              </div>
            </div>
          </vue-scroll>
        </div>
      </div>
    </div>

    <!-- 列表点击弹框 -->
    <div class="informationDialog" v-show="isShow">
      <div class="titleText" >
        材料进场记录
      </div>
      <div class="content">
        <div>进场时间：{{tableDataTest.showTime}}</div>
       <div>材料类型：{{tableDataTest.showType}}</div>
       <div>生产厂家：{{tableDataTest.showManufactor}}</div>
       <div>进场量：{{tableDataTest.showVolume}}</div>
       <div>车牌号：{{tableDataTest.showLicensePlate}}</div>
      </div>
       
    </div>
  </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屏",
        },
      ],
      tableData: [
        {
          nameType: "韶钢 HRB400E 螺纹钢",
          dateTime: "2023-01-10",
          mobilization: 10.87,
        },
        {
          nameType: "韶钢 HRB400E 螺纹钢",
          dateTime: "2023-01-10",
          mobilization: 21.94,
        },
        {
          nameType: "韶钢 HRB400E 螺纹钢",
          dateTime: "2023-01-10",
          mobilization: 32.36,
        },
        {
          nameType: "桂鑫 HRB400E 螺纹钢",
          dateTime: "2023-01-07",
          mobilization: 11.34,
        },
        {
          nameType: "桂鑫 HRB400E 螺纹钢",
          dateTime: "2023-01-07",
          mobilization: 9.21,
        },
        {
          nameType: "桂鑫 HRB400E 螺纹钢",
          dateTime: "2023-01-07",
          mobilization: 5.66,
        },
        {
          nameType: "桂鑫 HRB400E 螺纹钢",
          dateTime: "2023-01-07",
          mobilization: 7.01,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-06",
          mobilization: 34.65,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-06",
          mobilization: 34.6,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-05",
          mobilization: 11.69,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-05",
          mobilization: 10.06,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-05",
          mobilization: 10.59,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-04",
          mobilization: 32.12,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-04",
          mobilization: 13.89,
        },
        {
          nameType: "西林 HRB400E 螺纹钢",
          dateTime: "2023-01-04",
          mobilization: 17.46,
        },
        {
          nameType: "桂万 HRB400E 螺纹钢",
          dateTime: "2023-01-02",
          mobilization: 32.8,
        },
        {
          nameType: "桂万 HRB400E 螺纹钢",
          dateTime: "2023-01-02",
          mobilization: 25.54,
        },
        {
          nameType: "桂万 HRB400E 螺纹钢",
          dateTime: "2023-01-02",
          mobilization: 7.64,
        },
        {
          nameType: "桂万 HRB400E 螺纹钢",
          dateTime: "2023-01-01",
          mobilization: 32.53,
        },
        {
          nameType: "桂万 HRB400E 螺纹钢",
          dateTime: "2023-01-01",
          mobilization: 32.45,
        },
        {
          nameType: "桂万 HRB400E 螺纹钢",
          dateTime: "2023-01-01",
          mobilization: 33.11,
        },
      ],
      nowIndex: -1,
      isShow:false,
      tableDataTest: {},
      tableDataShow:[
        {
          showTime:'2023-01-10',
          showType:'韶钢 HRB400E 螺纹钢',
          showManufactor:'广东韶钢松山股份有限公司',
          showVolume:10.87,
          showLicensePlate:'粤F99916',
        },
        {
          showTime:'2023-01-10',
          showType:'韶钢 HRB400E 螺纹钢',
          showManufactor:'广东韶钢松山股份有限公司',
          showVolume:21.94,
          showLicensePlate:'粤F26801',
        },
        {
          showTime:'2023-01-10',
          showType:'韶钢 HRB400E 螺纹钢',
          showManufactor:'广东韶钢松山股份有限公司',
          showVolume:32.36,
          showLicensePlate:'桂BG6735',
        },
        {
          showTime:'2023-01-07',
          showType:'桂鑫 HRB400E 螺纹钢',
          showManufactor:'广西桂鑫钢铁集团有限公司',
          showVolume:11.34,
          showLicensePlate:'桂J27861',
        },
        {
          showTime:'2023-01-07',
          showType:'桂鑫 HRB400E 螺纹钢',
          showManufactor:'广西桂鑫钢铁集团有限公司',
          showVolume:9.21,
          showLicensePlate:'桂J27861',
        },
        {
          showTime:'2023-01-07',
          showType:'桂鑫 HRB400E 螺纹钢',
          showManufactor:'广西桂鑫钢铁集团有限公司',
          showVolume:5.66,
          showLicensePlate:'桂J27861',
        },
        {
          showTime:'2023-01-07',
          showType:'桂鑫 HRB400E 螺纹钢',
          showManufactor:'广西桂鑫钢铁集团有限公司',
          showVolume:7.01,
          showLicensePlate:'桂J27861',
        },
        {
          showTime:'2023-01-06',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:34.65,
          showLicensePlate:'桂BY5369',
        },
        {
          showTime:'2023-01-06',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:34.60,
          showLicensePlate:'桂BY2375',
        },
        {
          showTime:'2023-01-05',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:11.69,
          showLicensePlate:'粤AFP290',
        },
        {
          showTime:'2023-01-05',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:10.06,
          showLicensePlate:'粤AFP290',
        },
        {
          showTime:'2023-01-05',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:10.59,
          showLicensePlate:'粤AFP290',
        },
        {
          showTime:'2023-01-04',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:32.12,
          showLicensePlate:'粤AFP290',
        },
        {
          showTime:'2023-01-04',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:13.89,
          showLicensePlate:'粤ABW785',
        },
        {
          showTime:'2023-01-04',
          showType:'西林 HRB400E 螺纹钢',
          showManufactor:'建龙西林钢铁有限公司',
          showVolume:17.46,
          showLicensePlate:'粤ABW785',
        },
        {
          showTime:'2023-01-02',
          showType:'桂万 HRB400E 螺纹钢',
          showManufactor:'广西盛隆冶金有限公司',
          showVolume:32.80,
          showLicensePlate:'粤AHN951',
        },

        {
          showTime:'2023-01-02',
          showType:'桂万 HRB400E 螺纹钢',
          showManufactor:'广西盛隆冶金有限公司',
          showVolume:25.54,
          showLicensePlate:'粤AFD410',
        },
        {
          showTime:'2023-01-02',
          showType:'桂万 HRB400E 螺纹钢',
          showManufactor:'广西盛隆冶金有限公司',
          showVolume:7.64,
          showLicensePlate:'粤AFD410',
        },
        {
          showTime:'2023-01-01',
          showType:'桂万 HRB400E 螺纹钢',
          showManufactor:'广西盛隆冶金有限公司',
          showVolume:32.53,
          showLicensePlate:'粤BLU118',
        },
        {
          showTime:'2023-01-01',
          showType:'桂万 HRB400E 螺纹钢',
          showManufactor:'广西盛隆冶金有限公司',
          showVolume:32.45,
          showLicensePlate:'粤BLM700',
        },
        {
          showTime:'2023-01-01',
          showType:'桂万 HRB400E 螺纹钢',
          showManufactor:'广西盛隆冶金有限公司',
          showVolume:33.11,
          showLicensePlate:'粤BMT161',
        },
      ]
    };
  },
  mounted() {
    // this.getList()
  },
  methods: {
    //点击列表
    showBtn(index) {
      this.nowIndex = index;
      this.isShow=true
       this.tableDataTest = this.tableDataShow[index]
    },
     //鼠标移出关闭弹框
     mouseLeave(){
      this.isShow=false
    },

    //查询监控
    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: 15px;
  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>