yclw/src/views/groupPage/districtPageModules/statisticalAnalysis/progressModule/ProjectSituationofPM.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInRight"
    leave-active-class="animate__slideOutRight"
  >
    <div class="widget-ProjectSituationofPM">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">近期工程情况</span>
          <div class="dateRange">{{ endTime }}～{{ beginTime }}</div>
        </div>
      </div>
      <div class="content-info">
        <!---->
        <div class="percentChartContent">
          <div class="chart-item" v-for="item of percentChartList" :key="item.title">
            <PercentGaugeChart :title="item.title" :value="item.value" />
          </div>
        </div>
        <!---->
        <div class="bottom3Content">
          <!---->
          <div class="bottom2Content">
            <!---->
            <div class="overallProjectProgress">
              <div class="title">
                <div class="icon"></div>
                <span class="item-name">工程总体进度</span>
                <div class="symbol">滞后</div>
              </div>
              <div class="oppContent">
                <div class="oppItem">
                  <div class="oppItem-title">报批报建情况：</div>
                  <div class="oppItem-content">
                    {{ situation }}
                  </div>
                </div>
              </div>
            </div>
            <!---->
            <div class="scanCodeNumber">
              <div class="title">
                <div class="icon"></div>
                <span class="item-name">扫码次数统计</span>
              </div>
              <div class="scanCodeNumberContent">
                <SupAndConsNumChartVue :type="'progress'" :chartData="scanCodeNumberData" />
              </div>
            </div>
          </div>
          <!---->
          <div class="constructionRecords">
            <div class="title">
              <div class="icon"></div>
              <span class="item-name">施工记录</span>
              <span class="item-type">（沟槽开挖）</span>
            </div>
            <div class="constructionRecordsContent">
              <el-carousel ref="picCarousel" indicator-position="none" :autoplay="true" @change="changeCarousel">
                <el-carousel-item v-for="item in pictureList" :key="item.index">
                  <div class="consName">白洋冲片区排水管网综合治理工程{{ item.index }}</div>
                  <div class="consInfo">
                    <div class="infoWrap">
                      <div class="pipeInfo">排水管网WS01-WS03</div>
                      <div class="timeInfo">2022-02-03 12:12:12</div>
                    </div>
                  </div>
                  <img class="consImg" src="@/views/groupPage/images/项目图册/1-调蓄池施工.png" />
                </el-carousel-item>
              </el-carousel>
              <div class="switchWidget">
                <div class="leftArrow" @click="clickPrev()"><i class="el-icon-caret-left"></i></div>
                <div class="middleNumber">
                  <div class="activeNum">{{ currentActive }}</div>
                  /{{ pictureList.length }}
                </div>
                <div class="rightArrow" @click="clickNext()"><i class="el-icon-caret-right"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import moment from 'moment'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import PercentGaugeChart from '@/views/groupPage/components/GaugeChart/percentGaugeChart.vue'
import SupAndConsNumChartVue from '@/views/groupPage/components/ComprehensiveChart/supAndConsNumChart.vue'
import { getRequestResult } from '@/views/groupPage/apis'
import { roundFun } from '@/views/groupPage/util'
//近期工程情况-进度
@Component({
  name: 'ProjectSituationofPM',
  components: { PercentGaugeChart, SupAndConsNumChartVue }
})
export default class ProjectSituationofPM extends Vue {
  percentChartList = []
  scanCodeNumberData = {}
  situation = ''
  beginTime = moment(new Date()).format('YYYY.MM.DD')
  endTime = moment(new Date().setDate(new Date().getDate() - 6)).format('YYYY.MM.DD')
  pictureList: Array<any> = [{ index: 1 }, { index: 2 }, { index: 3 }, { index: 4 }]
  currentActive = 1
  clickPrev() {
    ;(this.$refs['picCarousel'] as any).prev()
  }
  clickNext() {
    ;(this.$refs['picCarousel'] as any).next()
  }
  changeCarousel(active, prev) {
    this.currentActive = active + 1
  }
  get staticticalInfo() {
    return this.$store.state.bigScreen.statisticalAnalysisInfo
  }
  get projectCode() {
    return this.$store.state.bigScreen.currentProjectCode
  }
  @Watch('projectCode', { immediate: true })
  onChangMehod() {
    this.getPageData()
  }
  @Watch('staticticalInfo')
  onChangeMethod(val) {
    this.assembleData(val)
  }
  assembleData(result) {
    const { build, design } = result.recentProjectInfo
    console.log(build, design)
    let dPercent = 0,
      cPercent = 0
    build.forEach((item) => {
      cPercent += roundFun((item.current30data - item.current30beforedata) / item.current30beforedata, 2)
    })
    design.forEach((item) => {
      dPercent += roundFun((item.current30data - item.current30beforedata) / item.current30beforedata, 2)
    })
    this.percentChartList = [
      { title: '设计入库同比上周', value: dPercent },
      { title: '施工部件同比上周', value: cPercent }
    ]
    //
    const length = result.dailyData.length
    let list = result.dailyData.slice(length - 7, length),
      xAxis = [],
      spvData = [],
      conData = []
    list.forEach((item) => {
      xAxis.push(item.datestr.substr(4, 4).substr(0, 2) + '/' + item.datestr.substr(4, 4).substr(2, 2))
      spvData.push(item.con_scans)
      conData.push(item.spv_scans)
    })
    this.scanCodeNumberData = {
      xAxis,
      spvData,
      conData
    }
  }
  async getPageData() {
    let data = { blockCode: 'ycepclist' }
    let projectCode = this.projectCode
    //获取全部数据
    const result = await getRequestResult(data)
    let res = (result as any).filter((item) => item.indexCode.indexOf(projectCode + '-') != -1)
    res = res.map((item) => {
      Object.keys(item).forEach((val) => (item[val] = item[val] || ''))
      return { ...item }
    })
    this.situation = res.find((e) => e.indexCode == projectCode + '-' + 70).indexValue
  }
}
</script>

<style lang='scss' scoped>
.animate__slideInRight,
.animate__slideOutRight {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectSituationofPM {
  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 */;
  .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;
      }
      .dateRange {
        height: 0.0625rem /* 12/192 */;
        font-size: 0.072917rem /* 14/192 */;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.166667rem);
    font-family: Source Han Sans CN;
    .percentChartContent {
      height: 0.807292rem /* 155/192 */;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      .chart-item {
        height: 100%;
        width: 50%;
      }
    }
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      .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,
      .item-type {
        font-family: Source Han Sans CN;
        color: #0ea7ff;
        font-size: 0.072917rem /* 14/192 */;
        font-weight: 500;
      }
      .item-type {
        color: #89c3ec !important;
      }
      .symbol {
        margin-left: 0.052083rem /* 10/192 */;
        width: 0.208333rem /* 40/192 */;
        height: 0.104167rem /* 20/192 */;
        font-size: 0.072917rem /* 14/192 */;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        background: linear-gradient(90deg, #2188d3, #9c2bec);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .bottom3Content {
      height: calc(100% - 0.807292rem /* 155/192 */);
      width: 100%;
      background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0) 100%);
    }
    .overallProjectProgress {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: calc(100% - 1.380208rem /* 265/192 */);
      .oppContent {
        margin-top: 0.036458rem /* 7/192 */;
        width: 100%;
        height: calc(100% - 0.15625rem /* 30/192 */);
        background: #062239;
        overflow: auto;
        .oppItem {
          width: 100%;
          padding: 0.052083rem /* 10/192 */;
          color: #feffff;
          font-family: Source Han Sans CN;
          font-size: 0.072917rem /* 14/192 */;
          .oppItem-title {
            color: #17aaff;
          }
          .oppItem-content {
            padding: 0.026042rem /* 5/192 */ 0;
            line-height: 0.114583rem /* 22/192 */;
          }
        }
      }
    }
    .scanCodeNumber {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: 1.25rem /* 240/192 */;
      .scanCodeNumberContent {
        height: calc(100% - 0.072917rem /* 14/192 */);
        width: 100%;
      }
    }
    .bottom2Content {
      width: 100%;
      height: calc(100% - 1.40625rem /* 270/192 */);
      overflow: auto;
    }
    .constructionRecords {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: 1.354167rem /* 260/192 */;
      .constructionRecordsContent {
        width: 100%;
        height: calc(100% - 0.072917rem /* 14/192 */);
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-end;
        .el-carousel {
          width: 90%;
          height: 80%;
          /deep/ .el-carousel__container {
            height: 100% !important;
          }
          .consImg {
            height: 100%;
            width: 100%;
          }
          .consName,
          .consInfo {
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            width: 100%;
            height: 0.177083rem /* 34/192 */;
            line-height: 0.177083rem /* 34/192 */;
            font-size: 0.072917rem /* 14/192 */;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }
          .consName {
            top: 0;
          }
          .consInfo {
            bottom: 0;
          }
          .infoWrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
        .switchWidget {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 0.557292rem /* 107/192 */;
          color: rgba(137, 195, 236, 1);
          height: 0.072917rem /* 14/192 */;
          margin: 0.052083rem /* 10/192 */;
          .leftArrow,
          .rightArrow {
            font-size: 0.072917rem /* 14/192 */;
            cursor: pointer;
          }
          .middleNumber {
            display: flex;
            .activeNum {
              color: #2ba7ff;
            }
          }
        }
      }
    }
  }
}
</style>