water-dispatch-web/src/views/bigScreen1/component/title.vue

<template>
  <div class="container">
    <h1 class="title">苏州河道处调度指令看板</h1>

    <div class="bottom">
      <div>{{ $moment(time).format('YYYY-MM-DD HH:mm:ss') }}</div>

      <div>
        <div v-if="tomorrows && tomorrows.length > 0" style="cursor:pointer;" @click="$refs['tomorrow'].show()">明日调令 <i class="el-icon-d-arrow-right"></i></div>
        <div style="cursor:pointer;" @click="$emit('show-done')">当日已完成调令 <i class="el-icon-d-arrow-right"></i></div>
      </div>
    </div>

    <tomorrow ref="tomorrow" :tomorrows="tomorrows" @step-click="e => $emit('step-click', e)"></tomorrow>
  </div>
</template>

<script>
import tomorrow from "./tomorrow.vue";
import { index } from "@/api/system/baseForm";
export default {
  components: {
    tomorrow
  },
  inject: ['nowTime'],
  data() {
    return {
      tomorrows: []
    }
  },
  methods: {
    async getTomorrow () {
      this.tomorrows = (
        await index({
          table_name: "transfers",
          page: 1,
          page_size: 9999,
          sort_name: "start_time",
          sort_type: "asc",
          filter: [
            {
              key: 'start_time',
              op: 'range',
              value: `${this.$moment().add(1,'day').startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment().add(1,'days').endOf('days').format('YYYY-MM-DD HH:mm:ss')}`
            },
            {
              key: "status",
              op: "eq",
              value: 2
            }
          ]
        },false)
      ).data;
    }
  },
  computed: {
    time () {
      return this.nowTime()
    }
  },
  mounted() {

  },
  created() {
    this.getTomorrow()
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">
.container {
  position: relative;

  .title {
    font-size: 2.8rem;
    line-height: 2.67rem;
    text-align: center;
    font-weight: 400;
    color: #FFFFFF;

    padding: 2.87rem 0 0 0;
  }

  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 400;
    color: #FBFBFF;
    height: 2.92rem;
    font-size: 1.2rem;

    padding: 0 5.73rem;
  }
}
$title-height: 8.46rem;
</style>