|
@@ -5,18 +5,8 @@ |
|
|
<div class="app-titel" v-if="role != 3" style="margin-bottom: 10px"> |
|
|
<div class="app-titel" v-if="role != 3" style="margin-bottom: 10px"> |
|
|
<div class="titel-text">项目选择:</div> |
|
|
<div class="titel-text">项目选择:</div> |
|
|
<div style="margin-left: 26px"> |
|
|
<div style="margin-left: 26px"> |
|
|
<el-select |
|
|
|
|
|
v-model="houseId" |
|
|
|
|
|
filterable |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
@change="houseChange" |
|
|
|
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in houseList" |
|
|
|
|
|
:key="item.id" |
|
|
|
|
|
:label="item.propertyName" |
|
|
|
|
|
:value="item.id" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-select v-model="houseId" filterable placeholder="请选择" @change="houseChange"> |
|
|
|
|
|
<el-option v-for="item in houseList" :key="item.id" :label="item.propertyName" :value="item.id"> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</div> |
|
|
</div> |
|
@@ -35,17 +25,9 @@ |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div style="margin-left: 26px"> |
|
|
<div style="margin-left: 26px"> |
|
|
<el-date-picker |
|
|
|
|
|
@change="confirmtime()" |
|
|
|
|
|
v-model="customtime" |
|
|
|
|
|
type="daterange" |
|
|
|
|
|
range-separator="-" |
|
|
|
|
|
:default-time="['00:00:00', '23:59:59']" |
|
|
|
|
|
value-format="yyyy-MM-dd" |
|
|
|
|
|
start-placeholder="开始日期" |
|
|
|
|
|
end-placeholder="结束日期" |
|
|
|
|
|
:picker-options="pickerOptions" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-date-picker @change="confirmtime()" v-model="customtime" type="daterange" range-separator="-" |
|
|
|
|
|
:default-time="['00:00:00', '23:59:59']" value-format="yyyy-MM-dd" start-placeholder="开始日期" |
|
|
|
|
|
end-placeholder="结束日期" :picker-options="pickerOptions"> |
|
|
</el-date-picker> |
|
|
</el-date-picker> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -53,123 +35,127 @@ |
|
|
|
|
|
|
|
|
<!-- 二 --> |
|
|
<!-- 二 --> |
|
|
<div class="app-box-er"> |
|
|
<div class="app-box-er"> |
|
|
<div class="container"> |
|
|
|
|
|
<div class="grid-content" @click="Overviewxlick('4')"> |
|
|
|
|
|
<div class="text1" :class="{ tophovese: cardindex == 4 }"> |
|
|
|
|
|
平均执行率(%) |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,有效接待(不包含待接单)的平均执行率;" placement="bottom-end"> |
|
|
|
|
|
|
|
|
<div class="container tabcard"> |
|
|
|
|
|
<el-card shadow="hover" :class="{ tophovese: cardindex == 4 }"> |
|
|
|
|
|
<div @click="Overviewxlick('4')"> |
|
|
|
|
|
<div class="text1"> |
|
|
|
|
|
平均执行率(%) |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,有效接待(不包含待接单)的平均执行率;" placement="bottom-end"> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text2"> |
|
|
|
|
|
{{ cardobj.fraction || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.fraction || 0 }}</span> |
|
|
|
|
|
<span class="textUp" v-if="cardobjCycle.avgFration > 0"> |
|
|
|
|
|
+{{ cardobjCycle.avgFration || 0 }} |
|
|
|
|
|
<i class="up"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span class="textDown" v-if="cardobjCycle.avgFration < 0"> |
|
|
|
|
|
{{ cardobjCycle.avgFration || 0 }} |
|
|
|
|
|
<i class="down"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text2" :class="{ tophovese: cardindex == 4 }"> |
|
|
|
|
|
{{ cardobj.fraction || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.fraction || 0 }}</span> |
|
|
|
|
|
<span |
|
|
|
|
|
class="cycle-to" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'el-icon-caret-bottom': cardobjCycle.avgFration < 0, |
|
|
|
|
|
'el-icon-caret-top': cardobjCycle.avgFration > 0, |
|
|
|
|
|
}" |
|
|
|
|
|
>{{ cardobjCycle.avgFration || 0 }}</span |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="grid-content" @click="Overviewxlick('3')"> |
|
|
|
|
|
<div class="text1" :class="{ tophovese: cardindex == 3 }"> |
|
|
|
|
|
平均接待时长 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,有效接待(不包含待接单)的平均录音时长,单位分钟;" placement="bottom-end"> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
<el-card shadow="hover" :class="{ tophovese: cardindex == 3 }"> |
|
|
|
|
|
<div @click="Overviewxlick('3')"> |
|
|
|
|
|
<div class="text1"> |
|
|
|
|
|
平均接待时长 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,有效接待(不包含待接单)的平均录音时长,单位分钟;" placement="bottom-end"> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text2"> |
|
|
|
|
|
{{ cardobj.avgDuration || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.avgDuration || 0 }}</span> |
|
|
|
|
|
<span class="textUp" v-if="cardobjCycle.receptionTimeWithAvg > 0"> |
|
|
|
|
|
+{{ cardobjCycle.receptionTimeWithAvg || 0 }} |
|
|
|
|
|
<i class="up"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span class="textDown" v-if="cardobjCycle.receptionTimeWithAvg < 0"> |
|
|
|
|
|
-{{ cardobjCycle.receptionTimeWithAvg || 0 }} |
|
|
|
|
|
<i class="down"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text2" :class="{ tophovese: cardindex == 3 }"> |
|
|
|
|
|
{{ cardobj.avgDuration || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.avgDuration || 0 }}</span> |
|
|
|
|
|
<span |
|
|
|
|
|
class="cycle-to el-icon-caret-bottom" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'el-icon-caret-bottom': cardobjCycle.receptionTimeWithAvg < 0, |
|
|
|
|
|
'el-icon-caret-top': cardobjCycle.receptionTimeWithAvg > 0, |
|
|
|
|
|
}" |
|
|
|
|
|
>{{ cardobjCycle.receptionTimeWithAvg || 0 }}</span |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="grid-content" @click="Overviewxlick('1')"> |
|
|
|
|
|
<div class="text1" :class="{ tophovese: cardindex == 1 }">接待量 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,已经结束的接待条数,不包含待接单;" placement="bottom-end"> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
<el-card shadow="hover" :class="{ tophovese: cardindex == 1 }"> |
|
|
|
|
|
<div @click="Overviewxlick('1')"> |
|
|
|
|
|
<div class="text1"> |
|
|
|
|
|
接待量 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,已经结束的接待条数,不包含待接单;" placement="bottom-end"> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|
</div> |
|
|
|
|
|
<div class="text2" :class="{ tophovese: cardindex == 1 }"> |
|
|
|
|
|
{{ cardobj.receptionCount || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.receptionCount || 0 }}</span> |
|
|
|
|
|
<span |
|
|
|
|
|
class="cycle-to el-icon-caret-bottom" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'el-icon-caret-bottom': cardobjCycle.receptionCount < 0, |
|
|
|
|
|
'el-icon-caret-top': cardobjCycle.receptionCount > 0, |
|
|
|
|
|
}" |
|
|
|
|
|
>{{ cardobjCycle.receptionCount || 0 }}</span |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text2"> |
|
|
|
|
|
{{ cardobj.receptionCount || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.receptionCount || 0 }}</span> |
|
|
|
|
|
<span class="textUp" v-if="cardobjCycle.receptionCount > 0"> |
|
|
|
|
|
+{{ cardobjCycle.receptionCount || 0 }} |
|
|
|
|
|
<i class="up"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span class="textDown" v-if="cardobjCycle.receptionCount < 0"> |
|
|
|
|
|
-{{ cardobjCycle.receptionCount || 0 }} |
|
|
|
|
|
<i class="down"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="grid-content" @click="Overviewxlick('2')"> |
|
|
|
|
|
<div class="text1" :class="{ tophovese: cardindex == 2 }"> |
|
|
|
|
|
有效接待 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,标记为有效的接待数,不包含待接单;" placement="bottom-end"> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
<el-card shadow="hover" :class="{ tophovese: cardindex == 2 }"> |
|
|
|
|
|
<div @click="Overviewxlick('2')"> |
|
|
|
|
|
<div class="text1"> |
|
|
|
|
|
有效接待 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,标记为有效的接待数,不包含待接单;" placement="bottom-end"> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text2"> |
|
|
|
|
|
{{ cardobj.activeCustomer || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.activeCustomer || 0 }}</span> |
|
|
|
|
|
<span class="textUp" v-if="cardobjCycle.activeCustomer > 0"> |
|
|
|
|
|
+{{ cardobjCycle.activeCustomer || 0 }} |
|
|
|
|
|
<i class="up"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span class="textDown" v-if="cardobjCycle.activeCustomer < 0"> |
|
|
|
|
|
-{{ cardobjCycle.activeCustomer || 0 }} |
|
|
|
|
|
<i class="down"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text2" :class="{ tophovese: cardindex == 2 }"> |
|
|
|
|
|
{{ cardobj.activeCustomer || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.activeCustomer || 0 }}</span> |
|
|
|
|
|
<span |
|
|
|
|
|
class="cycle-to el-icon-caret-bottom" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'el-icon-caret-bottom': cardobjCycle.activeCustomer < 0, |
|
|
|
|
|
'el-icon-caret-top': cardobjCycle.activeCustomer > 0, |
|
|
|
|
|
}" |
|
|
|
|
|
>{{ cardobjCycle.activeCustomer || 0 }}</span |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="grid-content" @click="Overviewxlick('5')"> |
|
|
|
|
|
<div class="text1" :class="{ tophovese: cardindex == 5 }"> |
|
|
|
|
|
违禁接待次数 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,出现违禁的接待次数,不包含待接单/无效接待/无效违禁;" placement="bottom-end"> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
|
|
|
<el-card shadow="hover" :class="{ tophovese: cardindex == 5 }"> |
|
|
|
|
|
<div @click="Overviewxlick('5')"> |
|
|
|
|
|
<div class="text1"> |
|
|
|
|
|
违禁接待次数 |
|
|
|
|
|
<el-tooltip effect="light" content="筛选时间内,出现违禁的接待次数,不包含待接单/无效接待/无效违禁;" placement="bottom-end"> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
</el-tooltip> |
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text2"> |
|
|
|
|
|
{{ cardobj.prohibitedCustomer || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span>环比 {{ cardobjs.prohibitedCustomer || 0 }}</span> |
|
|
|
|
|
<span class="textUp" v-if="cardobjCycle.prohibitedCustomer > 0"> |
|
|
|
|
|
+{{ cardobjCycle.prohibitedCustomer || 0 }} |
|
|
|
|
|
<i class="up"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
<span class="textDown" v-if="cardobjCycle.prohibitedCustomer < 0"> |
|
|
|
|
|
-{{ cardobjCycle.prohibitedCustomer || 0 }} |
|
|
|
|
|
<i class="down"></i> |
|
|
|
|
|
</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="text2" :class="{ tophovese: cardindex == 5 }"> |
|
|
|
|
|
{{ cardobj.prohibitedCustomer || 0 }} |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="text3"> |
|
|
|
|
|
<span |
|
|
|
|
|
>环比 {{ cardobjs.prohibitedCustomer || 0 }}</span |
|
|
|
|
|
> |
|
|
|
|
|
<span |
|
|
|
|
|
class="cycle-to el-icon-caret-bottom" |
|
|
|
|
|
:class="{ |
|
|
|
|
|
'el-icon-caret-bottom': cardobjCycle.prohibitedCount < 0, |
|
|
|
|
|
'el-icon-caret-top': cardobjCycle.prohibitedCount > 0, |
|
|
|
|
|
}" |
|
|
|
|
|
>{{ cardobjCycle.prohibitedCount || 0 }}</span |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
</el-card> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="main"></div> |
|
|
<div id="main"></div> |
|
@@ -181,18 +167,9 @@ |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
<div class="text1">团队执行率趋势</div> |
|
|
<div class="text1">团队执行率趋势</div> |
|
|
<div class="text2"> |
|
|
<div class="text2"> |
|
|
<el-select |
|
|
|
|
|
style="width: 90%; margin: 0 auto" |
|
|
|
|
|
@change="Pinspeaktap(1)" |
|
|
|
|
|
v-model="departmentsri" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in departmentlist" |
|
|
|
|
|
:key="item.deptId" |
|
|
|
|
|
:label="item.name" |
|
|
|
|
|
:value="item.deptId" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-select style="width: 90%; margin: 0 auto" @change="Pinspeaktap(1)" v-model="departmentsri" |
|
|
|
|
|
placeholder="请选择"> |
|
|
|
|
|
<el-option v-for="item in departmentlist" :key="item.deptId" :label="item.name" :value="item.deptId"> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</div> |
|
|
</div> |
|
@@ -213,18 +190,10 @@ |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
<div class="text1">顾问执行率趋势</div> |
|
|
<div class="text1">顾问执行率趋势</div> |
|
|
<div class="text2"> |
|
|
<div class="text2"> |
|
|
<el-select |
|
|
|
|
|
style="width: 90%; margin: 0 auto" |
|
|
|
|
|
@change="Pinspeaktap(2)" |
|
|
|
|
|
v-model="consultantsri" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in consultantlist" |
|
|
|
|
|
:key="item.accountId" |
|
|
|
|
|
:label="item.name" |
|
|
|
|
|
:value="item.accountId" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-select style="width: 90%; margin: 0 auto" @change="Pinspeaktap(2)" v-model="consultantsri" |
|
|
|
|
|
placeholder="请选择"> |
|
|
|
|
|
<el-option v-for="item in consultantlist" :key="item.accountId" :label="item.name" |
|
|
|
|
|
:value="item.accountId"> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</div> |
|
|
</div> |
|
@@ -249,12 +218,7 @@ |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
<div class="text1" style="font-size: 14px;">顾问{{ activeName | abName }}排名(TOP10)</div> |
|
|
<div class="text1" style="font-size: 14px;">顾问{{ activeName | abName }}排名(TOP10)</div> |
|
|
<div style="font-size: 14px;" class="text2"> |
|
|
<div style="font-size: 14px;" class="text2"> |
|
|
<el-menu |
|
|
|
|
|
:default-active="activeName" |
|
|
|
|
|
mode="horizontal" |
|
|
|
|
|
@select="handleClick" |
|
|
|
|
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-menu :default-active="activeName" mode="horizontal" @select="handleClick"> |
|
|
<el-menu-item style="font-size: 12px;" index="3">平均执行率</el-menu-item> |
|
|
<el-menu-item style="font-size: 12px;" index="3">平均执行率</el-menu-item> |
|
|
<el-menu-item style="font-size: 12px;" index="0">接待量</el-menu-item> |
|
|
<el-menu-item style="font-size: 12px;" index="0">接待量</el-menu-item> |
|
|
<el-menu-item style="font-size: 12px;" index="1">接待时长</el-menu-item> |
|
|
<el-menu-item style="font-size: 12px;" index="1">接待时长</el-menu-item> |
|
@@ -284,23 +248,17 @@ |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
|
|
|
v-if="ceratelist.list.length != 0" |
|
|
|
|
|
style=" |
|
|
|
|
|
|
|
|
<div v-if="ceratelist.list.length != 0" style=" |
|
|
height: 360px; |
|
|
height: 360px; |
|
|
width: 94%; |
|
|
width: 94%; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
margin-top: 15px; |
|
|
margin-top: 15px; |
|
|
margin-bottom: 16px; |
|
|
margin-bottom: 16px; |
|
|
" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
"> |
|
|
<div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i"> |
|
|
<div class="jinbox" v-for="(item, i) in ceratelist.list" :key="i"> |
|
|
<div class="jinboxtit">{{ item.name }}</div> |
|
|
<div class="jinboxtit">{{ item.name }}</div> |
|
|
<div class="jinbox-box"> |
|
|
<div class="jinbox-box"> |
|
|
<div |
|
|
|
|
|
class="boxbaifenbi" |
|
|
|
|
|
:style="'width:' + item.zxl1 + '%;'" |
|
|
|
|
|
></div> |
|
|
|
|
|
|
|
|
<div class="boxbaifenbi" :style="'width:' + item.zxl1 + '%;'"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="jinboxbott"> |
|
|
<div class="jinboxbott"> |
|
|
{{ item.zxl || 0 }}{{ activeName | company }} |
|
|
{{ item.zxl || 0 }}{{ activeName | company }} |
|
@@ -381,29 +339,25 @@ |
|
|
<div class="zuo"> |
|
|
<div class="zuo"> |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
<div class="text1">场景执行率 |
|
|
<div class="text1">场景执行率 |
|
|
<el-tooltip effect="light" content="筛选时间内,场景执行率=场景执行的接待次数/有效接待数*100%,例如:品牌介绍,10次有效接待,有5次接待中都出现了品牌介绍,场景执行率=5/10*100%=50%;" placement="bottom-end"> |
|
|
|
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<el-tooltip effect="light" |
|
|
|
|
|
content="筛选时间内,场景执行率=场景执行的接待次数/有效接待数*100%,例如:品牌介绍,10次有效接待,有5次接待中都出现了品牌介绍,场景执行率=5/10*100%=50%;" |
|
|
|
|
|
placement="bottom-end"> |
|
|
|
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
|
|
|
v-if="Zxllist.length != 0" |
|
|
|
|
|
style=" |
|
|
|
|
|
|
|
|
<div v-if="Zxllist.length != 0" style=" |
|
|
overflow-y: auto; |
|
|
overflow-y: auto; |
|
|
height: 320px; |
|
|
height: 320px; |
|
|
width: 94%; |
|
|
width: 94%; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
margin-top: 15px; |
|
|
margin-top: 15px; |
|
|
margin-bottom: 16px; |
|
|
margin-bottom: 16px; |
|
|
" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
"> |
|
|
<div class="jinbox" v-for="(item, i) in Zxllist" :key="i"> |
|
|
<div class="jinbox" v-for="(item, i) in Zxllist" :key="i"> |
|
|
<div class="jinboxtit">{{ item.name }}</div> |
|
|
<div class="jinboxtit">{{ item.name }}</div> |
|
|
<div class="jinbox-box"> |
|
|
<div class="jinbox-box"> |
|
|
<div |
|
|
|
|
|
class="boxbaifenbi" |
|
|
|
|
|
:style="'width:' + item.zxl + '%;'" |
|
|
|
|
|
></div> |
|
|
|
|
|
|
|
|
<div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="jinboxbott">{{ item.zxl }}%</div> |
|
|
<div class="jinboxbott">{{ item.zxl }}%</div> |
|
|
</div> |
|
|
</div> |
|
@@ -418,46 +372,33 @@ |
|
|
<div class="you"> |
|
|
<div class="you"> |
|
|
<div class="title"> |
|
|
<div class="title"> |
|
|
<div class="text1">指标执行率 |
|
|
<div class="text1">指标执行率 |
|
|
<el-tooltip effect="light" content="筛选时间内,指标执行率=指标执行的接待次数/有效接待数*100%,例如:品牌介绍,10次有效接待,有5次接待中都出现了品牌介绍,指标执行率=5/10*100%=50%;" placement="bottom-end"> |
|
|
|
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
<el-tooltip effect="light" |
|
|
|
|
|
content="筛选时间内,指标执行率=指标执行的接待次数/有效接待数*100%,例如:品牌介绍,10次有效接待,有5次接待中都出现了品牌介绍,指标执行率=5/10*100%=50%;" |
|
|
|
|
|
placement="bottom-end"> |
|
|
|
|
|
<i class="el-icon-question" style="color:#74A3EA"></i> |
|
|
|
|
|
</el-tooltip> |
|
|
|
|
|
</div> |
|
|
<div class="text2"></div> |
|
|
<div class="text2"></div> |
|
|
<div class="text2"> |
|
|
<div class="text2"> |
|
|
<el-select |
|
|
|
|
|
style="width: 90%; margin: 0 auto" |
|
|
|
|
|
@change="zxltapchang()" |
|
|
|
|
|
v-model="marketingId" |
|
|
|
|
|
placeholder="请选择" |
|
|
|
|
|
> |
|
|
|
|
|
<el-option |
|
|
|
|
|
v-for="item in Zxllist" |
|
|
|
|
|
:key="item.marketingId" |
|
|
|
|
|
:label="item.name" |
|
|
|
|
|
:value="item.marketingId" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
<el-select style="width: 90%; margin: 0 auto" @change="zxltapchang()" v-model="marketingId" |
|
|
|
|
|
placeholder="请选择"> |
|
|
|
|
|
<el-option v-for="item in Zxllist" :key="item.marketingId" :label="item.name" :value="item.marketingId"> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
|
|
|
v-if="Zxllistchildren.length != 0" |
|
|
|
|
|
style=" |
|
|
|
|
|
|
|
|
<div v-if="Zxllistchildren.length != 0" style=" |
|
|
overflow-y: auto; |
|
|
overflow-y: auto; |
|
|
height: 320px; |
|
|
height: 320px; |
|
|
width: 94%; |
|
|
width: 94%; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
margin-top: 15px; |
|
|
margin-top: 15px; |
|
|
margin-bottom: 16px; |
|
|
margin-bottom: 16px; |
|
|
" |
|
|
|
|
|
> |
|
|
|
|
|
|
|
|
"> |
|
|
<div class="jinbox" v-for="(item, i) in Zxllistchildren" :key="i"> |
|
|
<div class="jinbox" v-for="(item, i) in Zxllistchildren" :key="i"> |
|
|
<div class="jinboxtit">{{ item.name }}</div> |
|
|
<div class="jinboxtit">{{ item.name }}</div> |
|
|
<div class="jinbox-box"> |
|
|
<div class="jinbox-box"> |
|
|
<div |
|
|
|
|
|
class="boxbaifenbi" |
|
|
|
|
|
:style="'width:' + item.zxl + '%;'" |
|
|
|
|
|
></div> |
|
|
|
|
|
|
|
|
<div class="boxbaifenbi" :style="'width:' + item.zxl + '%;'"></div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="jinboxbott">{{ item.zxl }}%</div> |
|
|
<div class="jinboxbott">{{ item.zxl }}%</div> |
|
|
</div> |
|
|
</div> |
|
@@ -1400,11 +1341,96 @@ export default { |
|
|
min-width: 1000px; |
|
|
min-width: 1000px; |
|
|
padding-bottom: 100px; |
|
|
padding-bottom: 100px; |
|
|
} |
|
|
} |
|
|
|
|
|
.tabcard{ |
|
|
|
|
|
/deep/ .el-card__body { |
|
|
|
|
|
padding: 8px; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text1 { |
|
|
|
|
|
height: 16px; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
line-height: 16px; |
|
|
|
|
|
text-indent: 20px; |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
color: #666666; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text2 { |
|
|
|
|
|
height: 32px; |
|
|
|
|
|
font-size: 32px; |
|
|
|
|
|
font-weight: normal; |
|
|
|
|
|
line-height: 32px; |
|
|
|
|
|
text-indent: 20px; |
|
|
|
|
|
margin-top: 10px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text3 { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
margin: 10px 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
text-indent: 20px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.textUp { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
color: rgba(231, 72, 60, 1); |
|
|
|
|
|
background: rgba(253, 240, 239, 1); |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
padding: 3px 12px 3px 0; |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
margin-left: 8px; |
|
|
|
|
|
|
|
|
|
|
|
.up { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
display: block; |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 15px; |
|
|
|
|
|
background: url("../../../public/img/indexIcon/indexCardUp.png") no-repeat; |
|
|
|
|
|
background-size: 100%; |
|
|
|
|
|
margin-left: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.textDown { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
color: rgba(7, 183, 157, 1); |
|
|
|
|
|
background: rgba(235, 250, 246, 1); |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
padding: 3px 12px 3px 0; |
|
|
|
|
|
border-radius: 3px; |
|
|
|
|
|
margin-left: 8px; |
|
|
|
|
|
|
|
|
|
|
|
.down { |
|
|
|
|
|
display: block; |
|
|
|
|
|
width: 20px; |
|
|
|
|
|
height: 15px; |
|
|
|
|
|
background: url("../../../public/img/indexIcon/indexCardDown.png") no-repeat; |
|
|
|
|
|
background-size: 100%; |
|
|
|
|
|
margin-left: 8px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tophovese { |
|
|
|
|
|
border: 1px solid #2671e2 !important; |
|
|
|
|
|
background: rgba(38, 113, 226, 0.04); |
|
|
|
|
|
color: #666 !important; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
.container { |
|
|
.container { |
|
|
display: grid; |
|
|
display: grid; |
|
|
grid-template-columns: repeat(5, 19%); |
|
|
grid-template-columns: repeat(5, 19%); |
|
|
grid-column-gap: 12px; |
|
|
grid-column-gap: 12px; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 进度条 |
|
|
// 进度条 |
|
@@ -1416,6 +1442,7 @@ export default { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #2c3542; |
|
|
color: #2c3542; |
|
|
margin-top: 20px; |
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
.jinboxtit { |
|
|
.jinboxtit { |
|
|
width: 14%; |
|
|
width: 14%; |
|
|
height: 18px; |
|
|
height: 18px; |
|
@@ -1424,21 +1451,25 @@ export default { |
|
|
text-overflow: ellipsis; |
|
|
text-overflow: ellipsis; |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.jinbox-box { |
|
|
.jinbox-box { |
|
|
width: 75%; |
|
|
width: 75%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
border-radius: 8px; |
|
|
border-radius: 8px; |
|
|
background: #f2f2f2; |
|
|
background: #f2f2f2; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.boxbaifenbi { |
|
|
.boxbaifenbi { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
background: #60d7a0; |
|
|
background: #60d7a0; |
|
|
border-radius: 8px; |
|
|
border-radius: 8px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.boxbaifenbi2 { |
|
|
.boxbaifenbi2 { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
background: #5b8ff9; |
|
|
background: #5b8ff9; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.jinboxbott { |
|
|
.jinboxbott { |
|
|
width: 16%; |
|
|
width: 16%; |
|
|
text-indent: 20px; |
|
|
text-indent: 20px; |
|
@@ -1449,39 +1480,47 @@ export default { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 380px; |
|
|
height: 380px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#Brokenline1 { |
|
|
#Brokenline1 { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 350px; |
|
|
height: 350px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#Brokenline2 { |
|
|
#Brokenline2 { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 350px; |
|
|
height: 350px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#Pinspeak1 { |
|
|
#Pinspeak1 { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 350px; |
|
|
height: 350px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
#Pinspeak2 { |
|
|
#Pinspeak2 { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 350px; |
|
|
height: 350px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.app-box-san { |
|
|
.app-box-san { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
// height: 400px; |
|
|
// height: 400px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
margin-top: 15px; |
|
|
margin-top: 15px; |
|
|
|
|
|
|
|
|
.zuo { |
|
|
.zuo { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
margin-right: 15px; |
|
|
margin-right: 15px; |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
|
.title { |
|
|
.title { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 55px; |
|
|
height: 55px; |
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-content: center; |
|
|
align-content: center; |
|
|
|
|
|
|
|
|
.text1 { |
|
|
.text1 { |
|
|
flex-grow: 1; |
|
|
flex-grow: 1; |
|
|
line-height: 55px; |
|
|
line-height: 55px; |
|
@@ -1490,6 +1529,7 @@ export default { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #333333; |
|
|
color: #333333; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text2 { |
|
|
.text2 { |
|
|
flex-grow: 1; |
|
|
flex-grow: 1; |
|
|
height: 55px; |
|
|
height: 55px; |
|
@@ -1498,17 +1538,20 @@ export default { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.you { |
|
|
.you { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
border-radius: 4px; |
|
|
border-radius: 4px; |
|
|
|
|
|
|
|
|
.title { |
|
|
.title { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 55px; |
|
|
height: 55px; |
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
border-bottom: 1px solid #e0e0e0; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-content: center; |
|
|
align-content: center; |
|
|
|
|
|
|
|
|
.text1 { |
|
|
.text1 { |
|
|
flex-grow: 1; |
|
|
flex-grow: 1; |
|
|
line-height: 55px; |
|
|
line-height: 55px; |
|
@@ -1517,6 +1560,7 @@ export default { |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
color: #333333; |
|
|
color: #333333; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text2 { |
|
|
.text2 { |
|
|
flex-grow: 1; |
|
|
flex-grow: 1; |
|
|
height: 55px; |
|
|
height: 55px; |
|
@@ -1535,6 +1579,7 @@ export default { |
|
|
margin-top: 15px; |
|
|
margin-top: 15px; |
|
|
padding: 15px; |
|
|
padding: 15px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.grid-content { |
|
|
.grid-content { |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
|
min-height: 90px; |
|
|
min-height: 90px; |
|
@@ -1572,9 +1617,11 @@ export default { |
|
|
color: #ffffff; |
|
|
color: #ffffff; |
|
|
background: #2671e2; |
|
|
background: #2671e2; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tophovese { |
|
|
.tophovese { |
|
|
color: #2671e2; |
|
|
|
|
|
|
|
|
// color: #2671e2; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.app-top { |
|
|
.app-top { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
background: #ffffff; |
|
|
background: #ffffff; |
|
@@ -1583,10 +1630,12 @@ export default { |
|
|
padding-top: 15px; |
|
|
padding-top: 15px; |
|
|
padding-bottom: 15px; |
|
|
padding-bottom: 15px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.app-titel { |
|
|
.app-titel { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
display: flex; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.titel-text { |
|
|
.titel-text { |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
@@ -1594,6 +1643,7 @@ export default { |
|
|
color: #32363d; |
|
|
color: #32363d; |
|
|
text-indent: 30px; |
|
|
text-indent: 30px; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.toptimeqhuan { |
|
|
.toptimeqhuan { |
|
|
width: 190px; |
|
|
width: 190px; |
|
|
height: 32px; |
|
|
height: 32px; |
|
@@ -1606,6 +1656,7 @@ export default { |
|
|
margin-left: 20px; |
|
|
margin-left: 20px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.toptimeqhuan div { |
|
|
.toptimeqhuan div { |
|
|
flex: 1; |
|
|
flex: 1; |
|
|
text-align: center; |
|
|
text-align: center; |
|
@@ -1613,14 +1664,17 @@ export default { |
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.hejisan { |
|
|
.hejisan { |
|
|
width: 92%; |
|
|
width: 92%; |
|
|
margin: 0 auto; |
|
|
margin: 0 auto; |
|
|
display: flex; |
|
|
display: flex; |
|
|
margin-top: 15px; |
|
|
margin-top: 15px; |
|
|
|
|
|
|
|
|
.text1-1 { |
|
|
.text1-1 { |
|
|
color: #666666; |
|
|
color: #666666; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.text1-2 { |
|
|
.text1-2 { |
|
|
color: #333333; |
|
|
color: #333333; |
|
|
margin-top: 10px; |
|
|
margin-top: 10px; |
|
|