storevisit-ui-mobile/src/views/week/target.vue

<template>
  <div class="ABtarage">
    <template>
      <div class="container linep" style="margin: 0">
        <van-collapse v-model="activeNames">
          <div v-for="(homePageItem, index) in homePageIndicatorDate" :key="index">
            <van-collapse-item
              v-if="homePageItem.labelStyle == 1"
              :name="(index + 1).toString()"
              :title="homePageItem.name">
              <van-row>
                <!-- 动态渲染标题栏 -->
                <div
                  v-for="(periodItem, periodIndex) in homePageItem.children"
                  :key="'title-' + periodIndex">
                  <van-col span="12">
                    <span :class="periodIndex % 2 === 0 ? 'leftTitle' : 'rightTitle'">{{
                      periodItem.name
                    }}</span>
                  </van-col>
                </div>

                <!-- 动态渲染指标项 -->
                <div v-if="homePageItem.children.length >= 2">
                  <!-- 遍历第一个周期的所有指标 -->
                  <div
                    v-for="(metric, metricIndex) in homePageItem.children[0].children"
                    :key="'metric-' + metricIndex">
                    <!-- 左侧指标 -->
                    <van-col span="12">
                      <p>
                        {{ metric.name }}:
                        <span class="colorblack">
                          <template v-if="metric.indicatorUnit === '%'"
                            >{{ metric.indicatorValue }}%</template
                          >
                          <template v-else>
                            {{ Micrometer(metric.indicatorValue) }}
                            {{ metric.indicatorUnit }}
                          </template>
                        </span>
                      </p>
                    </van-col>
                    <!-- 对应右侧指标 -->
                    <van-col span="12">
                      <p>
                        {{ homePageItem.children[1]?.children[metricIndex]?.name || '-' }}:
                        <span class="colorblack">
                          <template
                            v-if="
                              homePageItem.children[1]?.children[metricIndex]?.indicatorUnit === '%'
                            ">
                            {{ homePageItem.children[1]?.children[metricIndex]?.indicatorValue }}%
                          </template>
                          <template v-else>
                            {{
                              Micrometer(
                                homePageItem.children[1]?.children[metricIndex]?.indicatorValue,
                              )
                            }}
                            {{ homePageItem.children[1]?.children[metricIndex]?.indicatorUnit }}
                          </template>
                        </span>
                      </p>
                    </van-col>
                  </div>
                </div>
              </van-row>
            </van-collapse-item>
            <van-collapse-item
              v-if="homePageItem.labelStyle == 2"
              :name="(index + 1).toString()"
              :title="homePageItem.name">
              <!-- 外层循环：遍历主要类别 -->
              <van-row
                v-for="(category, index) in homePageItem.children"
                :key="index"
                :style="{ marginTop: index > 0 ? '10px' : '0' }">
                <van-col span="24">
                  <span :class="index % 2 === 0 ? 'leftTitle' : 'rightTitle'">{{
                    category.name
                  }}</span>
                </van-col>

                <!-- 内层循环：遍历各个统计项 -->
                <div v-for="(item, idx) in category.children" :key="idx">
                  <van-col :span="idx == 0 ? 24 : 12">
                    <p>
                      {{ item.name }}：<span
                        :style="labelStyle(item.clickable)"
                        @click="onClick(item.clickable)"
                        class="colorbalck"
                        >{{ Micrometer(item.indicatorValue) }}{{ item.indicatorUnit }}</span
                      >
                    </p>
                  </van-col>
                </div>
              </van-row>
            </van-collapse-item>
            <van-collapse-item
              v-if="homePageItem.labelStyle == 3"
              :name="(index + 1).toString()"
              :title="homePageItem.name">
              <!-- 外层循环：遍历主要类别 -->
              <van-row
                v-for="(category, index) in homePageItem.children"
                :key="index"
                :style="{ marginTop: index == 0 ? '-10px' : '0' }">
                <!-- 内层循环：遍历各个统计项 -->
                <div v-for="(item, idx) in category.children" :key="idx">
                  <van-col :span="idx == 0 ? 24 : 12">
                    <p>
                      {{ item.name }}：<span
                        :style="labelStyle(item.clickable)"
                        @click="onClick(item.clickable)"
                        class="colorbalck"
                        >{{ Micrometer(item.indicatorValue) }}{{ item.indicatorUnit }}</span
                      >
                    </p>
                  </van-col>
                </div>
              </van-row>
            </van-collapse-item>
          </div>
        </van-collapse>
      </div>
    </template>
  </div>
</template>

<script>
import store from '@/store';
export default {
  name: 'home',
  props: {
    homePageIndicatorDate: {
      type: Array,
    },
  },
  data() {
    return {
      shows: true,
      show: true,
      num: 0,
      todayGoal: {},
      progressWidth: 0,
      updataTime: '',
      activeNames: [
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '10',
        '11',
        '12',
        '16',
        '17',
        '20',
        '21',
        '22',
        '23',
        '24',
        '25',
        '26',
        '27',
        '28',
        '29',
        '30',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '38',
        '39',
        '40',
        '41',
        '42',
        '43',
      ],
      activeNameType: [],
      powerGradeShow: false,
      showButton: false,
      isCommit: null,
      powerGrade: '2',
      deptLevel: '',
      // positionId：等级（1-销售员 2-销售部主管 3-大区主管 4-区域公司总经理 5-DIY公司）
      reportTargetAll: {},
      homePageIndicatorList: [],
      approvalPendingNum: 0,
      isDiy: false,
      approvalButton: false,
      times: 5,
      timer: null,
      type: '-1',
      monthNoVisit: {},
      flag: true,
      reportInfoData: {},
      applyNumber: '',
      proccessPendingNum: 0,
      JZQuota: false,
      GZdata: false,
    };
  },
  methods: {
    labelStyle(val) {
      return {
        'text-decoration': val == 1 ? 'underline' : 'none',
        color: val == 1 ? '#0057ba' : '#666666',
      };
    },
    // 跳转详情
    onClick(val) {
      if (val == 1) {
        store.dispatch('setActivaTypeStore', 'FuWuShang');
        this.$router.push({ path: '/noVisit' });
      }
    },
  },
};
</script>
<style scoped>
.homeTitle {
  padding: 6px 16px;
}

.homeTitle .van-icon__image {
  width: 1.4em;
  height: auto;
}

.container {
  /* margin: 10px; */
}

.container .van-collapse-item {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
}

.progressContentlist {
  font-size: 14px;
  border-bottom: 1px dashed #f1f1f1;
  padding: 10px 0;
}

.linep p {
  margin: 10px 0 0 0;
  font-size: 14px;
  color: #666;
}

.leftTitle {
  background-color: #74a4d9;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
}

.rightTitle {
  background-color: #e7b4bb;
  color: #fff;
  display: inline-block;
  padding: 0 4px;
  border-radius: 2px;
  white-space: nowrap;
}
</style>
<style lang="scss">
.myTab .van-tabs__nav--card {
  margin: 0 !important;
  border-left: 0;
  border-right: 0;
}

.myTab .van-tabs__wrap,
.van-tabs__nav--card {
  height: 39px;
}

.myTab .van-tab {
  line-height: 40px;
}

.linep .van-collapse-item__content {
  color: #666;
}

.linep .van-collapse-item__content {
  color: #666;
}

.linep .van-cell__title {
  color: #1e5398;
  font-weight: 500;
  font-size: 16px;
}

.homeCellIcon {
  line-height: 34px;
}

.homeTitle .van-cell__title {
  color: #444;
  font-size: 16px;
  font-weight: bold;
  padding-left: 4px;
  line-height: 36px;
  height: 36px;
}

.updataTime {
  color: #999;
  font-size: 12px;
  text-align: center;
}

.homeTitle .van-tag--danger {
  /* border-radius: 20px; */
}

.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0057ba;
}

.tipTitleBox p {
  margin: 0;
  line-height: 28px;
  color: #555;
}

.tipTitleBox .p {
  color: #555;
  font-size: 16px;
  border-bottom: 1px solid #f5f5f5;
  margin: 0;
  margin-bottom: 10px;
  text-align: center;
  padding: 14px 0px;
}

.storeTypeHome .van-collapse-item__content {
  padding: 0;
}

.storeTypeHome .storeTypeHomeList .van-cell__title {
  color: #4a4a4a;
  font-size: 14px;
}

.storeTypeHome .monthNoVisit {
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  background-color: #ebf4ff;
}

.storeTypeHome .leftContent {
  padding-right: 68px;
  position: relative;
}

.storeTypeHome .monthNoVisitStatstext {
  font-size: 12px;
  background-color: #0057ba;
  position: absolute;
  right: 0;
  top: 6px;
  padding: 2px 6px 2px 12px;
  border-bottom-left-radius: 60px;
  border-top-left-radius: 60px;
  color: #fff;
}

.ABtarage {
  .table-headermd {
    font-size: 12px;
    text-align: center;
    position: initial;
    width: 98% !important;
    margin: 0 auto;
    border-right: 0;
  }

  .table-headermdhome {
    font-size: 14px;
  }

  .table-headermdhome th.el-table__cell > .cell {
    white-space: pre;
  }

  .table-headermd .el-table__header,
  .table-headermd .el-table__body {
    width: 100% !important;
  }

  .table-headermdhome.van-cell {
    padding: 0 6px;
    height: 100%;
  }

  .table-headermd th.el-table__cell > .cell {
    padding: 0 4px;
    text-align: center;
  }

  .table-headermdhometh.el-table__cell:first-child > .cell {
    text-align: left;
  }

  .table-headermd th.el-table__cell {
    background-color: #1989fa;
    color: #fff;
  }

  .table-headermdhome th.el-table__cell {
    background-color: #fff;
    color: #444;
  }

  .table-headermd .el-table__cell {
    padding: 4px 0;
  }

  .table-headermdhome.el-table .cell {
    padding: 0 4px;
    text-align: center;
  }

  .table-headermdhome .tipTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: center;
  }

  .table-headermd::before {
    height: 0;
  }

  .table-headermd .cell,
  .el-table--border .el-table__cell:first-child .cell {
    padding: 0 4px;
  }
}

.colBack {
  width: 100%;
  height: 100%;
  display: block;
  /* overflow: unset; */
  position: relative;
  z-index: 2;
  float: left;
  z-index: 2;

  .back {
    position: absolute;
    background: rgb(226, 240, 217);
    height: 100%;
    display: block;
    overflow: hidden;
    /* z-index: 1; */
    border-radius: 12px;
    bottom: -4px;
  }

  .backLeft {
    width: 45%;
    left: -12px;
  }

  .backRight {
    width: 50%;
    left: calc(50% - 12px);
  }

  .van-col {
    position: relative;
    z-index: 3;
  }
}
</style>