rongLiJiaNai/acs/qd/src/views/bigscreen/task.vue

<template>
  <div style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;">
    <el-row style="height: 100px;">
      <el-col :span="12">
        <div class="grid-content bg-purple"><h2 style="margin-left: 30px;padding-top: 10px;">车间任务看板</h2></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <h2 style="text-align:right;margin-right: 140px;">{{ getTime }}</h2>
        </div>
        <div class="grid-content bg-purple-light">
          <p style="text-align:right;margin-right: 110px;"><b>{{ getDate }}</b></p>
        </div>

      </el-col>
    </el-row>
    <el-row style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;margin-bottom: 10px;">
      <el-input value="各区域叫料未操作" style="width: 200px;"/>
      <div class="" style="height: 200px;border: 1px solid #938d8d;">
        <!-- 表头 -->
        <div class="warp-title">
          <ul class="item">
            <li>
              <span class="title" style="width: 150px">状态</span>
              <span class="title" style="width: 150px">区域</span>
              <span class="title" style="width: 150px">站点</span>
              <span class="title" style="width: 150px">物料名称</span>
              <span class="title" style="width: 150px">数量</span>
              <span class="title" style="width: 150px">备注</span>
            </li>
          </ul>
        </div>
        <!-- 表格滚动区 -->
        <div>
          <vue-seamless-scroll
            :style="{height: this.scrollHeight + 'px' }"
            :data="tableData1"
            :class-option="defaultOption"
            class="warp-content"
          >
            <ul class="item" style="list-style:none;">
              <li
                v-for="(item, index) in tableData1"
                :style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}"
              >
                <span class="data" style="width: 150px" v-text="formatterStatus(item.status)"/>
                <span class="date" style="width: 150px" v-text="item.region"/>
                <span class="date" style="width: 150px" v-text="item.device_code"/>
                <span class="date" style="width: 150px" v-text="item.material"/>
                <span class="date" style="width: 150px" v-text="item.qty"/>
                <span class="date" style="width: 150px" v-text="item.remark"/>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </el-row>

    <el-row style="border: 1px solid #938d8d;margin-left: 10px;margin-right: 10px;margin-top: 80px;">
      <el-input value="各区域叫料执行中" style="width: 200px;"/>
      <div class="" style="height: 250px;border: 1px solid #938d8d;">
        <!-- 表头 -->
        <div class="warp-title">
          <ul class="item">
            <li>
              <span class="title" style="width: 150px;font-weight:bold;">状态</span>
              <span class="title" style="width: 150px">起点</span>
              <span class="title" style="width: 150px">终点</span>
              <span class="title" style="width: 150px">物料名称</span>
              <span class="title" style="width: 150px">数量</span>
              <span class="title" style="width: 150px">备注</span>
            </li>
          </ul>
        </div>
        <!-- 表格滚动区 -->
        <div>
          <vue-seamless-scroll
            :style="{height: this.scrollHeight + 'px' }"
            :data="tableData2"
            :class-option="defaultOption"
            class="warp-content"
          >
            <ul class="item" style="list-style:none;">
              <li
                v-for="(item, index) in tableData2"
                :style="{backgroundColor:((index+1)%2 == 0) ? '#f0f9eb' : '#ffffff'}"
              >
                <span class="data" style="width: 150px" v-text="formatterInstructStatus(item.title)"/>
                <span class="data" style="width: 150px" v-text="item.start_point_code"/>
                <span class="data" style="width: 150px" v-text="item.next_point_code"/>
                <span class="data" style="width: 150px" v-text="item.material"/>
                <span class="data" style="width: 150px" v-text="item.quantity"/>
                <span class="data" style="width: 150px" v-text="item.remark"/>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
//https://blog.csdn.net/weixin_43992867/article/details/110622449
//https://blog.csdn.net/qq_42540989/article/details/102579726
//https://blog.csdn.net/weixin_42201180/article/details/107557277
import deviceCrud from '@/api/acs/device/device'
import instructionCrud from '@/api/acs/instruction/instruction'

export default {
  data() {
    // 这里存放数据
    return {
      tableData1: [],
      tableData2: [],
      getTime: '',
      getDate: '',
      scrollHeight: 250,
      listData: [{
        'title': '第一行',
        'date': '2017-12-16'
      }, {
        'title': '第二行',
        'date': '2017-12-16'
      }, {
        'title': '第三行',
        'date': '2017-12-16'
      }, {
        'title': '第四行',
        'date': '2017-12-16'
      }, {
        'title': '第五行',
        'date': '2017-12-16'
      }, {
        'title': '第六行',
        'date': '2017-12-16'
      }, {
        'title': '第七行',
        'date': '2017-12-16'
      }, {
        'title': '第八行',
        'date': '2017-12-16'
      }]
    }
  },
  // 监听属性 类似于data概念
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }

  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 定时器
    const timer = setInterval(() => {
      this.settime()// 你所加载数据的方法
      deviceCrud.selectDeviceDevicerInfo('2').then(data => {
        this.tableData1 = data
      })
      instructionCrud.queryUnFinish().then(data => {
        this.tableData2 = data
      })
    }, 1000)
    // 销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  // 方法集合
  methods: {
    formatterStatus(status) {
      if (!status) {
        return '未操作'
      }
    },
    formatterInstructStatus(status) {
      if (!status) {
        return '执行中'
      }
    },
    settime() {
      const _this = this
      const yy = new Date().getFullYear()
      const mm = new Date().getMonth() + 1
      const dd = new Date().getDate()
      const hh = new Date().getHours()
      const mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      const ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.getDate = yy + '年' + mm + '月' + dd + '日 ' + '星期' + '日一二三四五六'.charAt(new Date().getDay())
      _this.getTime = hh + ':' + mf + ':' + ss
    }
  }
}
</script>

<style lang="scss" scoped>

.title {
  font-weight: bold;
}

.warp-title {
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }

  li {
    height: 20px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
  }

}

.warp-content {
  overflow: hidden;

  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }

  li {
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    font-size: 15px;
  }

}
</style>