|
|
@@ -0,0 +1,495 @@
|
|
|
+<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>
|
