|
|
<template>
|
|
|
<div class="content">
|
|
|
<div class="import" @click="openKnowledge">
|
|
|
<img src="@/assets/images/导入.png" alt="" />
|
|
|
<span>任务知识导入</span>
|
|
|
</div>
|
|
|
<!-- <div v-if="knowledgeFlag">
|
|
|
<a
|
|
|
href="
|
|
|
https://www.zhihu.com/question/620095154/answer/3351195697"
|
|
|
target="_blank"
|
|
|
rel="noopener noreferrer"
|
|
|
>
|
|
|
https://www.zhihu.com/question/620095154/answer/3351195697</a
|
|
|
><br />
|
|
|
|
|
|
<a
|
|
|
href="
|
|
|
https://www.sohu.com/a/528399751_218639"
|
|
|
target="_blank"
|
|
|
rel="noopener noreferrer"
|
|
|
>
|
|
|
https://www.sohu.com/a/528399751_218639</a
|
|
|
><br />
|
|
|
|
|
|
<a
|
|
|
href="
|
|
|
https://help.fanruan.com/finebi5.1/doc-view-1256.html"
|
|
|
target="_blank"
|
|
|
rel="noopener noreferrer"
|
|
|
>
|
|
|
https://help.fanruan.com/finebi5.1/doc-view-1256.html</a
|
|
|
>
|
|
|
<br />
|
|
|
</div> -->
|
|
|
<div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/caseIcon.png" alt="" />
|
|
|
<span>案例背景：</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
某买菜app想通过 AARRR模型分析自己的增长优势和弱势，获取更大的市场。
|
|
|
<br />
|
|
|
|
|
|
AARRR模型的实质是一个用户生命周期模型，关注用户获取(Acquisition) 、激活(Activation)、留存(Retention) 、收入(Revenue) 和自传播(Refer) 这五个方面，描述了用户从了解一个产品或服务到成为忠实用户的整个过程，对应于产品生命周期中的五个阶段。
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第一步，获客分析</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">任何产品的运营，第一步都是获取新用户，新用户一般来源于不同的渠道，因此我们首先需要做的就是渠道分析。做了渠道分析，我们才能知道，哪个渠道效果好，花费少，以后可以在性价比高的渠道投放。通常情况下渠道分析有两个维度：获客数量和获客质量</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div>
|
|
|
<div class="draw" style="padding-left: 25px; margin-left: 20px" @click="drawEcharts">生成可视化展现</div>
|
|
|
<div id="echarts1" style="width: 500px; height: 320px"></div>
|
|
|
</div>
|
|
|
<div class="step1Table">
|
|
|
<div class="titleTable">推广渠道对比（平均一次浏览时间）</div>
|
|
|
<el-table
|
|
|
:data="step1Data"
|
|
|
style="width: 500px; margin-left: 45px; margin-top: 15px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="推广渠道" align="center" prop="data1"></el-table-column>
|
|
|
<el-table-column label="浏览时间" align="center" prop="data2"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div style="margin-top: 40px">
|
|
|
<div class="analysisBtn">图表分析</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>1、推广渠道中，获客数量最多的是：</p>
|
|
|
<el-select v-model="step1Params1" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="'基础线上工作'" :value="'基础线上工作'" />
|
|
|
<el-option :label="'手机厂商预装'" :value="'手机厂商预装'" />
|
|
|
<el-option :label="'新媒体推广'" :value="'新媒体推广'" />
|
|
|
<el-option :label="'线下活动推广'" :value="'线下活动推广'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step1Params1 != '线下活动推广'" style="color: red">X</span>
|
|
|
<span v-if="step1Params1 == '线下活动推广'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>2、哪种渠道的获客质量最高：</p>
|
|
|
<el-select v-model="step1Params2" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="'基础线上工作'" :value="'基础线上工作'" />
|
|
|
<el-option :label="'手机厂商预装'" :value="'手机厂商预装'" />
|
|
|
<el-option :label="'新媒体推广'" :value="'新媒体推广'" />
|
|
|
<el-option :label="'线下活动推广'" :value="'线下活动推广'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step1Params2 != '线下活动推广'" style="color: red">X</span>
|
|
|
<span v-if="step1Params2 == '线下活动推广'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit" style="margin-top: 75px" @click="step1Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第二步，激活分析</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
有了用户之后就需要提高活跃度，用户光注册没啥用，需要经常登录、使用app才行。据有效数据表明，当新用户进入产品之后的次日活跃开始计算，80%以上的新用户都不会被再次激活。而对于买菜app来说，只有产生过订单的用户才能算作被激活。
|
|
|
<br />
|
|
|
对各月份的用户新增情况进行分析，折线图如下图：
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div>
|
|
|
<div @click="drawLineEchart" class="draw" style="padding-left: 25px; margin-bottom: 10px; background-size: 180px 31px; width: 180px; padding-left: 32px">生成月度激活率图表</div>
|
|
|
<div id="echartsLine" style="width: 1000px; height: 274px"></div>
|
|
|
</div>
|
|
|
<div style="margin-top: 40px">
|
|
|
<div class="analysisBtn">图表分析</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>1、月度平均激活率是多少：</p>
|
|
|
<el-select v-model="step2Params1" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="'50%'" :value="'50%'" />
|
|
|
<el-option :label="'60%'" :value="'60%'" />
|
|
|
<el-option :label="'70%'" :value="'70%'" />
|
|
|
<el-option :label="'80%'" :value="'80%'" />
|
|
|
<el-option :label="'90%'" :value="'90%'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step2Params1 != '80%'" style="color: red">X</span>
|
|
|
<span v-if="step2Params1 == '80%'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>2、需要重点分析哪个月的激活率：</p>
|
|
|
<el-select v-model="step2Params2" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="item.label" :value="item.value" v-for="item in activationList" :key="item.value" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step2Params2 != '2020-10'" style="color: red">X</span>
|
|
|
<span v-if="step2Params2 == '2020-10'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit" style="margin-top: 75px" @click="step2Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第三步，留存分析</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">用户激活之后，不留存的话最终也都将流失，徒劳一场。对于买菜app来说，用户激活之后，如果不能留下来的话，那此前的工作基本都是无用的。我们可以分析一周留存率、双周留存率和月留存率，发现用户留存率仍有较大提升空间，可以分析流失原因，进一步提高产品体验，挽留已有客户。</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div>
|
|
|
<div class="draw" style="padding-left: 25px; margin-bottom: 10px">生成留存率图表</div>
|
|
|
|
|
|
<el-table
|
|
|
:data="step3Data"
|
|
|
style="width: 700px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="注册日期" align="center" prop="date"></el-table-column>
|
|
|
<el-table-column label="一周留存率（%）" align="center" prop="ratio1"></el-table-column>
|
|
|
<el-table-column label="两周留存率（%）" align="center" prop="ratio2"></el-table-column>
|
|
|
<el-table-column label="30天留存率（%）" align="center" prop="ratio3"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div style="margin-top: 40px">
|
|
|
<div class="analysisBtn">图表分析</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>1、两周平均留存率是多少：</p>
|
|
|
<el-select v-model="step3Params1" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="'37.63%'" :value="'37.63%'" />
|
|
|
<el-option :label="'13.25%'" :value="'13.25%'" />
|
|
|
<el-option :label="'14.11%'" :value="'14.11%'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step3Params1 != '13.25%'" style="color: red">X</span>
|
|
|
<span v-if="step3Params1 == '13.25%'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>2、从哪个时间段开始留存下来的客户，是公司的忠诚用户：</p>
|
|
|
<el-select v-model="step3Params2" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="'一周'" :value="'一周'" />
|
|
|
<el-option :label="'两周'" :value="'两周'" />
|
|
|
<el-option :label="'30天'" :value="'30天'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step3Params2 != '两周'" style="color: red">X</span>
|
|
|
<span v-if="step3Params2 == '两周'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit" style="margin-top: 75px" @click="step3Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第四步，收入分析</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">获取收入，对产品来说是最重要的一点，当用户激活后，需要考虑的就是如何最大化获取收入，实现盈利。买菜软件的盈利与很多指标有关，我们暂且以提高用户的购买活跃度作为提高收入的的一个主要方式。我们将用户分为三个大类：低活跃用户，普通用户，会员用户。</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div>
|
|
|
<el-table
|
|
|
:data="step4Data"
|
|
|
style="width: 500px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="用户类型" align="center" prop="data1"></el-table-column>
|
|
|
<el-table-column label="划分标准" align="center" prop="data2"></el-table-column>
|
|
|
<el-table-column label="用户数量" align="center" prop="data3"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="analysisBtn">图表分析</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<div style="margin-top: 10px">1、各类用户占比：（计算结果保留一位小数）</div>
|
|
|
<div style="display: flex">
|
|
|
<div style="margin-right: 50px">
|
|
|
<p>低活跃用户：</p>
|
|
|
<el-input style="width: 107px" v-model="step4Params1"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step4Params1 != '58.9'" style="color: red">X</span>
|
|
|
<span v-if="step4Params1 == '58.9'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-right: 50px">
|
|
|
<p>普通用户：</p>
|
|
|
<el-input style="width: 107px" v-model="step4Params2"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step4Params2 != '28.2'" style="color: red">X</span>
|
|
|
<span v-if="step4Params2 == '28.2'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<p>会员用户：</p>
|
|
|
<el-input style="width: 107px" v-model="step4Params3"></el-input>
|
|
|
%
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step4Params3 != '12.9'" style="color: red">X</span>
|
|
|
<span v-if="step4Params3 == '12.9'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<p>2、需要针对哪类用户制定营销手段来提高他们的活跃度：</p>
|
|
|
<el-select v-model="step4Params4" placeholder="请选择" style="width: 200px">
|
|
|
<el-option :label="'低活跃用户'" :value="'低活跃用户'" />
|
|
|
<el-option :label="'普通用户'" :value="'普通用户'" />
|
|
|
<el-option :label="'会员用户'" :value="'会员用户'" />
|
|
|
</el-select>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step4Params4 != '会员用户'" style="color: red">X</span>
|
|
|
<span v-if="step4Params4 == '会员用户'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="submit" style="margin-top: 25px" @click="step4Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="line"></div>
|
|
|
<div class="caseBack">
|
|
|
<div class="title">
|
|
|
<img src="@/assets/images/步骤.png" alt="" />
|
|
|
<span>第五步，自传播分析</span>
|
|
|
</div>
|
|
|
<span style="line-height: 25px; font-size: 14px">
|
|
|
当产品有了一定规模的用户之后，就需要考虑激发用户间的自发传播。自传播的数据指标是K因子（推荐系数）：
|
|
|
<br />
|
|
|
K = （平均每个用户向他的朋友们发出的邀请的数量）* （接收到邀请的人转化为新用户的转化率）
|
|
|
<br />
|
|
|
K值的高低，直接体现自传播结果水平，当K值大于1时，将激发自传播巨大的力量，K值越大，力量越强。而若K值小于1，那么传播水平会逐步减弱，直至消失。
|
|
|
</span>
|
|
|
<div style="margin-top: 10px; display: flex">
|
|
|
<div>
|
|
|
<el-table
|
|
|
:data="step5Data"
|
|
|
style="width: 500px"
|
|
|
border
|
|
|
:header-cell-style="{
|
|
|
color: '#fff',
|
|
|
fontSize: '14px',
|
|
|
backgroundColor: '#6A7DE9!important',
|
|
|
}"
|
|
|
>
|
|
|
<el-table-column label="用户数量" align="center" prop="data1"></el-table-column>
|
|
|
<el-table-column label="推荐次数" align="center" prop="data2"></el-table-column>
|
|
|
<el-table-column label="接受推荐人数" align="center" prop="data3"></el-table-column>
|
|
|
<el-table-column label="K值" align="center" prop="data4"></el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div class="analysisBtn">图表分析</div>
|
|
|
<div style="margin-left: 20px">
|
|
|
<div style="display: flex">
|
|
|
<div style="margin-right: 50px">
|
|
|
<p>该买菜app的K值为：（计算结果保留两位小数）</p>
|
|
|
<el-input style="width: 107px" v-model="step5Params"></el-input>
|
|
|
<div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
|
|
|
<span v-if="step5Params != '1.17'" style="color: red">X</span>
|
|
|
<span v-if="step5Params == '1.17'" style="color: #00bb00">√</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="margin-left: 20px" class="conclusion">结论：拥有了自传播的力量。可以进一步通过“邀请获红包”等运营活动进一步提高 K 值，加快传播速度</div>
|
|
|
<div class="submit" style="margin-top: 15px" @click="step5Submit">提交</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<pop-modal :showModel="dialogVisible" @closePop="handlClose">
|
|
|
<template v-slot:content>
|
|
|
<div v-html="knowledgeHtml"></div>
|
|
|
</template>
|
|
|
</pop-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import popModal from "@/views/components/popModal.vue";
|
|
|
import { getUserInfo } from "@/utils/auth";
|
|
|
import * as portraitModel from "@/api/portraitModel";
|
|
|
import { downBlobFile } from "@/utils/index.js";
|
|
|
import * as echarts from "echarts";
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const baseUrl = import.meta.env.VITE_APP_BASE_API;
|
|
|
const showAnswerFlag = ref(false);
|
|
|
const knowledgeHtml = ref(
|
|
|
`<p style="text-align: start;">从事市场营销工作必须建立相关的理论知识体系，才能从更好地理解市场环境、消费者行为和竞争态势等复杂因素，制定出更有效的营销策略和指导具体的营销实践工作，取得更佳的营销效果。</p><p style="text-align: start;">营销理论模型使用特定的框架或图形来表述相关理论，其结构化、可视化的特点让我们能够更好地理解和掌握理论，为理解和分析复杂的问题、预测市场趋势或消费者行为等提供了高效的思考路径，更让同业交流时能够基于模型使用相同的语言和框架来描述和解决问题，从而提高协作效率和减少理解偏差，这些都有助于提升营销工作的效率和帮助营销人实现持续成长。</p><p style="text-align: start;">因此，掌握营销理论模型对于营销专业人员来说非常重要。</p><p style="text-align: start;">市场营销学科发展至今已经总结提炼了大量的理论模型，并在营销实践中被持续精进完善，像是STP、波特五力、SWOT、4Ps、AIDA、AISAS、AARRR等理论模型早已为资深从业者耳熟能详和熟练运用</p><p style="text-align: start;">但这些模型的具体含义是什么和如何使用，对于从业新人或过往忽视理论的朋友来说还是相当陌生，在公众号后台和知乎上有不少朋友在向我提问。</p><p style="text-align: start;">此前，我已经在文章中介绍过STP、品牌生命周期、商业模式画布、消费者旅程等相关理论模型，打算在之后的文章中继续分享一些其他常用的营销理论模型，也期待与感兴趣的朋友交流。</p><p style="text-align: start;">今天就让我们一起来了解下AARRR模型（海盗模型和增长黑客模型）。</p><h2 style="text-align: start; line-height: 1.5;"><strong>一、什么是AARRR模型？</strong></h2><p style="text-align: start;"><strong>AARRR模型的实质是一个用户生命周期模型，</strong>关注用户获取（Acquisition）、激活（Activation）、留存（Retention）、收入（Revenue）和自传播（Refer）这五个方面，描述了用户从了解一个产品或服务到成为忠实用户的整个过程，对应于产品生命周期中的五个阶段。</p><p style="text-align: start;">AARRR模型是由硅谷著名风险投资人戴夫·麦克卢尔Dave McClure于2007年提出的，也被称为海盗模型或增长黑客理论模型。</p><p style="text-align: start;">AARRR模型之所以被称为海盗模型，是因为将其对用户生命周期的开发过程形象地比喻为像海盗一样的掠夺式增长；</p><p style="text-align: start;">而AARRR模型被冠以增长黑客模型的名称，则是因为其是增长黑客（互联网时代对以数据驱动营销，以市场指导产品，通过技术化手段贯彻增长目标的人）在进行用户增长时的重要工具。</p><p style="text-align: start;"><strong>具体来看，AARRR模型包含五个关键阶段：</strong></p><p style="text-align: start;"><strong>1、获取用户（Acquisition）：</strong>通过大数据分析将消费者更感兴趣的产品推荐给用户，从而获得用户。</p><p style="text-align: start;"><strong>2、提高活跃度（Activation）：</strong>通过优化传播内容、拓宽传播渠道以及提供更有情绪价值的服务等方式，提升用户的活跃度。</p><p style="text-align: start;"><strong>3、提高留存（Retention）：</strong>在兴趣电商时代，留存率指的是消费者在购买某个品牌或产品后，能够继续使用并保持忠诚度的比例。对于电商平台而言，如何帮助品牌提高留存率是衡量平台吸引力和用户满意度的重要指标之一。</p><p style="text-align: start;"><strong>4、获取收入（Revenue）：</strong>通过使用户有兴趣并持续保持兴趣，最终实现销售转化。</p><p style="text-align: start;"><strong>5、自传播（Refer）：</strong>在新营销时代，自传播更多地代表着用户多元化的分享行为，也是品牌的营销和产品被用户认可所产生的UGC内容、朋友圈推荐以及愿意将品牌行为/产品变成自己“炫耀”的资本。</p><p style="text-align: start;"><strong>AARRR模型可以抽象为一个五级漏斗模型，如下图：</strong></p><p style="text-align: start;"><img src="https://s2.loli.net/2024/08/27/Hle4hicL6FqKI2Q.png" alt="image.png" data-href="" style=""></p><p style="text-align: start;">要注意的是，市场营销还经常会使用AIDA模型（Attention、Interest、Desire、Action）和AISAS模型（Attention、Interest、Search、、Action、Share），我认为它们与AARRR模型都是描述用户行为和购买过程的模型，只不过是从不同视角出发的一体两面：<strong>AIDA模型和AISAS模型是站在用户视角强调其行动，而AARRR模型是站在产品视角强调通过合适手段去调动用户的行动。</strong></p><p style="text-align: start;">营销理论没有绝对的对与错，在实践工作中我们可以根据实际情况切换不同视角，把这些模型结合起来灵活应用。</p><h2 style="text-align: start; line-height: 1.5;"><strong>二、为何AARRR模型对于营销工作非常重要？</strong></h2><p style="text-align: start;">互联网时代，大量软件产品服务涌现，AARRR模型被增长黑客和运营人员应用来推动产品用户的增长和商业变现，取得了相当不错的成绩，也因此被市场营销人员所注意，应用到更广泛领域的市场营销实践工作中。</p><p style="text-align: start;">随着工业生产能力不断提升、信息技术快速发展，品牌竞争日益激烈、媒介传播环境充斥着无限的诱惑和巨大噪声，为了保持领先地位并实现持续增长，<strong>品牌需要紧紧地抓住客户、强化其忠诚度，并追求商业变现、用户忠诚、品牌建设之间的均衡发展，AARRR模型则为我们提供了有益的思考框架和清晰的可执行路径。</strong></p><p style="text-align: start;"><strong>AARRR模型提供了一个全面的视角，描述了用户生命周期对应品牌增长的每一个关键环节，</strong>通过深入了解用户需求和市场趋势，<strong>品牌可以制定不同阶段的有针对性的策略，提高用户留存率、转化率和满意度，</strong>以实现在保持快速用户增长的同时，做好商业变现和品牌建设的平衡，更充分地挖掘用户全生命周期的价值。</p><p style="text-align: start;"><strong>数据分析在现代营销中扮演着至关重要的角色，AARRR模型强调了数据在每个增长阶段中的核心地位，</strong>通过数据分析企业可以深入了解用户行为、制定营销策略、跟踪和评估营销工作效果并进行持续的调整优化，这有利于并提高营销资源的使用效率和增加营销活动的成功率。</p><p style="text-align: start;"><strong>此外，AARRR模型站在产品发展的视角去调动用户，强调了用户体验在品牌增长中的关键作用。</strong>从初次接触用户开始，企业就需要提供令人印象深刻的第一印象并持续提供良好的用户体验，再以此去驱动研发设计、生产制造等部门不断升级产品服务和提升品质，驱动客服、营销、销售等人员强化互动沟通和优化服务体验，以确保用户满意从而挖掘其潜藏的商业价值。</p><h2 style="text-align: start; line-height: 1.5;"><strong>三、如何运用AARRR模型来优化营销工作？</strong></h2><p style="text-align: start;">AARRR模型为我们提供了一个思考的框架和执行路径，但具体如何运用这一模型还需要根据实际情况而定，但一般来说在不同阶段可以从以下方面着手：</p><p style="text-align: start;"><strong>1、获取Acquisition——吸引尽可能多的潜在用户接触品牌。</strong></p><p style="text-align: start;">但这并不是意味着盲目地在各种传播渠道进行大声量的传播和高频大体量的活动，而是要基于调研精准定位潜在用户后再集中资源渗透。</p><p style="text-align: start;"><strong>首先，品牌要进行市场研究和用户调查，</strong>了解目标用户是谁、他们在哪里以及他们的需求和兴趣是什么；</p><p style="text-align: start;"><strong>然后，品牌要根据收集到的信息制定用户获取策略，</strong>包括选择合适的渠道和推广方式，例如社交媒体广告、搜索引擎优化（SEO）、内容营销、合作伙伴关系等，来吸引潜在用户进入品牌或产品；</p><p style="text-align: start;"><strong>此外，品牌要定期评估获取策略的效果，并根据数据进行调整和优化，</strong>而效果评估可以关注获取成本（CAC）、用户来源和转化率等指标。</p><p style="text-align: start;"><strong>2、激活Activation——引导用户使用产品和全面了解品牌。</strong></p><p style="text-align: start;"><strong>为此，品牌需要降低使用门槛、消除接触障碍，并提供优秀的用户体验。</strong></p><p style="text-align: start;"><strong>品牌要以合适的方式唤醒客户的注意，并提供易于使用的界面、优秀的客户服务、明确的使用引导、有趣的互动体验等来满足用户需求和期望。</strong></p><p style="text-align: start;">例如，品牌可以在营销活动中手机用户的手机号或引导其注册APP、关注公众号、添加工作人员微信，这可以通过提供免费的试用样品或者优惠券来实现，后续通过短信、公众号消息、微信沟通或电话来引导其深入使用，为了调动其积极性可以提供优惠券、运用会员机会体系或策划互动活动等。</p><p style="text-align: start;"><strong>3、保留Retention——使用户继续使用你的产品或服务，保持和提升其忠诚度，</strong></p><p style="text-align: start;"><strong>为此，品牌需要定期更新产品、提供新的功能和服务，</strong>以满足用户的需求和期望，保持用户的兴趣和参与度，并建立优质的客户服务体系，及时回应用户的问题和反馈，通过专业、友好的客户服务提高用户忠诚度；</p><p style="text-align: start;"><strong>其次，品牌可以通过邮件、通知、活动等方式与用户保持长期的联系和互动</strong>，<strong>也可以尝试建立有效的激励制度，例如</strong>积分、等级、优惠券等，以激励用户更频繁地使用产品或服务；</p><p style="text-align: start;"><strong>此外，品牌也可以建立用户社区，</strong>鼓励用户之间的互动和交流和更好地了解用户需求和反馈，强化他们对品牌文化的认可、参与产品服务的开发和升级、增加用户粘性和品牌忠诚度。</p><p style="text-align: start;"><strong>4、收益Revenue——制定和优化定价策略，并提供便捷的支付方式，让用户愿意也容易为产品服务付费。</strong></p><p style="text-align: start;"><strong>在定价策略上，企业需要综合考虑多种因素，以确保价格与产品或服务的价值相匹配并具有竞争力，</strong>例如价值定价（确保价格与用户感知的价值相匹配）、市场比较定价（根据竞争对手的价格来设定自己的价格，以提供更具竞争力的定价）、差别定价（根据不同的用户群体、产品版本或服务等级来设定不同的价格），从而满足不同用户的需求和期望，提升其付费的意愿。</p><p style="text-align: start;"><strong>同时，企业需要选择合适的付费模式以吸引和满足用户的需求。</strong>例如，存储和在线办公套件等频繁使用的服务可以采取按月或按年付费的订阅模式，既为用户提供灵活的付费选择的同时又保证企业的持续收益；软件和游戏等用户一次性付费即可永久使用的产品可以采用买断模式，通过提供永久的使用权增加付费购买意愿；也可以采用“免费+增值”模式是基础功能免费，高级功能收费的模式，例如如广告免费、无广告收费的区别服务模式，在保证大用户基础的同时促使用户付费享受更高品质的服务。</p><p style="text-align: start;"><strong>此外，品牌还要支持信用卡、支付宝、微信支付等多种支付方式，并提供清晰的支付流程说明</strong>，确保用户能够轻松完成支付；<strong>还可以开展如折扣、买一送一、捆绑销售等促销活动，</strong>吸引用户付费，充分挖掘留存用户所潜藏的商业价值。</p><p style="text-align: start;"><strong>5、推荐Refer——调懂用户推荐品牌或产品给其他人。</strong></p><p style="text-align: start;"><strong>为了激励用户推荐品牌或产品给其他人，企业需要提供优秀的用户体验，</strong>让用户对产品或服务满意并产生推荐意愿，并建立有效的推荐机制，如推荐奖励、分享功能等来激励用户积极参与推荐活动。</p><p style="text-align: start;"><strong>此外，品牌要善于利用社交媒体和口碑营销来进一步扩大品牌的知名度和影响力，</strong>例如策划有奖互动活动来引导老用户参与和吸引更多潜在用户的关注和信任，并通过建立话题标签或品牌专区来沉淀相关的传播内容，以实现更长期的可持续的品牌影响。</p><h2 style="text-align: start; line-height: 1.5;"><strong>四、结语</strong></h2><p style="text-align: start;">AARRR模型提供了一个全面且系统的营销框架，旨在指导品牌更好地理解用户并与其建立长期关系。本模型关注用户全生命周期，通过获取、激活、留存、收入和推荐来吸引更多潜在用户、提高用户满意度和忠诚度、增加收益、扩大影响力，并最终实现持续的增长和成功。</p><p style="text-align: start;">因此，理解和运用AARRR模型对于品牌的长期发展至关重要。这需要品牌不仅关注单一的销售或推广活动，而要从更高层次的视角和更长时间周期来看待与用户的关系，并以数据分析驱动精准高效的营销活动，在用户生命周期的不同阶段实现相应的营销目标。</p>`
|
|
|
);
|
|
|
const dialogVisible = ref(false);
|
|
|
const timer = ref(null);
|
|
|
const timeCount = ref(0);
|
|
|
const list = ref(["-"]);
|
|
|
const dayValue = ref("");
|
|
|
const combinationValue1 = ref("");
|
|
|
const combinationValue2 = ref("");
|
|
|
const analysisConclusion = ref("");
|
|
|
const errorNum = ref(0);
|
|
|
const step1Error = ref(0);
|
|
|
const step2Error = ref(0);
|
|
|
const step3Error = ref(0);
|
|
|
const step4Error = ref(0);
|
|
|
const step5Error = ref(0);
|
|
|
const step1AnswerFlag = ref(false);
|
|
|
const step2AnswerFlag = ref(false);
|
|
|
const step3AnswerFlag = ref(false);
|
|
|
const step4AnswerFlag = ref(false);
|
|
|
const step5AnswerFlag = ref(false);
|
|
|
const step1Params1 = ref("");
|
|
|
const step1Params2 = ref("");
|
|
|
const step2Params1 = ref("");
|
|
|
const step2Params2 = ref("");
|
|
|
const step3Params1 = ref("");
|
|
|
const step3Params2 = ref("");
|
|
|
const step4Params1 = ref("");
|
|
|
const step4Params2 = ref("");
|
|
|
const step4Params3 = ref("");
|
|
|
const step4Params4 = ref("");
|
|
|
const step5Params = ref("");
|
|
|
const knowledgeFlag = ref(false);
|
|
|
//时间间隔分组数-7天内
|
|
|
const sevenNum = ref(0);
|
|
|
//时间间隔分组数-15天内
|
|
|
const fiftyNum = ref(0);
|
|
|
//时间间隔分组数-30天内
|
|
|
const thirtyNumIn = ref(0);
|
|
|
//时间间隔分组数-30天以上
|
|
|
const thirtyNumOut = ref(0);
|
|
|
const activationList = ref([
|
|
|
{
|
|
|
label: "2020-01",
|
|
|
value: "2020-01",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-02",
|
|
|
value: "2020-02",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-03",
|
|
|
value: "2020-03",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-04",
|
|
|
value: "2020-04",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-05",
|
|
|
value: "2020-05",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-06",
|
|
|
value: "2020-06",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-07",
|
|
|
value: "2020-07",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-08",
|
|
|
value: "2020-08",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-09",
|
|
|
value: "2020-09",
|
|
|
},
|
|
|
{
|
|
|
label: "2020-10",
|
|
|
value: "2020-10",
|
|
|
},
|
|
|
]);
|
|
|
const step1Data = ref([
|
|
|
{
|
|
|
data1: "基础线上工作",
|
|
|
data2: "300.04",
|
|
|
},
|
|
|
{
|
|
|
data1: "手机厂商预装",
|
|
|
data2: "104.92",
|
|
|
},
|
|
|
{
|
|
|
data1: "新媒体推广",
|
|
|
data2: "274.55",
|
|
|
},
|
|
|
{
|
|
|
data1: "线下互动推广",
|
|
|
data2: "400.06",
|
|
|
},
|
|
|
{
|
|
|
data1: "合计",
|
|
|
data2: "319.95",
|
|
|
},
|
|
|
]);
|
|
|
const step2Data = ref([
|
|
|
{
|
|
|
week: "第一周",
|
|
|
interval: "2024/3/1-2024/3/7",
|
|
|
},
|
|
|
{
|
|
|
week: "第二周",
|
|
|
interval: "2024/3/8-2024/3/14",
|
|
|
},
|
|
|
{
|
|
|
week: "第三周",
|
|
|
interval: "2024/3/15-2024/3/21",
|
|
|
},
|
|
|
{
|
|
|
week: "第四周",
|
|
|
interval: "2024/3/22-2024/3/28",
|
|
|
},
|
|
|
]);
|
|
|
const step3Data = ref([
|
|
|
{
|
|
|
date: "2020-01",
|
|
|
ratio1: "28.91%",
|
|
|
ratio2: "6.25%",
|
|
|
ratio3: "7.81%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-02",
|
|
|
ratio1: "30.56%",
|
|
|
ratio2: "14.20%",
|
|
|
ratio3: "17.90%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-03",
|
|
|
ratio1: "36.65%",
|
|
|
ratio2: "12.62%",
|
|
|
ratio3: "16.02%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-04",
|
|
|
ratio1: "40.70%",
|
|
|
ratio2: "18.02%",
|
|
|
ratio3: "17.15%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-05",
|
|
|
ratio1: "32.62%",
|
|
|
ratio2: "13.85%",
|
|
|
ratio3: "19.38%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-06",
|
|
|
ratio1: "35.34%",
|
|
|
ratio2: "14.08%",
|
|
|
ratio3: "16.95%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-07",
|
|
|
ratio1: "32.00%",
|
|
|
ratio2: "16.31%",
|
|
|
ratio3: "13.54%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-08",
|
|
|
ratio1: "37.11%",
|
|
|
ratio2: "17.85%",
|
|
|
ratio3: "16.43%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-09",
|
|
|
ratio1: "36.51%",
|
|
|
ratio2: "12.83%",
|
|
|
ratio3: "14.80%",
|
|
|
},
|
|
|
{
|
|
|
date: "2020-10",
|
|
|
ratio1: "37.63%",
|
|
|
ratio2: "6.45%",
|
|
|
ratio3: "1.08%",
|
|
|
},
|
|
|
{
|
|
|
date: "合计",
|
|
|
ratio1: "34.80%",
|
|
|
ratio2: "13.25%",
|
|
|
ratio3: "14.11%",
|
|
|
},
|
|
|
]);
|
|
|
const step4Data = ref([
|
|
|
{
|
|
|
data1: "低活跃用户",
|
|
|
data2: "0＜购买金额≤200",
|
|
|
data3: "2253",
|
|
|
},
|
|
|
{
|
|
|
data1: "普通用户",
|
|
|
data2: "200＜购买金额≤500",
|
|
|
data3: "1077",
|
|
|
},
|
|
|
{ data1: "会员用户", data2: "500＜购买金额", data3: "493" },
|
|
|
]);
|
|
|
const step4DataTable2 = ref([
|
|
|
{
|
|
|
id: "过去30天平均DAU/MAU",
|
|
|
},
|
|
|
{
|
|
|
id: "月平均活跃天数（天）",
|
|
|
},
|
|
|
]);
|
|
|
const step5Data = ref([
|
|
|
{
|
|
|
data1: "5364",
|
|
|
data2: "12526",
|
|
|
data3: "6267",
|
|
|
data4: "1.17",
|
|
|
},
|
|
|
]);
|
|
|
const step6Data = ref([
|
|
|
{
|
|
|
data1: "1",
|
|
|
data2: "小明",
|
|
|
data3: "4",
|
|
|
data4: "2",
|
|
|
data5: "4",
|
|
|
},
|
|
|
{
|
|
|
data1: "2",
|
|
|
data2: "小红",
|
|
|
data3: "5",
|
|
|
data4: "2",
|
|
|
data5: "2",
|
|
|
},
|
|
|
{
|
|
|
data1: "3",
|
|
|
data2: "小李",
|
|
|
data3: "5",
|
|
|
data4: "1",
|
|
|
data5: "1",
|
|
|
},
|
|
|
]);
|
|
|
const rulesTable = ref([
|
|
|
{
|
|
|
data1: "1.重要价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "2.重要发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "3.重要保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "4.重要挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "高",
|
|
|
},
|
|
|
{
|
|
|
data1: "5.一般价值用户",
|
|
|
data2: "高",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "6.一般发展用户",
|
|
|
data2: "高",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "7.一般保持用户",
|
|
|
data2: "低",
|
|
|
data3: "高",
|
|
|
data4: "低",
|
|
|
},
|
|
|
{
|
|
|
data1: "8.一般挽留用户",
|
|
|
data2: "低",
|
|
|
data3: "低",
|
|
|
data4: "低",
|
|
|
},
|
|
|
]);
|
|
|
const typeData = ref([
|
|
|
{
|
|
|
data1: "A类商品",
|
|
|
data2: "占总销售额的80%，需要重点关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "B类商品",
|
|
|
data2: "占总销售额的10%，给予次要关注",
|
|
|
},
|
|
|
{
|
|
|
data1: "C类商品",
|
|
|
data2: "占总销售额的10%，给予一般关注",
|
|
|
},
|
|
|
]);
|
|
|
const dayOptions = ref([
|
|
|
{
|
|
|
value: "1日",
|
|
|
label: "1日",
|
|
|
},
|
|
|
{
|
|
|
value: "2日",
|
|
|
label: "2日",
|
|
|
},
|
|
|
{
|
|
|
value: "3日",
|
|
|
label: "3日",
|
|
|
},
|
|
|
{
|
|
|
value: "4日",
|
|
|
label: "4日",
|
|
|
},
|
|
|
{
|
|
|
value: "5日",
|
|
|
label: "5日",
|
|
|
},
|
|
|
{
|
|
|
value: "6日",
|
|
|
label: "6日",
|
|
|
},
|
|
|
{
|
|
|
value: "7日",
|
|
|
label: "7日",
|
|
|
},
|
|
|
{
|
|
|
value: "8日",
|
|
|
label: "8日",
|
|
|
},
|
|
|
{
|
|
|
value: "9日",
|
|
|
label: "9日",
|
|
|
},
|
|
|
|
|
|
{
|
|
|
value: "10日",
|
|
|
label: "10日",
|
|
|
},
|
|
|
{
|
|
|
value: "11日",
|
|
|
label: "11日",
|
|
|
},
|
|
|
{
|
|
|
value: "12日",
|
|
|
label: "12日",
|
|
|
},
|
|
|
{
|
|
|
value: "13日",
|
|
|
label: "13日",
|
|
|
},
|
|
|
{
|
|
|
value: "14日",
|
|
|
label: "14日",
|
|
|
},
|
|
|
]);
|
|
|
onMounted(() => {
|
|
|
getData();
|
|
|
});
|
|
|
onBeforeUnmount(() => {
|
|
|
saveData();
|
|
|
});
|
|
|
const moveUp = (index, row) => {
|
|
|
console.log("上移", index, row);
|
|
|
if (index > 0) {
|
|
|
const upDate = step2Data.value[index - 1];
|
|
|
step2Data.value.splice(index - 1, 1);
|
|
|
step2Data.value.splice(index, 0, upDate);
|
|
|
} else {
|
|
|
alert("已经是第一条，不可上移");
|
|
|
}
|
|
|
};
|
|
|
const moveDown = (index, row) => {
|
|
|
console.log("下移", index, row);
|
|
|
if (index + 1 === step2Data.value.length) {
|
|
|
alert("已经是最后一条，不可下移");
|
|
|
} else {
|
|
|
const downDate = step2Data.value[index + 1];
|
|
|
step2Data.value.splice(index + 1, 1);
|
|
|
step2Data.value.splice(index, 0, downDate);
|
|
|
}
|
|
|
};
|
|
|
const addCombination = () => {
|
|
|
if (list.value[0] == "-") {
|
|
|
list.value = [];
|
|
|
}
|
|
|
// list.value = [];
|
|
|
if (combinationValue1.value == "" || combinationValue2.vlaue == "") {
|
|
|
proxy.$modal.msgError("请选择组合");
|
|
|
return;
|
|
|
}
|
|
|
list.value.push(combinationValue1.value + "—" + combinationValue2.value);
|
|
|
};
|
|
|
const tableSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
|
|
|
if (rowIndex === 0) {
|
|
|
if (columnIndex === 6) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 0) {
|
|
|
if (columnIndex === 7) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 2) {
|
|
|
if (columnIndex === 6) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 2) {
|
|
|
if (columnIndex === 7) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 4) {
|
|
|
if (columnIndex === 6) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 4) {
|
|
|
if (columnIndex === 7) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 6) {
|
|
|
if (columnIndex === 6) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
if (rowIndex === 6) {
|
|
|
if (columnIndex === 7) {
|
|
|
return [2, 1];
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
const handleChangeDay = (e) => {
|
|
|
console.log(e);
|
|
|
};
|
|
|
const draw = () => {
|
|
|
var chartDom = document.getElementById("echarts");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
|
|
|
option = {
|
|
|
title: {
|
|
|
text: "2021/8/1",
|
|
|
left: "center",
|
|
|
top: "10",
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
formatter: "{c}%",
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
axisLabel: {
|
|
|
formatter: "{value}%",
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: [100, 88, 73, 60, 54, 38, 33, 25, 18, 12, 10, 9, 6, 4],
|
|
|
type: "line",
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
};
|
|
|
const drawEcharts = () => {
|
|
|
var chartDom = document.getElementById("echarts1");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
|
|
|
option = {
|
|
|
title: {
|
|
|
text: "推广渠道对比(获客人数)",
|
|
|
left: "center",
|
|
|
top: "10px",
|
|
|
textStyle: {
|
|
|
// color: "#fff",
|
|
|
// fontSize:16
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
data: ["基础线上工作", "手机厂商预装", "新媒体推广", "线下活动推广"],
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
// color: "#fff", //坐标值得具体的颜色
|
|
|
},
|
|
|
},
|
|
|
axisLine: {},
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
name: "获取新客数量",
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
// color: "#fff", //坐标值得具体的颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: [900, 1000, 1800, 2600],
|
|
|
type: "bar",
|
|
|
// itemStyle:{
|
|
|
// color:'#00B6F5'
|
|
|
// }
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
};
|
|
|
const drawLineEchart = () => {
|
|
|
var chartDom = document.getElementById("echartsLine");
|
|
|
var myChart = echarts.init(chartDom);
|
|
|
var option;
|
|
|
|
|
|
option = {
|
|
|
xAxis: {
|
|
|
type: "category",
|
|
|
boundaryGap: false,
|
|
|
data: ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06", "2020-07", "2020-08", "2020-09", "2020-10"],
|
|
|
axisLabel: {
|
|
|
textStyle: {
|
|
|
// color: "#fff", //坐标值得具体的颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: {
|
|
|
type: "value",
|
|
|
name: "激活率",
|
|
|
axisLabel: {
|
|
|
formatter: "{value}%", // 在这里添加单位
|
|
|
textStyle: {
|
|
|
// color: "#fff", //坐标值得具体的颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
tooltip: {
|
|
|
// trigger: "axis",
|
|
|
formatter: "注册日期：{b}<br />激活率：{c}%",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
data: [81.9, 83.78, 79.39, 77.29, 78.25, 73.43, 80, 84.9, 84.48, 58.33],
|
|
|
label: {
|
|
|
formatter: "{c}%",
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
},
|
|
|
type: "line",
|
|
|
lineStyle: {
|
|
|
color: "#AACC63",
|
|
|
},
|
|
|
itemStyle: {
|
|
|
color: "#AACC63",
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: "linear",
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#00751C", // 0% 处的颜色
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#002652", // 100% 处的颜色
|
|
|
},
|
|
|
],
|
|
|
global: false, // 缺省为 false
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
};
|
|
|
const step1Submit = () => {
|
|
|
step1Error.value = 0;
|
|
|
if (step1Params1.value == "" || step1Params2.value == "") {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
if (step1Params1.value != "线下活动推广") {
|
|
|
step1Error.value++;
|
|
|
}
|
|
|
if (step1Params2.value != "线下活动推广") {
|
|
|
step1Error.value++;
|
|
|
}
|
|
|
// console.log(666);
|
|
|
console.log(step1Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step1AnswerFlag.value = true;
|
|
|
};
|
|
|
const step2Submit = () => {
|
|
|
step2Error.value = 0;
|
|
|
if (step2Params1.value == "" || step2Params2.value == "") {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
if (step2Params1.value != "80%") {
|
|
|
step2Error.value++;
|
|
|
}
|
|
|
if (step2Params2.value != "2020-10") {
|
|
|
step2Error.value++;
|
|
|
}
|
|
|
console.log(step2Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step2AnswerFlag.value = true;
|
|
|
};
|
|
|
const step3Submit = () => {
|
|
|
step3Error.value = 0;
|
|
|
if (step3Params1.value == "" || step3Params2.value == "") {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
if (step3Params1.value != "13.25%") {
|
|
|
step3Error.value++;
|
|
|
}
|
|
|
if (step3Params2.value != "两周") {
|
|
|
step3Error.value++;
|
|
|
}
|
|
|
console.log(step3Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step3AnswerFlag.value = true;
|
|
|
};
|
|
|
const step4Submit = () => {
|
|
|
step4Error.value = 0;
|
|
|
if (step4Params1.value == "" || step4Params2.value == "" || step4Params3.value == "" || step4Params4.value == "") {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
if (step4Params1.value != "58.9%") {
|
|
|
step4Error.value++;
|
|
|
}
|
|
|
if (step4Params2.value != "28.2%") {
|
|
|
step4Error.value++;
|
|
|
}
|
|
|
if (step4Params3.value != "12.9%") {
|
|
|
step4Error.value++;
|
|
|
}
|
|
|
if (step4Params4.value != "会员用户") {
|
|
|
step4Error.value++;
|
|
|
}
|
|
|
console.log(step4Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step4AnswerFlag.value = true;
|
|
|
};
|
|
|
const step5Submit = () => {
|
|
|
step5Error.value = 0;
|
|
|
if (step5Params.value == "") {
|
|
|
proxy.$modal.msgError("请先完成所有填空");
|
|
|
return;
|
|
|
}
|
|
|
if (step5Params.value != "1.17") {
|
|
|
step5Error.value++;
|
|
|
}
|
|
|
console.log(step5Error.value, "错误数");
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
step5AnswerFlag.value = true;
|
|
|
};
|
|
|
const saveData = () => {
|
|
|
const params = {
|
|
|
stepFiveA: step1Params1.value,
|
|
|
stepFiveB: step1Params2.value,
|
|
|
stepFiveC: step2Params1.value,
|
|
|
stepFiveD: step2Params2.value,
|
|
|
stepSixA: step3Params1.value,
|
|
|
stepSixB: step3Params2.value,
|
|
|
stepSixC: step4Params1.value,
|
|
|
stepSixD: step4Params2.value,
|
|
|
stepSevenA: step4Params3.value,
|
|
|
stepSevenB: step4Params4.value,
|
|
|
stepSevenC: step5Params.value,
|
|
|
// stepSevenD: step4Data.value[1].params1,
|
|
|
// stepEightA: step4Data.value[2].params1,
|
|
|
// stepEightB: step4Data.value[3].params1,
|
|
|
// stepEightC: step4Data.value[4].params1,
|
|
|
// stepEightD: step4Data.value[5].params1,
|
|
|
// stepNineA: step4Data.value[6].params1,
|
|
|
// stepNineB: step4Data.value[7].params1,
|
|
|
// stepNineC: step4Data.value[8].params1,
|
|
|
// stepNineD: step4Data.value[9].params1,
|
|
|
// stepTenA: step4DataTable2.value[0].params1,
|
|
|
// stepTenB: step4DataTable2.value[1].params1,
|
|
|
// stepTenC: analysisConclusionStep1.value,
|
|
|
// stepTenD: analysisConclusionStep2.value,
|
|
|
// stepElevenA: analysisConclusionStep3.value,
|
|
|
// stepOneA: analysisConclusionStep4.value,
|
|
|
// stepOneB: step1Data.value[8].params3,
|
|
|
// stepOneC: step1Data.value[9].params1,
|
|
|
// stepOneD: step1Data.value[9].params2,
|
|
|
// stepTwoA: step1Data.value[9].params3,
|
|
|
// stepTwoB: step4Data.value[6].params2,
|
|
|
// stepTwoC: step5DataTable2.value[0].params,
|
|
|
// stepThreeA: step5DataTable2.value[1].params,
|
|
|
// stepThreeB: step5DataTable2.value[2].params,
|
|
|
// stepThreeC: step5DataTable2.value[3].params,
|
|
|
// stepThreeD: step5DataTable2.value[4].params,
|
|
|
// stepFourA: step5DataTable3.value[0].params1,
|
|
|
// stepFourB: step5DataTable3.value[0].params2,
|
|
|
// stepFourC: step5DataTable3.value[1].params1,
|
|
|
// stepFourD: step5DataTable3.value[1].params2,
|
|
|
// stepNewOne: step5DataTable3.value[2].params1,
|
|
|
// stepNewTwo: step5DataTable3.value[2].params2,
|
|
|
// stepNewThree: step5DataTable3.value[3].params1,
|
|
|
// stepNewFive: step5DataTable3.value[3].params2,
|
|
|
// stepNewSix: step5DataTable3.value[4].params1,
|
|
|
// stepNewEight: step5DataTable3.value[4].params2,
|
|
|
};
|
|
|
portraitModel
|
|
|
.saveData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "AARRR用户运营分析",
|
|
|
...params,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const saveSubmitData = () => {
|
|
|
const params = {
|
|
|
stepFiveA: step1Params1.value,
|
|
|
stepFiveB: step1Params2.value,
|
|
|
stepFiveC: step2Params1.value,
|
|
|
stepFiveD: step2Params2.value,
|
|
|
stepSixA: step3Params1.value,
|
|
|
stepSixB: step3Params2.value,
|
|
|
stepSixC: step4Params1.value,
|
|
|
stepSixD: step4Params2.value,
|
|
|
stepSevenA: step4Params3.value,
|
|
|
stepSevenB: step4Params4.value,
|
|
|
stepSevenC: step5Params.value,
|
|
|
// stepSevenD: step4Data.value[1].params1,
|
|
|
// stepEightA: step4Data.value[2].params1,
|
|
|
// stepEightB: step4Data.value[3].params1,
|
|
|
// stepEightC: step4Data.value[4].params1,
|
|
|
// stepEightD: step4Data.value[5].params1,
|
|
|
// stepNineA: step4Data.value[6].params1,
|
|
|
// stepNineB: step4Data.value[7].params1,
|
|
|
// stepNineC: step4Data.value[8].params1,
|
|
|
// stepNineD: step4Data.value[9].params1,
|
|
|
// stepTenA: step4DataTable2.value[0].params1,
|
|
|
// stepTenB: step4DataTable2.value[1].params1,
|
|
|
// stepTenC: analysisConclusionStep1.value,
|
|
|
// stepTenD: analysisConclusionStep2.value,
|
|
|
// stepElevenA: analysisConclusionStep3.value,
|
|
|
// stepOneA: analysisConclusionStep4.value,
|
|
|
// stepOneB: step1Data.value[8].params3,
|
|
|
// stepOneC: step1Data.value[9].params1,
|
|
|
// stepOneD: step1Data.value[9].params2,
|
|
|
// stepTwoA: step1Data.value[9].params3,
|
|
|
// stepTwoB: step4Data.value[6].params2,
|
|
|
// stepTwoC: step5DataTable2.value[0].params,
|
|
|
// stepThreeA: step5DataTable2.value[1].params,
|
|
|
// stepThreeB: step5DataTable2.value[2].params,
|
|
|
// stepThreeC: step5DataTable2.value[3].params,
|
|
|
// stepThreeD: step5DataTable2.value[4].params,
|
|
|
// stepFourA: step5DataTable3.value[0].params1,
|
|
|
// stepFourB: step5DataTable3.value[0].params2,
|
|
|
// stepFourC: step5DataTable3.value[1].params1,
|
|
|
// stepFourD: step5DataTable3.value[1].params2,
|
|
|
// stepNewOne: step5DataTable3.value[2].params1,
|
|
|
// stepNewTwo: step5DataTable3.value[2].params2,
|
|
|
// stepNewThree: step5DataTable3.value[3].params1,
|
|
|
// stepNewFive: step5DataTable3.value[3].params2,
|
|
|
// stepNewSix: step5DataTable3.value[4].params1,
|
|
|
// stepNewEight: step5DataTable3.value[4].params2,
|
|
|
};
|
|
|
portraitModel
|
|
|
.saveData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "AARRR用户运营分析",
|
|
|
...params,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const getData = () => {
|
|
|
portraitModel
|
|
|
.getData({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
module: "AARRR用户运营分析",
|
|
|
})
|
|
|
.then((res) => {
|
|
|
step1Params1.value = res.data.stepFiveA;
|
|
|
step1Params2.value = res.data.stepFiveB;
|
|
|
step2Params1.value = res.data.stepFiveC;
|
|
|
step2Params2.value = res.data.stepFiveD;
|
|
|
step3Params1.value = res.data.stepSixA;
|
|
|
step3Params2.value = res.data.stepSixB;
|
|
|
step4Params1.value = res.data.stepSixC;
|
|
|
step4Params2.value = res.data.stepSixD;
|
|
|
step4Params3.value = res.data.stepSevenA;
|
|
|
step4Params4.value = res.data.stepSevenB;
|
|
|
step5Params.value = res.data.stepSevenC;
|
|
|
// step4Data.value[1].params1 = res.data.stepSevenD;
|
|
|
// step4Data.value[2].params1 = res.data.stepEightA;
|
|
|
// step4Data.value[3].params1 = res.data.stepEightB;
|
|
|
// step4Data.value[4].params1 = res.data.stepEightC;
|
|
|
// step4Data.value[5].params1 = res.data.stepEightD;
|
|
|
// step4Data.value[6].params1 = res.data.stepNineA;
|
|
|
// step4Data.value[7].params1 = res.data.stepNineB;
|
|
|
// step4Data.value[8].params1 = res.data.stepNineC;
|
|
|
// step4Data.value[9].params1 = res.data.stepNineD;
|
|
|
// step4DataTable2.value[0].params1 = res.data.stepTenA;
|
|
|
// step4DataTable2.value[1].params1 = res.data.stepTenB;
|
|
|
// analysisConclusionStep1.value = res.data.stepTenC;
|
|
|
// analysisConclusionStep2.value = res.data.stepTenD;
|
|
|
// analysisConclusionStep3.value = res.data.stepElevenA;
|
|
|
// analysisConclusionStep4.value = res.data.stepOneA;
|
|
|
// step1Data.value[8].params3 = res.data.stepOneB;
|
|
|
// step1Data.value[9].params1 = res.data.stepOneC;
|
|
|
// step1Data.value[9].params2 = res.data.stepOneD;
|
|
|
// step1Data.value[9].params3 = res.data.stepTwoA;
|
|
|
// step4Data.value[6].params2 = res.data.stepTwoB;
|
|
|
// step5DataTable2.value[0].params = res.data.stepTwoC;
|
|
|
// step5DataTable2.value[1].params = res.data.stepThreeA;
|
|
|
// step5DataTable2.value[2].params = res.data.stepThreeB;
|
|
|
// step5DataTable2.value[3].params = res.data.stepThreeC;
|
|
|
// step5DataTable2.value[4].params = res.data.stepThreeD;
|
|
|
// step5DataTable3.value[0].params1 = res.data.stepFourA;
|
|
|
// step5DataTable3.value[0].params2 = res.data.stepFourB;
|
|
|
// step5DataTable3.value[1].params1 = res.data.stepFourC;
|
|
|
// step5DataTable3.value[1].params2 = res.data.stepFourD;
|
|
|
// step5DataTable3.value[2].params1 = res.data.stepNewOne;
|
|
|
// step5DataTable3.value[2].params2 = res.data.stepNewTwo;
|
|
|
// step5DataTable3.value[3].params1 = res.data.stepNewThree;
|
|
|
// step5DataTable3.value[3].params2 = res.data.stepNewFive;
|
|
|
// step5DataTable3.value[4].params1 = res.data.stepNewSix;
|
|
|
// step5DataTable3.value[4].params2 = res.data.stepNewEight;
|
|
|
//回显答案
|
|
|
if (res.data.subState & (res.data.subState == 1)) {
|
|
|
showAnswerFlag.value = true;
|
|
|
drawEcharts();
|
|
|
drawLineEchart();
|
|
|
|
|
|
}
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const submitData = () => {
|
|
|
if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value || !step5AnswerFlag.value) {
|
|
|
proxy.$modal.msgError("请先完成所有步骤！");
|
|
|
return;
|
|
|
}
|
|
|
errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value + step5Error.value;
|
|
|
console.log(errorNum.value, "总错误次数");
|
|
|
if(errorNum.value > 5){
|
|
|
errorNum.value = 5
|
|
|
}
|
|
|
portraitModel
|
|
|
.submit({
|
|
|
userId: JSON.parse(getUserInfo()).userId,
|
|
|
taskName: "AARRR用户运营分析",
|
|
|
numberOfErrors: errorNum.value,
|
|
|
subState: 1,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
proxy.$modal.msgSuccess("提交成功");
|
|
|
showAnswerFlag.value = true;
|
|
|
saveSubmitData();
|
|
|
})
|
|
|
.catch((error) => {});
|
|
|
};
|
|
|
const retrain = () => {
|
|
|
showAnswerFlag.value = false;
|
|
|
// portraitModel
|
|
|
// .retrain({
|
|
|
// userId: JSON.parse(getUserInfo()).userId,
|
|
|
// module: "AARRR用户运营分析",
|
|
|
// })
|
|
|
// .then((res) => {
|
|
|
proxy.$modal.msgSuccess("重新实训成功");
|
|
|
step1Params1.value = "";
|
|
|
step1Params2.value = "";
|
|
|
step2Params1.value = "";
|
|
|
step2Params2.value = "";
|
|
|
step3Params1.value = "";
|
|
|
step3Params2.value = "";
|
|
|
step4Params1.value = "";
|
|
|
step4Params2.value = "";
|
|
|
step4Params3.value = "";
|
|
|
step4Params4.value = "";
|
|
|
step5Params.value = "";
|
|
|
// })
|
|
|
// .catch((error) => {});
|
|
|
};
|
|
|
defineExpose({
|
|
|
submitData,
|
|
|
retrain,
|
|
|
// practicalTraining,
|
|
|
});
|
|
|
const openKnowledge = () => {
|
|
|
dialogVisible.value = true;
|
|
|
// startCount();
|
|
|
};
|
|
|
const handlClose = () => {
|
|
|
console.log('123');
|
|
|
dialogVisible.value = false;
|
|
|
if (timer.value) {
|
|
|
clearInterval(timer.value);
|
|
|
timer.value = null;
|
|
|
}
|
|
|
console.log("阅读时长", timeCount.value + "s");
|
|
|
submitTimeCount();
|
|
|
timeCount.value = 0;
|
|
|
};
|
|
|
const handleTest = ()=>{
|
|
|
console.log('aa');
|
|
|
}
|
|
|
const startCount = () => {
|
|
|
timer.value = setInterval(() => {
|
|
|
timeCount.value++;
|
|
|
}, 1000);
|
|
|
};
|
|
|
const submitTimeCount = () => {
|
|
|
// portraitModel
|
|
|
// .timeCountSubmit({
|
|
|
// stuScoreDetailsDTO: {
|
|
|
// userId: JSON.parse(getUserInfo()).userId,
|
|
|
// viewingTime: timeCount.value,
|
|
|
// },
|
|
|
// })
|
|
|
// .then((res) => {})
|
|
|
// .catch((error) => {});
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.content {
|
|
|
width: 100%;
|
|
|
// background: rgba(0, 29, 64, 0.5);
|
|
|
background: #fff;
|
|
|
border: 1px solid #0452c6;
|
|
|
padding: 10px;
|
|
|
// opacity: 0.5;
|
|
|
a:hover {
|
|
|
text-decoration: underline;
|
|
|
}
|
|
|
.import {
|
|
|
display: flex;
|
|
|
font-size: 15px;
|
|
|
font-weight: bold;
|
|
|
width: 150px;
|
|
|
height: 50px;
|
|
|
background-image: url("@/assets/images/taskImport.png");
|
|
|
background-size: 150px 50px;
|
|
|
text-align: center;
|
|
|
align-items: center;
|
|
|
line-height: 50px;
|
|
|
cursor: pointer;
|
|
|
img {
|
|
|
margin-left: 20px;
|
|
|
margin-right: 8px;
|
|
|
}
|
|
|
}
|
|
|
.caseBack {
|
|
|
color: #000;
|
|
|
.conclusion {
|
|
|
margin-top: 20px;
|
|
|
padding: 10px;
|
|
|
width: 577px;
|
|
|
height: 70px;
|
|
|
// background: #005b55;
|
|
|
background: #f1f6fa;
|
|
|
border: 1px solid #5b87ee;
|
|
|
color: #305fcb;
|
|
|
border-radius: 10px;
|
|
|
// color: #28d298;
|
|
|
}
|
|
|
.step1Table {
|
|
|
width: 588px;
|
|
|
height: 313px;
|
|
|
// background: #002652;
|
|
|
border: 1px solid #7995e8;
|
|
|
margin-left: 20px;
|
|
|
margin-top: 35px;
|
|
|
text-align: center;
|
|
|
padding-top: 10px;
|
|
|
.titleTable {
|
|
|
color: #000;
|
|
|
// margin:0 auto
|
|
|
}
|
|
|
}
|
|
|
.title {
|
|
|
font-weight: bold;
|
|
|
margin-top: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
span {
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
.download {
|
|
|
cursor: pointer;
|
|
|
margin-left: 20px;
|
|
|
color: #000;
|
|
|
padding-left: 10px;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
line-height: 31px;
|
|
|
width: 89px;
|
|
|
height: 31px;
|
|
|
background: url("@/assets/images/downloadIcon.png");
|
|
|
}
|
|
|
.analysisBtn {
|
|
|
width: 89px;
|
|
|
height: 31px;
|
|
|
background: url("@/assets/images/分析.png");
|
|
|
color: #000;
|
|
|
line-height: 31px;
|
|
|
text-align: center;
|
|
|
font-size: 14px;
|
|
|
padding-left: 10px;
|
|
|
margin-left: 20px;
|
|
|
}
|
|
|
.submit {
|
|
|
cursor: pointer;
|
|
|
margin-left: 20px;
|
|
|
color: #000;
|
|
|
padding-left: 10px;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
line-height: 31px;
|
|
|
width: 99px;
|
|
|
height: 31px;
|
|
|
background: url("@/assets/images/提交任务.png");
|
|
|
}
|
|
|
.customerType {
|
|
|
padding-left: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
width: 945px;
|
|
|
height: 26px;
|
|
|
background: #003b75;
|
|
|
border-radius: 10px;
|
|
|
border: 1px solid #0052a3;
|
|
|
font-size: 12px;
|
|
|
margin-top: 10px;
|
|
|
img {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
.secondTitle {
|
|
|
margin-top: 10px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
img {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.line {
|
|
|
width: 1400px;
|
|
|
height: 1px;
|
|
|
border: 1px solid #0452c6;
|
|
|
opacity: 0.5;
|
|
|
margin-top: 20px;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
.addBtn {
|
|
|
background-color: #6af5fb;
|
|
|
color: #080138;
|
|
|
height: 31px;
|
|
|
border: 1px solid #6af5fb;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
.comList {
|
|
|
ul {
|
|
|
text-align: center;
|
|
|
list-style-type: none;
|
|
|
border: 1px solid #7190d4;
|
|
|
border-bottom: none;
|
|
|
width: 124px;
|
|
|
padding: 0;
|
|
|
// padding: 0;
|
|
|
margin: 0;
|
|
|
p {
|
|
|
width: 122px;
|
|
|
height: 40px;
|
|
|
line-height: 40px;
|
|
|
background: #6e70f0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
li {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
line-height: 30px;
|
|
|
width: 122px;
|
|
|
height: 30px;
|
|
|
background: #003b75;
|
|
|
border-bottom: 1px solid #7190d4;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.draw {
|
|
|
width: 145px;
|
|
|
height: 31px;
|
|
|
background: url("@/assets/images/绘制.png");
|
|
|
background-size: 145px 31px;
|
|
|
text-align: center;
|
|
|
line-height: 31px;
|
|
|
color: #000;
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.analysis {
|
|
|
width: 577px;
|
|
|
height: 117px;
|
|
|
background: #005b55;
|
|
|
border-radius: 10px;
|
|
|
margin-top: 20px;
|
|
|
font-size: 14px;
|
|
|
padding-left: 20px;
|
|
|
padding-top: 12px;
|
|
|
.conclusion {
|
|
|
// display: block;
|
|
|
|
|
|
margin-bottom: 10px;
|
|
|
font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
.generateBtn {
|
|
|
width: 185px;
|
|
|
height: 31px;
|
|
|
background: url("@/assets/images/生成统计.png");
|
|
|
text-align: center;
|
|
|
line-height: 31px;
|
|
|
color: #000;
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.analysisConclusion {
|
|
|
background: url("@/assets/images/分析.png");
|
|
|
width: 89px;
|
|
|
height: 31px;
|
|
|
text-align: center;
|
|
|
line-height: 31px;
|
|
|
color: #000;
|
|
|
font-size: 14px;
|
|
|
// cursor: pointer;
|
|
|
margin-left: 20px;
|
|
|
padding-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
// ::v-deep .el-table tr {
|
|
|
// background-color: #002652 !important;
|
|
|
// color: #fff;
|
|
|
// }
|
|
|
::v-deep .el-table tr {
|
|
|
background-color: #fff !important;
|
|
|
color: #000;
|
|
|
}
|
|
|
/* 将悬停背景色改为红色 */
|
|
|
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
|
|
|
background-color: #f5f7fa !important;
|
|
|
}
|
|
|
::v-deep .el-textarea__inner {
|
|
|
// background: #002652;
|
|
|
color: #000;
|
|
|
// color: #5397C3;
|
|
|
}
|
|
|
::v-deep .el-table td {
|
|
|
padding-top: 4px;
|
|
|
padding-bottom: 4px;
|
|
|
}
|
|
|
</style>
|