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

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

    <div class="bottom">
      <div>
        <p style="font-size: 1.3rem;">
          <span style="color:#f00;padding-right: 4px;">{{ refresh }}</span><span>秒刷新</span>
          <Icon type="md-refresh-circle" class="refresh-icon" style="margin-left: 10px;font-size:1.7rem;cursor: pointer;" @click="refreshTransfer"/>
          <span style="padding-left: 6px;">新调令数：{{ newLength }}</span>
        </p>
        <p>{{ $moment(time).format('YYYY-MM-DD HH:mm:ss') }}</p>
      </div>

      <div>
        <div 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)" @dataPick="e => getTomorrow(e)"></tomorrow>
  </div>
</template>

<script>
import tomorrow from "./tomorrow.vue";
import { index } from "@/api/system/baseForm";
export default {
  components: {
    tomorrow
  },
  inject: ['nowTime','refreshTime','refreshList','newTransferLength'],
  data() {
    return {
      tomorrows: []
    }
  },
  methods: {
    async getTomorrow (day) {
      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: day ? `${this.$moment(day).startOf('days').format('YYYY-MM-DD HH:mm:ss')},${this.$moment(day).endOf('days').format('YYYY-MM-DD HH:mm:ss')}` : `${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: "range",
              value: "2,7"
            }
          ]
        },false)
      ).data;
    }
  },
  computed: {
    time () {
      return this.nowTime()
    },
    refresh () {
      return this.refreshTime()
    },
    refreshTransfer () {
      return this.refreshList
    },

    newLength () {
      return this.newTransferLength()
    }
  },
  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;

.refresh-icon:hover {
  transition: all 1s;
  transform: rotate(360deg);
}
</style>