PM2023XiAnShuBoHui_Web.git

<template>
  <div class="RealTimeVideo">
    <div class="videoLists">
      <vue-seamless-scroll
        :data="videoDatas"
        :class-option="options"
        class="scrollBox"
      >
        <ul>
          <li v-for="(item, index) in videoDatas" :key="index">
            <div class="imgBox">
              <img :src="item.img" alt="" />
            </div>
            <div class="addressMess">
              <span>{{ item.address }}</span>
              <i class="imgBox">
                <img src="./position.png" alt="" />
              </i>
            </div>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
    <div class="tableLists">
      <table-scroll
        :listDatas="listDatas"
        :stepNum="stepNum"
        :className="className"
        :tableClass="tableClass"
      >
        <el-table-column
          :prop="column.fieldName"
          :label="column.name"
          v-for="column in titleDatas"
          :key="column.fieldName"
          :width="column.width"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <template v-if="column.fieldName == ''">
              <span class="iconStyle">
                <img
                  :src="
                    scope.row.status == 1
                      ? require('./icon2.png')
                      : require('./icon1.png')
                  "
                  alt=""
                />
              </span>
            </template>
            <template v-else-if="column.fieldName == 'status'">
              <span
                :style="{
                  color:
                    scope.row[column.fieldName] == 0
                      ? '#FFFFFF'
                      : scope.row[column.fieldName] == 1
                      ? '#FFB756'
                      : '#FFFFFF',
                }"
                >{{
                  scope.row[column.fieldName] == 0
                    ? "正常"
                    : scope.row[column.fieldName] == 1
                    ? "路口积水超警戒水位"
                    : ""
                }}</span
              >
            </template>
            <template v-else-if="column.fieldName == 'grade'">
              <span
                :style="{
                  color:
                    scope.row[column.fieldName] == '一级'
                      ? '#DF3747'
                      : scope.row[column.fieldName] == '二级'
                      ? '#FFB756'
                      : '#EEE968',
                }"
              >
                {{
                  scope.row[column.fieldName] == "一级"
                    ? "一级"
                    : scope.row[column.fieldName] == "二级"
                    ? "二级"
                    : "三级"
                }}
              </span>
            </template>
            <template v-else>
              <span
                :style="{
                  color: scope.row.status == 1 ? '#FFB756' : '#FFFFFF',
                }"
                >{{ scope.row[column.fieldName] }}</span
              >
            </template>
          </template>
        </el-table-column>
      </table-scroll>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "RealTimeVideo",
  components: {},
  data() {
    return {
      videoDatas: [],
      listDatas: [],
      titleDatas: [],
      stepNum: 0,
      className: "setClass",
      tableClass: "tableAll",
    };
  },
  created() {
    this.init();
  },
  computed: {
    options() {
      return {
        step: 0, // 滚动速度 , 数值越大滚动越快
        limitMoveNum: 3, // 滚动的数据条数
        hoverStop: true, // 鼠标点击停止滚动, 默认true
        openTouch: false, // 按住鼠标停止滚动, 默认true
        direction: 2, // 滚动方向 , 0 向下 , 1 向上 , 2 向左 , 3 向右
        singleHeight: 0, // 单步运动停止的高度(默认是0, 无缝不停止的滚动,direction是0或1)
        // 就是滚多高停一下,再滚多高又停一下,停的时间就是waitTime
        // 这个高度,可以F12审查元素用箭头放在字上面看li的高度是多少
        singleWidth: 0, // 单步运动停止的宽度(默认是0, 无缝不停止的滚动,direction是2或3)
        waitTime: 1000, // 单步运动停止的时间 (默认值1000ms)
        openWatch: true, // 开启数据实时监控刷新dom
      };
    },
  },
  methods: {
    init() {
      this.videoDatas = [
        {
          id: 1,
          img: require("./video1.png"),
          address: "西三环科学大道交叉口",
        },
        {
          id: 2,
          img: require("./video2.png"),
          address: "雪松路与金梭路交叉口",
        },
        {
          id: 3,
          img: require("./video3.png"),
          address: "雪松路与金校路交叉口",
        },
      ];
      this.stepNum = 0;
      this.listDatas = [
        {
          id: 1,
          typeName: "燃气",
          grade: "一级",
          address: "西三环科学大道交叉口",
          alarmTime: "2023-02-19 12:23:49",
          project: "燃气",
          status: 0,
        },
        {
          id: 2,
          typeName: "燃气",
          grade: "二级",
          address: "雪松路与金梭路交叉口路北摄像头04",
          alarmTime: "2023-02-19 12:23:49",
          project: "燃气",
          status: 1,
        },
        {
          id: 3,
          typeName: "燃气",
          grade: "一级",
          address: "雪松路与金校路交叉口向东500米",
          alarmTime: "2023-02-19 12:23:49",
          project: "燃气",
          status: 0,
        },
      ];
      this.titleDatas = [
        {
          name: "",
          fieldName: "",
          width: 10,
        },
        {
          name: "序号",
          fieldName: "id",
          width: 120,
        },
        {
          name: "位置",
          fieldName: "address",
        },
        {
          name: "状态",
          fieldName: "status",
        },
      ];
    },
  },
};
</script>
 
<style lang="scss" scoped>
.RealTimeVideo {
  position: absolute;
  width: 100%;
  height: calc(100% - 61px);
  top: 61px;
  box-sizing: border-box;
  .videoLists {
    width: 100%;
    height: 120px;
    .scrollBox {
      height: 100%;
      overflow: hidden;
    }
    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      li {
        width: 266px;
        height: 120px;
        box-sizing: border-box;
        position: relative;
        margin-right: 18px;
        .imgBox {
          display: inline-block;
          width: 100%;
          height: 100%;
        }
        .addressMess {
          width: 100%;
          padding: 0 12px;
          position: absolute;
          left: 0;
          bottom: 0;
          height: 32px;
          background: rgba(0, 198, 255, 0.3);
          line-height: 32px;
          border-top: 1px solid rgba(255, 255, 255, 0.3);
          box-sizing: border-box;
          overflow: hidden;
          span {
            float: left;
            font-size: 16px;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0px 2px 7px #12323a;
          }
          i {
            float: right;
            width: 19px;
            height: 21px;
            margin-top: 7px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
  .tableLists {
    width: 100%;
    height: calc(100% - 120px);
    padding-top: 10px;
    box-sizing: border-box;
    .iconStyle {
      display: inline-block;
      width: 10px;
      height: 32px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>