|
|
@@ -0,0 +1,509 @@
|
|
|
+<template>
|
|
|
+ <div class="shareBtarget">
|
|
|
+ <div v-if="type != 4" class="container linep">
|
|
|
+ <!-- 拜访数据(实时) -->
|
|
|
+ <template name="7" v-if="powerGrade == 1 && !GZdata">
|
|
|
+ <div class="text">拜访数据(实时)</div>
|
|
|
+ <visitedRealTime
|
|
|
+ :reportTargetAll="reportTargetAll"
|
|
|
+ :powerGrade="powerGrade"
|
|
|
+ :JZQuota="JZQuota"></visitedRealTime>
|
|
|
+ </template>
|
|
|
+ <!-- 建店布机 -->
|
|
|
+ <template name="2" v-if="!JZQuota && !GZdata" title="建店布机">
|
|
|
+ <div class="text">建店布机</div>
|
|
|
+ <createStoreBJ :reportTargetAll="reportTargetAll"></createStoreBJ>
|
|
|
+ </template>
|
|
|
+ <!-- 下单点数 -->
|
|
|
+ <template v-if="powerGrade == 1 && !JZQuota && !GZdata" name="33" title="下单点数">
|
|
|
+ <div class="text">下单点数</div>
|
|
|
+ <placeOrder :reportTargetAll="reportTargetAll"></placeOrder>
|
|
|
+ </template>
|
|
|
+ <!-- 专业时时丽分销店下单 -->
|
|
|
+ <template name="16" v-if="!JZQuota && !GZdata" title="专业时时丽分销店下单">
|
|
|
+ <div class="text">专业时时丽分销店下单</div>
|
|
|
+ <ZYPlaceOrder :reportTargetAll="reportTargetAll"></ZYPlaceOrder>
|
|
|
+ </template>
|
|
|
+ <!-- 超好贴分销店下单 -->
|
|
|
+ <template name="17" v-if="!JZQuota && !GZdata" title="超好贴分销店下单">
|
|
|
+ <div class="text">超好贴分销店下单</div>
|
|
|
+ <veryGoodPlaceOrder :reportTargetAll="reportTargetAll"></veryGoodPlaceOrder>
|
|
|
+ </template>
|
|
|
+ <template v-if="powerGrade != 1 && !JZQuota && !GZdata" name="32" title="客户开拓">
|
|
|
+ <div class="text">客户开拓</div>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24"><span class="leftTitle">非片客户开发</span></van-col>
|
|
|
+ <van-col span="24">
|
|
|
+ <p>
|
|
|
+ 全年开发数:<span class="colorbalck">{{
|
|
|
+ Micrometer(reportTargetAll.customerAct)
|
|
|
+ }}</span>
|
|
|
+ </p>
|
|
|
+ </van-col>
|
|
|
+ <van-col span="24">
|
|
|
+ <p>
|
|
|
+ 全年进度率:<span class="colorbalck"> {{ reportTargetAll.customerYearRate }}% </span>
|
|
|
+ </p>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div v-if="type == 4" class="container linep">
|
|
|
+ <template v-if="reportInfo.customerUserTargets">
|
|
|
+ <template v-for="(item, index) in reportInfo.customerUserTargets">
|
|
|
+ <div class="text">{{ item.nickName }}</div>
|
|
|
+ <van-row>
|
|
|
+ <van-col span="24"
|
|
|
+ ><p class="indexTile" style="margin-top: -2px">
|
|
|
+ <van-icon :name="bfindex" class="indexicon"></van-icon>拜访
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p><span class="leftTitle">本日实际:</span></p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p><span class="rightTitle">本月实际:</span></p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p>
|
|
|
+ 拜访点数:<span class="colorbalck">{{ Micrometer(item.dayVisitCount) }}</span>
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p>
|
|
|
+ 拜访点数:<span class="colorbalck">{{ Micrometer(item.monthVisitCount) }}</span>
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="24"
|
|
|
+ ><p class="indexTile">
|
|
|
+ <van-icon :name="storeindex" class="indexicon"></van-icon>建店
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p><span class="leftTitle">本日新增:</span></p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p><span class="rightTitle">本月实际:</span></p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p>
|
|
|
+ 分销店点数:<span class="colorbalck">{{ Micrometer(item.dayFxdAct) }}</span>
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p>
|
|
|
+ 分销店点数:<span class="colorbalck">{{ Micrometer(item.monthFxdAct) }}</span>
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="24"
|
|
|
+ ><p class="indexTile">
|
|
|
+ <van-icon :name="oderindex" class="indexicon"></van-icon>下单
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p><span class="leftTitle">昨日新增:</span></p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p><span class="rightTitle">本月实际:</span></p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p>
|
|
|
+ 下单点数:<span class="colorbalck">{{ Micrometer(item.yesOrderAct) }}</span>
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ <van-col span="12"
|
|
|
+ ><p>
|
|
|
+ 下单点数:<span class="colorbalck">{{ Micrometer(item.monthOrderAct) }}</span>
|
|
|
+ </p></van-col
|
|
|
+ >
|
|
|
+ </van-row>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import createStoreBJ from '@/components/componentsTarget/createStoreBJ';
|
|
|
+import visitedRealTime from '@/components/componentsTarget/visitedRealTime';
|
|
|
+import placeOrder from '@/components/componentsTarget/placeOrder';
|
|
|
+import ZYPlaceOrder from '@/components/componentsTarget/ZYPlaceOrder';
|
|
|
+import veryGoodPlaceOrder from '@/components/componentsTarget/veryGoodPlaceOrder';
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ createStoreBJ,
|
|
|
+ visitedRealTime,
|
|
|
+ placeOrder,
|
|
|
+ ZYPlaceOrder,
|
|
|
+ veryGoodPlaceOrder,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ reportInfo: {
|
|
|
+ type: Object,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ reportInfo: {
|
|
|
+ handler(val) {
|
|
|
+ if (val.postType == 'GZ') {
|
|
|
+ this.GZdata = true;
|
|
|
+ this.saptitle = '公裝业绩SAP(千元)';
|
|
|
+ } else {
|
|
|
+ this.saptitle = '业绩目标SAP(千元)';
|
|
|
+ this.GZdata = false;
|
|
|
+ }
|
|
|
+ if (val.postType == 'JZ') {
|
|
|
+ this.JZQuota = true;
|
|
|
+ } else {
|
|
|
+ this.JZQuota = false;
|
|
|
+ }
|
|
|
+ this.reportInfoData = val;
|
|
|
+ this.powerGrade = val.positionId;
|
|
|
+ if (val.reportTargetAll != null) {
|
|
|
+ this.reportTargetAll = val.reportTargetAll;
|
|
|
+ }
|
|
|
+ this.type = val.userType;
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: '-1',
|
|
|
+ JZQuota: false,
|
|
|
+ GZdata: false,
|
|
|
+ saptitle: '业绩目标SAP(千元)',
|
|
|
+ powerGrade: '2',
|
|
|
+ reportTargetAll: {},
|
|
|
+ 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',
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container .template {
|
|
|
+ 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;
|
|
|
+}
|
|
|
+
|
|
|
+.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;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.shareBtarget {
|
|
|
+ p {
|
|
|
+ margin: 10px 0 0 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ /* color: #666; */
|
|
|
+ }
|
|
|
+ .leftTitle {
|
|
|
+ /* background-color: #74a4d9; */
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ // padding: 0 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .rightTitle {
|
|
|
+ /* background-color: #e7b4bb; */
|
|
|
+ color: #fff;
|
|
|
+ display: inline-block;
|
|
|
+ // padding: 0 4px;
|
|
|
+ border-radius: 2px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .colLabel {
|
|
|
+ display: inline-block;
|
|
|
+ // padding: 2px 5px;
|
|
|
+ color: #fff;
|
|
|
+ // margin-right: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+ .colorbalck {
|
|
|
+ color: #fff;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ background: url('../assets/textBack.png') no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: vw(94);
|
|
|
+ background-size: cover;
|
|
|
+ color: #7d0207;
|
|
|
+ font-size: vw(36);
|
|
|
+ text-align: center;
|
|
|
+ line-height: vw(94);
|
|
|
+ // margin-top: vw(152);
|
|
|
+ // margin-bottom: vw(45);
|
|
|
+ margin: vw(35) 0 vw(15) 0;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
