Skip to content

C
CRM
Commit 3949c939 authored by 黄媛媛's avatar 黄媛媛
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/crm

parents a02bdd64 ae326b4f
Hide whitespace changes
Inline Side-by-side
Showing with 1012 additions and 73 deletions
src/App.vue
View file @ 3949c939
......@@ -30,7 +30,7 @@ export default {
@import './assets/css/tablevoerride.css';
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_79sjd75n6du.css';
@import '//at.alicdn.com/t/font_1627123_c80k77dlq7f.css';
@import url('//at.alicdn.com/t/font_1627123_grz80mbm3sv.css');
/* @import './assets/css/common.css'; */
@import './assets/css/init.css';
......
src/assets/css/customerManage.css
View file @ 3949c939
......@@ -8,6 +8,7 @@
.customerManage .tools h1{
font-weight: bold;
font-size: 18px;
font-family: perfectFont;
}
.customerManage .tools .rightmenu{
display: flex;
......
src/components/sellevent/brithday.vue 0 → 100644
View file @ 3949c939
<style>
@import '../../assets/css/customerManage.css';
.el-table__fixed-body-wrapper table{
padding-bottom: 8px!important;
}
.el-table__fixed-body-wrapper{
overflow: auto;
}
</style>
<template>
<div class="customerManage">
<div class="tools">
<h1>生日事件客户</h1>
<!-- <div style="width: 340px;">
<el-input placeholder="请输入直客名称/手机号" v-model="msg.GusetName" class="input-with-select">
<el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
</el-input>
</div> -->
<div class="rightmenu">
<!-- <el-button class="crm-btn query-btn" @click="getList">查询</el-button> -->
<el-button icon="el-icon-plus" class="crm-btn org-btn" @click="CustomerId = 0, dialogTableVisibleName = '新建直客', dialogTableVisible=true">发送生日祝福涵</el-button>
<!-- <el-dropdown>
<el-button class="crm-btn crm-btn-more easy-btn margin-right0">
<i class="iconfont icongengduo"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item><i class="iconfont icondaoru"></i> 导入</el-dropdown-item>
<el-dropdown-item><i class="iconfont icondaochu"></i> 导出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown> -->
</div>
</div>
<div class="query-box" :style="{'padding-bottom': sceneList.length > 0 ? '0px' : '10px'}">
<el-row v-if="!multipleSelection.length" :gutter="30">
<el-col :span="4">
<span class="font-size-12" style="padding-right: 10px">场景</span>
<el-popover
placement="bottom"
width="180"
popper-class="popover-class"
v-model="visible"
trigger="click">
<div data-v-16d669bb="" class="scene-container">
<div class="scene-list">
<div class="scene-list-item" :class="{'scene-list-item-select': sceneID === item.ID}" v-for="(item, index) in SceneEmployeeList" :key="index" @click="changeWhere(item)">{{item.SceneName}}</div>
</div>
<div class="handle-interval">
<div class="vux-flexbox handle-button vux-flex-row" @click="MsgBus.$emit('sceneBoxShow', 5, 1)">
<i class="el-icon-circle-plus-outline handle-button-icon"></i>
<div class="handle-button-name">新建场景</div></div>
<div class="vux-flexbox handle-button vux-flex-row" @click="MsgBus.$emit('sceneEditBoxShow', 5, SceneEmployeeList)">
<i class="el-icon-setting handle-button-icon"></i>
<div class="handle-button-name">管理</div>
</div>
</div>
</div>
<el-select size="mini" popper-class="select-no" slot="reference" v-model="msg.ID" placeholder="请选择">
<el-option
v-for="item in SceneEmployeeList"
:key="item.ID"
:label="item.SceneName"
:value="item.ID">
</el-option>
</el-select>
</el-popover>
</el-col>
<el-col :span="4">
<span class="font-size-12" style="padding-right: 10px">客户类型</span>
<el-select size="mini" v-model="msg.CustomerType" placeholder="请选择" @change="getList">
<el-option key="0" label="客户" :value="0"></el-option>
<el-option key="1" label="直客" :value="1"></el-option>
</el-select>
</el-col>
<el-col :span="4">
<el-button icon="iconfont iconshaixuan" class="crm-btn query-btn crm-btn-mini margin-right0" @click="MsgBus.$emit('sceneBoxShow', 5)">高级筛选</el-button>
</el-col>
</el-row>
<div v-else class="flex-center">
<p class="font-size-12">已选 <span class="font-color-link">{{multipleSelection.length}}</span> 项</p>
<div class="selection-box">
<el-button v-for="(item, index) in selectionList" :key="index" @click="item.myFun"><i :class="item.class"></i>{{item.name}}</el-button>
</div>
</div>
<div class="scene-wrapper" v-if="sceneList.length > 0">
<ul class="list">
<li class="list-item" v-for="(item, index) in sceneList" :key="index">
<span v-if="item.formType !== 'datetime'">{{item.str}}&nbsp;{{item.regionStr}}“{{item.nameFC ? item.nameFC : item.value}}”</span>
<span v-else>{{item.str}}&nbsp;“{{item.start}}-{{item.end}}”</span>
<i class="el-icon-close icon" @click="deleteScene(index)"></i>
</li>
</ul>
</div>
</div>
<div class="page-content">
<el-table
v-if="loading"
v-loading="true"
:data="[]">
<el-table-column
v-for="(item, index) in queryType2" :key="index"
:label="item.label">
</el-table-column>
</el-table>
<el-table
v-if="!loading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
:height="sceneList.length > 0 ? '600' : '660'"
border
row-class-name="font-size-12"
@selection-change="handleSelectionChange">
<el-table-column fixed type="selection" width="40"></el-table-column>
<el-table-column
fixed
prop="GuestName"
label="客户名称"
width="120"
v-if="queryType[0].show"
show-overflow-tooltip>
<template slot-scope="scope">
<p @click="openDetails(scope)" class="font-color-link cp">{{scope.row.GuestName}}</p>
</template>
</el-table-column>
<el-table-column
prop="Away"
label="生日倒计时"
width="120"
v-if="queryType[1].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="BirthdayMonth"
label="生日日期"
width="120"
v-if="queryType[2].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="MobilePhone"
label="手机号码"
width="120"
v-if="queryType[3].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="Address"
label="地址"
v-if="queryType[4].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="SexStr"
label="性别"
v-if="queryType[5].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="TripCount"
label="参团次数"
sortable
v-if="queryType[6].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="Old"
label="年龄"
sortable
v-if="queryType[7].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="PassportNo"
label="护照号"
sortable
v-if="queryType[8].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="Duty"
label="职业"
sortable
v-if="queryType[9].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="CustomerName"
label="关联同行"
sortable
v-if="queryType[10].show"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="ProductName"
label="上次出行产品"
sortable
v-if="queryType[11].show"
width="200"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="UnitPrice"
label="上次出行单价"
sortable
v-if="queryType[12].show"
show-overflow-tooltip>
</el-table-column>
<!-- <el-table-column
prop="IsCarefor"
fixed="right"
width="50"
label="关注">
<template slot-scope="scope">
<p>
<el-tooltip class="item" effect="dark" content="关注" placement="top">
<i v-if="scope.row.IsCarefor === 0" @click="CareforCustomer(scope)" class="iconfont iconwujiaoxing cp"></i>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="取消关注" placement="top">
<i v-if="scope.row.IsCarefor === 1" @click="CareforCustomer(scope)" class="iconfont iconstar_full cp"></i>
</el-tooltip>
</p>
</template>
</el-table-column> -->
<el-table-column
width="40"
fixed="right">
<template slot="header" slot-scope="scope">
<el-popover
placement="bottom"
width="240">
<mySelect :queryType="queryType" @listenTochildEvent="showMessageFromChild"/>
<i class="el-icon-s-operation cp" slot="reference"></i>
</el-popover>
</template>
</el-table-column>
</el-table>
</div>
<div>
<el-pagination
class="Mypagination"
background
@current-change="handleCurrentChange"
:page-sizes="[30, 60, 90, 100]"
:page-size="msg.pageSize"
layout="sizes, prev, pager, next"
@size-change="handleSizeChange"
:total="total">
</el-pagination>
</div>
<!-- <el-drawer
:with-header="false"
size='70%'
:visible.sync="drawer"
direction="rtl"
:before-close="handleClose">
<customerInfoBox :CustomerId="CustomerId" @transferS="transfer" @editCustS="editCust"/>
</el-drawer> -->
<!-- <div v-if="dialogTableVisible">
<customerDialogBox @getList="getList" :name="dialogTableVisibleName" :CustomerId="CustomerId"/>
</div> -->
<el-dialog :visible.sync="transferVisible" :close-on-click-modal="false" width="450px" custom-class="transfer-box add-box add-box2">
<div class="add-tit" slot="title">
<p><span></span>客户转移</p>
<span icon="el-icon-close"></span>
</div>
<el-form :model="transferMsg" ref="form" class="MyEditForm" >
<div class="MyEditForm-item">
<el-form-item label="变更负责人为" class="label-pad-left">
<el-select
filterable
v-model="transferMsg.EmpId" placeholder="请选择">
<el-option
v-for="item in EmployeeList"
:label='item.EmName'
:value='item.EmployeeId'
:key='item.EmployeeId'>
</el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" class="add-box-btn" @click="transfer(2)">确 定</el-button>
<el-button class="add-box-btn add-box-cancel" @click="transferVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import mySelect from "../dialogModel/select";
// import customerInfoBox from "./customerInfoBox";
// import customerDialogBox from "./customerDialogBox";
export default {
components: {
mySelect
// customerInfoBox,
// customerDialogBox
},
data() {
return {
queryType2: [
{
label: '客户名称',
show: true,
},{
label: '生日倒计时',
show: true,
},{
label: '生日日期',
show: true,
},{
label: '手机号码',
show: true,
},{
label: '地址',
show: true,
}
,{
label: '性别',
show: true,
},{
label: '参团次数',
show: true,
},{
label: '年龄',
show: true,
},{
label: '护照号',
show: true,
},{
label: '职业',
show: true,
},{
label: '关联同行',
show: true,
},{
label: '上次出行产品',
show: true,
},{
label: '上次出行单价',
show: true,
}
],
queryType: [
{
label: '客户名称',
show: true,
},{
label: '生日倒计时',
show: true,
},{
label: '生日日期',
show: true,
},{
label: '手机号码',
show: true,
},{
label: '地址',
show: true,
}
,{
label: '性别',
show: true,
},{
label: '参团次数',
show: true,
},{
label: '年龄',
show: true,
},{
label: '护照号',
show: true,
},{
label: '职业',
show: true,
},{
label: '关联同行',
show: true,
},{
label: '上次出行产品',
show: true,
},{
label: '上次出行单价',
show: true,
}
],
CustomerId: 0,
CustomerIdStr: '',
transferVisible: false,
mySelectCtrl: false,
drawer: false,
loading: true,
dialogTableVisible: false,
dialogTableVisibleName: '新建直客',
tableData: [],
multipleSelection: [],
EmployeeList: [],
value: '',
userInfo: {},
transferMsg: {
IDs: [],
EmpId: '',
},
msg: {
GusetName: '',
pageIndex: 1,
pageSize: 30,
ContactNumber: '',
WhereType: -1,
OrderBy: '',
ID: 36
},
total: 0,
WhereTypeList: [
{
id: -1,
name: '全部'
},{
id: 1,
name: '我负责的'
},{
id: 2,
name: '下属的'
},{
id: 3,
name: '我关注的'
},
],
selectionList: [
{
name: '转移',
class:'iconfont iconplus-transfer',
myFun: this.transfer
},{
name: '删除',
class:'iconfont icondelete',
myFun: this.delete
},
],
sceneList: [],
SceneEmployeeList: [],
sceneID: 36,
visible: false,
};
},
mounted() {
this.userInfo = this.getLocalStorage();
console.log(this.queryType)
this.getList()
this.Employee()
let $this = this
this.MsgBus.$on('closeCustomerDialogBox', function (){
$this.dialogTableVisible = false
})
this.GetSceneEmployeeList()
this.MsgBus.$on('sceneSave', function (msg){
$this.sceneList = [...msg]
$this.GetSceneEmployeeList()
let obj = {}
msg.forEach(element => {
obj[element.name] = element
});
$this.msg.Data = obj
$this.getList()
})
this.MsgBus.$on('editScene', function (){
console.log(1)
$this.GetSceneEmployeeList()
})
},beforeDestroy() {
this.MsgBus.$off('sceneSave');
this.MsgBus.$off('editScene');
},
methods: {
changeWhere(item){
this.msg.ID = item.ID
this.sceneID = item.ID
this.msg.Data = item.WhereData ? JSON.parse(item.WhereData) : {}
this.msg.WhereType = item.WhereType
this.visible = false
this.getList()
},
GetSceneEmployeeList(){
this.apipost('/api/Scene/GetSceneEmployeeList', {LableType: 5}, res=>{
if (res.data.resultCode == 1) {
this.SceneEmployeeList = res.data.data
}
})
},
deleteScene(index){
this.sceneList.splice(index, 1)
let obj = {}
this.sceneList.forEach(element => {
obj[element.name] = element
});
this.msg.Data = obj
this.getList()
},
getMarriageStr(type){
if (type === 5) return '其他'
if (type === 4) return '丧偶'
if (type === 3) return '未婚'
if (type === 2) return '离婚'
if (type === 1) return '已婚'
if (type === 0) return '无'
},
Employee(){
let msg = {
RB_Group_id: this.userInfo.RB_Group_id,
BranchId:-1,
DepartmentId:0,
PostId:0,
IsLeave:0,
}
this.apipost2(
"admin_get_EmployeeGetList",
this.msg,
res => {
if (res.data.resultCode == 1) {
this.EmployeeList = res.data.data;
} else {
}
},
err => {}
);
},
//锁定
locking(){
console.log('锁定')
},
//解锁
Unlock(){
console.log('解锁')
},
//删除团队成员
delCust(){
console.log('删除团队成员')
},
//删除
delete(){
console.log('删除')
},
//导出
export(){
console.log('导出')
},
// 更改状态
changeState(){
console.log('更改状态')
},
// 关注
CareforCustomer(scope){
this.apipost('/api/Customer/CareforGuesstCustomer', {ID: scope.row.ID}, res=>{
if (res.data.resultCode == 1) {
this.$message.success('操作成功');
this.getList()
}
})
},
// 转移
transfer(type){
if (type !== 2) {
if (type === 3) {
this.multipleSelection.push(this.CustomerId)
}
this.transferVisible = true
} else {
if (this.transferMsg.EmpId === '') {
return this.$message.error('请选择变更负责人！')
}
let str = ''
this.multipleSelection.map((x, i)=>{
str = str + x + ','
})
this.transferMsg.IDs = str.substring(0, str.length - 1)
this.apipost('/api/Customer/TransferGuesstCustomer', this.transferMsg, res=>{
if (res.data.resultCode == 1) {
this.multipleSelection = []
this.transferVisible = false
if (type === 3) {} {
this.drawer = false
}
this.$message.success(res.data.message);
this.getList()
this.transferMsg = {
IDs: [],
EmpId: ''
}
}
})
}
console.log('转移')
},
showMessageFromChild(list){
this.mySelectCtrl=!this.mySelectCtrl
if (list) {
this.queryType = list
this.getList()
}
},
editCust(){
this.dialogTableVisibleName = '修改直客'
this.dialogTableVisible = true
},
openDetails(scope){
this.drawer = true
this.CustomerId = scope.row.ID
this.CustomerName = scope.row.GusetName
},
handleSizeChange(val) {
this.msg.pageSize = val
this.getList();
},
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getList();
},
handleClose(done) {
done();
},
getList: function (){
this.tableData = []
this.loading = true
this.apipost('/api/sellevent/GetSellEventToC', this.msg, res=>{
if (res.data.resultCode == 1) {
this.tableData = res.data.data.pageData;
this.total = res.data.data.count;
this.loading = false;
}
})
},
handleSelectionChange(val) {
this.multipleSelection = val.map(x=>
x.ID
)
}
}
};
</script>
src/components/sellevent/index.vue
View file @ 3949c939
......@@ -7,8 +7,8 @@
<span>直客营销事件</span>
</div>
<div class="events">
<el-badge :value="2" :max="99" class="item">
<div class="event">
<el-badge :value="r[0]" :max="9999" class="item">
<div class="event" @click="goBirth">
<img src="../../assets/img/event/shengri.png" />
<div class="content">
<div class="ti">生日事件</div>
......@@ -20,17 +20,19 @@
</div>
</div>
</el-badge>
<div class="event">
<img src="../../assets/img/event/biye.png" />
<div class="content">
<div class="ti">毕业季事件</div>
<el-tooltip class="item" effect="dark" content="进入毕业季6-8月份正值初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息" placement="top">
<div class="desc">
进入毕业季6-8月份正值初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息
</div>
</el-tooltip>
<el-badge :value="r[1]" :max="9999" class="item">
<div class="event">
<img src="../../assets/img/event/biye.png" />
<div class="content">
<div class="ti">毕业季事件</div>
<el-tooltip class="item" effect="dark" content="进入毕业季6-8月份正值初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息" placement="top">
<div class="desc">
推荐3-6月发送一次，为考试前的加油函，6-9月发送一次为考试后的毕业恭喜函，提供初中，高中，大学学生毕业的客户名单，可以向客户或在关联同行发出恭贺函，并且关联部分产品信息
</div>
</el-tooltip>
</div>
</div>
</div>
</el-badge>
<div class="event">
<img src="../../assets/img/event/jieri.png" />
<div class="content">
......@@ -75,6 +77,7 @@
</el-tooltip>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
......@@ -128,6 +131,7 @@
</div>
</div>
</div>
<div class="event" style="cursor:default;">&nbsp;</div>
</div>
</el-col>
</el-row>
......@@ -136,7 +140,27 @@
<script>
export default {
data() {
return {
r:[0,0]
}
},
created() {
this.init();
},
methods:{
init(){
this.apipost("/api/SellEvent/GetSellEventToCCount",{},r=>{
console.log(r.data)
if(r.data.resultCode==1){
this.r=r.data.data
}
})
},
goBirth(){
this.$router.push('/birthdayEvent');
}
}
}
</script>
......@@ -170,6 +194,7 @@ export default {
height:370px;
background:rgba(244,245,249,1);
margin-bottom: 30px;
cursor: pointer;
}
.event-box .events .event img{
width:100%;
......
src/components/statistics/festivalOrderList.vue
View file @ 3949c939
......@@ -197,7 +197,7 @@
<div slot="header" class="clearfix">
<span>数据说明</span>
</div>
<div class="sjsm">
<div class="sjsm" style="height:225px;">
<div v-for="(item,index) in dataList" :key="index">
<div class="left">
<img :src="getImgSrc(item.FestivalName)" alt="">
......@@ -279,6 +279,7 @@ export default {
this.totalCount+=x.OrderCount;
})
}
});
},
//获取对应节日图片
......
src/components/statistics/job.vue
View file @ 3949c939
......@@ -194,59 +194,24 @@ export default {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetDutyTypeOrderList", {}, res => {
console.log("fdff",res)
this.strArr=[];
let data=res.data.data;
data.forEach(item=>{
this.strArr.push(item.DutyTypeName)
})
this.loading = false
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney+ res.data.data[2].ShopMoney,
one = res.data.data[0].ShopMoney,
two = res.data.data[1].ShopMoney,
three = res.data.data[2].ShopMoney,
contNum = res.data.data[0].OrderCount + res.data.data[1].OrderCount+ res.data.data[2].OrderCount,
zaiN = res.data.data[0].OrderCount,
twoN = res.data.data[1].OrderCount,
threeN = res.data.data[2].OrderCount;
let chartData = [], shopChartData = [];
chartData.push(
((zaiN/contNum)*100).toFixed(2)
)
chartData.push(
((twoN/contNum)*100).toFixed(2)
)
chartData.push(
((threeN/contNum)*100).toFixed(2)
)
shopChartData.push(
{
num: Number(((one/contShop)*100).toFixed(2)),
color: "#0D2481",
text: '娱乐'
}
)
shopChartData.push(
{
num: Number(((two/contShop)*100).toFixed(2)),
color: "#FFA475",
text: '教育'
}
)
shopChartData.push(
{
num: Number(((three/contShop)*100).toFixed(2)),
color: "#999",
text: '服务'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
console.log("this.chartData",this.chartData)
if(res.data.resultCode==1){
this.strArr=[];
let data=res.data.data;
var totalOrder=0;
var totalMoney=0;
data.forEach(item=>{
this.strArr.push(item.DutyTypeName);
totalOrder+=item.OrderCount;
totalMoney+=item.ShopMoney;
})
data.forEach(item=>{
this.chartData.push(((item.OrderCount/totalOrder)*100).toFixed(2));
})
this.orders=res.data.data;
}else{
this.$message.error(res.data.message);
}
});
}
}
......
src/components/statistics/marital.vue
View file @ 3949c939
......@@ -26,8 +26,17 @@
<div>
累计报名
<b>{{item.AgeCount}}</b> 人，关联购物金额
<b>{{(item.TotalMoney/10000).toFixed(2)}}万</b>，报名均价为：
<b>{{item.Unit_Price.toFixed(0)}}元</b>
<b>
<template v-if="item.TotalMoney">
{{(item.TotalMoney/10000).toFixed(2)}}
</template>
万
</b>，报名均价为：
<b>
<template v-if="item.Unit_Price">
{{item.Unit_Price.toFixed(0)}}
</template>
元</b>
</div>
<div>
最喜爱的产品
......
src/components/statistics/model/festivalChart.vue
View file @ 3949c939
......@@ -30,7 +30,7 @@ export default {
name:''
}
// obj.value=((x.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1);
obj.value=x.OrderCount;
obj.value=x.ShopMoney;
obj.name=x.FestivalName
this.data.push(obj);
});
......
src/components/statistics/old.vue
View file @ 3949c939
......@@ -26,8 +26,16 @@
<div>
累计报名
<b>{{item.AgeCount}}</b> 人，关联购物金额
<b>{{(item.TotalMoney/10000).toFixed(2)}}万</b>，报名均价为：
<b>{{item.Unit_Price.toFixed(0)}}元</b>
<b>
<template v-if="item.TotalMoney">
{{(item.TotalMoney/10000).toFixed(2)}}
</template>
万</b>，报名均价为：
<b>
<template v-if="item.Unit_Price">
{{item.Unit_Price.toFixed(0)}}
</template>
元</b>
</div>
<div>
最喜爱的产品
......
src/components/statistics/roomStatistical.vue 0 → 100644
View file @ 3949c939
<style>
.sex{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.sex .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.sex .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.sex .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.sex .conten-box .bottom{
flex: .8;
}
.sex .conten-box .left{
height: 100%;
}
.sex .conten-box .el-card.blue {
background: #0D2481!important;
color: #fff !important;
height: calc(100% - 2px);
}
.sex .conten-box .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.sex .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 20px 70px 10px 70px!important;
justify-content: space-between;
font-size: 14px;
}
.sex .sjsm{
display: flex;
flex-direction: column;
}
.sex .sjsm>div:nth-child(1){
margin-bottom: 20px;
}
.sex .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.sex .sjsm>div .left{
display: flex;
align-items: center;
}
.sex .sjsm>div .left img{
padding-right: 10px;
}
.sex .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.sex .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
</style>
<template>
<div class="sex" v-loading="loading">
<div class="statistics-title bold18">住房统计</div>
<div class="conten-box" v-if="!loading">
<el-row :gutter="25" class="top">
<el-col :span="16" class="left">
<el-card class="blue">
<div slot="header" class="clearfix">
<span>住房统计</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<el-col :span="10" class="img">
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/zhufang.png" alt="">
</div>
<p>住房</p>
</div>
</el-col>
<el-col :span="14" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr"/>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="8" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>购物统计<span class="font-size-12">（按平均计算）</span></span>
</div>
<shopChart :shopChartData="shopChartData"/>
</el-card>
</el-col>
</el-row>
<el-row :gutter="25" class="bottom" >
<el-col :span="16" style="height: 100%;">
<el-card style="height: 100%;">
<div slot="header" class="clearfix">
<span>数据说明</span>
</div>
<div style="height: 100%;" class="sjsm">
<div v-for="(item, index) in orderList" :key="index">
<div class="left">
<img v-if="item.NewHouseType==1" src="../../assets/img/tongji/room1.png" alt="">
<img v-if="item.NewHouseType==2" src="../../assets/img/tongji/room2.png" alt="">
<img v-if="item.NewHouseType==3" src="../../assets/img/tongji/room3.png" alt="">
<img v-if="item.NewHouseType==5" src="../../assets/img/tongji/room4.png" alt="">
<span class="font-size-12">{{item.HouseTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{orders[index].HouseCount}}</span>人，关联购物金额<span class="hight-font">{{orders[index].TotalMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
</div>
</div>
</div>
</el-card>
</el-col>
<el-col :span="8" style="height: 100%;">
<el-card style="height: 100%;">
<div slot="header" class="clearfix">
<el-row style="width:100%">
<el-col :span="12" size="30">
推荐解答
</el-col>
<!-- <el-col :span="12" class="right-title">
<i class="iconfont icondianzan1"></i> 点赞
</el-col> -->
</el-row>
</div>
<div class="situ">
<div class="c">根据对客户年龄段的统计，可以更好的了解不同年龄段客 人的喜根据对客户年龄段的统计。根据对客户年龄段的统 计，可以更好的了解不同年龄段客人的喜根据对客户年龄 段的统计</div>
<div class="bot" @click="drawer = true">
查看更多，参与讨论(1)
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
</el-card>
</el-col>
</el-row>
</div>
<el-drawer
size='695px'
:visible.sync="drawer"
direction="rtl"
:with-header="false">
<discussBox :id="discussID"/>
</el-drawer>
</div>
</template>
<script>
import sexChart from './model/sexChart'
import shopChart from './model/shopChart'
import discussBox from "./model/discussBox";
export default {
components: {
sexChart,
shopChart,
discussBox
},
data() {
return {
discussID: 0,
drawer: false,
chartData: [0, 0],
shopChartData: [],
loading: false,
strArr: ["70平米以下","71-90平米","91-120平米","未知"],
orders:[],
orderList:[],
};
},watch:{
},
mounted() {
this.GetSexOrderList();
this.getOrderInfo();
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetHouseShopList", {}, res => {
this.loading = false;
if(res.data.resultCode==1){
let contHouse = res.data.data[0].HouseCount + res.data.data[1].HouseCount+ res.data.data[2].HouseCount+ res.data.data[3].HouseCount,
one = res.data.data[0].HouseCount,
two = res.data.data[1].HouseCount,
three = res.data.data[2].HouseCount,
four= res.data.data[3].HouseCount,
contNum = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney,
oneN = res.data.data[0].TotalMoney,
twoN = res.data.data[1].TotalMoney,
threeN = res.data.data[2].TotalMoney,
fourN = res.data.data[3].TotalMoney;
let chartData = [], shopChartData = [];
chartData.push(
((one/contHouse)*100).toFixed(2)
)
chartData.push(
((two/contHouse)*100).toFixed(2)
)
chartData.push(
((three/contHouse)*100).toFixed(2)
)
chartData.push(
((four/contHouse)*100).toFixed(2)
)
shopChartData.push(
{
num: Number(((oneN/contNum)*100).toFixed(2)),
color: "#0D2481",
text: '70平米以下'
}
)
shopChartData.push(
{
num: Number(((twoN/contNum)*100).toFixed(2)),
color: "#FFA475",
text: '71-90平米'
}
)
shopChartData.push(
{
num: Number(((threeN/contNum)*100).toFixed(2)),
color: "#99BD7B",
text: '91-120平米'
}
)
shopChartData.push(
{
num: Number(((fourN/contNum)*100).toFixed(2)),
color: "#D2C9F1",
text: '未知'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
}else{
}
});
},
getOrderInfo(){
this.apipost("/api/Statistic/GetHouseOrderList", {}, res => {
if(res.data.resultCode==1){
this.orderList=res.data.data;
}
});
}
}
}
</script>
\ No newline at end of file
src/plugins/index.js
View file @ 3949c939
......@@ -11,7 +11,7 @@ export default {
},
//域名管理对象
Vue.prototype.domainManager = function () {
let domainUrl = "http://testcrm.oytour.com"
let domainUrl = "https://localhost:5001"
let locationName = window.location.hostname;
let domainPostUrl = "http://testapi.oytour.com"
if (this.isOnline()) {
......
src/router.js
View file @ 3949c939
......@@ -179,6 +179,14 @@ export default new Router({
title: "营销事件"
}
},
{
path: "/birthdayEvent",
name: "birthdayEvent",
component: ()=>import('./components/sellevent/brithday.vue'),
meta: {
title: "生日事件"
}
},
{
path: "/gaoxiao",
name: "gaoxiao",
......@@ -203,6 +211,14 @@ export default new Router({
title: "资产"
}
},
{
path: "/roomStatistical",
name: "roomStatistical",
component: ()=>import('./components/statistics/roomStatistical.vue'),
meta: {
title: "住房统计"
}
},
{
path: "/season",
name: "season",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment