Skip to content

C
CRM
Commit e7c86e1e authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

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

parents 00ab6181 79fbfa50
Hide whitespace changes
Inline Side-by-side
Showing with 3044 additions and 163 deletions
src/App.vue
View file @ e7c86e1e
......@@ -30,7 +30,7 @@ export default {
@import './assets/css/tablevoerride.css';
@import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_s7tjzgwbg5i.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 @ e7c86e1e
......@@ -8,6 +8,7 @@
.customerManage .tools h1{
font-weight: bold;
font-size: 18px;
font-family: perfectFont;
}
.customerManage .tools .rightmenu{
display: flex;
......
src/components/HomeNav/HomeNavLeft.vue
View file @ e7c86e1e
......@@ -2,7 +2,7 @@
.home-nav {
width: 100%;
height: 100%;
font-family: perfectFont;
/* font-family: perfectFont; */
user-select: none;
}
.log-box {
......@@ -44,7 +44,7 @@
background-color: rgba(13, 36, 129, 1);
}
.home-nav .home-menu .home-menu-item.active > div {
font-weight: bold;
/* font-weight: bold; */
color: rgba(13, 36, 129, 1);
opacity: 1;
transition: all linear 0.2s;
......
src/components/sellevent/brithday.vue 0 → 100644
View file @ e7c86e1e
<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 0 → 100644
View file @ e7c86e1e
<template>
<div class="event-box">
<el-row :gutter="60" style="width:100%">
<el-col :span="12" style="border-right: 1px dotted #8BABF8">
<div class="event-title">
<span class="titleicon"></span>
<span>直客营销事件</span>
</div>
<div class="events">
<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>
<el-tooltip class="item" effect="dark" content="近七日即将过生日的客户，可以向客户或者关联同行发送生日涵" placement="top">
<div class="desc">
近七日即将过生日的客户，可以向客户或者关联同行发送生日涵
</div>
</el-tooltip>
</div>
</div>
</el-badge>
<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>
</el-badge>
<div class="event">
<img src="../../assets/img/event/jieri.png" />
<div class="content">
<div class="ti">节日事件</div>
<el-tooltip class="item" effect="dark" content="系统内置跨年、元旦、情人节、妇女节等等10多种节日模板，可以快速发送给客人祝福" placement="top">
<div class="desc">
系统内置跨年、元旦、情人节、妇女节等等10多种节日模板，可以快速发送给客人祝福
</div>
</el-tooltip>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/jinji.png" />
<div class="content">
<div class="ti">突发事件</div>
<el-tooltip class="item" effect="dark" content=" 产生突发事件，例如极端天气、灾难、事故快速通知所有的客人。" placement="top">
<div class="desc">
产生突发事件，例如极端天气、灾难、事故快速通知所有的客人。
</div>
</el-tooltip>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/yijian.png" />
<div class="content">
<div class="ti">意见反馈事件</div>
<el-tooltip class="item" effect="dark" content="客户填写了意见调查以后， 可以快速批量转发给关联同行" placement="top">
<div class="desc">
客户填写了意见调查以后， 可以快速批量转发给关联同行
</div>
</el-tooltip>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/nexttrip.png" />
<div class="content">
<div class="ti">下次出行事件</div>
<el-tooltip class="item" effect="dark" content="跟进客人填写的意见调查的下次出游计划，提前一个月的时间发出提醒，可以把相关产品信息发送给客人或关联同行" placement="top">
<div class="desc">
跟进客人填写的意见调查的下次出游计划，提前一个月的时间发出提醒，可以把相关产品信息发送给客人或关联同行
</div>
</el-tooltip>
</div>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="event-title">
<span class="titleicon yellow"></span>
<span>同行营销事件</span>
</div>
<div class="events">
<div class="event">
<img src="../../assets/img/event/newline.png" />
<div class="content">
<div class="ti">新线路推广</div>
<div class="desc">
在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
</div>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/newteam.png" />
<div class="content">
<div class="ti">新系列推广</div>
<div class="desc">
在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
</div>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/weidan.png" />
<div class="content">
<div class="ti">尾单发送</div>
<div class="desc">
在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
</div>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/jieri.png" />
<div class="content">
<div class="ti">节日事件</div>
<div class="desc">
在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
</div>
</div>
</div>
<div class="event">
<img src="../../assets/img/event/fanyong.png" />
<div class="content">
<div class="ti">返佣、幸福存折通知</div>
<div class="desc">
在客户生日的时候，发送一封祝贺函，能让客户感受到印象之旅的温度，也能让同行感受到印象无微不至的关怀。
</div>
</div>
</div>
<div class="event" style="cursor:default;">&nbsp;</div>
</div>
</el-col>
</el-row>
</div>
</template>
<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>
<style>
.event-box{
}
.event-box .event-title .titleicon{
display:inline-block;
width:4px;
height:14px;
background: #0D2481;
margin-right: 10px;
}
.event-box .event-title .titleicon.yellow{
background:#FFA475;
}
.event-box .event-title{
font-size:14px;
font-weight: 900;
font-family: perfectFont;
}
.event-box .events{
display: flex;
flex-flow:row wrap;
justify-content: space-between;
margin-top:30px;
}
.event-box .events .event{
width:248px;
height:370px;
background:rgba(244,245,249,1);
margin-bottom: 30px;
cursor: pointer;
}
.event-box .events .event img{
width:100%;
height: 268px;
}
.event-box .events .event .content{
height: 102px;
padding:19px;
box-sizing: border-box;
border:1px solid #ddd;
border-top:none;
margin-top:-4px;
}
.event-box .events .event .content .ti{
font-size:14px;
font-family:perfectFont;
font-weight:bold;
margin-bottom: 15px;
}
.event-box .events .event .content .desc{
height:34px;
font-size:12px;
font-family:Microsoft YaHei;
font-weight:400;
color:rgba(17,17,17,1);
line-height: 17px;
overflow: hidden;
text-overflow: ellipsis;
line-clamp: 2;
}
</style>
\ No newline at end of file
src/components/statistics/Opinionpolls.vue 0 → 100644
View file @ e7c86e1e
<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;
}
.Opinionpolls .conten-box .top{
flex: 1!important;
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;
}
.sex .secondDiv .el-card .el-card__header{
border: none!important;
font-size: 14px;
color:#111111;
font-weight: bold!important;
padding: 18px 20px 0 18px!important;
}
.Opinionpolls .countryUl li{
position: relative;
padding: 20px 0;
border-bottom: 1px solid #E2E4EF;
display: flex;
align-items: center;
}
.Opinionpolls .countryUl li .rightSpan{
position: absolute;
right: 0;
bottom: 20px;
}
.Opinionpolls .countryUl li img{
width:40px;
height:26px;
border-radius:6px;
}
.Opinionpolls .countryUl li:nth-child(1) .index{
color:#FFA475
}
.Opinionpolls .countryUl li:nth-child(2) .index{
color:#94B877
}
.Opinionpolls .countryUl li:nth-child(3) .index{
color:#0D2481
}
.Opinionpolls .countryUl li:nth-child(4) .index{
color:#55BDE9
}
.Opinionpolls .timeUl li{
position: relative;
}
.timeChart{
width: 100%;
height: 300px;
}
</style>
<template>
<div class="sex Opinionpolls" 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="6" style="height: 100%;">
<el-card style="height: calc(100% - 2px);background:#FFA475">
<p style="color:#FDFEFE;margin-top:15px;font-size:14px" >意见调查总和</p>
<div>
<img style="width:80%;display:block;margin:0 auto" src="../../assets/img/tongji/yj1.png" alt="">
<img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt="">
</div>
</el-card>
</el-col>
<el-col :span="18" class="left">
<el-card>
<div slot="header" class="clearfix">
<span>季节统计</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<sexChart :myData="chartData" :strArr="strArr"/>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row :gutter="22" class="secondDiv" style="margin-bottom:30px">
<el-col :span="9" style="height: 100%;">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>首选印象产品</span>
</div>
<shopChart :shopChartData="shopChartData"/>
</el-card>
</el-col>
<el-col :span="7">
<el-card style="height: calc(100% - 2px);">
<div slot="header" class="clearfix">
<span>下次出行时间</span>
</div>
<!-- <sexChart :myData="chartData" :strArr="strArr"/> -->
<div id="timeChart" class="timeChart" ref="timeChart"></div>
</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>
</div>
<ul class="countryUl">
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12">票</span> </span>
</li>
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12">票</span> </span>
</li>
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12">票</span> </span>
</li>
<li>
<span class="index" style="font-size:14px">NO.1</span>
<img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt="">
<span style="font-size:18px;">日本</span>
<span class="rightSpan">16520<span class="font-size-12">票</span> </span>
</li>
</ul>
</el-card>
</el-col>
</el-row>
<el-row :gutter="22" 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 orders" :key="index">
<div class="left">
<img v-if="item.SeasonType === 1" src="../../assets/img/tongji/cj.png" alt="">
<img v-if="item.SeasonType === 2" src="../../assets/img/tongji/xj.png" alt="">
<img v-if="item.SeasonType === 3" src="../../assets/img/tongji/qj.png" alt="">
<img v-if="item.SeasonType === 4" src="../../assets/img/tongji/dj.png" alt="">
<span class="font-size-12">{{item.SeasonTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.StudentCount}}</span>人，关联购物金额<span class="hight-font">{{item.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: [1,2,3,4],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['春季', '夏季', '秋季', '冬季'],
orders:[]
};
},watch:{
},
mounted() {
this.GetSexOrderList()
this.initTimeChart();
},
methods: {
initTimeChart(){
// let myChart = this.$echarts.init(this.$refs.timeChart);
var myChart = this.$echarts.init(document.getElementById('timeChart'));
console.log("myChart",myChart)
let option={
xAxis: {
// show : false,
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
// show : false,
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
}
}]
};
console.log("option",option)
myChart.setOption(option);
},
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSeasonShopList", {}, res => {
console.log("dsafsaf",res);
let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney,
one = res.data.data[0].TotalMoney,
two = res.data.data[1].TotalMoney,
three = res.data.data[2].TotalMoney,
four= res.data.data[3].TotalMoney,
contNum = res.data.data[0].SeasonCount + res.data.data[1].SeasonCount+ res.data.data[2].SeasonCount+ res.data.data[3].SeasonCount,
oneN = res.data.data[0].SeasonCount,
twoN = res.data.data[1].SeasonCount,
threeN = res.data.data[2].SeasonCount,
fourN = res.data.data[3].SeasonCount;
let chartData = [], shopChartData = [];
chartData.push(
((oneN/contNum)*100).toFixed(2)
)
chartData.push(
((twoN/contNum)*100).toFixed(2)
)
chartData.push(
((threeN/contNum)*100).toFixed(2)
)
chartData.push(
((fourN/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: "#99BD7B",
text: '秋季'
}
)
shopChartData.push(
{
num: Number(((four/contShop)*100).toFixed(2)),
color: "#D2C9F1",
text: '冬季'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
this.getOrders()
});
},
getOrders(){
this.apipost("/api/Statistic/GetSeasonOrderList", {}, res => {
console.log(res)
res.data.data.forEach(x => {
this.orders[x.NewSeasonType - 1].LtName = x.LtName;
this.orders[x.NewSeasonType - 1].Unit_Price = x.Unit_Price;
});
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
src/components/statistics/assets.vue 0 → 100644
View file @ e7c86e1e
<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/zc.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 orders" :key="index">
<div class="left">
<img v-if="index==0" src="../../assets/img/tongji/in1.png" alt="">
<img v-if="index==1" src="../../assets/img/tongji/in2.png" alt="">
<img v-if="index==2" src="../../assets/img/tongji/in3.png" alt="">
<span class="font-size-12">{{item.ZiChanTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.OrderCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</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: [],
SexOrder: [],
loading: false,
strArr: ['10万以下', '10-50万', '50万以上'],
orders:[]
};
},watch:{
},
mounted() {
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetZiChanOrderOrderList", {}, res => {
// this.SexOrder = res.data.data
this.loading = false
console.log("res.data.data",res.data.data)
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney+ res.data.data[2].ShopMoney,
zai = res.data.data[0].ShopMoney,
bi = res.data.data[1].ShopMoney,
ot = 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,
biN = res.data.data[1].OrderCount,
otN = res.data.data[2].OrderCount;
let chartData = [], shopChartData = [];
chartData.push(
((zaiN/contNum)*100).toFixed(2)
)
chartData.push(
((biN/contNum)*100).toFixed(2)
)
chartData.push(
((otN/contNum)*100).toFixed(2)
)
shopChartData.push(
{
num: Number(((zai/contShop)*100).toFixed(2)),
color: "#0D2481",
text: '10万以下'
}
)
shopChartData.push(
{
num: Number(((bi/contShop)*100).toFixed(2)),
color: "#FFA475",
text: '10-50万'
}
)
shopChartData.push(
{
num: Number(((ot/contShop)*100).toFixed(2)),
color: "#999",
text: '50万以上'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
// console.log("this.orders",this.orders)
});
},
}
}
</script>
\ No newline at end of file
src/components/statistics/festivalOrderList.vue 0 → 100644
View file @ e7c86e1e
<style>
.festivalOrder{
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.festivalOrder .conten-box{
display: flex;
flex-direction: column;
height: calc(100% - 62px);
}
.festivalOrder .conten-box .el-card .el-card__header {
font-weight: normal !important;
}
.festivalOrder .conten-box .top{
flex: 1.2;
margin-bottom: 25px;
}
.festivalOrder .conten-box .bottom{
flex: .8;
}
.festivalOrder .conten-box .left{
height: 100%;
}
.festivalOrder .conten-box .el-card.blue {
background: #0D2481!important;
color: #fff !important;
height: calc(100% - 2px);
}
.festivalOrder .conten-box .el-card .el-card__body {
padding:0 20px 20px 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
.festivalOrder .conten-box .img {
display: flex;
align-items: flex-end;
text-align: center;
padding: 27px 0 0 40px!important;
justify-content: center;
font-size: 14px;
}
.festivalOrder .sjsm{
height: 198px;
overflow: auto;
}
.festivalOrder .sjsm>div{
margin-bottom: 20px;
}
.festivalOrder .sjsm>div:last-child{
margin-bottom: 0px;
}
.festivalOrder .sjsm>div{
flex: 1;
background:rgba(244,245,249,1);
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
}
.festivalOrder .sjsm>div .left{
display: flex;
align-items: center;
font-size: 14px;
font-family: 'perfectFont';
font-weight: 900;
}
.festivalOrder .sjsm>div .left img{
padding-right: 10px;
}
.festivalOrder .sjsm>div .right{
text-align: right;
color: #888888;
font-size: 12px;
}
.festivalOrder .hight-font{
color: #0D2481 !important;
font-size: 14px;
}
.fesIcon{
display:inline-block;
width:12px;
height:12px;
border-radius: 50%;
position: relative;
top:1px;
}
.fes1{
background-color: #FFAF86;
}
.fes2{
background-color: #97BC7A;
}
.fes3{
background-color: #D2C9F1;
}
.fes4{
background-color: #24B896;
}
.fes5{
background-color: #ED70E9;
}
.fes6{
background-color: #F3C108;
}
.fes7{
background-color: #6EBCE2;
}
.fesList{
float:left;
margin-right:90px;
font-size:14px;
font-family: '微软雅黑';
}
.fesSpan2{
display:inline-block;
margin:0 30px 30px 8px;
}
.fesList:nth-of-type(even){
margin-right:0!important;
}
.botTaolun{
position: absolute;
bottom:15px;
right:25px;
cursor: pointer;
color:#FFA475;
font-size:12px;
}
.fesRemind{
color:#111111;
font-size:12px;
line-height: 20px;
margin-top:15px;
}
.comListDiv{
float:left;
width:10%;
height:30px;
}
.clearfix:after {content: "\0020";display: block;height: 0;clear: both;}
</style>
<template>
<div class="festivalOrder" 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%;margin-top:60px;">
<el-col :span="10" class="img">
<div>
<div style="margin-bottom: 10px;">
<img src="../../assets/img/tongji/jieri.png" alt="">
</div>
<!-- <p>亲子出游</p> -->
</div>
</el-col>
<el-col :span="14" style="height: 100%;">
<div class="clearfix" style="width:350px;">
<div class="fesList" v-for="(item,index) in dataList" :key="index">
<span class="fesIcon" :class="{'fes1': item.FestivalName=='元旦', 'fes2': item.FestivalName=='春节','fes3': item.FestivalName=='清明',
'fes4': item.FestivalName=='端午','fes5': item.FestivalName=='中秋','fes6': item.FestivalName=='国庆','fes7': item.FestivalName=='劳动',
}"></span><span class="fesSpan2">{{item.FestivalName}}</span>
<span>{{getPercent(item)}}</span>
</div>
</div>
<div class="clearfix" style="width:350px;margin-top:20px;display:flex;">
<div class="comListDiv" :class="{'fes1': item.FestivalName=='元旦', 'fes2': item.FestivalName=='春节','fes3': item.FestivalName=='清明',
'fes4': item.FestivalName=='端午','fes5': item.FestivalName=='中秋','fes6': item.FestivalName=='国庆','fes7': item.FestivalName=='劳动',
}" v-for="(item,index) in dataList" :key="index" :style="{'width': getPercent(item)}"></div>
</div>
</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>
<festivalChart v-if="isShowFeature" :dataList="dataList" :totalCount="totalCount"/>
</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 class="sjsm" style="height:225px;">
<div v-for="(item,index) in dataList" :key="index">
<div class="left">
<img :src="getImgSrc(item.FestivalName)" alt="">
<p>{{item.FestivalName}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.OrderCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</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="fesRemind">根据对客户年龄段的统计，可以更好的了解不同年龄段客 人的喜根据对客户年龄段的统计。根据对客户年龄段的统 计，可以更好的了解不同年龄段客人的喜根据对客户年龄 段的统计</div>
<div class="botTaolun" @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 festivalChart from './model/festivalChart'
import discussBox from "./model/discussBox";
export default {
components: {
festivalChart,
discussBox
},
data() {
return {
loading: false,
dataList:[],
totalCount:0,
discussID: 0,
drawer: false,
isShowFeature:false,
};
},watch:{
},
mounted() {
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetFestivalOrderList", {}, res => {
this.loading=false;
this.dataList=res.data.data;
this.isShowFeature=true;
this.totalCount=0;
if(this.dataList&&this.dataList.length>0){
this.dataList.forEach(x=>{
this.totalCount+=x.OrderCount;
})
}
});
},
//获取对应节日图片
getImgSrc(item){
let str=''
switch(item) {
case '元旦':
str=require('../../assets/img/tongji/yuandan.png')
break;
case '中秋':
str=require('../../assets/img/tongji/zhongqiu.png')
break;
case '劳动':
str=require('../../assets/img/tongji/laodong.png')
break;
case '国庆':
str=require('../../assets/img/tongji/guoqing.png')
break;
case '春节':
str=require('../../assets/img/tongji/chunjie.png')
break;
case '清明':
str=require('../../assets/img/tongji/qingmin.png')
break;
case '端午':
str=require('../../assets/img/tongji/duanwu.png')
break;
}
return str;
},
//获取百分百
getPercent(item){
return (Math.round(item.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1) + "%"
}
}
}
</script>
\ No newline at end of file
src/components/statistics/job.vue
View file @ e7c86e1e
......@@ -114,14 +114,18 @@
<span>数据说明</span>
</div>
<div class="sjsm">
<div v-for="(item, index) in 9" :key="index">
<div v-for="(item, index) in orders" :key="index">
<div class="left">
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
<img v-if="index==0" src="../../assets/img/tongji/qinzhi.png" alt="">
<img v-else-if="index==1" src="../../assets/img/tongji/miyue.png" alt="">
<img v-else-if="index==2" src="../../assets/img/tongji/in3.png" alt="">
<img v-else-if="index==3" src="../../assets/img/tongji/d1.png" alt="">
<img v-else-if="index==4" src="../../assets/img/tongji/hanjia.png" alt="">
<img v-else src="../../assets/img/tongji/qinzhi.png" alt="">
<span class="font-size-12">{{item.DutyTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.SexCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>累计报名<span class="hight-font">{{item.OrderCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
</div>
</div>
......@@ -172,43 +176,43 @@ export default {
},
data() {
return {
orders:[],
discussID: 0,
drawer: false,
chartData: [50, 30, 20, 10, 60, 30],
chartData: [],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['教育', '服务', '科研', '农业', '管理', '娱乐']
strArr: ['娱乐', '教育', '服务']
};
},watch:{
},
mounted() {
// this.GetSexOrderList()
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
Number(((man/contShop)*100).toFixed(0))
)
shopChartData.push(
Number(((woman/contShop)*100).toFixed(0))
)
this.chartData = chartData
this.shopChartData = shopChartData
this.apipost("/api/Statistic/GetDutyTypeOrderList", {}, res => {
this.loading = false
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 @ e7c86e1e
......@@ -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/marriage.vue
View file @ e7c86e1e
......@@ -33,7 +33,7 @@
height: calc(100% - 2px);
}
.marriage .conten-box .el-card .el-card__body {
padding: 20px;
padding: 20px 20px 0 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
}
......@@ -92,8 +92,8 @@
<span style="color: #303133">报名统计</span>
</div>
<el-row :gutter="80" style="height: 100%;">
<el-col :span="24" style="height: 100%;">
<marriageChart :chartData="chartData" :strArr="strArr"/>
<el-col :span="24" style="height: 350px;">
<marriageChart v-if="isShow" :chartData="chartData" :strArr="strArr"/>
</el-col>
</el-row>
</el-card>
......@@ -103,7 +103,7 @@
<div slot="header" class="clearfix">
<span>购物统计<span class="font-size-12">（按平均计算）</span></span>
</div>
<marriageLineChart :chartData="chartData" :strArr="strArr"/>
<marriageLineChart style="height:350px;" v-if="isShow" :chartData="shopChartData" :strArr="strArr"/>
</el-card>
</el-col>
</el-row>
......@@ -114,14 +114,17 @@
<span>数据说明</span>
</div>
<div class="sjsm">
<div v-for="(item, index) in 9" :key="index">
<div v-for="(item, index) in dataList" :key="index">
<div class="left">
<img v-if="item.Sex === 1" src="../../assets/img/tongji/man1.png" alt="">
<img v-else src="../../assets/img/tongji/woman1.png" alt="">
<span class="font-size-12">{{item.SexStr}}士</span>
<img v-if="item.Marriage === 1" src="../../assets/img/tongji/yihun.png" alt="">
<img v-if="item.Marriage === 2" src="../../assets/img/tongji/woman1.png" alt="">
<img v-if="item.Marriage === 3" src="../../assets/img/tongji/weihun.png" alt="">
<img v-if="item.Marriage === 4" src="../../assets/img/tongji/yihun.png" alt="">
<img v-if="item.Marriage === 5" src="../../assets/img/tongji/yihun.png" alt="">
<span class="font-size-12">{{item.MarriageName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.SexCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>累计报名<span class="hight-font">{{item.MarriageCount}}</span>人，关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
</div>
</div>
......@@ -176,50 +179,69 @@ export default {
return {
discussID: 1,
drawer: false,
chartData: [50, 30, 20, 10, 60],
shopChartData: [50, 30, 20, 10, 60],
chartData: [],
shopChartData: [],
SexOrder: [],
loading: false,
strArr: ['亲子', '蜜月', '夕阳红', '暑期', '寒假'],
strArr: [],
BbsList: [],
isShow:false,
orders:[],
dataList:[]
};
},watch:{
},
mounted() {
// this.GetSexOrderList()
this.GetBbsListByType()
this.initData();
},
methods: {
GetBbsListByType(){
this.apipost("/api/Customer/GetBbsListByType", {t: 1}, res => {
this.BbsList = res.data.data
initData() {
this.apipost("/api/Statistic/GetMarriageShopList", {}, res => {
if(res.data.resultCode==1){
this.strArr=[];
let data=res.data.data;
var totalOrder=0;
var totalMoney=0;
var chartData=[];
var shopChartData=[];
data.forEach(item=>{
this.strArr.push(item.MarriageName);
totalOrder+=item.MarriageCount;
totalMoney+=item.TotalMoney;
})
data.forEach(item=>{
chartData.push(parseFloat(((item.MarriageCount/totalOrder)*100).toFixed(2)));
shopChartData.push(parseFloat(((item.TotalMoney/totalMoney)*100).toFixed(2)))
})
this.chartData=chartData;
this.shopChartData = shopChartData;
this.isShow=true;
this.orders=res.data.data;
this.initOrders(this.orders);
}else{
this.$message.error(res.data.message);
}
});
},
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
let chartData = [], shopChartData = [];
chartData.push(
((manN/contNum)*100).toFixed(2)
)
chartData.push(
((womanN/contNum)*100).toFixed(2)
)
shopChartData.push(
Number(((man/contShop)*100).toFixed(0))
)
shopChartData.push(
Number(((woman/contShop)*100).toFixed(0))
)
this.chartData = chartData
this.shopChartData = shopChartData
this.loading = false
initOrders(orders) {
this.apipost("/api/Statistic/GetMarriageOrderList", {}, res => {
if(res.data.resultCode==1){
let data=res.data.data;
orders.forEach(x=>{
data.forEach(y=>{
if(x.Marriage==y.Marriage){
x.LtName=y.LtName;
x.Unit_Price=y.Unit_Price;
}
})
})
this.dataList = orders;
}else{
this.$message.error(res.data.message);
}
});
}
}
}
}
</script>
\ No newline at end of file
src/components/statistics/model/festivalChart.vue 0 → 100644
View file @ e7c86e1e
<style>
.sexChart{
height: 100%;
}
</style>
<template>
<div class="sexChart" ref="sexChart">
</div>
</template>
<script>
export default {
props: ["dataList","totalCount"],
data() {
return {
nameList:[],
data:[],
};
},watch:{
},
mounted() {
if(this.dataList&&this.dataList.length>0){
this.data=[];
this.dataList.forEach(x => {
this.nameList.push(x.FestivalName);
let obj={
value:0,
name:''
}
// obj.value=((x.OrderCount / this.totalCount * 10000) / 100.00).toFixed(1);
obj.value=x.ShopMoney;
obj.name=x.FestivalName
this.data.push(obj);
});
}
this.init()
let myChart = this.$echarts.init(this.$refs.sexChart);
window.addEventListener("resize", () => {
myChart.resize();
});
},
methods: {
init(){
let myChart = this.$echarts.init(this.$refs.sexChart);
let option = {
title: {
text: '',
subtext: '',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: []
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: this.data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
myChart.setOption(option);
}
}
}
</script>
\ No newline at end of file
src/components/statistics/old.vue
View file @ e7c86e1e
......@@ -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 @ e7c86e1e
<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/components/statistics/season.vue 0 → 100644
View file @ e7c86e1e
<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/jj.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 orders" :key="index">
<div class="left">
<img v-if="item.SeasonType === 1" src="../../assets/img/tongji/cj.png" alt="">
<img v-if="item.SeasonType === 2" src="../../assets/img/tongji/xj.png" alt="">
<img v-if="item.SeasonType === 3" src="../../assets/img/tongji/qj.png" alt="">
<img v-if="item.SeasonType === 4" src="../../assets/img/tongji/dj.png" alt="">
<span class="font-size-12">{{item.SeasonTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.StudentCount}}</span>人，关联购物金额<span class="hight-font">{{item.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: [],
SexOrder: [],
loading: false,
strArr: ['春季', '夏季', '秋季', '冬季'],
orders:[]
};
},watch:{
},
mounted() {
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSeasonShopList", {}, res => {
console.log("dsafsaf",res);
let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney,
one = res.data.data[0].TotalMoney,
two = res.data.data[1].TotalMoney,
three = res.data.data[2].TotalMoney,
four= res.data.data[3].TotalMoney,
contNum = res.data.data[0].SeasonCount + res.data.data[1].SeasonCount+ res.data.data[2].SeasonCount+ res.data.data[3].SeasonCount,
oneN = res.data.data[0].SeasonCount,
twoN = res.data.data[1].SeasonCount,
threeN = res.data.data[2].SeasonCount,
fourN = res.data.data[3].SeasonCount;
let chartData = [], shopChartData = [];
chartData.push(
((oneN/contNum)*100).toFixed(2)
)
chartData.push(
((twoN/contNum)*100).toFixed(2)
)
chartData.push(
((threeN/contNum)*100).toFixed(2)
)
chartData.push(
((fourN/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: "#99BD7B",
text: '秋季'
}
)
shopChartData.push(
{
num: Number(((four/contShop)*100).toFixed(2)),
color: "#D2C9F1",
text: '冬季'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
this.getOrders()
});
},
getOrders(){
this.apipost("/api/Statistic/GetSeasonOrderList", {}, res => {
console.log(res)
res.data.data.forEach(x => {
this.orders[x.NewSeasonType - 1].LtName = x.LtName;
this.orders[x.NewSeasonType - 1].Unit_Price = x.Unit_Price;
});
this.loading = false
});
}
}
}
</script>
\ No newline at end of file
src/components/statistics/tourType.vue
View file @ e7c86e1e
......@@ -125,54 +125,18 @@
<span>数据说明</span>
</div>
<div class="sjsm">
<div>
<div v-for="(item, index) in orders" :key="index">
<div class="left">
<img src="../../assets/img/tongji/qinzhi.png" alt="">
<p>{{strArr[0]}}</p>
<img v-if="index==0" src="../../assets/img/tongji/qinzhi.png" alt="">
<img v-if="index==1" src="../../assets/img/tongji/miyue.png" alt="">
<img v-if="index==2" src="../../assets/img/tongji/in3.png" alt="">
<img v-if="index==3" src="../../assets/img/tongji/d1.png" alt="">
<img v-if="index==4" src="../../assets/img/tongji/hanjia.png" alt="">
<span class="font-size-12">{{item.TravelTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src='../../assets/img/tongji/miyue.png' alt="">
<p>{{strArr[1]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src='../../assets/img/tongji/xiyang.png' alt="">
<p>{{strArr[2]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src="../../assets/img/tongji/shujia.png" alt="">
<p>{{strArr[3]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
</div>
</div>
<div>
<div class="left">
<img src='../../assets/img/tongji/hanjia.png' alt="">
<p>{{strArr[4]}}</p>
</div>
<div class="right">
<p>累计报名<span class="hight-font">6800</span>人，关联购物金额<span class="hight-font">57952.67</span>万，报名均价为<span class="hight-font">8152.69</span>元</p>
<p>最喜爱产品<span class="hight-font">《椿山庄假期》</span></p>
<p>累计报名<span class="hight-font">{{item.TravelCount}}</span>人，关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
<p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
</div>
</div>
</div>
......@@ -191,7 +155,7 @@
</el-row>
</div>
<div class="situ">
<div class="c">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<div class="c">根据对出游类型的统计可以，更好的了解不同出游类型客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
<div class="bot" @click="drawer = true">
查看更多，参与讨论(1)
<i class="el-icon-d-arrow-right"></i>
......@@ -222,30 +186,11 @@ export default {
},
data() {
return {
orders:[],
discussID: 0,
drawer: false,
chartData: [17,5,20,37,21],
shopChartData: [{
text:'亲子',
num:17,
color:'#0D2481'
},{
text:'蜜月',
num:5,
color:'#FFA97C'
},{
text:'夕阳红',
num:20,
color:'#98BD7B'
},{
text:'暑期',
num:37,
color:'#D2C9F1'
},{
text:'寒假',
num:21,
color:'#6EBCE2'
}],
chartData: [],
shopChartData: [],
SexOrder: [17,5,20,37,21],
loading: false,
strArr: ['亲子', '蜜月', '夕阳红', '暑期', '寒假'],
......@@ -265,34 +210,118 @@ export default {
},
mounted() {
// this.GetSexOrderList()
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.apipost("/api/Statistic/GetSexOrderList", {}, res => {
this.SexOrder = res.data.data
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney, man = res.data.data[0].ShopMoney, woman = res.data.data[1].ShopMoney,
contNum = res.data.data[0].SexCount + res.data.data[1].SexCount, manN = res.data.data[0].SexCount, womanN = res.data.data[1].SexCount;
this.apipost("/api/Statistic/GetTravelTypeShopList", {}, res => {
this.strArr=[];
let data=res.data.data;
data.forEach(item=>{
this.strArr.push(item.TravelTypeName)
})
let contShop = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney+ res.data.data[4].TotalMoney,
one = res.data.data[0].TotalMoney,
two = res.data.data[1].TotalMoney,
three = res.data.data[2].TotalMoney,
four= res.data.data[3].TotalMoney,
five= res.data.data[4].TotalMoney,
contNum = res.data.data[0].TravelCount + res.data.data[1].TravelCount+ res.data.data[2].TravelCount+ res.data.data[3].TravelCount+ res.data.data[4].TravelCount,
oneN = res.data.data[0].TravelCount,
twoN = res.data.data[1].TravelCount,
threeN = res.data.data[2].TravelCount,
fourN = res.data.data[3].TravelCount,
fiveN = res.data.data[4].TravelCount;
let chartData = [], shopChartData = [];
// chartData.push(
// ((manN/contNum)*100).toFixed(2)
// )
// chartData.push(
// ((womanN/contNum)*100).toFixed(2)
// )
// shopChartData.push(
// Number(((man/contShop)*100).toFixed(0))
// )
// shopChartData.push(
// Number(((woman/contShop)*100).toFixed(0))
// )
if(contNum==0){
chartData=[0,0,0,0,0];
}else{
chartData.push(
((oneN/contNum)*100).toFixed(2)
)
chartData.push(
((twoN/contNum)*100).toFixed(2)
)
chartData.push(
((threeN/contNum)*100).toFixed(2)
)
chartData.push(
((fourN/contNum)*100).toFixed(2)
)
chartData.push(
((fiveN/contNum)*100).toFixed(2)
)
}
if(contShop==0){
let colorArr=['#0D2481','#FFA475','#99BD7B','#D2C9F1','#6EBCE2'];
let strArr=this.strArr;
for(let i=0;i<5;i++){
shopChartData.push(
{
num: 0,
color: colorArr[i],
text: strArr[i]
}
)
}
}else{
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: "#99BD7B",
text: '夕阳红'
}
)
shopChartData.push(
{
num: Number(((four/contShop)*100).toFixed(2)),
color: "#D2C9F1",
text: '暑假'
}
)
shopChartData.push(
{
num: Number(((five/contShop)*100).toFixed(2)),
color: "#6EBCE2",
text: '寒假'
}
)
}
this.chartData = chartData
//this.shopChartData = shopChartData
this.chartData.
console.log("this.chartData",this.chartData)
this.shopChartData = shopChartData
this.orders=res.data.data;
this.getOrders();
});
},
getOrders(){
this.apipost("/api/Statistic/GetTravelTypeOrderList", {}, res => {
this.loading = false
// console.log("res",res);
res.data.data.forEach(x => {
this.orders[x.NewTravelType - 1].LtName = x.LtName;
this.orders[x.NewTravelType - 1].Unit_Price = x.Unit_Price;
});
});
}
}
}
}
</script>
\ No newline at end of file
src/components/statistics/unit.vue 0 → 100644
View file @ e7c86e1e
<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/zc.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: 198px;overflow: auto;" class="sjsm">
<div v-for="(item, index) in orders" :key="index">
<div class="left">
<img v-if="index==0" src="../../assets/img/tongji/qinzhi.png" alt="">
<img v-else-if="index==1" src="../../assets/img/tongji/miyue.png" alt="">
<img v-else-if="index==2" src="../../assets/img/tongji/in3.png" alt="">
<img v-else-if="index==3" src="../../assets/img/tongji/d1.png" alt="">
<img v-else-if="index==4" src="../../assets/img/tongji/hanjia.png" alt="">
<img v-else src="../../assets/img/tongji/qinzhi.png" alt="">
<span class="font-size-12">{{item.UnitTypeName}}</span>
</div>
<div class="right">
<p>累计报名<span class="hight-font">{{item.OrderCount}}</span>人，关联购物金额<span class="hight-font">{{item.ShopMoney}}</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: [],
SexOrder: [],
loading: false,
strArr: ['世界500强', '事业单位', '其他',"教育机构"],
orders:[]
};
},watch:{
},
mounted() {
this.GetSexOrderList()
},
methods: {
GetSexOrderList(){
this.loading = true
this.strArr=[];
this.apipost("/api/Statistic/GetUnitTypeOrderList", {}, res => {
// this.SexOrder = res.data.data
let data=res.data.data;
data.forEach(item=>{
this.strArr.push(item.UnitTypeName)
})
this.loading = false
let contShop = res.data.data[0].ShopMoney + res.data.data[1].ShopMoney+ res.data.data[2].ShopMoney+ res.data.data[3].ShopMoney+ res.data.data[4].ShopMoney,
one = res.data.data[0].ShopMoney,
two = res.data.data[1].ShopMoney,
three = res.data.data[2].ShopMoney,
four = res.data.data[3].ShopMoney,
five = res.data.data[4].ShopMoney,
contNum = res.data.data[0].OrderCount + res.data.data[1].OrderCount+ res.data.data[2].OrderCount+ res.data.data[3].OrderCount+ res.data.data[4].OrderCount,
zaiN = res.data.data[0].OrderCount,
twoN = res.data.data[1].OrderCount,
threeN = res.data.data[2].OrderCount,
fourN = res.data.data[3].OrderCount,
fiveN = res.data.data[4].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)
)
chartData.push(
((fourN/contNum)*100).toFixed(2)
)
chartData.push(
((fiveN/contNum)*100).toFixed(2)
)
shopChartData.push(
{
num: Number(((one/contShop)*100).toFixed(2)),
color: "#0D2481",
text: '世界500强'
}
)
shopChartData.push(
{
num: Number(((two/contShop)*100).toFixed(2)),
color: "#FFA475",
text: '事业单位'
}
)
shopChartData.push(
{
num: Number(((three/contShop)*100).toFixed(2)),
color: "#999",
text: '其他'
}
)
shopChartData.push(
{
num: Number(((four/contShop)*100).toFixed(2)),
color: "#6EBCE2",
text: '教育机构'
}
)
shopChartData.push(
{
num: Number(((five/contShop)*100).toFixed(2)),
color: "#98BD7B",
text: '聚集'
}
)
this.chartData = chartData
this.shopChartData = shopChartData
this.orders=res.data.data;
// console.log("this.orders",this.orders)
});
},
}
}
</script>
\ No newline at end of file
src/plugins/index.js
View file @ e7c86e1e
......@@ -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 @ e7c86e1e
......@@ -155,6 +155,14 @@ export default new Router({
title: "出游类型统计"
}
},
{
path: "/festivalOrderList",
name: "festivalOrderList",
component: ()=>import('./components/statistics/festivalOrderList.vue'),
meta: {
title: "特殊节假日统计"
}
},
{
path: "/marriage",
name: "marriage",
......@@ -163,6 +171,22 @@ export default new Router({
title: "婚姻统计"
}
},
{
path: "/sellevent",
name: "sellevent",
component: ()=>import('./components/sellevent/index.vue'),
meta: {
title: "营销事件"
}
},
{
path: "/birthdayEvent",
name: "birthdayEvent",
component: ()=>import('./components/sellevent/brithday.vue'),
meta: {
title: "生日事件"
}
},
{
path: "/gaoxiao",
name: "gaoxiao",
......@@ -179,6 +203,47 @@ export default new Router({
title: "职业类型统计"
}
},
{
path: "/assets",
name: "assets",
component: ()=>import('./components/statistics/assets.vue'),
meta: {
title: "资产"
}
},
{
path: "/roomStatistical",
name: "roomStatistical",
component: ()=>import('./components/statistics/roomStatistical.vue'),
meta: {
title: "住房统计"
}
},
{
path: "/season",
name: "season",
component: ()=>import('./components/statistics/season.vue'),
meta: {
title: "季节"
}
},
{
path: "/Opinionpolls",
name: "Opinionpolls",
component: ()=>import('./components/statistics/Opinionpolls.vue'),
meta: {
title: "意见调查"
}
},
{
path: "/unit",
name: "unit",
component: ()=>import('./components/statistics/unit.vue'),
meta: {
title: "单位"
}
},
{
path: "/contractManagement",
name: "contractManagement",
......
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