water-dispatch-web/src/views/order/component/normalCreate.vue

<template>
  <div style="padding-bottom: 10px;">
    <LxHeader
      icon="md-apps"
      :text="$route.meta.title"
      style="margin-bottom: 10px; border: 0px; margin-top: 15px"
      text="调度指令"
    >
    </LxHeader>

    <div class="weather panel">
      <div class="title">今日信息</div>

      <template v-if="weather">
        <div class="weather-container">
          <Card class="weather-container__card" v-for="(value,key) in weatherObj">
            <template #title>
              {{ value }}
            </template>
            <template>
              <template v-if="weather[key]&&weather[key].length>15">
                <el-tooltip placement="bottom" :content="weather[key]">
                  <span class="text">{{ weather[key] }}</span>
                </el-tooltip>
              </template>
              <template v-else>
                {{ weather[key] }}
              </template>
            </template>
          </Card>
        </div>
      </template>
      <template v-else>
        <Card>
          <el-empty :image-size="60" description="暂无信息"></el-empty>
        </Card>
      </template>
    </div>

    <div class="point panel">
      <div class="title">创建调令</div>

      <div class="point-container">
        <Card class="point-container__card">
          <createDispatch></createDispatch>
        </Card>
      </div>
    </div>

    <div class="dispatch panel">
      <div class="title">已创建调令</div>

      <div class="point-container">
        <Card class="point-container__card">
          <dispatchList></dispatchList>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
import { index, save } from "@/api/system/baseForm";
import { uuid } from "@/utils";

import LxHeader from "@/components/LxHeader/index.vue";
// import step1 from "@/views/order/component/step1.vue";
// import step2 from "@/views/order/component/step2.vue";
// import step3 from "@/views/order/component/step3.vue";
import createDispatch from "@/views/order/component/createDispatch.vue";
import dispatchList from "@/views/order/component/dispatchList.vue";
export default {
  components: {
    LxHeader,
    createDispatch,
    dispatchList
  },
  data() {
    return {
      currentStep: 0,

      data: [],
      weather: {},
      weatherObj: {
        weather: '今日天气',
        water: '今日水情',
        rain: '降水情况',
        prevent: '预警',
        early_warning: '防汛等级'
      }
    }
  },
  methods: {
    // handleNext ({ data, step }) {
    //   console.log(data,step)
    //   switch (step) {
    //     case 1:
    //       let uid = uuid();
    //       this.data = data.map(equipmentId => {
    //         return {
    //           no: uid,
    //           equipment_id: equipmentId,
    //           start_time: '',
    //           end_time: '',
    //           content: '',
    //           level: 1,
    //           status: 1
    //         }
    //       })
    //       this.currentStep = 1;
    //       break;
    //     case 2:
    //       this.data = data;
    //       this.currentStep = 2;
    //       break;
    //     case 3:
    //       let promiseAll = this.data.map(i => {
    //         delete i['equipment_id-span']
    //         delete i['_index']
    //         delete i['_rowKey']
    //         i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
    //         i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;
    //
    //         return save({
    //           table_name: 'transfers',
    //           ...i
    //         },false)
    //       })
    //       let loadingInstance = this.$loading({
    //         lock:true,
    //         background:"rgba(0,0,0,0.4)",
    //         text:"正在加载中..."
    //       })
    //       Promise.all(promiseAll).then(res => {
    //         this.data = [];
    //         loadingInstance.close();
    //         this.currentStep = 3;
    //       }).catch(_ => {
    //         loadingInstance.close();
    //       })
    //       break;
    //   }
    // },
    //
    // handleForward ({ data, step }) {
    //   switch (step) {
    //     case 2:
    //       this.data = data;
    //       this.currentStep = 0;
    //       break;
    //     case 3:
    //       this.currentStep = 1;
    //       break;
    //   }
    // },

    async getWeather () {
      this.weather = (await index({
        table_name: 'waters',
        filter: [
          {
            key: 'date',
            op: 'eq',
            value: this.$moment().format('YYYY-MM-DD')
          }
        ]
      },false)).data[0]
    }
  },
  computed: {},
  created() {
    this.getWeather()
  }
}
</script>

<style scoped lang="scss">
::v-deep .ivu-steps .ivu-steps-title,::v-deep .ivu-steps .ivu-steps-head {
  background: #0000;
}
.panel {
  .title {
    font-weight: 600;
    font-size: 16px;

    padding: 10px 20px;
    position: relative;

    &::before {
      content: '';
      width: 12px;
      height: 12px;
      border-radius: 100%;
      transform: translateY(-50%);
      background: radial-gradient(50% 50% at 50% 50%,$primaryColor 0,$primaryColor 60%,#0000 60%,#0000 80%,$primaryColor 80%,$primaryColor 100%);

      position: absolute;
      left: 0;
      top: 50%;
    }
  }

  & + & {
    margin-top: 20px;
  }
}
.weather {

  &-container {
    display: flex;
    justify-content: space-between;

    &__card {
      flex: 0;
      flex-basis: 19%;

      .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
}
.step {
  width: 80%;

  margin: 0 auto;
}

.complete {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding-bottom: 20px;
  &__icon {
    color: green;
    font-size: 66px;
  }

  & > p {
    font-weight: 600;
    color: #333;
    font-size: 20px;

    padding: 20px 0;
  }
}
</style>