Commit 391ac978 authored by 罗超's avatar 罗超

上次

parent aa5dd55a
...@@ -17,6 +17,8 @@ ...@@ -17,6 +17,8 @@
"html2canvas": "^1.0.0-alpha.12", "html2canvas": "^1.0.0-alpha.12",
"js-md5": "^0.7.3", "js-md5": "^0.7.3",
"jspdf": "^1.4.1", "jspdf": "^1.4.1",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"moment": "^2.22.2", "moment": "^2.22.2",
"register-service-worker": "^1.0.0", "register-service-worker": "^1.0.0",
"tinymce": "^5.1.6", "tinymce": "^5.1.6",
...@@ -29,14 +31,17 @@ ...@@ -29,14 +31,17 @@
"vuex": "^3.0.1", "vuex": "^3.0.1",
"vxe-table": "^2.7.24", "vxe-table": "^2.7.24",
"webpack-require-http": "^0.4.3", "webpack-require-http": "^0.4.3",
"x-data-spreadsheet": "^1.0.28",
"xe-utils": "^2.3.0" "xe-utils": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.4.1", "@vue/cli-plugin-babel": "^3.4.1",
"@vue/cli-plugin-pwa": "^3.0.4", "@vue/cli-plugin-pwa": "^3.0.4",
"@vue/cli-service": "^3.0.4", "@vue/cli-service": "^3.0.4",
"awesome-typescript-loader": "^5.2.1",
"stylus": "^0.54.5", "stylus": "^0.54.5",
"stylus-loader": "^3.0.2", "stylus-loader": "^3.0.2",
"typescript": "^3.8.2",
"vue-cli-plugin-element": "^1.0.0", "vue-cli-plugin-element": "^1.0.0",
"vue-template-compiler": "^2.5.17" "vue-template-compiler": "^2.5.17"
}, },
......
...@@ -28,7 +28,8 @@ export default { ...@@ -28,7 +28,8 @@ export default {
<style> <style>
@import './assets/global/font.css'; @import './assets/global/font.css';
@import '//at.alicdn.com/t/font_1627123_3p2i0yd7sda.css'; @import '//at.alicdn.com/t/font_1627123_wc1bt4oc9pm.css';
@import url('//at.alicdn.com/t/font_1655735_w2e0nofnibn.css');
/* @import './assets/css/common.css'; */ /* @import './assets/css/common.css'; */
@import './assets/css/init.css'; @import './assets/css/init.css';
@import './assets/css/tablevoerride.css'; @import './assets/css/tablevoerride.css';
......
<template>
<div id="x-spreadsheet"></div>
</template>
<script>
import Spreadsheet from "x-data-spreadsheet";
import zhCN from "x-data-spreadsheet/dist/locale/zh-cn";
export default {
created() {},
mounted() {
Spreadsheet.locale("zh-cn", zhCN);
const s = new Spreadsheet("#x-spreadsheet",{
showToolbar: true,
showGrid: true,
showContextmenu: true,
view: {
height: () => document.querySelector("#x-spreadsheet").clientHeight-25,
width: () => document.querySelector("#x-spreadsheet").clientWidth,
}
})
//.loadData({}) // load data1
.change(data => {
console.log(data)
});
//s.validate();
}
};
</script>
<style>
#x-spreadsheet{
width: 100%;
height: 100%;
overflow: auto;
}
/* .x-spreadsheet-toolbar,
.x-spreadsheet-sheet
{
max-width: 100% !important;
max-height: 100% !important;
} */
</style>
<template>
<div class="old-box">
<div class="statistics-title">婚姻状态统计</div>
<el-row :gutter="25" style="height:calc(100% - 62px)">
<el-col span="12" style="height:100%;">
<div class="left-content">
<div class="content" style="margin-top:0;">
<el-card class="blue">
<div slot="header" class="clearfix">
<span>报名统计</span>
</div>
<orders v-if="isLoaded" :scaleData="scaleData" />
</el-card>
</div>
<div class="content">
<el-card class>
<div slot="header" class="clearfix">
<span>数据说明</span>
</div>
<div class="item" v-for="(item, index) in showChats" :key="index">
<div class="l">
<i class="iconfont" :class="[item.icon]"></i>
{{item.name}}
</div>
<div class="r">
<div>
累计报名
<b>{{item.AgeCount}}</b> 人,关联购物金额
<b>{{(item.TotalMoney/10000).toFixed(2)}}</b>,报名均价为:
<b>{{item.Unit_Price.toFixed(0)}}</b>
</div>
<div>
最喜爱的产品
<b>{{item.LtName}}</b>
</div>
</div>
</div>
</el-card>
</div>
</div>
</el-col>
<el-col span="12" style="height:100%;">
<div class="left-content">
<div class="content" style="margin-top:0;">
<el-card class="blue">
<div slot="header" class="clearfix">
<span>购物统计(按平均计算)</span>
</div>
<shopping v-if="isLoaded" :scaleData="moneys"></shopping>
</el-card>
</div>
<div class="content">
<el-card class>
<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">
查看更多,参与讨论(19)
<i class="el-icon-d-arrow-right"></i>
</div>
</div>
</el-card>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import shopping from "./old/shopping";
import orders from "./old/orders";
export default {
components: {
shopping,
orders
},
data() {
return {
scaleData: [],
showChats: [],
moneys: [],
isLoaded: false,
icons: [
"icon-yihun-hong",
"icon-lihundengji",
"icon-weihun-lan",
"icon-sangjia",
"icon-weizhi"
],
nams: [
"已婚",
"离婚",
"未婚",
"丧偶",
"其他未知"
]
};
},
mounted() {
this.init();
},
methods: {
init() {
this.apipost("/api/Statistic/GetMarriageShopList", {}, res => {
res.data.data.forEach(x => {
this.scaleData.push({
name: x.MarriageName,
value: x.MarriageCount
});
this.moneys.push({
name: x.MarriageName,
value: x.TotalMoney
});
this.showChats.push({
name: this.nams[x.Marriage - 1],
icon: this.icons[x.Marriage - 1],
AgeCount: x.MarriageCount,
TotalMoney: x.TotalMoney
});
});
this.initOrders();
});
},
initOrders() {
this.apipost("/api/Statistic/GetMarriageOrderList", {}, res => {
res.data.data.forEach(x => {
this.showChats[x.Marriage - 1].LtName = x.LtName;
this.showChats[x.Marriage - 1].Unit_Price = x.Unit_Price;
});
this.isLoaded = true;
});
}
}
};
</script>
<style>
.old-box {
height: calc(100% - 25px);
}
.statistics-title {
font-size: 24px;
color: #111;
margin-bottom: 30px;
font-family: perfectFont;
}
.t-item {
margin-bottom: 30px;
width: 100%;
}
.title {
font-size: 18px;
color: #222;
margin-bottom: 20px;
font-family: perfectFont;
font-weight: bold;
}
.t-item .first {
display: flex;
margin-bottom: 20px;
}
.t-item .first .t {
font-size: 14px;
color: #333;
flex: 1;
/* font-family: perfectFont;
font-weight: bold; */
}
.t-item .first .v {
font-size: 16px;
color: #333;
flex: 1;
text-align: right;
font-family: perfectFont;
font-weight: bold;
}
.t-item .second {
height: 36px;
width: 100%;
background: url("../../assets/img/tongji/yr.png") repeat-x;
color: rgb(16, 137, 62);
}
.t-item .second .chosen {
overflow: hidden;
height: 26px;
white-space: nowrap;
display: flex;
}
.t-item .second.et {
color: rgb(227, 0, 140);
background: url("../../assets/img/tongji/et.png") repeat-x;
}
.t-item .second.sn {
color: rgb(0, 120, 215);
background: url("../../assets/img/tongji/sn.png") repeat-x;
}
.t-item .second.qn {
color: rgb(3, 131, 135);
background: url("../../assets/img/tongji/qn.png") repeat-x;
}
.t-item .second.zn {
color: rgb(116, 77, 169);
background: url("../../assets/img/tongji/zn.png") repeat-x;
}
.t-item .second.zhn {
color: rgb(234, 0, 94);
background: url("../../assets/img/tongji/zhn.png") repeat-x;
}
.t-item .second.ln {
color: rgb(132, 117, 69);
background: url("../../assets/img/tongji/lr.png") repeat-x;
}
.t-item .second .chosen i {
font-size: 26px;
}
.situ {
/* width: 100%;*/
height: 100%;
}
.situ .head {
height: 36px;
display: flex;
line-height: 36px;
margin: 10px 0;
/* border-bottom: 1px solid #EEE; */
}
.right-title {
text-align: right;
font-size: 14px;
color: #666;
}
.right-title i {
font-size: 16px;
margin-right: 5px;
color: #ccc;
}
.situ .c {
font-size: 14px;
color: #333;
height: calc(100% - 20px);
overflow-y: auto;
}
.situ .bot {
height: 20px;
line-height: 20px;
/* text-decoration: underline; */
cursor: pointer;
color: rgb(13, 36, 129);
font-size: 12px;
text-align: right;
}
.left-content {
height: 100%;
display: flex;
flex-direction: column;
}
.left-content .content {
flex: 1;
margin-top: 25px;
position: relative;
}
.left-content .content .el-card {
overflow-y: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.left-content .content .el-card .el-card__header {
font-weight: normal !important;
}
.left-content .content .el-card.blue {
background: #04243e !important;
color: #fff !important;
}
.left-content .content .el-card .el-card__body {
padding: 20px;
height: calc(100% - 98px);
max-height: calc(100% - 98px);
overflow-y: auto;
}
.left-content .content .el-card .el-card__body .item {
line-height: 36px;
border-bottom: 1px dotted #eee;
font-size: 12px;
display: flex;
}
.left-content .content .el-card .el-card__body .item i {
font-size: 14px;
color: #0d2481;
margin-right: 5px;
}
.left-content .content .el-card .el-card__body .item b {
font-size: 16px;
font-family: perfectFont;
color: #409eff;
}
.left-content .content .el-card .el-card__body .item .l {
width: 120px;
}
.left-content .content .el-card .el-card__body .item .r {
flex: 1;
text-align: right;
}
</style>
\ No newline at end of file
This diff is collapsed.
<template>
<div ref="myChart" style="width:100%;height:100%;"></div>
</template>
<script>
export default {
props: {
scaleData: {
type: Array,
default: []
}
},
data() {
return {
sumMoney: 0,
kys: [],
datas: []
};
},
mounted() {
console.log(this.scaleData);
this.scaleData.forEach(x => {
this.sumMoney += x.value;
});
this.scaleData.forEach(x => {
this.datas.push(((x.value / this.sumMoney).toFixed(2) * 100).toFixed(0));
this.kys.push(x.name);
});
this.sumMoney = 100;
this.initChat();
},
methods: {
initChat() {
let t = this;
let option = {
// backgroundColor: "#FFF",
grid: {
left: "40px",
top: "10px",
bottom: "20px",
right: "0px"
},
xAxis: {
data: this.kys,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255, 129, 109, 0.1)",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: "#999",
fontSize: 12
}
}
},
yAxis: [
{
max: 100,
min: 0,
interval: 10,
splitNumber: 2,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255, 129, 109, 0.1)",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: "#999"
},
formatter: "{value} %"
},
splitArea: {
areaStyle: {
color: "rgba(255,255,255,.5)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255, 129, 109, 0.1)",
width: 0.5,
type: "dashed"
}
}
}
],
series: [
{
name: "hill",
type: "pictorialBar",
barCategoryGap: "0%",
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
label: {
show: true,
position: "top",
distance: 15,
color: "rgba(227,0,140, 1)",
fontWeight: "bolder",
fontSize: 16,
formatter: "{c}%"
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(227,0,140, 1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(227,0,140,.4)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
opacity: 1
}
},
data: this.datas,
z: 10
}
]
};
let myChart = t.$echarts.init(this.$refs.myChart);
myChart.setOption(option);
}
}
};
</script>
<style>
</style>
\ No newline at end of file
<template>
<div ref="myChart" style="width:100%;height:100%;"></div>
</template>
<script>
export default {
props: {
scaleData: {
type: Array,
default: []
}
},
data() {
return {
sumMoney: 0,
kys: [],
datas: []
};
},
mounted() {
this.scaleData.forEach(x => {
this.sumMoney += x.value;
});
this.scaleData.forEach(x => {
this.datas.push((x.value / this.sumMoney).toFixed(2) * 100);
this.kys.push(x.name);
});
this.sumMoney = 100;
this.initChat();
},
methods: {
initChat() {
let t = this;
let option = {
// backgroundColor: "#FFF",
grid: {
left: "40px",
top: "10px",
bottom: "20px",
right: "0px"
},
xAxis: {
data: this.kys,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255, 129, 109, 0.1)",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: "#999",
fontSize: 12
}
}
},
yAxis: [
{
max: 100,
min: 0,
interval: 10,
splitNumber: 2,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: "rgba(255, 129, 109, 0.1)",
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: "#999"
},
formatter: "{value} %"
},
splitArea: {
areaStyle: {
color: "rgba(255,255,255,.5)"
}
},
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255, 0.1)",
width: 0.5,
type: "dashed"
}
}
}
],
series: [
{
name: "hill",
type: "pictorialBar",
barCategoryGap: "0%",
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
label: {
show: true,
position: "top",
distance: 15,
color: "rgba(16,137,62, 1)",
fontWeight: "bolder",
fontSize: 18,
formatter: "{c}%"
},
itemStyle: {
normal: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "rgba(16,137,62, 1)" // 0% 处的颜色
},
{
offset: 1,
color: "rgba(16,137,62,.4)" // 100% 处的颜色
}
],
global: false // 缺省为 false
}
},
emphasis: {
opacity: 1
}
},
data: this.datas,
z: 10
}
]
};
let myChart = t.$echarts.init(this.$refs.myChart);
myChart.setOption(option);
}
}
};
</script>
<style>
</style>
\ No newline at end of file
...@@ -10,6 +10,7 @@ import clueManagement from "./components/clueManagement/clueManagement" ...@@ -10,6 +10,7 @@ import clueManagement from "./components/clueManagement/clueManagement"
import contactsManagement from "./components/contactsManagement/contactsManagement" import contactsManagement from "./components/contactsManagement/contactsManagement"
import watersManagement from "./components/watersManagement/watersManagement" import watersManagement from "./components/watersManagement/watersManagement"
import waitMatter from "./components/waitMatter/waitMatter" import waitMatter from "./components/waitMatter/waitMatter"
import datasheet from './components/datasheet/index'
Vue.use(Router); Vue.use(Router);
export default new Router({ export default new Router({
...@@ -109,6 +110,30 @@ export default new Router({ ...@@ -109,6 +110,30 @@ export default new Router({
meta: { meta: {
title: "待办事项" title: "待办事项"
} }
},
{
path: "/datasheet",
name: "datasheet",
component: datasheet,
meta: {
title: "数据明细"
}
},
{
path: "/old",
name: "old",
component: ()=>import('./components/statistics/old.vue'),
meta: {
title: "客户年龄分布统计"
}
},
{
path: "/marital",
name: "marital",
component: ()=>import('./components/statistics/marital.vue'),
meta: {
title: "客户婚姻状态统计"
}
} }
] ]
}, },
......
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