yclw/src/views/groupPage/districtPageModules/decisionSupport/coordinatedEvaluation/StatisticalRisk.vue

<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-StatisticalRisk">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">{{contentTitle}}</span>
        </div>
      </div>
      <div class="content-info">
        <div class="rankingOfTypes">
          <div class="title">
            <!-- <div class="icon"></div> -->
            <span class="item-name">{{listTitle}}：</span>
          </div>
          <div class="content">
            <ul class="but_ul">
              <li :key="'but_ul_'+item.id+index" v-for="(item,index) in listData">
                <div class="but_ul_name">{{ item.name }}</div>
                <div class="progressDiv" :class="item.value<60?'disqualification':''">
                  <div class="progressRateDiv"  :style="'width:calc((100% - 70px)*'+(item.value/100)+')'">
                  </div>
                  <div class="progressValue">{{item.value||0}}分</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="rankingBut">
          <h4>{{contentItemTitle}}：</h4>
          <p :title="contentItemTitleInfo">{{contentItemTitleInfo}}</p>
          <div class="resultDiv">
            <span class="resultTitle" style="font-size: 12px !important;" >{{resultTitle}}：</span>
            <span class="resultValue" :title="resultValue" style="font-size: 12px !important;">{{resultValue}}</span>
          </div>
          <div class="rankPmd" v-if="problemlist.length>0">
            <el-carousel @change="changeCarousel"  trigger="click" height="70px">
              <el-carousel-item v-for="(i, k) in problemlist" :key="k">
                <span>{{ i.problem }}</span>
                <i>{{ i.correction }}</i>
              </el-carousel-item>
            </el-carousel>
            <div  class="pageInfo">{{(currentIndex+1)+"/"+problemlist.length}}</div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script >
import { getDangerCheckCountData } from '../../../apis'
import { roundFun } from '@/views/groupPage/util'

export default {
  name: 'StatisticalRisk',
  components: {  },
  props:{
    //总标题
    contentTitle:{
      type:String,
      default:"信息",
    },
    //列表标题
    listTitle:{
      type:String,
      default:"信息分析结果"
    },
    //内容子标题
    contentItemTitle:{
      type:String,
      default:"评分最低会议纪要分析"
    },
    //内容子标题内容
    contentItemTitleInfo:{
      type:String,
      default:"2025年4月28日宜昌两网二期工程第XX次建设管理协 调周例会"
    },
    resultTitle:{
      type:String,
      default:"评价结果"
    },
    resultValue:{
      type:String,
      default:"信息协同度良好，反馈较及时，准确度较高，偶尔存在信息滞后2。"
    },
    listData:{
      type:Array,
      default:()=>[{
        id:1,
        value:50,
        name:"01 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      },
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }]
    },//列表数据
    problemlist:{
      type:Array,
      default:()=>[
        {
          problem: '信息共享不及时，导致项目进度滞后。',
          correction: '充分利用信息共享平台，确保及时沟通。'
        },
        {
          problem: '12121信息共享不及时，导致项目进度滞后。',
          correction: '1212充分利用信息共享平台，确保及时沟通。'
        }
      ]
    } ,
  },
  data() {
    return {
      currentIndex:0,
      riskPercent: 0,
      staList: [],
      chartData: {},
      rectifyList: [
        { title: '待整改', num: 3 },
        { title: '整改中', num: 3 },
        { title: '已整改', num: 3 }
      ],
      rankingBarChartData: null,
    
      projectCode: this.$store.state.bigScreen.currentProjectCode
    }
  },

  mounted() {
  },

  methods: {
    changeCarousel(data){
      this.currentIndex=data;
    },
  }
}
</script>
<style lang="scss" scoped>
.rankPmd span {
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding-left: 43px;
  color: #ffffff;
  height: 22px;
  line-height: 22px;
  display: inline-block;
  margin-bottom: 10px;
  background: url('~@/assets/images/jczc/wt1.png') no-repeat center left;
  margin-left: 8px;
}
.rankPmd i {
  margin-left: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  height: 22px;
  line-height: 22px;
  padding-left: 43px;
  display: inline-block;
  background: url('~@/assets/images/jczc/zg1.png') no-repeat center left;
}
.rankingBut h4 {
  font-weight: bold;
  font-size: 14px;
  color: #1adbff;
  padding-left: 7px;
  line-height: 24px;
  margin-bottom: 5px;
}
.rankingBut p {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  padding-left: 40px;
  background: url('~@/assets/images/jczc/baog.png') no-repeat center left;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-StatisticalRisk {
  width: 100%;
  height: 100%;
  position: relative;
  .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%;
    padding: 10px;
    height: calc(100% - 30px);
    display: inline-block;
    font-family: Source Han Sans CN;
    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
    .title {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      .icon {
        height: 0.072917rem /* 14/192 */;
        width: 0.078125rem /* 15/192 */;
        margin: 0 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;
      }
    }
    .rankingOfTypes {
      width: 100%;
      height: calc(100% - 207px /* 292/192 */);
      .content {
        width: 100%;
        height: calc(100% - 30px);
        position: relative;
        .but_ul{
          height: 100%;
          overflow-y:auto;
        }
      }
    }
    .but_ul_name{
      color:white;
      font-size: 12px;
      line-height: 1.3;
    }
    .progressDiv{
      width: 100%;
      position: relative;
      float: left;
      height: 39px;
      padding: 7px 0px 15px 0px;
      display: flex;
      align-items: center;
    }
      .progressRateDiv{
        float: left;
        height: 14px;
        background: linear-gradient(90deg, #0e7bc9 0%, #91a9bd 100%);
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: -2px;
          left: calc(100% + 3px);
          width: 19.5px;
          height: 3px;
            // background-color: black; /* 斜线的颜色 */
          transform: rotate(100deg); /* 旋转角度 */
          transform-origin: left top; /* 旋转原点 */
          background:  #91a9bd ;
        }
      }
      .progressValue{
        padding-left: 10px;
        width: 60px;
        float: left;
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image:linear-gradient(180deg, #3ca4ee 0%, #ffffff 50%, #3ca4ee 100%);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非Webkit内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
        font-size: 16px;
    }
    .disqualification{
      .progressRateDiv{
        background:linear-gradient(90deg, #de951bf0 0%, #ccb895f0 100%) ;
        &::after {
          background: #ccb895f0  ;
        }
      }
      .progressValue{
        background-image:linear-gradient(180deg, #de951bf0 0%, #ffffff 50%, #de951bf0 100%) ; 
      }
    }
  }
  .resultDiv{
    color: rgb(230,184,107);
    padding: 10px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  /deep/.el-carousel__indicators--horizontal{
    display: none;
  }
  /deep/.el-carousel__arrow{
    display: block !important;
    transition:none !important;
  }
  /deep/.el-icon-arrow-left{
    display: none !important;
  }
  /deep/.el-icon-arrow-right{
    display: none !important;
  }
  /deep/.el-carousel__arrow--left{
    background: url('../../../../../assets/images/jczc/z.png') no-repeat;
    height: 23px;
    width: 17px;
    background-size:100% 100%;
    background-repeat:no-repeat ;
    left: 5px;

  }
  /deep/.el-carousel__arrow--right{
    background: url('../../../../../assets/images/jczc/y.png') no-repeat;
    height: 23px;
    width: 17px;
    background-size:100% 100%;
    background-repeat:no-repeat ;
    right: 5px;
  }
  /deep/ .el-carousel__item{
    padding:0px 40px 0px 30px;
    width: 100%;
  }
  .pageInfo{
      color: white;
      width: 100%;
      text-align: center;
  }
}

</style>