yclw/src/views/groupPage/districtPageModules/decisionSupport/constructionProgressSimulation/LeftBox.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-ProjectOverview">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">停工日期设置</span>
          <div class="addDiv" @click="addStopDate"></div>
        </div>
      </div>
      <div class="bodyBox" :class="{ activeNoData: stopDateList.length == 0 }">
        <div class="inputStopDate" v-if="stopDateList.length > 0">
          <template v-for="(item, index) in stopDateList">
            <div :key="'inputStopDate_' + index" class="dateTimeDiv">
              <el-date-picker
                v-model="item.value"
                type="daterange"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
              <div class="removeDiv" @click="removeStopDate(index)">
                <i class="removeDate el-icon-remove-outline" style="color: #78b6e7"></i>
              </div>
            </div>
          </template>
        </div>
        <div class="tableBox" v-if="tableData.length">
          <div class="title">【方案1】因停工导致延期的施工工序</div>
          <el-table :data="tableData" size="mini" style="width: 100%" height="250">
            <el-table-column prop="step" label="施工工序" width="88"> </el-table-column>
            <el-table-column prop="joint_unit" label="联合单元" width="90"> </el-table-column>
            <el-table-column label="施工天数">
              <el-table-column prop="start_time" label="停工起" width="65"
                ><template slot-scope="{ row }">{{ getDate(row.start_time) }}</template></el-table-column
              >
              <el-table-column prop="end_time" label="停工止" width="65">
                <template slot-scope="{ row }">{{ getDate(row.end_time) }}</template></el-table-column
              >
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="bottonListDiv">
        <el-button type="primary" @click="removeStopDate(-1)">重置</el-button>
        <el-button type="primary" @click="saveStopDate">确认</el-button>
      </div> -->
    </div>
  </transition>
</template>

<script>
import eventBus from '@/utils/eventBus.js'

export default {
  data() {
    return {
      stopDateList: [],
      tableData: []
    }
  },
  mounted() {
    eventBus.one('best_schedule', (i) => (this.tableData = i))
    this.getPageData()
  },

  methods: {
    getPageData() {},

    /**
     *添加时间段
     */
    addStopDate() {
      const item = {
        value: ''
      }
      this.stopDateList.push(item)
    },

    /**
     *删除时间段
     */
    removeStopDate(index) {
      if (index == -1) {
        this.stopDateList = []
      } else {
        this.stopDateList.splice(index, 1)
      }
    },

    getDate(isoDate) {
      const date = new Date(isoDate)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },

    changeTable(r) {
      r.map((i) => {
        this.stopDateList.push({ value: [i.start, i.end] })
      })
    }
  }
}
</script>
<style>
.tableBox th.el-table__cell,
.tableBox .el-table,
.tableBox .el-table__expanded-cell,
.tableBox .el-table tr {
  background-color: rgba(14, 167, 255, 0) !important;
}
.tableBox .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: rgba(14, 167, 255, 0) !important;
}
.tableBox .el-table td.el-table__cell,
.tableBox .el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #216294;
}
.tableBox .el-table {
  color: #fff !important;
}
.tableBox .el-table th.el-table__cell > .cell {
  font-weight: 500;
  font-size: 14px;
  color: #2ba7ff;
}
.tableBox .el-table--border .el-table__cell,
.tableBox .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
  border-right: 1px solid #216294;
}
.tableBox .el-table--border,
.tableBox .el-table--group {
  border: 1px solid #216294;
}
.tableBox .el-table--border th.el-table__cell,
.tableBox .el-table__fixed-right-patch {
  border-bottom: 1px solid #216294;
}
.tableBox .el-table--border::after,
.tableBox .el-table--group::after,
.tableBox .el-table::before {
  background-color: rgba(14, 167, 255, 0);
}
</style>
<style>
.dateTimeDiv input.el-range-input {
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
}
.dateTimeDiv .el-date-editor .el-range__icon,
.dateTimeDiv .el-date-editor .el-range-separator {
  line-height: 30px;
  height: auto;
}
.dateTimeDiv .el-date-editor .el-range-input{
    width: 35% !important;
}
.dateTimeDiv .el-range-separator {
  color: #d9d8d8;
}
.tableBox .el-table .el-table__cell {
  padding: 0px;
}
.activeNoData {
  height: 100%;
  background: url('~@/assets/images/jczc/noData.png') no-repeat top right;
  background-size: 202.4px 307.5px;
  background-position-x: 107px;
}
</style>
<style lang="scss" scoped>
.bodyBox {
  padding: 15px;
}
.tableBox {
  margin-top: 20px;
  padding-top: 15px;
  border-top: dashed 1px rgba(42, 147, 255, 0.3);
}
.tableBox .title {
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 10px;
}
.dateTimeDiv > div:first-child {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 2px;
  height: 30px;
  border: 1px solid #216294;
}

.dateTimeDiv {
  display: flex;
  margin-top: 10px;
}
.removeDiv {
  width: 24px !important;
  height: 24px !important;
  margin: auto 0px auto 10px !important;
  cursor: pointer !important;
}
.addDiv {
  color: #9bd2fa;
  font-size: 14px;
  font-weight: normal;
  cursor: pointer;
  background: url('~@/assets/images/jczc/add.png') no-repeat center;
  background-size: 100% 100%;
  width: 40px;
  height: 22px;
}
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectOverview {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-left: $size20 /* 20/192 */;
  position: absolute;
  //size
  height: calc(100% - 1.57292rem - 115px);
  width: 2.083333rem /* 400/192 */;
  overflow: hidden;
  color: #eee;
  background: linear-gradient(0deg, rgba(14, 167, 255, 0.24) 0%, rgba(14, 167, 255, 0.05) 100%);
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
    font-family: Source Han Sans CN-HEAVY;
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      font-weight: 400;
      align-items: center;
      .icon {
        height: 0.166667rem /* 32/192 */;
        width: 0.34375rem /* 66/192 */;
        background: url('~@/views/groupPage/images/模块图标/项目概况.png') no-repeat center center;
        background-size: 100% 100%;
      }
      span {
        flex: 1;
        font-weight: bold;
        font-size: 0.083333rem /* 16/192 */;
        color: #ffffff;
        padding: 0.041667rem /* 8/192 */;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>