yclw/src/views/groupPage/districtPageModules/projectPanoramic/ProjectProgress.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInRight"
    leave-active-class="animate__slideOutRight"
  >
    <div class="widget-ProjectProgress">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">项目进展</span>
        </div>
      </div>
      <div class="content-info">
        <div class="content-item investment">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">投资完成情况</span>
          </div>
          <div class="content">
            <ComOneBatteryChart v-on="{ fontSize }" :chartData="investData" />
          </div>
        </div>
        <div class="content-item">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">设计进度</span>
          </div>
          <div class="content">
            <ComProgressChart v-on="{ fontSize }" :chartData="progressData" />
          </div>
        </div>
        <div class="content-item">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">施工进度</span>
          </div>
          <div class="content build-progress">
            <div class="build-progress-item">
              <div class="build-progress-title">工地施工状态</div>
              <div class="build-progress-chart">
                <ComProgressPieChart :chartData="buildStatusData" v-on="{ fontSize }" />
              </div>
            </div>
            <div class="build-progress-item">
              <div class="build-progress-title">清淤检测</div>
              <div class="build-progress-chart">
                <ComProgressPieChart :chartData="buildDredgingData" v-on="{ fontSize }" />
              </div>
            </div>
          </div>
        </div>
        <div class="content-item projectInfo">
          <div class="title">
            <div class="icon"></div>
            <span class="item-name">上周项目情况</span>
          </div>
          <div class="content projectInfoContent">
            <div class="top-content">
              <div class="chart-container">
                <div class="chart-title">完成占比：{{ complishPercent }}</div>
                <ComThreeDimensionsChart v-on="{ fontSize }" :chartData="staList" />
                <!-- 底座背景 -->
                <div class="bg"></div>
              </div>
              <div class="dataInfo">
                <div
                  class="data-item"
                  v-for="(item, index) of staList"
                  :key="item.name"
                  :style="index === 0 ? 'background: rgba(11, 122, 192,0.16)' : 'background: rgba(8, 178, 114,0.16)'"
                >
                  <div class="pointSymbol" :style="index === 0 ? 'background:#2BA7FF' : 'background:#13D28A'"></div>
                  <div class="data-title">{{ item.name }}</div>
                  <div class="data-value">{{ item.value }}{{ item.unit }}</div>
                </div>
              </div>
            </div>
            <div class="bottom-content">
              <div class="bottom-content-item">
                <div class="bc-item">
                  <div class="bc-title">人员配置</div>
                  <div class="bc-value">
                    总人数：<span>{{ totalPerson }}</span>
                  </div>
                </div>
                <div class="bc-item">
                  <div class="bc-title">设备配置</div>
                  <div class="bc-value">
                    总数量：<span>{{ totalDevice }}</span>
                  </div>
                </div>
              </div>
              <div class="bottom-content-item">
                <div class="bcb-item">
                  <el-carousel :autoplay="true" direction="vertical">
                    <el-carousel-item v-for="item in staffingList" :key="item.title">
                      <div class="bcb-title">{{ item.title }}</div>
                      <div class="bcb-value">{{ item.value }}{{ item.unit }}</div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="bcb-item">
                  <el-carousel :autoplay="true" direction="vertical">
                    <el-carousel-item v-for="item in devicesList" :key="item.title">
                      <div class="bcb-title">{{ item.title }}</div>
                      <div class="bcb-value">{{ item.value }}{{ item.unit }}</div>
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import { getRequestResult } from '@/views/groupPage/apis'
import { setNullAndUndefinedEmpty, fontSize as fs } from '@/views/groupPage/util'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import ComOneBatteryChart from '@/views/groupPage/components/BatteryChart/ComOneBatteryChart.vue'
import ComProgressChart from '@/views/groupPage/components/BarChart/ComProgressChart.vue'
import ComProgressPieChart from '@/views/groupPage/components/PieChart/ComProgressPieChart.vue'
import ComThreeDimensionsChart from '@/views/groupPage/components/OthersChart/ComThreeDimensionsChart.vue'
//项目进展
@Component({
  name: 'ProjectProgress',
  components: { ComOneBatteryChart, ComProgressChart, ComProgressPieChart, ComThreeDimensionsChart }
})
export default class ProjectProgress extends Vue {
  investData: object = {}
  progressData: Array<any> = [{}, {}, {}]
  buildStatusData: object = {}
  buildDredgingData: object = {}
  complishPercent: number = 0 //完成占比
  staList: Array<any> = [{}, {}]
  totalPerson: number = 0
  totalDevice: number = 0
  staffingList: Array<any> = []
  devicesList: Array<any> = []
  get fontSize() {
    return fs
  }
  get setNoNull() {
    return setNullAndUndefinedEmpty
  }
  mounted() {
    this.getPageData()
  }
  roundFun(value, n) {
    return Math.round(value * Math.pow(10, n)) / Math.pow(10, n)
  }
  getPageData() {
    let data = { blockCode: 'ycepclist' }
    let projectCode = 'HB06'
    //获取全部数据
    getRequestResult(data).then((res: Array<any>) => {
      res = res.filter((item) => item.indexCode.indexOf(projectCode + '-') != -1)
      res = res.map((item) => {
        Object.keys(item).forEach((val) => (item[val] = item[val] || ''))
        return {
          ...item,
          indexValue:
            item.unit === '万'
              ? this.roundFun(this.setNoNull(item.indexValue) / 10000, 4)
              : this.setNoNull(item.indexValue)
        }
      })
      //投资完成情况
      this.investData = {
        num: res.find((e) => e.indexCode == projectCode + '-' + 21).indexValue,
        numUnit: res.find((e) => e.indexCode == projectCode + '-' + 2).unit,
        total: res.find((e) => e.indexCode == projectCode + '-' + 2).indexValue,
        totalUnit: res.find((e) => e.indexCode == projectCode + '-' + 2).unit
      }
      //设计进度
      this.progressData = this.progressData.map((item, index) => {
        let target = index * 2
        return {
          name: res.find((e) => e.indexCode == projectCode + '-' + (index + 22)).indexName,
          percent:
            res.find((e) => e.indexCode == projectCode + '-' + (index + 22)).indexValue +
            res.find((e) => e.indexCode == projectCode + '-' + (index + 22)).unit,
          totalAmout: res.find((e) => e.indexCode == projectCode + '-' + (target + 25)).indexValue,
          finishAmout: res.find((e) => e.indexCode == projectCode + '-' + (target + 26)).indexValue
        }
      })
      //施工进度
      this.buildStatusData = {
        building: res.find((e) => e.indexCode == projectCode + '-' + 31).indexValue,
        finished: res.find((e) => e.indexCode == projectCode + '-' + 32).indexValue,
        nobuilding: res.find((e) => e.indexCode == projectCode + '-' + 33).indexValue,
        unit: res.find((e) => e.indexCode == projectCode + '-' + 31).unit
      }
      this.buildDredgingData = {
        building: res.find((e) => e.indexCode == projectCode + '-' + 34).indexValue,
        finished: 0,
        nobuilding: res.find((e) => e.indexCode == projectCode + '-' + 35).indexValue,
        unit: res.find((e) => e.indexCode == projectCode + '-' + 34).unit
      }
      //上周项目情况
      this.complishPercent =
        res.find((e) => e.indexCode == projectCode + '-' + 38).indexValue +
        res.find((e) => e.indexCode == projectCode + '-' + 38).unit
      this.staList = this.staList.map((item, index) => {
        return {
          name: res.find((e) => e.indexCode == projectCode + '-' + (index + 36)).indexName,
          value: res.find((e) => e.indexCode == projectCode + '-' + (index + 36)).indexValue,
          unit: '亿'
        }
      })
      //
      this.totalPerson = res.find((e) => e.indexCode == projectCode + '-' + +39).indexValue
      this.totalDevice = res.find((e) => e.indexCode == projectCode + '-' + +40).indexValue
      res
        .filter((item) => item.indexCode.indexOf(projectCode + '-' + '40') != -1)
        .forEach((citem) => {
          this.staffingList.push({
            title: citem.indexName,
            value: citem.indexValue,
            unit: citem.unit
          })
        })
      res
        .filter((item) => item.indexCode.indexOf(projectCode + '-' + '44') != -1)
        .forEach((citem) => {
          this.devicesList.push({
            title: citem.indexName,
            value: citem.indexValue,
            unit: citem.unit
          })
        })
    })
  }
}
</script>

<style lang='scss' scoped>
.animate__slideInRight,
.animate__slideOutRight {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectProgress {
  $size10: 0.052083rem /* 10/192 */;
  $size20: 0.104167rem /* 20/192 */;
  z-index: 2;
  //position
  bottom: $size10 /* 10/192 */;
  margin-right: $size20 /* 20/192 */;
  right: 0;
  position: absolute;
  //size
  height: calc(100% - 0.557292rem /* 107/192 */);
  width: 2.083333rem /* 400/192 */;
  color: #eee;
  .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;
      }
    }
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.166667rem);
    overflow: auto;
    padding: 2px;
    .investment {
      height: 15% !important;
    }
    .projectInfo {
      height: 35% !important;
    }
    .content-item {
      width: 100%;
      height: 25%;
      float: left;
      overflow: hidden;
      .title {
        width: 100%;
        display: flex;
        // padding: .145833rem 0 .104167rem 0;
        padding: 0.145833rem 0 0.026042rem /* 5/192 */ 0;
        .icon {
          height: 0.072917rem /* 14/192 */;
          width: 0.078125rem /* 15/192 */;
          margin-right: 0.046875rem /* 9/192 */;
          background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
          background-size: 100% 100%;
        }
        .item-name {
          font-family: Source Han Sans CN;
          color: #0ea7ff;
          font-size: 0.072917rem /* 14/192 */;
          font-weight: 500;
        }
        .item-info {
          color: #2ba7ff;
          font-size: 0.072917rem /* 14/192 */;
          font-weight: 500;
        }
      }
      .content {
        height: calc(100% - 0.234375rem /* 45/192 */);
        width: 100%;
        display: flex;
      }
      .build-progress {
        justify-content: space-between;
      }
      .build-progress-item {
        height: 100%;
        width: 48%;
        background: rgba(43, 167, 255, 0.16);
        .build-progress-title {
          display: flex;
          justify-content: center;
          padding: 0.052083rem /* 10/192 */;
          font-size: 0.072917rem /* 14/192 */;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #ffffff;
        }
        .build-progress-chart {
          width: 100%;
          height: calc(100% - 0.177083rem /* 34/192 */);
        }
      }
      .projectInfoContent {
        flex-flow: column;
      }
      .top-content {
        display: flex;
        height: 50%;
        width: 100%;
      }
      .chart-container {
        width: 50%;
        position: relative;
        .chart-title {
          position: absolute;
          left: 0.234375rem /* 45/192 */;
          font-size: 0.083333rem /* 16/192 */;
          font-family: Source Han Sans CN;
          font-weight: bold;
          top: 0.104167rem /* 20/192 */;
          color: #ffffff;
          white-space: normal;
        }
        .bg {
          width: 100%;
          height: 100%;
        }
        .bg {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          margin: 0 auto;
          width: 70%;
          width: 55%;
          height: 95%;
          // left: 0.041667rem /* 8/192 */;
          z-index: -1;
          // width: 0.46875rem /* 90/192 */;
          // height: 0.390625rem /* 75/192 */;
          background: no-repeat center;
          background-image: url('~@/views/groupPage/images/底座样式.png');
          background-size: 100% 100%;
        }
      }
      .dataInfo {
        width: 50%;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
        font-family: Source Han Sans CN;
        .data-item {
          display: flex;
          align-items: center;
          padding: 0.052083rem /* 10/192 */;
          color: #ffffff;
          height: 45%;
          .pointSymbol,
          .data-title {
            margin-right: 0.052083rem /* 10/192 */;
            white-space: nowrap;
          }
          .pointSymbol {
            border-radius: 50%;
            height: 0.052083rem /* 10/192 */;
            width: 0.052083rem /* 10/192 */;
          }
          .data-title {
            font-size: 0.072917rem /* 14/192 */;
            font-weight: 400;
            color: #ffffff;
          }
          .data-value {
            font-size: 0.083333rem /* 16/192 */;
            font-family: Source Han Sans CN-HEAVY;
            font-weight: bold;
            color: #ffffff;
            position: absolute;
            right: 2%;
          }
        }
      }
      .bottom-content {
        height: 50%;
        width: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        margin-top: 0.052083rem /* 10/192 */;
        .bottom-content-item {
          height: 45%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-family: Source Han Sans CN;
          .bc-item {
            height: 100%;
            width: 48%;
            background: rgba(14, 167, 255, 0.14);
            display: flex;
            justify-content: space-around;
            align-items: center;
            .bc-title {
              font-size: 0.072917rem /* 14/192 */;
              font-weight: 500;
              color: #2ba7ff;
            }
            .bc-value {
              font-size: 0.072917rem /* 14/192 */;
              font-weight: 400;
              color: rgba(139, 191, 228, 1);
              & > span {
                font-family: Source Han Sans CN-HEAVY;
                font-weight: bold;
                color: rgba(43, 167, 255, 1);
              }
            }
          }
          .bcb-item {
            height: 100%;
            width: 48%;
            background: rgba(255, 255, 255, 0.1);

            /deep/ .el-carousel {
              height: 100%;
              width: 100%;
              .el-carousel__container {
                height: inherit;
                width: inherit;
                .el-carousel__item {
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                }
              }
              .el-carousel__indicators {
                display: none;
              }
              .bcb-title {
                font-size: 0.072917rem /* 14/192 */;
                font-weight: 400;
                color: #ffffff;
              }
              .bcb-value {
                font-size: 0.072917rem /* 14/192 */;
                font-weight: 500;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>