no message

src/components/componentsTarget/ZYPlaceOrder.vue

@@ -0,0 +1,56 @@
+<!-- 拜访数据（实时） -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">昨日新增:</span></van-col>
+    <van-col span="12"><span class="rightTitle">本月实际:</span></van-col>
+    <van-col span="12">
+      <p>
+        下单点数:<span class="colorbalck">{{
+          Micrometer(reportTargetAll.professionalSslYes)
+        }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        下单点数:<span class="colorbalck">{{
+          Micrometer(reportTargetAll.professionalSslMonth)
+        }}</span>
+      </p></van-col
+    >
+    <van-col span="12"><p></p></van-col>
+    <van-col span="12"
+      ><p>
+        下单率:<span class="colorbalck">{{ reportTargetAll.professionalSslOrderRateMonth }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        下单数量(桶):<span class="colorbalck">{{
+          Micrometer(reportTargetAll.professionalSslOrderNumYes)
+        }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        下单数量(桶):<span class="colorbalck">{{
+          Micrometer(reportTargetAll.professionalSslOrderNumMonth)
+        }}</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/ZYSAP.vue

@@ -0,0 +1,52 @@
+<!-- 拜访数据（实时） -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col>
+    <van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.czjMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.czjQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.czjMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.czjQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.czjMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.czjQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/chunTaiSAP.vue

@@ -0,0 +1,42 @@
+<!-- 拜访数据（实时） -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月:</span></van-col
+    ><van-col span="12"><span class="rightTitle">本季:</span></van-col>
+    <van-col span="12"
+      ><p>
+        业绩实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.gzCtzjMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        业绩实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.gzCtzjQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        业绩成长率:<span class="colorbalck">{{ reportTargetAll.gzCtzjMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        业绩成长率:<span class="colorbalck">{{ reportTargetAll.gzCtzjQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/cizhuanjiaoSAP.vue

@@ -0,0 +1,52 @@
+<!-- 瓷砖胶SAP(千元) -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col
+    ><van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.czjSapMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.czjSapQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.czjSapMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.czjSapQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.czjSapMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.czjSapQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/createStoreBJ.vue

@@ -0,0 +1,143 @@
+<!-- 建店布机 -->
+<template>
+  <van-row>
+    <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="colLabel colLabel_KK">可控店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.controlledShopMonthAct) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_KK">可控店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.controlledShopYearAct) }}</span>
+        <span class="colorbalck" v-if="reportTargetAll.controlledShopYearRate"
+          >({{ reportTargetAll.controlledShopYearRate }}%)</span
+        >
+        <span class="colorbalck" v-else>({{ '-' }})</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_FX">分销店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.allShopMonthAct) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_FX">分销店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.allShopYearAct) }}</span>
+        <span class="colorbalck" v-if="reportTargetAll.allShopYearRate"
+          >({{ reportTargetAll.allShopYearRate }}%)</span
+        >
+        <span class="colorbalck" v-else>({{ '-' }})</span>
+      </p>
+    </van-col>
+    <div>
+      <div class="backLeft back"></div>
+      <div class="backRight back"></div>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JP">金牌店:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.goldShopMonthAct) }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JP">金牌店:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.goldShopYearAct) }}</span>
+          <span class="colorbalck" v-if="reportTargetAll.goldShopYearRate">
+            ({{ reportTargetAll.goldShopYearRate }}%)
+          </span>
+          <span class="colorbalck" v-else>({{ '-' }})</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JPBJ">金牌店布机:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.goldShopBjMonthAct) }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JPBJ">金牌店布机:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.goldShopBjYearAct) }}</span>
+          <span class="colorbalck" v-if="reportTargetAll.goldShopBjYearRate">
+            ({{ reportTargetAll.goldShopBjYearRate }}%)
+          </span>
+          <span class="colorbalck" v-else>({{ '-' }})</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_TCFX">同城分销:</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_TCFX">同城分销:</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          涂料店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxTlShopMonthAct)
+          }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          涂料店:<span class="colorbalck">{{ Micrometer(reportTargetAll.tcfxTlShopYearAct) }}</span>
+          <span class="colorbalck" v-if="reportTargetAll.tcfxTlShopYearRate">
+            ({{ reportTargetAll.tcfxTlShopYearRate }}%)
+          </span>
+          <span class="colorbalck" v-else>({{ '-' }})</span>
+        </p>
+      </van-col>
+
+      <van-col span="12">
+        <p style="margin-top: 0">
+          厨卫店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxOtherShopMonthAct)
+          }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p style="margin-top: 0">
+          厨卫店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxOtherShopYearAct)
+          }}</span>
+          <span class="colorbalck" v-if="reportTargetAll.tcfxOtherShopYearRate">
+            ({{ reportTargetAll.tcfxOtherShopYearRate }}%)
+          </span>
+          <span class="colorbalck" v-else>({{ '-' }})</span>
+        </p>
+      </van-col>
+    </div>
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/fangshuiSAP.vue

@@ -0,0 +1,52 @@
+<!-- 防水+背胶SAP(千元) -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col
+    ><van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.fsbjSapMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.fsbjSapQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.fsbjSapMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.fsbjSapQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.fsbjSapMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.fsbjSapQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/moshouqiSAP.vue

@@ -0,0 +1,52 @@
+<!-- 魔术漆SAP(千元) -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col>
+    <van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.ysqMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.ysqQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.ysqMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.ysqQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.ysqMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.ysqQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/neiqiangzhonggaoduanSAP.vue

@@ -0,0 +1,52 @@
+<!-- 内墙中高端SAP(千元) -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col>
+    <van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.rjqSapMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.rjqSapQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.rjqSapMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.rjqSapQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.rjqSapMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.rjqSapQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/neiwaiqiangpingtu.vue

@@ -0,0 +1,52 @@
+<!-- 内外墙平涂 -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col>
+    <van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.nwqSapMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.nwqSapQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.nwqSapMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.nwqSapQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.nwqSapMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.nwqSapQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/performanceSAP.vue

@@ -0,0 +1,84 @@
+<!-- 业绩目标SAP(千元)/公裝业绩SAP(千元) -->
+<template>
+  <van-row>
+    <van-col span="12"
+      ><span v-if="!JZQuota" class="leftTitle">本月业绩:</span
+      ><span v-if="JZQuota" class="leftTitle">本月实际:</span></van-col
+    >
+    <van-col span="12"
+      ><span v-if="!JZQuota" class="rightTitle">本季业绩:</span
+      ><span v-if="JZQuota" class="rightTitle">本季实际:</span></van-col
+    >
+    <van-col span="12">
+      <p v-if="!JZQuota">
+        本月实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.sapMonthAct) }}</span>
+      </p>
+      <p v-if="JZQuota">
+        本月累计:<span class="colorbalck">{{ Micrometer(reportTargetAll.sapMonthAct) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p v-if="!JZQuota">
+        本季实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.sapQuarterAct) }}</span>
+      </p>
+      <p v-if="JZQuota">
+        本季累计:<span class="colorbalck">{{ Micrometer(reportTargetAll.sapQuarterAct) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12"
+      ><p>
+        本月达成率:<span class="colorbalck">{{ reportTargetAll.sapMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        本季达成率:<span class="colorbalck">{{ reportTargetAll.sapQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        本月成长率:<span class="colorbalck">{{ reportTargetAll.sapMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        本季成长率:<span class="colorbalck">{{ reportTargetAll.sapQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="24" v-if="JZQuota"><span class="leftTitle">年度累计</span></van-col>
+    <van-col span="24" v-if="JZQuota"
+      ><p>
+        年度累计:<span class="colorbalck">{{ Micrometer(reportTargetAll.sapYearAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="24" v-if="JZQuota"
+      ><p>
+        年度达成率:<span class="colorbalck">{{ reportTargetAll.sapYearSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="24" v-if="JZQuota"
+      ><p>
+        年度成长率:<span class="colorbalck">{{ reportTargetAll.sapYearGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+    JZQuota: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/placeOrder.vue

@@ -0,0 +1,97 @@
+<!-- 下单点数 -->
+<template>
+  <van-row>
+    <van-col span="24"><span class="leftTitle">本月进度:</span></van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_KK">可控店:</span>
+        <span class="colorbalck">{{
+          Micrometer(reportTargetAll.controlledOrderShopMonthAct)
+        }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_KK">可控店:</span>
+        <span class="colorbalck">{{ reportTargetAll.controlledShopMonthOrderRate }}%</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_FX">分销店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.fxOrderShopMonthAct) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_FX">分销店:</span
+        ><span class="colorbalck">{{ reportTargetAll.fxShopMonthOrderRate }}%</span>
+      </p>
+    </van-col>
+    <div>
+      <div class="backLeft back"></div>
+      <div class="backRight back"></div>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JP">金牌店:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.jpOrderShopMonthAct) }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JP">金牌店:</span>
+          <span class="colorbalck"> {{ reportTargetAll.jpShopMonthOrderRate }}% </span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_TCFX">同城分销:</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_TCFX">同城分销:</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          涂料店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxTlOrderShopMonthAct)
+          }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          涂料店:<span class="colorbalck">{{ reportTargetAll.tcfxTlShopMonthOrderRate }}%</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p style="margin-top: 0">
+          厨卫店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxOtherOrderShopMonthAct)
+          }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p style="margin-top: 0">
+          厨卫店:<span class="colorbalck">{{ reportTargetAll.tcfxOtherShopMonthOrderRate }}%</span>
+        </p>
+      </van-col>
+    </div>
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/veryGoodPlaceOrder.vue

@@ -0,0 +1,54 @@
+<!-- 拜访数据（实时） -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">昨日新增:</span></van-col
+    ><van-col span="12"><span class="rightTitle">本月实际:</span></van-col>
+    <van-col span="12"
+      ><p>
+        下单点数:<span class="colorbalck">{{ Micrometer(reportTargetAll.excellentPostYes) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        下单点数:<span class="colorbalck">{{
+          Micrometer(reportTargetAll.excellentPostMonth)
+        }}</span>
+      </p></van-col
+    >
+    <van-col span="12"><p></p></van-col>
+    <van-col span="12"
+      ><p>
+        下单率:<span class="colorbalck">{{ reportTargetAll.excellentPostOrderRateMonth }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        下单数量(包):<span class="colorbalck">{{
+          Micrometer(reportTargetAll.excellentPostOrderNumYes)
+        }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        下单数量(包):<span class="colorbalck">{{
+          Micrometer(reportTargetAll.excellentPostOrderNumMonth)
+        }}</span>
+      </p>
+    </van-col>
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/visitedRealTime.vue

@@ -0,0 +1,166 @@
+<!-- 拜访数据（实时） -->
+<template>
+  <!-- 家装和公装 -->
+  <van-row v-if="JZQuota">
+    <van-col span="12"><span class="leftTitle">今日拜访:</span></van-col>
+    <van-col span="12"><span class="rightTitle">本月拜访:</span></van-col>
+    <van-col span="12"
+      ><p>
+        线内拜访点数:<span class="colorbalck">{{ reportTargetAll.inVisitAct }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        线内拜访点数:<span class="colorbalck">{{ reportTargetAll.inVisitActMonth }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        计划拜访点数:<span class="colorbalck">{{ reportTargetAll.visitTarget }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        计划拜访点数:<span class="colorbalck">{{ reportTargetAll.coverStoreNum }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        线内拜访率:<span class="colorbalck">{{ reportTargetAll.inVisitRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        线内拜访率:<span class="colorbalck">{{ reportTargetAll.inVisitMonthRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        整体拜访数:<span class="colorbalck">{{ reportTargetAll.allVisitNum }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        整体拜访率:<span class="colorbalck">{{ reportTargetAll.allVisitMonthRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+  <!-- 其他 -->
+  <van-row v-else>
+    <van-col span="12">
+      <span class="leftTitle">今日拜访点数:</span>
+    </van-col>
+    <van-col span="12">
+      <span class="rightTitle">月度拜访点数(拜访率):</span>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_KK">可控店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.controlledShopVisitDayNum) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_KK">可控店:</span>
+        <span class="colorbalck">{{
+          Micrometer(reportTargetAll.controlledShopVisitMonthNum)
+        }}</span>
+        <span class="colorbalck">({{ reportTargetAll.controlledShopVisitMonthRate }}%)</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_FX">分销店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.fxShopVisitDayNum) }}</span>
+      </p>
+    </van-col>
+    <van-col span="12">
+      <p>
+        <span class="colLabel colLabel_FX">分销店:</span>
+        <span class="colorbalck">{{ Micrometer(reportTargetAll.fxShopVisitMonthNum) }}</span>
+        <span class="colorbalck"> ({{ reportTargetAll.fxShopVisitMonthRate }}%) </span>
+      </p>
+    </van-col>
+    <div>
+      <div class="backLeft back"></div>
+      <div class="backRight back"></div>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JP">金牌店:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.jpShopVisitDayNum) }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_JP">金牌店:</span>
+          <span class="colorbalck">{{ Micrometer(reportTargetAll.jpShopVisitMonthNum) }}</span>
+          <span class="colorbalck"> ({{ reportTargetAll.jpShopVisitMonthRate }}%) </span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_TCFX">同城分销:</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span class="colLabel colLabel_TCFX">同城分销:</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          涂料店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxTlShopVisitDayNum)
+          }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p>
+          <span style="font-weight: 600">近2月</span>涂料店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxTlShopVisitMonthNum)
+          }}</span>
+          <span class="colorbalck"> ({{ reportTargetAll.tcfxTlShopVisitMonthRate }}%) </span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p style="margin-top: 0">
+          厨卫店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxOtherShopVisitDayNum)
+          }}</span>
+        </p>
+      </van-col>
+      <van-col span="12">
+        <p style="margin-top: 0">
+          <span style="font-weight: 600">近3月</span>厨卫店:<span class="colorbalck">{{
+            Micrometer(reportTargetAll.tcfxOtherShopVisitMonthNum)
+          }}</span>
+          <span class="colorbalck"> ({{ reportTargetAll.tcfxOtherShopVisitMonthRate }}%) </span>
+        </p>
+      </van-col>
+    </div>
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+    powerGrade: {
+      type: [Number, String],
+    },
+    JZQuota: {
+      type: Boolean,
+    },
+    GZdata: {
+      type: Boolean,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/componentsTarget/zhiganwaiqiangSAP.vue

@@ -0,0 +1,52 @@
+<!-- 质感外墙SAP(千元) -->
+<template>
+  <van-row>
+    <van-col span="12"><span class="leftTitle">本月业绩:</span></van-col
+    ><van-col span="12"><span class="rightTitle">本季业绩:</span></van-col>
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.zgwqMonthAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        实际:<span class="colorbalck">{{ Micrometer(reportTargetAll.zgwqQuarterAct) }}</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.zgwqMonthSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        达成率:<span class="colorbalck">{{ reportTargetAll.zgwqQuarterSuccessRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.zgwqMonthGrowRate }}%</span>
+      </p></van-col
+    >
+    <van-col span="12"
+      ><p>
+        成长率:<span class="colorbalck">{{ reportTargetAll.zgwqQuarterGrowRate }}%</span>
+      </p></van-col
+    >
+  </van-row>
+</template>
+<script>
+export default {
+  props: {
+    reportTargetAll: {
+      type: Object,
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped>
+@import './index.css';
+</style>

src/components/share.vue

@@ -55,12 +55,25 @@
             </div>
           </div>
         </div>
-        <template v-if="checkedPlan && reportContents">
+        <!-- 旧的日报内容 -->
+        <template v-if="checkedPlan && reportContents && isHistory == '1'">
           <template v-for="value in reportContents">
             <div :class="['text']">{{ value.dictValue }}</div>
             <div class="content">{{ value.content }}</div>
           </template>
         </template>
+        <!-- 日报指标 -->
+        <template v-if="isTarget">
+          <shareAtarget :reportInfo="reportTarget"></shareAtarget>
+          <shareBtarget :reportInfo="reportTarget"></shareBtarget>
+        </template>
+        <!-- 日报填写内容 -->
+        <template v-if="isReportCustom">
+          <shareReportCustom
+            :disabled="true"
+            :reportCustomData="reportTarget.customTaskList"></shareReportCustom>
+        </template>
+        <!-- 今日拜访照片 -->
         <template v-if="photosData && photosData.length">
           <div class="text">今日拜访照片</div>
           <div class="content-photos">
@@ -86,7 +99,7 @@
       <div class="footerShare">
         <div class="right-text">
           <div>长按识别二维码查看详情&点评</div>
-          <div></div>
+          <!-- <div></div> -->
         </div>
         <vue-qr
           class="QRcodes"
@@ -97,6 +110,7 @@
           :logoSrc="require('@/assets/logo1.png')"
           :logoMargin="2"></vue-qr>
       </div>
+      <div class="footerTips">来自立邦好邦手</div>
     </div>
     <div
       class="share-mask"
@@ -122,11 +136,15 @@
 </template>
 <script>
 import html2canvas from 'html2canvas';
-import { imgToBase64 } from '@/api/index';
+import { imgToBase64, shareReportMobile } from '@/api/index';
 import VueQr from 'vue-qr';
+import ShareAtarget from './shareAtarget.vue';
+import shareBtarget from './shareBtarget.vue';
+import shareReportCustom from './shareReportCustom.vue';
+import uploadAliOss from '@/utils/uploadAliOss';
 export default {
   name: 'share',
-  components: { VueQr },
+  components: { VueQr, ShareAtarget, shareReportCustom, shareBtarget },
   props: {
     // 日报数据
     reportTarget: {
@@ -162,6 +180,21 @@ export default {
         return [];
       },
     },
+    // 是否显示 指标
+    isTarget: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否显示 日报填写内容
+    isReportCustom: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否为历史汇报：0-新汇报 1-历史汇报
+    isHistory: {
+      type: String,
+      default: '0',
+    },
   },
   data() {
     return {
@@ -172,9 +205,15 @@ export default {
       qrcode: null,
       vueQrText: '',
       heightFlag: 'start', //图片高度不足，居中显示
+      shareDuration: 0, //分享时间
+      shareInterval: null,
     };
   },
   created() {
+    this.shareDuration = 0;
+    this.shareInterval = setInterval(() => {
+      this.shareDuration++;
+    }, 1000);
     this.zIndex = -1;
     this.canvasImageUrl = '';
     let links = process.env.NODE_ENV == 'production' ? 'http://1.npz.cn/3/' : 'http://1.npz.cn/2/';
@@ -266,7 +305,6 @@ export default {
           this.toastLoading().clear();
           let imageUrl = canvas.toDataURL('image/png');
           this.canvasImageUrl = imageUrl;
-
           // 图片加载完成后设置滚动容器高度
           const img = new Image();
           img.onload = () => {
@@ -308,6 +346,22 @@ export default {
           this.zIndex = 9;
           this.$emit('setShareImg', true);
           this.$emit('setDailyDetailsBox', false);
+          // 上传阿里云oss
+          // 图片名称：用户名-时间戳
+          let username = this.reportTarget.nickName;
+          let imgName = username + '-' + new Date().getTime();
+          uploadAliOss(imageUrl, imgName).then((res) => {
+            if (res.url && res.url.indexOf('http') != -1) {
+              console.log(res.url);
+              shareReportMobile({
+                reportId: this.reportId, //	long	汇报主键id
+                imageUrl: res.url, //	String	分享日报的图片的URL
+                shareDuration: this.shareDuration, //	long	分享用时（秒）
+              }).then((res) => {
+                if (this.shareInterval) clearInterval(this.shareInterval);
+              });
+            }
+          });
         })
         .catch((error) => {
           this.toastLoading().clear();
@@ -422,7 +476,7 @@ export default {
       line-height: vw(94);
       // margin-top: vw(152);
       // margin-bottom: vw(45);
-      margin: vw(35) 0;
+      margin: vw(35) 0 vw(20) 0;
       font-weight: bold;
     }
 
@@ -491,8 +545,9 @@ export default {
   .footerShare {
     // position: absolute;
     display: flex;
-    // align-items: center;
-    justify-content: flex-end;
+    flex-direction: column;
+    align-items: center;
+    // justify-content: flex-end;
     margin-top: vw(30);
     margin-right: 2px;
 
@@ -501,7 +556,7 @@ export default {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      margin-right: vw(24);
+      // margin-right: vw(24);
 
       div {
         color: #ffffff;
@@ -531,6 +586,15 @@ export default {
     //   }
     // }
   }
+  .footerTips {
+    width: 100%;
+    text-align: center;
+    padding: 10px 0;
+    color: rgba(255, 255, 255, 0.721);
+    font-size: 14px;
+    font-family: PingFang-SC-Medium;
+    font-weight: 600;
+  }
   .html2canvasBox {
     width: 100%;
     height: 100%;
@@ -539,6 +603,7 @@ export default {
     overflow: hidden !important;
     display: flex;
     flex-direction: column;
+    -webkit-user-select: none; /* Safari */
   }
   #html2canvas {
     width: 100%;
@@ -617,8 +682,8 @@ export default {
   .QRcodes {
     // width: 45px; /* 固定像素尺寸 */
     // height: 45px;
-    width: vw(200); /* 固定像素尺寸 */
-    height: vw(200);
+    width: vw(280);
+    height: vw(280);
     position: relative;
     background: #ffffff;
     image-rendering: crisp-edges;

src/components/shareAtarget.vue

@@ -0,0 +1,710 @@
+<template>
+  <div class="shareAtarget">
+    <div v-if="type != 4" class="container linep">
+      <!-- performanceSAP 业绩目标SAP(千元)/公裝业绩SAP(千元) -->
+      <template v-if="type != 3 && type != 4" name="1" :title="saptitle">
+        <div class="text">{{ saptitle }}</div>
+        <performanceSAP :reportTargetAll="reportTargetAll" :JZQuota="JZQuota"></performanceSAP>
+      </template>
+      <template v-if="powerGrade != 1 && !JZQuota && !GZdata" name="2" title="质感外墙SAP(千元)">
+        <div class="text">质感外墙SAP(千元)</div>
+        <zhiganwaiqiangSAP :reportTargetAll="reportTargetAll"></zhiganwaiqiangSAP>
+      </template>
+      <template v-if="powerGrade != 1 && !JZQuota && !GZdata" name="3" title="魔术漆SAP(千元)">
+        <div class="text">魔术漆SAP(千元)</div>
+        <moshouqiSAP :reportTargetAll="reportTargetAll"></moshouqiSAP>
+      </template>
+      <template v-if="powerGrade != 1 && !JZQuota && !GZdata" name="4" title="防水+背胶SAP(千元)">
+        <div class="text">防水+背胶SAP(千元)</div>
+        <fangshuiSAP :reportTargetAll="reportTargetAll"></fangshuiSAP>
+      </template>
+      <template v-if="powerGrade != 1 && !JZQuota && !GZdata" name="5" title="内墙中高端SAP(千元)">
+        <div class="text">内墙中高端SAP(千元)</div>
+        <neiqiangzhonggaoduanSAP :reportTargetAll="reportTargetAll"></neiqiangzhonggaoduanSAP>
+      </template>
+      <!-- 内外墙平涂SAP -->
+      <template name="6" v-if="powerGrade != 1 && !JZQuota && !GZdata" title="内外墙平涂SAP(千元)">
+        <div class="text">内外墙平涂SAP(千元)</div>
+        <neiwaiqiangpingtu :reportTargetAll="reportTargetAll"></neiwaiqiangpingtu>
+      </template>
+      <template
+        v-if="!JZQuota && !GZdata && [1, 4, 5].indexOf(powerGrade) !== -1"
+        name="7"
+        title="专业时时丽SAP(千元)">
+        <div class="text">专业时时丽SAP(千元)</div>
+        <ZYSAP :reportTargetAll="reportTargetAll"></ZYSAP>
+      </template>
+      <template
+        v-if="!JZQuota && !GZdata && [1, 4, 5].indexOf(powerGrade) !== -1"
+        name="8"
+        :title="'瓷砖胶SAP(千元)'">
+        <div class="text">瓷砖胶SAP(千元)</div>
+        <cizhuanjiaoSAP :reportTargetAll="reportTargetAll"></cizhuanjiaoSAP>
+      </template>
+      <template v-if="GZdata" name="9" title="纯态之家SAP(千元)">
+        <div class="text">纯态之家SAP(千元)</div>
+        <chunTaiSAP :reportTargetAll="reportTargetAll"></chunTaiSAP>
+      </template>
+      <template v-if="GZdata" name="10" title="商机关联的质感外墙业绩SAP(千元)">
+        <div class="text">商机关联的质感外墙业绩SAP(千元)</div>
+        <van-row>
+          <van-col span="12"><span class="leftTitle">本月:</span></van-col
+          ><van-col span="12"><span class="rightTitle">本季:</span></van-col>
+          <van-col span="12"
+            ><p>
+              业绩实际:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.gzZgwqMonthAct)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              业绩实际:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.gzZgwqQuarterAct)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              业绩成长率:<span class="colorbalck">{{ reportTargetAll.gzZgwqMonthGrowRate }}%</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              业绩成长率:<span class="colorbalck"
+                >{{ reportTargetAll.gzZgwqQuarterGrowRate }}%</span
+              >
+            </p></van-col
+          >
+        </van-row>
+      </template>
+      <template v-if="GZdata" name="11" title="累计出货有效客户">
+        <div class="text">累计出货有效客户</div>
+        <van-row>
+          <van-col span="12"
+            ><p>
+              全年实际:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.gzKhljYearAct)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              全年目标:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.gzKhljYearTarget)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"><p>&nbsp;</p></van-col>
+          <van-col span="12"
+            ><p>
+              目标达成率:<span class="colorbalck"
+                >{{ Micrometer(reportTargetAll.gzKhljSuccessRate) }}%</span
+              >
+            </p></van-col
+          >
+        </van-row>
+      </template>
+      <template v-if="GZdata" name="12" title="今日拜访">
+        <div class="text">今日拜访</div>
+        <van-row>
+          <van-col span="12"
+            ><p>
+              公装客户数:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.gzVisitCustomerNum)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              工地数:<span class="colorbalck">{{ Micrometer(reportTargetAll.gzVisitGdNum) }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              潜在客户数:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.gzVisitQzCustomerNum)
+              }}</span>
+            </p></van-col
+          >
+        </van-row>
+      </template>
+      <template v-if="JZQuota" name="13" title="展厅上样">
+        <div class="text">展厅上样</div>
+        <van-row>
+          <van-col span="24"
+            ><p>
+              当月新增店数:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.exhibitionHallMonthAct)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              全年实际店数:<span class="colorbalck"
+                >{{ Micrometer(reportTargetAll.exhibitionHallYearAct) }}%</span
+              >
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              全年达成进度率:<span class="colorbalck"
+                >{{ reportTargetAll.exhibitionHallYearRate }}%</span
+              >
+            </p></van-col
+          >
+        </van-row>
+      </template>
+      <template v-if="JZQuota" name="14" title="基材粉料过账(千元)">
+        <div class="text">基材粉料过账(千元)</div>
+        <van-row>
+          <van-col span="12"><span class="leftTitle">本月实际:</span></van-col
+          ><van-col span="12"><span class="rightTitle">本季实际:</span></van-col>
+          <van-col span="12"
+            ><p>
+              客户数:<span class="colorbalck">{{ reportTargetAll.jcPostCustomerMonth }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              客户数:<span class="colorbalck">{{ reportTargetAll.jcPostCustomerQuarter }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单数(包):<span class="colorbalck">{{ reportTargetAll.jcPostOrderNumMonth }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单数(包):<span class="colorbalck">{{ reportTargetAll.jcPostOrderNumQuarter }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单销售额:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.jcPostOrderPriceMonth)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单销售额:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.jcPostOrderPriceQuarter)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单率:<span class="colorbalck">{{ reportTargetAll.jcPostOrderRateMonth }}%</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单率:<span class="colorbalck">{{ reportTargetAll.jcPostOrderRateQuarter }}%</span>
+            </p></van-col
+          >
+          <van-col span="24"><span class="leftTitle">年度累计实际:</span></van-col>
+          <van-col span="24"
+            ><p>
+              客户数:<span class="colorbalck">{{ reportTargetAll.jcPostCustomerYear }}</span>
+            </p></van-col
+          >
+          <van-col span="24"
+            ><p>
+              下单数(包):<span class="colorbalck">{{ reportTargetAll.jcPostOrderNumYear }}</span>
+            </p></van-col
+          >
+          <van-col span="24"
+            ><p>
+              下单销售额:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.jcPostOrderPriceYear)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="24"
+            ><p>
+              下单率:<span class="colorbalck">{{ reportTargetAll.jcPostOrderRateYear }}%</span>
+            </p></van-col
+          >
+        </van-row>
+      </template>
+      <template v-if="JZQuota" name="15" title="魔术漆过账(千元)">
+        <div class="text">魔术漆过账(千元)</div>
+        <van-row>
+          <van-col span="12"><span class="leftTitle">本月实际:</span></van-col
+          ><van-col span="12"><span class="rightTitle">本季实际:</span></van-col>
+          <van-col span="12"
+            ><p>
+              客户数:<span class="colorbalck">{{ reportTargetAll.msqPostCustomerMonth }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              客户数:<span class="colorbalck">{{ reportTargetAll.msqPostCustomerQuarter }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单销售额:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.msqPostOrderPriceMonth)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单销售额:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.msqPostOrderPriceQuarter)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单率:<span class="colorbalck">{{ reportTargetAll.msqPostOrderRateMonth }}%</span>
+            </p></van-col
+          >
+          <van-col span="12"
+            ><p>
+              下单率:<span class="colorbalck">{{ reportTargetAll.msqPostOrderRateQuarter }}%</span>
+            </p></van-col
+          >
+          <van-col span="24"><span class="leftTitle">年度累计实际:</span></van-col>
+          <van-col span="24"
+            ><p>
+              客户数:<span class="colorbalck">{{ reportTargetAll.msqPostCustomerYear }}</span>
+            </p></van-col
+          >
+          <van-col span="24"
+            ><p>
+              下单销售额:<span class="colorbalck">{{
+                Micrometer(reportTargetAll.msqPostOrderPriceYear)
+              }}</span>
+            </p></van-col
+          >
+          <van-col span="24"
+            ><p>
+              下单率:<span class="colorbalck">{{ reportTargetAll.msqPostOrderRateYear }}%</span>
+            </p></van-col
+          >
+        </van-row>
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+import performanceSAP from '@/components/componentsTarget/performanceSAP';
+import neiwaiqiangpingtu from '@/components/componentsTarget/neiwaiqiangpingtu';
+import zhiganwaiqiangSAP from '@/components/componentsTarget/zhiganwaiqiangSAP';
+import moshouqiSAP from '@/components/componentsTarget/moshouqiSAP';
+import fangshuiSAP from '@/components/componentsTarget/fangshuiSAP';
+import neiqiangzhonggaoduanSAP from '@/components/componentsTarget/neiqiangzhonggaoduanSAP';
+import chunTaiSAP from '@/components/componentsTarget/chunTaiSAP';
+import ZYSAP from '@/components/componentsTarget/ZYSAP';
+import cizhuanjiaoSAP from '@/components/componentsTarget/cizhuanjiaoSAP';
+export default {
+  components: {
+    performanceSAP,
+    neiwaiqiangpingtu,
+    zhiganwaiqiangSAP,
+    moshouqiSAP,
+    fangshuiSAP,
+    neiqiangzhonggaoduanSAP,
+    chunTaiSAP,
+    ZYSAP,
+    cizhuanjiaoSAP,
+  },
+  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',
+        '9',
+        '14',
+        '15',
+        '13',
+      ],
+    };
+  },
+};
+</script>
+
+<style scoped>
+.homeTitle {
+  padding: 6px 16px;
+}
+
+.homeTitle .van-icon__image {
+  width: 1.4em;
+  height: auto;
+}
+
+.container {
+  /* margin: 10px; */
+}
+
+.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;
+}
+</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>
+<style lang="scss">
+.shareAtarget {
+  p {
+    margin: 10px 0 0 0;
+    font-size: 14px;
+    color: #fff !important;
+    /* 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;
+  }
+  .colLabel_KK {
+    /* background: rgb(235, 104, 119); */
+  }
+  .colLabel_FX {
+    /* background: rgb(253 120 88); */
+  }
+  .colLabel_JP {
+    /* background: rgb(241, 183, 137); */
+  }
+  .colLabel_JPBJ {
+    /* background: rgb(248 215 189); */
+  }
+  .colLabel_TCFX {
+    /* background: rgb(131 204 202); */
+  }
+  .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>

src/components/shareBtarget.vue

@@ -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 !important;
+    /* 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>

src/components/shareReportCustom.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="shareReportCustom" v-if="fromData && fromData.length">
+    <template v-for="(value, ind) in fromData">
+      <template v-if="value.sfaReportCustomCollections">
+        <div
+          v-for="(item, index) in value.sfaReportCustomCollections"
+          :key="item.reportCustomCollectionId">
+          <template v-if="item.isShare == '1'">
+            <template
+              v-if="
+                item.reportCustomCollectionType == 'sz' || item.reportCustomCollectionType == 'wb'
+              ">
+              <div class="text">{{ item.reportCustomCollectionName }}</div>
+              <div class="content">{{ item.answerValue }}</div>
+            </template>
+            <template
+              v-if="
+                item.reportCustomCollectionType == 'duox' || item.reportCustomCollectionType == 'dx'
+              ">
+              <div class="text">{{ item.reportCustomCollectionName }}</div>
+              <div class="content">
+                <p v-for="value in item.sfaReportCustomOptions">
+                  <template v-if="value.answerValue == 'Y'">{{ value.customOption }}</template>
+                </p>
+              </div>
+            </template>
+          </template>
+        </div>
+      </template>
+    </template>
+  </div>
+</template>
+<script>
+import zRadio from '@/components/componentZRadio';
+import zCheckbox from '@/components/componentZCheckbox';
+export default {
+  components: { zRadio, zCheckbox },
+  props: {
+    reportCustomData: {
+      type: Array,
+      default: () => [],
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  watch: {
+    reportCustomData: {
+      handler(val) {
+        this.postName = localStorage.getItem('postName');
+        this.filterFromData(val);
+      },
+      immediate: true,
+      deep: true,
+    },
+  },
+  data() {
+    return {
+      fromData: null,
+      postName: '',
+    };
+  },
+  methods: {
+    filterFromData(val) {
+      this.fromData = val;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.shareReportCustom {
+  .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(20) 0;
+    font-weight: bold;
+  }
+
+  .content {
+    font-size: vw(28);
+    font-weight: bold;
+    color: #ffff;
+    line-height: vw(63);
+    white-space: pre-wrap;
+  }
+}
+</style>