任务查看:任务名称undefined解决

xiangpei

2025-05-06 5c929cfb5286a31a4e067cbc61e8774f4e7d42ae

 src/views/components/projectOverview.vue

@@ -1,339 +1,390 @@
<template>
    <div class="overview-bottom">
        <div class="abnormal" @click="showAbnormal">
            <div style="margin-bottom: 30px">异常项目情况统计</div>
            <div>
                <div class="abnormal-center">
                    流程异常项目：<span
                        style="font-size: 16px; font-weight: 700"
                        >{{
                            countExceptionProjectData.processExceptionProject
                        }}</span
                    >
                </div>
                <div class="abnormal-center">
                    资金异常项目：<span
                        style="font-size: 16px; font-weight: 700"
                        >0</span
                    >
                </div>
                <div class="abnormal-center">
                    进度异常项目：<span
                        style="font-size: 16px; font-weight: 700"
                        >0</span
                    >
                </div>
            </div>
            <div class="abnormal-img"></div>
  <div class="overview-bottom">
    <div class="abnormal" @click="showAbnormal">
      <div style="margin-bottom: 30px">异常项目情况统计</div>
      <div>
        <div class="abnormal-center">
          流程异常项目：<span
          style="font-size: 16px; font-weight: 700"
        >{{ countExceptionProjectData.processExceptionProject }}</span
        >
        </div>
        <div class="overview-div custom-min-width">
            <div
                v-for="i in calculation"
                :key="i.text"
                :style="setbcStyle(i.text)"
                class="listings"
                @click="showDetail(i.text)"
            >
                <div :style="setTextStyle(i.text)" class="title">
                    {{ i.text }}
                </div>
                <div class="conter">
                    <div :style="setTextColor(i.text)" class="mun">
                        {{ i.mun }}
                    </div>
                    <div class="statistics">
                        <div>{{ i.statistics }}</div>
                        <div :style="setTextColor(i.text)">
                            {{ i.statisticsMun
                            }}<span style="font-size: 18px">亿</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div>
            <div class="listings">
                <div class="title active">
                    储
                </div>
                <div class="conter">
                    <div class="mun">44</div>
                    <div class="statistics">
                        <div>储备项目数量统计</div>
                        <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
                    </div>
                </div>
            </div> -->
<!--        <div class="abnormal-center">-->
<!--          超时项目数：<span-->
<!--          style="font-size: 16px; font-weight: 700"-->
<!--        >0</span-->
<!--        >-->
<!--        </div>-->
        <div class="abnormal-center">
          容缺项目数：<span
          style="font-size: 16px; font-weight: 700"
        >{{countExceptionProjectData.hasWaitProjectNum}}</span
        >
        </div>
<!--        <div class="abnormal-center">-->
<!--          资金异常项目：<span-->
<!--          style="font-size: 16px; font-weight: 700"-->
<!--        >0</span-->
<!--        >-->
<!--        </div>-->
<!--        <div class="abnormal-center">-->
<!--          进度异常项目：<span-->
<!--          style="font-size: 16px; font-weight: 700"-->
<!--        >0</span-->
<!--        >-->
<!--        </div>-->
      </div>
      <div class="abnormal-img"></div>
    </div>
    <div class="overview-div custom-min-width">
      <div
        v-for="i in calculation"
        :key="i.text"
        :style="setbcStyle(i.text)"
        class="listings"
        @click="showDetail(i.text)"
      >
        <div :style="setTextStyle(i.text)" class="title">
          {{ i.text }}
        </div>
        <div class="conter">
          <div :style="setTextColor(i.text)" class="mun">
            {{ i.mun }}
          </div>
          <div class="statistics">
            <div>{{ i.statistics }}</div>
            <div :style="setTextColor(i.text)">
              {{
                i.statisticsMun
              }}<span style="font-size: 18px">亿</span>
            </div>
          </div>
        </div>
      </div>
      <!-- <div class="listings">
          <div class="title">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div>
      <div class="listings">
          <div class="title">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div>
      <div class="listings">
          <div class="title">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div>
      <div class="listings">
          <div class="title">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div>
      <div class="listings">
          <div class="title">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div>
      <div class="listings">
          <div class="title">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div>
      <div class="listings">
          <div class="title active">
              储
          </div>
          <div class="conter">
              <div class="mun">44</div>
              <div class="statistics">
                  <div>储备项目数量统计</div>
                  <div class="statistics-mun">1233<span style="font-size: 18px;">亿</span></div>
              </div>
          </div>
      </div> -->
    </div>
  </div>
</template>

<script >
<script>
export default {
    name: "Index",
    data() {
        return {}
    },
    props: {
        calculation: Array,
        countExceptionProjectData: Object,
    },
    watch: {
        // calculation: {
        //     handler(val) {
        //         console.log("11111" + val);

        //     },
        // },
        // countExceptionProjectData: {
        //     handler(val) {
        //         console.log("22222" + val);

        //     },
        // },
    },
    methods: {
        setTextStyle(text) {
            if (text === '储') return 'background-color:#3369FF';
            if (text === '建') return 'background-color:#64ADFD';
            if (text === '省') return 'background-color:#FF5E57';
            if (text === '市') return 'background-color:#FFA83F';
            if (text === '新') return 'background-color:#5DD1E5';
            if (text === '竣') return 'background-color:#576BF5';
            if (text === '县') return 'background-color:#3369FF';
            if (text === '普') return 'background-color:#64ADFD';
            return '';
        },

        setTextColor(text) {
            if (text === '储') return 'color:#3369FF';
            if (text === '建') return 'color:#64ADFD';
            if (text === '省') return 'color:#FF5E57';
            if (text === '市') return 'color:#FFA83F';
            if (text === '新') return 'color:#5DD1E5';
            if (text === '竣') return 'color:#576BF5';
            if (text === '县') return 'color:#3369FF';
            if (text === '普') return 'color:#64ADFD';
            return '';
        },

        setbcStyle(text) {
            if (text === '储') return 'background-color:#EAF0FF';
            if (text === '建') return 'background-color:#EFF7FF';
            if (text === '省') return 'background-color:#FEEEED';
            if (text === '市') return 'background-color:#FFF6EB';
            if (text === '新') return 'background-color:#EEFAFC';
            if (text === '竣') return 'background-color:#EEF0FE';
            if (text === '县') return 'background-color:#EAF0FF';
            if (text === '普') return 'background-color:#EFF7FF';
            return '';
        },
        // 跳转到异常项目
        showAbnormal() {
            console.log('跳转异常项目');
            this.$router.push({
                path: 'projectEngineering/project/abnormalProject'
            });
        },

        // 跳转到对应的项目库
        showDetail(text) {
            console.log('跳转到对应的项目库', text);
            switch (text) {
                case '储':
                    this.$router.push({
                        path: '/projectEngineering/project/reserveProjects',
                        query: {
                            projectCategory: '1'
                        }
                    });
                    break;
                case '新':
                    this.$router.push({
                        path: '/projectEngineering/project/previousProjects',
                        query: {
                            projectCategory: '2'
                        }
                    });
                    break;
                case '建':
                    this.$router.push({
                        path: '/projectEngineering/project/implementationProject',
                        query: {
                            projectCategory: '3'
                        }
                    });
                    break;
                case '竣':
                    this.$router.push({
                        path: '/projectEngineering/project/completedProjects',
                        query: {
                            projectCategory: '4'
                        }
                    });
                    break;
                default:
                    break;
            }
        }
  name: "Index",
  data() {
    return {
    }
  },
  props: {
    calculation: Array,
    countExceptionProjectData: Object,
  },
  watch: {
    // calculation: {
    //     handler(val) {
    //         console.log("11111" + val);

    //     },
    // },
    // countExceptionProjectData: {
    //     handler(val) {
    //         console.log("22222" + val);

    //     },
    // },
  },
  methods: {
    setTextStyle(text) {
      if (text === '储') return 'background-color:#3369FF';
      if (text === '建') return 'background-color:#64ADFD';
      if (text === '省') return 'background-color:#FF5E57';
      if (text === '市') return 'background-color:#FFA83F';
      if (text === '新') return 'background-color:#5DD1E5';
      if (text === '竣') return 'background-color:#576BF5';
      if (text === '县') return 'background-color:#3369FF';
      if (text === '普') return 'background-color:#64ADFD';
      return '';
    },

    setTextColor(text) {
      if (text === '储') return 'color:#3369FF';
      if (text === '建') return 'color:#64ADFD';
      if (text === '省') return 'color:#FF5E57';
      if (text === '市') return 'color:#FFA83F';
      if (text === '新') return 'color:#5DD1E5';
      if (text === '竣') return 'color:#576BF5';
      if (text === '县') return 'color:#3369FF';
      if (text === '普') return 'color:#64ADFD';
      return '';
    },

    setbcStyle(text) {
      if (text === '储') return 'background-color:#EAF0FF';
      if (text === '建') return 'background-color:#EFF7FF';
      if (text === '省') return 'background-color:#FEEEED';
      if (text === '市') return 'background-color:#FFF6EB';
      if (text === '新') return 'background-color:#EEFAFC';
      if (text === '竣') return 'background-color:#EEF0FE';
      if (text === '县') return 'background-color:#EAF0FF';
      if (text === '普') return 'background-color:#EFF7FF';
      return '';
    },
    // 跳转到异常项目
    showAbnormal() {
      console.log('跳转异常项目');
      this.$router.push({
        path: 'projectEngineering/project/abnormalProject'
      });
    },

    // 跳转到对应的项目库
    showDetail(text) {
      console.log('跳转到对应的项目库', text);
      switch (text) {
        case '储':
          this.$router.push({
            path: '/projectEngineering/project/reserveProjects',
            query: {
              projectPhase: '1'
            }
          });
          break;
        case '新':
          this.$router.push({
            path: '/projectEngineering/project/previousProjects',
            query: {
              projectPhase: '2'
            }
          });
          break;
        case '建':
          this.$router.push({
            path: '/projectEngineering/project/implementationProject',
            query: {
              projectPhase: '3'
            }
          });
          break;
        case '竣':
          this.$router.push({
            path: '/projectEngineering/project/completedProjects',
            query: {
              projectPhase: '4'
            }
          });
          break;
        case '省':
          this.$router.push({
            path: '/projectEngineering/project/projectLibrary',
            query: {
              importanceType: 'provincial_key'
            }
          });
          break;
        case '县':
          this.$router.push({
            path: '/projectEngineering/project/projectLibrary',
            query: {
              importanceType: 'shehong_key'
            }
          });
          break;
        case '市':
          this.$router.push({
            path: '/projectEngineering/project/projectLibrary',
            query: {
              importanceType: 'suining_key'
            }
          });
          break;
        case '普':
          this.$router.push({
            path: '/projectEngineering/project/projectLibrary',
            query: {
              importanceType: 'normal'
            }
          });
          break;
        default:
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.overview-bottom {
    display: flex;
    justify-content: space-between;
  display: flex;
  justify-content: space-between;

    .abnormal {
        position: relative;
        width: 25%;
        min-width: 342px;
        height: 200px;
        background-image: url(../../assets/images/b.png);
        background-size: 100% auto;
        border-radius: 6px;
        font-size: 16px;
        color: #ffffff;
        padding: 20px 0 0 20px;
  .abnormal:hover {
    cursor: pointer;
  }
  .abnormal {
    position: relative;
    width: 25%;
    min-width: 342px;
    height: 200px;
    background-image: url(../../assets/images/b.png);
    background-size: 100% auto;
    border-radius: 6px;
    font-size: 16px;
    color: #ffffff;
    padding: 20px 0 0 20px;

        .abnormal-center {
            margin-bottom: 15px;
        }

        .abnormal-img {
            position: absolute;
            right: 50px;
            bottom: 20px;
            width: 100px;
            height: 100px;
            background-image: url(../../assets/images/c.png);
        }
    .abnormal-center {
      margin-bottom: 15px;
    }

    .custom-min-width {
        min-width: 1250px;
        width: 1250px;
    .abnormal-img {
      position: absolute;
      right: 50px;
      bottom: 20px;
      width: 100px;
      height: 100px;
      background-image: url(../../assets/images/c.png);
    }
  }

    .listings {
        width: 300px;
        height: 90px;
        border-radius: 6px;
        display: flex;
        align-items: center;

        .title {
            width: 45px;
            height: 45px;
            font-size: 24px;
            border-radius: 8px;
            line-height: 45px;
            text-align: center;
            margin-left: 15px;
            color: #ffffff;
        }

        .active {
            background-color: #3369ff;
        }

        .conter {
            margin-left: 10px;

            .mun {
                font-size: 30px;
                line-height: 32px;
            }

            .statistics {
                width: 200px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                // .statistics-mun {
                //     // color: #3369FF;
                // }
            }
        }
    }
}
.overview-div {
  .custom-min-width {
    min-width: 1250px;
    width: 1250px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .listings:hover {
    cursor: pointer;
  }
  .listings {
    width: 300px;
    height: 90px;
    border-radius: 6px;
    display: flex;
    margin-left: 10px;
    align-items: center;

    .title {
      width: 45px;
      height: 45px;
      font-size: 24px;
      border-radius: 8px;
      line-height: 45px;
      text-align: center;
      margin-left: 15px;
      color: #ffffff;
    }

    .active {
      background-color: #3369ff;
    }

    .conter {
      margin-left: 10px;

      .mun {
        font-size: 30px;
        line-height: 32px;
      }

      .statistics {
        width: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        // .statistics-mun {
        //     // color: #3369FF;
        // }
      }
    }
  }
}

.overview-div {
  min-width: 1250px;
  width: 1250px;
  gap: 10px;
  flex-wrap: wrap;
  display: flex;
  margin-left: 10px;
}
</style>