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">
        <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"
                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">
          <div class="title">【方案1】因停工导致延期的施工工序</div>
          <el-table :data="tableData" size="mini" style="width: 100%" height="250">
            <el-table-column prop="date" label="施工工序" width="88"> </el-table-column>
            <el-table-column prop="name" label="联合单元" width="90"> </el-table-column>
            <el-table-column label="施工天数">
              <el-table-column prop="num1" label="延期前" width="65"> </el-table-column>
              <el-table-column prop="num2" label="延期后" width="65"> </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>
export default {
  data() {
    return {
      //进度模拟方案
      stopDateList: [],
      tableData: [
        {
          date: '第一层土方开挖',
          name: '区域A,区域B,区域C,区域D',
          num1: 5,
          num2: 10
        },
        {
          date: '第一层土方开挖',
          name: '区域A,区域B,区域C,区域D',
          num1: 5,
          num2: 10
        },
        {
          date: '第一层土方开挖',
          name: '区域A,区域B,区域C,区域D',
          num1: 5,
          num2: 10
        },
        {
          date: '第一层土方开挖',
          name: '区域A,区域B,区域C,区域D',
          num1: 5,
          num2: 10
        }
      ]
    }
  },
  mounted() {
    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)
      }
    }
  }
}
</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);
}
.dateTimeDiv .el-date-editor .el-range__icon,
.dateTimeDiv .el-date-editor .el-range-separator {
  line-height: 30px;
  height: auto;
}
.dateTimeDiv .el-range-separator {
  color: #d9d8d8;
}
.tableBox .el-table .el-table__cell{
    padding: 0px;
}
</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;
  height: 24px;
  margin: auto 0px auto 10px;
  cursor: pointer;
}
.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 - 105px);
  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>