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">
          <span class="updateTime" v-if="visitCollapse.latestUpdateTime != ''">
            更新时间：
            {{ visitCollapse.latestUpdateTime }}
          </span>
          <template #title>
            <div class="itemHeader">
              <span class="itemTitle" v-if="visitCollapse.title">{{ visitCollapse.title }}</span>
              <span @click.stop v-if="visitCollapse.tipsPopoverlabel">
                <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>
              </span>
            </div>
          </template>
          <visitPage
            v-if="visitCollapse.resData"
            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" v-if="createStore.title">{{ createStore.title }}</span>
              <el-popover
                placement="right"
                trigger="click"
                popper-class="hintPopover"
                v-if="createStore.tipsPopoverlabel">
                <div
                  class="popoverConten"
                  v-for="(item, index) in createStore.tipsPopoverlabel"
                  :key="index">
                  {{ item }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <visitPage
            v-if="createStore.resData"
            fromType="createStore"
            :empLevel="empLevel"
            :contentData="createStore.contentData"
            :maskShow="createStore.collapseLosding"
            :resData="createStore.resData"></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',
                    '填写率-本月：' +
                      report.reportData.fillingRate +
                      ';审批率-本月：' +
                      report.reportData.approvalRate
                  )
                ">
                下属详情
              </div>
            </div>
            <div class="reportItem" v-show="empLevel != '3'">
              <div class="label">审批率：</div>
              <div class="value">本月{{ report.reportData.approvalRate }}</div>
            </div>
            <div class="reportItem" v-show="empLevel == '1'">
              <div class="label">
                本周点评业务员日报数(目标数)：{{ report.reportData.commentNum }}个(5个)
              </div>
            </div>
            <div class="reportItem reportNum" v-show="empLevel == '1'">
              <div class="label"></div>
              <div
                class="itemDetail"
                @click="reportClick('commentNum', '目标数: ' + report.reportData.commentNum)">
                进入点评
              </div>
            </div>
            <div class="mask" v-if="report.reportLosding">
              <van-loading type="spinner" color="#1989fa" />
            </div>
          </div>
        </van-collapse-item>
        <!-- 色卡 -->
        <van-collapse-item name="4">
          <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>
          <div class="pantoneContent">
            <template v-if="empLevel == '3'">
              <div v-for="(val, key, index) in pantone.pantoneData" :key="index">
                <div class="title">{{ key }}</div>
                <div class="pantoneItem">
                  <div class="firstItem item">
                    <div class="left">
                      <div class="lebel">已领用：</div>
                      <div class="value">{{ Micrometer(val.ywyylyNum) }}本</div>
                    </div>
                    <div class="right">
                      <div class="lebel">已发放门店：</div>
                      <div class="value">{{ Micrometer(val.ywyyffNum) }}本</div>
                    </div>
                  </div>
                  <div class="secondItem item">
                    <div class="left">
                      <div class="lebel">门店未签收：</div>
                      <div class="value">{{ Micrometer(val.mdwqsNum) }}本</div>
                    </div>
                    <div class="right">
                      <div class="lebel">门店未签收：</div>
                      <div class="value valueIsClick" @click="pantoneClick(val, key, val.mdwqsNum)">
                        {{ Micrometer(val.wqsmdNum) }}家
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <template v-else>
              <div v-for="(val, key, index) in pantone.pantoneData" :key="index">
                <div class="title">{{ key }}</div>
                <div class="pantoneItem">
                  <div class="firstItem item">
                    <div class="left">
                      <div class="lebel">直发销售部数：</div>
                      <div class="value">{{ Micrometer(val.zfxsbNum) }}本</div>
                    </div>
                    <div class="right">
                      <div class="lebel">业务员已领用：</div>
                      <div class="value">{{ Micrometer(val.ywyylyNum) }}本</div>
                    </div>
                  </div>
                  <div class="secondItem item">
                    <div class="left">
                      <div class="lebel">业务员已发放：</div>
                      <div class="value">{{ Micrometer(val.ywyyffNum) }}本</div>
                    </div>
                    <div class="right">
                      <div class="lebel">门店未签收：</div>
                      <div class="value valueIsClick" @click="pantoneClick(val, key, val.mdwqsNum)">
                        {{ Micrometer(val.mdwqsNum) }}本
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
            <div class="mask" v-if="pantone.pantoneLosding">
              <van-loading type="spinner" color="#1989fa" />
            </div>
          </div>
        </van-collapse-item>
         <!-- 调色预警 -->
        <van-collapse-item name="5">
          <template #title>
            <div class="itemHeader" @click.stop>
              <span class="itemTitle">{{ colorWarning.title }}</span>
              <el-popover placement="right" trigger="click" popper-class="hintPopover">
                <div class="popoverConten">
                  {{ colorWarning.tip }}
                </div>
                <div slot="reference" class="hintIconBox">
                  <img class="hintIcon" :src="hintIcon" />
                </div>
              </el-popover>
            </div>
          </template>
          <div class="pantoneContent">
            <div v-for="(val, key, index) in colorWarning.contentData" :key="index">
                <div :class="['title',key=='1988色卡'?'kekong':'jinpai']">{{ key }}</div>
                <div class="pantoneItem">
                  <div class="firstItem item">
                    <div class="left">
                      <div class="lebel">滚动7天未调色：</div>
                      <div class="value valueIsClick" @click="colorWarningClick(val, key, val.mdwqsNum)">
                        {{ Micrometer(val.ywyylyNum) }}家
                      </div>
                    </div>
                    <div class="right">
                      <div class="lebel">当月未调色：</div>
                      <div class="value valueIsClick" @click="colorWarningClick(val, key, val.mdwqsNum)">
                        {{ Micrometer(val.ywyyffNum) }}家
                      </div>
                    </div>
                  </div>
                  <div class="secondItem item">
                    <div class="left">
                      <div class="lebel">从未调色：</div>
                      <div class="value valueIsClick" @click="colorWarningClick(val, key, val.mdwqsNum)">
                        {{ Micrometer(val.mdwqsNum) }}家
                      </div>
                    </div>
                    <div class="right">
                      <div class="lebel">近两年DIS为0：</div>
                      <div class="value valueIsClick" @click="colorWarningClick(val, key, val.mdwqsNum)">
                        {{ Micrometer(val.wqsmdNum) }}家
                      </div>
                    </div>
                  </div>
                </div>
            </div>
            <div class="mask" v-if="colorWarning.contentLosding">
              <van-loading type="spinner" color="#1989fa" />
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
import {
  selectVisitsRealTime,
  selectBuildingStore,
  getReportTarget,
  getReportMaterial,
  getColorWarning,
  buryingPoint,
} from '@/api/index';
import hintIcon from '@/assets/hintIcon.png';
import visitPage from './visitPage.vue';
import { mapState } from 'vuex';
export default {
  name: 'hintTabPage',
  components: { visitPage },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
  },
  props: {
    tabVal: {
      type: [String, Number],
      default: '-1',
    },
  },
  data() {
    return {
      empLevel: '', //员工级别，1大区主管2销售部主管3业务员4其他 ***其他级别4，不显示日报、周报、半月报和色卡
      hintIcon: hintIcon,
      activeNames: ['1', '2', '3', '4', '5'],
      visitCollapse: {
        name: '1',
        title: '拜访(实时)',
        collapseLosding: true,
        latestUpdateTime: '',
        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: '同城分销-涂料店',
            titleProp: 'TuLiao',
            bagColor: '#88abda',
            visitDetail: [
              {
                leftTable: '近2个月拜访率：',
                leftProp: 'visitRateInThePastTwoMonths',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同城分销-其他店',
            titleProp: 'QiTa',
            bagColor: '#8f82bc',
            visitDetail: [
              {
                leftTable: '近3个月拜访率：',
                leftProp: 'visitRateInThePastThreeMonths',
                leftUnit: '%',
                leftIsClick: false,
                rightTable: '未拜访：',
                rightProp: 'notVisited',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
        ],
        resData: null,
      },
      createStore: {
        name: '2',
        title: '建店',
        collapseLosding: true,
        tipsPopoverlabel: [
          {
            label: '未完工',
            prop: '',
          },
          {
            label: '为结案',
            prop: '',
          },
        ],
        tipsPopoverValue: null,
        contentData: [
          {
            title: '可控店',
            titleProp: 'keKong',
            bagColor: '#eb6877',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '家',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '家',
                leftIsClick: false,
                rightTable: '45天未结案：',
                rightProp: 'keKongAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '金牌店',
            titleProp: 'jinPai',
            bagColor: '#f1b789',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '家',
                leftIsClick: false,
                rightTable: '7天未完工：',
                rightProp: 'jinPaiUnfinishedNum',
                rightUnit: '家',
                rightIsClick: true,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '家',
                leftIsClick: false,
                rightTable: '30天未结案：',
                rightProp: 'jinPaiAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同城分销-涂料店',
            titleProp: 'TuLiao',
            bagColor: '#88abda',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '家',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '家',
                leftIsClick: false,
                rightTable: '7天未结案：',
                rightProp: 'TuLiaoAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
          {
            title: '同城分销-其他店',
            titleProp: 'QiTa',
            bagColor: '#8f82bc',
            visitDetail: [
              {
                leftTable: '本月累计：',
                leftProp: 'month',
                leftUnit: '家',
                leftIsClick: false,
              },
              {
                leftTable: '今年累计：',
                leftProp: 'year',
                leftUnit: '家',
                leftIsClick: false,
                rightTable: '7天未结案：',
                rightProp: 'QiTaAbnormalNum',
                rightUnit: '家',
                rightIsClick: true,
              },
            ],
          },
        ],
        resData: null,
      },
      report: {
        title: '',
        reportLosding: true,
        reportData: {},
      },
      pantone: {
        title: '色卡',
        tip: '',
        pantoneLosding: true,
        pantoneData: {},
      },
      colorWarning: {
        title: '调色预警',
        tip: '调色预警tips',
        contentLosding: true,
        contentData: {},
      },
      isLoading: false,
    };
  },
  watch: {
    tabVal: {
      handler(val) {
        if (val == -1) {
          // this.initData();
        }
      },
      immediate: true,
    },
  },
  activated() {},
  methods: {
    onRefresh() {
      this.initData();
      this.isLoading = false;
    },
    initData() {
      if (!this.userInfo) return;
      this.empLevel = this.userInfo.empLevel;
      // 获取拜访数据
      this.getVisitCollapseData();
      // 获取建店数据
      this.getSelectBuildingStore();
      // 获取汇报数据 日报、周报、半月报
      this.getReportData();
      // 获取色卡数据
      this.getPantoneData();
      // 获取调色预警数据
      this.getColorWarning();
    },
    getVisitCollapseData() {
      this.visitCollapse.collapseLosding = true;
      selectVisitsRealTime().then((res) => {
        if (res.code == 200) {
          this.visitCollapse.resData = res.data;
          this.visitCollapse.tipsPopoverlabel = res.data.reminderContent;
          this.visitCollapse.latestUpdateTime = res.data.latestUpdateTime;
          this.visitCollapse.collapseLosding = false;
        }
      });
    },
    getSelectBuildingStore() {
      this.createStore.collapseLosding = true;
      selectBuildingStore().then((res) => {
        if (res.code == 200) {
          this.createStore.resData = res.data;
          this.createStore.tipsPopoverlabel = res.data.reminderContent;
          this.createStore.collapseLosding = false;
        }
      });
    },
    getReportData() {
      if (this.empLevel == '1') {
        this.report.title = '半月报';
      } else if (this.empLevel == '2') {
        this.report.title = '周报';
      } else if (this.empLevel == '3') {
        this.report.title = '日报';
      }
      this.report.reportLosding = true;
      getReportTarget().then((res) => {
        this.report.reportLosding = false;
        this.report.reportData = res.data || {};
      });
    },
    getPantoneData() {
      if (this.empLevel !== 4) {
        this.pantone.pantoneLosding = true;
        getReportMaterial().then((res) => {
          this.pantone.pantoneLosding = false;
          this.pantone.tip = res.data.tip;
          this.pantone.pantoneData = res.data;
          delete this.pantone.pantoneData.tip;
        });
      }
    },
    getColorWarning() {
       if (this.empLevel !== 4) {
        this.colorWarning.contentLosding = true;
        getColorWarning().then((res) => {
          this.colorWarning.contentLosding = false;
          this.colorWarning.tip = res.data.tip;
          this.colorWarning.contentData = res.data;
          delete this.colorWarning.contentData.tip;
        });
      }
    },
    // 汇报下属详情-点击
    reportClick(type, value) {
      // 埋点
      buryingPoint({
        systemModel: '提示类',
        buryingPointType: 7,
        buryingPointValue: value,
        buryingPointName: type == 'fillingRate' ? '下属详情' : '进入点评',
        buryingPointPosition: this.empLevel == '1' ? '半月报' : '周报',
      });
      if (type == 'fillingRate') {
        // 下属汇报率审批率统计
        this.$router.push({ path: 'reportingRate' });
      } else if (type == 'commentNum') {
        // 下属业务员历史日报
        this.$router.push({ path: 'subordinateHistoricalDaily' });
      }
    },
    // 色卡查看详情
    pantoneClick(val, key, value) {
      // 埋点
      buryingPoint({
        systemModel: '提示类',
        buryingPointType: 7,
        buryingPointValue: value,
        buryingPointName: key + '门店未签收：',
        buryingPointPosition: '色卡',
      });
      // 业务员进入未拜访列表
      if (this.empLevel == '3') {
        this.$router.push({ path: '/pantoneNoGet', query: { storeId: val.storeId } });
      } else {
        // 销售部，大区，公司，总部
        this.$router.push({
          path: '/hintDetail',
          query: { fromType: 'pantone', materialCode: val.materialCode, pantoneName: key }, // materialCode物料来源
        });
      }
    },
    // 调色预警查看详情
    colorWarningClick(val, key, value) {
      // 埋点
      buryingPoint({
        systemModel: '提示类',
        buryingPointType: 7,
        buryingPointValue: value,
        buryingPointName: key,
        buryingPointPosition: '调色预警',
      });
      // 业务员进入调色预警列表
      if (this.empLevel == '3') {
        this.$router.push({ path: '/warningStore', query: { storeId: val.storeId } });
      } else {
        // 销售部，大区，公司，总部
        this.$router.push({
          path: '/hintDetail',
          query: { fromType: 'pantone', materialCode: val.materialCode, pantoneName: key }, // materialCode物料来源
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.hintTabPage {
  padding: 6px;
  /* padding: 10px; */
  .itemTab {
    /* background: #fff; */
    padding: 4px;
    /* padding: 10px; */
    /* margin-bottom: 10px; */
    border-radius: 5px;
    .itemHeader {
      /* width: 150px; */
      color: #0057ba;
      font-weight: 500;
      font-size: 16px;
      padding: 10px 0;
      display: inline-flex;
      align-items: center;
      .itemTitle {
        margin-right: 10px;
      }
      .hintIconBox {
        display: flex;
        .hintIcon {
          width: 16px;
          height: 16px;
        }
      }
      .van-popover__wrapper {
        display: flex;
      }
    }
    .updateTime {
      /* margin-left: 10px; */
      font-size: 14px;
      color: #0057ba;
    }
    .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;
        }
      }
      .reportNum {
        height: 25px;
      }
    }
    /* 色卡 */
    .pantoneContent {
      padding-bottom: 10px;
      .title {
        padding: 2px 5px;
        border-radius: 2px;
        background-color: #13b5b1;
        margin: 4px 0;
        display: inline-block;
        color: #fff;
      }
      .kekong{
        background: rgb(235, 104, 119);
      }
      .jinpai{
        background: rgb(255, 165, 0);

      }
      .pantoneItem {
        .item {
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            flex: 1;
            .valueIsClick {
              text-decoration: underline;
              color: #0057ba;
            }
          }
          .right {
            display: flex;
            width: 160px;
            // justify-content: center;
            .valueIsClick {
              text-decoration: underline;
              color: #0057ba;
            }
          }
        }
        .firstItem {
        }
        .secondItem {
        }
      }
    }
  }
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="scss">
.hintTabPage {
  .itemTab {
    .van-cell {
      padding: 0 4px;
      align-items: center;
    }
    .van-collapse-item__content {
      padding: 0 4px;
    }
  }
}
.hintPopover {
  background: #deedff;
  .popper__arrow {
    &::after {
      border-right-color: #deedff !important;
    }
  }
}
</style>