storevisit-ui-mobile/src/views/home/hintTabPage/index.vue

<template>
  <div class="hintTabPage">
    <div class="itemTab">
      <van-collapse v-model="activeNames">
        <!-- 拜访（实时） -->
        <van-collapse-item :name="visitCollapse.name">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ visitCollapse.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div
                  class="popoverConten"
                  v-for="(item, index) in visitCollapse.tipsPopoverlabel"
                  :key="index">
                  {{ item }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <visitPage
            fromType="noVisit"
            :empLevel="empLevel"
            :contentData="visitCollapse.contentData"
            :maskShow="visitCollapse.collapseLosding"
            :resData="visitCollapse.resData"></visitPage>
        </van-collapse-item>
        <!-- 建店 -->
        <van-collapse-item :name="createStore.name">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ createStore.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div
                  class="popoverConten"
                  v-for="(item, index) in createStore.tipsPopoverlabel"
                  :key="index">
                  {{ item.label }}:{{ item.prop }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <!-- <visitPage
            :contentData="createStore.contentData"
            :maskShow="createStore.collapseLosding"></visitPage> -->
        </van-collapse-item>
        <!-- 日报、周报、半月报 -->
        <van-collapse-item name="3" v-if="empLevel != '4'">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ report.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div class="popoverConten">
                  {{ report.reportData.tip }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <div class="reportContent">
            <div class="reportItem">
              <div class="label">填写率：</div>
              <div class="value">本月{{ report.reportData.fillingRate }}</div>
              <div class="itemDetail" v-if="empLevel != '3'" @click="reportClick('fillingRate')">
                下属详情
              </div>
            </div>
            <div class="reportItem" v-show="empLevel != '3'">
              <div class="label">审批率：</div>
              <div class="value">本月{{ report.reportData.approvalRate }}</div>
            </div>
            <div class="" v-show="empLevel == '1'">本周点评业务员</div>
            <div class="reportItem" v-show="empLevel == '1'">
              <div class="label">日报数(目标数)：</div>
              <div class="value">{{ report.reportData.commentNum }}个(5个)</div>
              <div class="itemDetail" @click="reportClick('commentNum')">进入点评</div>
            </div>
          </div>
        </van-collapse-item>
        <!-- 色卡 -->
        <van-collapse-item name="4" v-if="empLevel == '2' || empLevel == '3'">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ pantone.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div class="popoverConten">
                  {{ pantone.tip }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import { getReportTarget } from '@/api/index';
import hintIcon from '@/assets/hintIcon.png';
import visitPage from './visitPage.vue';
import { mapState } from 'vuex';
export default {
  components: { visitPage },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  data() {
    return {
      empLevel: '3', //员工级别，1大区主管2销售部主管3业务员4其他 ***其他级别4，不显示日报、周报、半月报和色卡
      hintIcon: hintIcon,
      activeNames: ['1', '2', '3', '4', '5'],
      visitCollapse: {
        name: '1',
        title: '拜访（实时）',
        collapseLosding: true,
        tipsPopoverlabel: [],
        tipsPopoverValue: null,
        contentData: [
          {
            title: '可控店',
            titleProp: 'keKong',
            bagColor: '#eb6877',
            visitDetail: [
              {
                leftTable: '本月拜访率：',
                leftProp: 'visitRateThisMonth',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '金牌店',
            titleProp: 'jinPai',
            bagColor: '#f1b789',
            visitDetail: [
              {
                leftTable: '本月拜访率：',
                leftProp: 'visitRateThisMonth',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同A店',
            titleProp: 'tongA',
            bagColor: '#88abda',
            visitDetail: [
              {
                leftTable: '进2个月拜访率：',
                leftProp: 'visitRateInThePastTwoMonths',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同B店',
            titleProp: 'tongB',
            bagColor: '#8f82bc',
            visitDetail: [
              {
                leftTable: '进3个月拜访率：',
                leftProp: 'visitRateInThePastThreeMonths',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
        ],
      },
      createStore: {
        name: '2',
        title: '建店',
        collapseLosding: true,
        tipsPopoverlabel: [
          {
            label: '未完工',
            prop: '',
          },
          {
            label: '为结案',
            prop: '',
          },
        ],
        tipsPopoverValue: null,
        contentData: [
          {
            title: '可控店',
            bagColor: '#eb6877',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '45天未结案：',
                rightValue: '',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '金牌店',
            bagColor: '#f1b789',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '7天未完工：',
                rightValue: '',
                rightUnit: '家',
                rightIsClick: true,
              },
              {
                leftTable: '今年累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightValue: '',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同A店',
            bagColor: '#88abda',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightValue: '',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同B店',
            bagColor: '#8f82bc',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftValue: '',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightValue: '',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
        ],
        resData: {},
      },
      report: {
        title: '',
        reportData: {},
      },
      pantone: {
        title: '色卡',
        pantoneData: {},
      },
      pantoneData: [
        // 业务员
        {
          firstRowLLabel: '已领用',
          firstRowLProp: 'firstRowLProp',
          firstRowRLabel: '已发放门店',
          firstRowRProp: 'firstRowRProp',
          secondRowLLabel: '门店未签收',
          secondRowLProp: 'secondRowLProp',
          secondRowRLabel: '门店未签收',
          secondRowRProp: 'secondRowRProp',
        },
        // 销售部主管
        {
          firstRowLLabel: '直发销售部数',
          firstRowLProp: 'firstRowLProp',
          firstRowRLabel: '业务员已领用',
          firstRowRProp: 'firstRowRProp',
          secondRowLLabel: '业务员已发放',
          secondRowLProp: 'secondRowLProp',
          secondRowRLabel: '门店未签收',
          secondRowRProp: 'secondRowRProp',
        },
      ],
      pantoneData: null,
    };
  },
  activated() {
    debugger;
    this.empLevel = this.userInfo.empLevel;
    // 获取拜访数据
    this.getVisitCollapseData();
    // 获取汇报数据 日报、周报、半月报
    this.getReportData();
    // 获取色卡数据
    this.getPantoneData();
  },
  methods: {
    getVisitCollapseData() {
      let resData = {
        reminderContent: [
          '1.本月拜访率：2024-10-01~2024-10-31',
          '2.近2月拜访率：2024-08-01~2024-10-31',
          '3.近3月拜访率：2024-07-01~2024-10-31',
        ],
        jinPai: {
          notVisited: 2007,
          visitRateThisMonth: '0.5%',
        },
        tongB: {
          notVisited: 838,
          visitRateInThePastThreeMonths: '6.2%',
        },
        tongA: {
          visitRateInThePastTwoMonths: '8.8%',
          notVisited: 384,
        },
        keKong: {
          notVisited: 73,
          visitRateThisMonth: '27.0%',
        },
      };
      this.visitCollapse.collapseLosding = false;
      this.visitCollapse.tipsPopoverlabel = resData.reminderContent;
      this.visitCollapse.resData = resData;
    },
    getReportData() {
      if (this.empLevel == '1') {
        this.report.title = '半月报';
      } else if (this.empLevel == '2') {
        this.report.title = '周报';
      } else if (this.empLevel == '3') {
        this.report.title = '日报';
      }
      // let resData = {
      //   commentNum: '',
      //   empLevel: '2',
      //   tip: '下述指标:本人填写/审批情况',
      //   approvalRate: '0.00%',
      //   fillingRate: '0.00%',
      // };
      getReportTarget().then((res) => {
        this.report.reportData = res.data || {};
      });
    },
    getPantoneData() {},
    // 汇报下属详情-点击
    reportClick(type) {
      if (type == 'fillingRate') {
        // 下属汇报率审批率统计
        this.$router.push({ path: 'reportingRate' });
      } else if (type == 'commentNum') {
        // 下属业务员历史日报
        this.$router.push({ path: 'subordinateHistoricalDaily' });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hintTabPage {
  padding: 10px;
  .itemTab {
    /* background: #fff; */
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    .itemHeader {
      width: 150px;
      color: #0057ba;
      font-weight: 500;
      font-size: 16px;
      padding: 10px 0;
      display: flex;
      align-items: center;
      .itemTitle {
        margin-right: 10px;
      }
      .hintIconBox {
        display: flex;
        .hintIcon {
          width: 16px;
          height: 16px;
        }
      }
      .van-popover__wrapper {
        display: flex;
      }
    }
    .van-collapse-item {
      margin-bottom: 15px;
    }
    /* 汇报 日报、周报、半月报 */
    .reportContent {
      color: #666666;
      padding: 8px 0;
      .reportItem {
        display: flex;
        position: relative;
        padding: 3px 0;
        .value {
          font-weight: 600;
        }
        .itemDetail {
          text-decoration: underline;
          color: #0057ba;
          position: absolute;
          right: 10px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.hintTabPage {
  .itemTab {
    .van-cell {
      padding: 0 16px;
      align-items: center;
    }
    .van-collapse-item__content {
      padding: 0 16px;
    }
  }
}
.hintPopover {
  background: #deedff;
  .popper__arrow {
    &::after {
      border-right-color: #deedff !important;
    }
  }
}
</style>