Skip to content

T
techbook
Commit d2f19131 authored by zhangyanni's avatar zhangyanni
Browse files
Options

弹框

parent a1308a3e
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 698 additions and 13 deletions
package.json
View file @ d2f19131
......@@ -14,6 +14,7 @@
"babel-plugin-component": "^1.1.1",
"babel-polyfill": "^6.26.0",
"core-js": "^2.6.5",
"echarts": "^4.5.0",
"element-ui": "^2.11.1",
"es6-promise": "^4.2.8",
"html2canvas": "^1.0.0-rc.3",
......
public/css/common.scss
View file @ d2f19131
......@@ -1867,6 +1867,7 @@ body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, texta
.middleFormDialog.dashboardDialog .el-dialog__body{
padding:0 20px !important;
border-bottom:unset;
}
......@@ -2016,4 +2017,5 @@ body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, texta
background: url(http://cstaticdun.126.net//2.6.3/images/icon_light.f13cff3.png) 0 -437px;
background-size: 34px 471px;
}
}
\ No newline at end of file
public/js/techbook.js 0 → 100644
View file @ d2f19131
This diff is collapsed.
src/common/lang/zh.js
View file @ d2f19131
......@@ -4133,8 +4133,9 @@ module.exports = {
userBBDialogAmount:"大客户数",
userDialogEmail:"邮箱注册",
userDialogPhone:"手机号注册",
beginTime:"开始日期",
endTime:"结束日期",
zhi:"至",
......
src/components/dashboard/projectCmpt.vue 0 → 100644
View file @ d2f19131
<template>
<div>
<el-dialog class="middleFormDialog dashboardDialog"
:title="$t('adminDash.projectDialogTitle')"
:visible.sync="visible"
width="900px" :show-close="true"
:close-on-click-modal="false"
closeable
@close="handleCancel"
center>
<div class="content">
<div class="amountBox">
<div class="amountDiv">
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogAmount")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userSBDialogAmount")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userBBDialogAmount")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogEmail")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogPhone")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogPhone")}}</p>
</span>
</div>
</div>
<div class="lineEchartsBox">
<div class="tabDiv">
<span :class="tabIndex==1?'activeSpan':''" @click="handleTab(1)">{{$t("adminDash.today")}}</span>
<span :class="tabIndex==2?'activeSpan':''" @click="handleTab(2)">{{$t("adminDash.sevenDays")}}</span>
<el-date-picker
value-format="yyyy-MM-dd"
size="mini"
v-model="valueDate"
type="daterange"
@change="searchClick"
:range-separator="$t('adminDash.zhi')"
:start-placeholder="$t('adminDash.beginTime')"
:end-placeholder="$t('adminDash.beginTime')">
</el-date-picker>
</div>
<div class="contentEchart">
<div class="userEcharts" ref="userEcharts"></div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import echarts from 'echarts';
import '../../../public/js/techbook';
export default {
name: "projectCmpt",
data() {
return {
visible: true,
tabIndex:1,
valueDate:"",
legendData:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
dataOption:{
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[],
bottom:0
},
grid: {
top:"7%",
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle:{
normal:{
color: function (params) {
let colorList = [
"#07835F",
"#07835F",
"#07835F",
"#FFD600",
];
return colorList[params.dataIndex];
},
lineStyle:{
normal:{
color: function (params) {
let colorList = [
"#07835F",
"#07835F",
"#07835F",
"#FFD600",
];
return colorList[params.dataIndex];
},
}
}
}
}
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
}
},
methods: {
handleCancel() {
this.visible = false;
this.$emit("isVisible", this.visible);
},
handleTab(type){
this.tabIndex = type;
},
searchClick(data){
console.log(data)
},
getInitEcharts(){
this.$nextTick(function () {
let mapChart = this.$refs.userEcharts,
resultEchart;
mapChart.style.width = "100%";
mapChart.style.height = '410px';
resultEchart = echarts.init(mapChart, 'techbook');
this.dataOption.legend.data = this.legendData;
resultEchart.setOption(this.dataOption, true);
});
}
},
mounted(){
this.getInitEcharts();
}
}
</script>
<style scoped lang="scss">
.content{
}
.amountBox{
padding:15px 0;
border-bottom: 1px solid #E8EAF3;
}
.amountDiv {
display: -webkit-flex; /*新版本语法：chrome 21+*/
display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
align-items: center;
padding-top: 15px;
padding-bottom: 10px;
flex-wrap: wrap;
&>span{
width: 16.6%;
text-align: center;
&>p:first-of-type{
font-size: 30px;
font-weight: 500;
color: #3F3F53;
line-height: 42px;
}
&>p:last-of-type{
color: #69697A;
line-height: 20px;
}
}
}
.lineEchartsBox{
padding: 25px 20px;
.tabDiv{
color: #3F3F53;
&>span{
display: inline-block;
padding: 4px 10px;
font-size: 12px;
text-align: center;
cursor: pointer;
&.activeSpan{
color: #fff;
background: #5d78ff;
border-radius: 3px;
}
}
}
.contentEchart{
padding-bottom:20px;
.echartTitle{
padding-top: 20px;
color: #3F3F53;
font-weight:500;
}
}
.userEcharts{
width: 100%;
height: 410px;
}
}
</style>
\ No newline at end of file
src/components/dashboard/requireCmpt.vue 0 → 100644
View file @ d2f19131
<template>
<div>
<el-dialog class="middleFormDialog dashboardDialog"
:title="$t('adminDash.requireDialogTitle')"
:visible.sync="visible"
width="900px" :show-close="true"
:close-on-click-modal="false"
closeable
@close="handleCancel"
center>
<div class="content">
<div class="amountBox">
<div class="amountDiv">
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogAmount")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userSBDialogAmount")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userBBDialogAmount")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogEmail")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogPhone")}}</p>
</span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogPhone")}}</p>
</span>
</div>
</div>
<div class="lineEchartsBox">
<div class="tabDiv">
<span :class="tabIndex==1?'activeSpan':''" @click="handleTab(1)">{{$t("adminDash.today")}}</span>
<span :class="tabIndex==2?'activeSpan':''" @click="handleTab(2)">{{$t("adminDash.sevenDays")}}</span>
<el-date-picker
value-format="yyyy-MM-dd"
size="mini"
v-model="valueDate"
type="daterange"
@change="searchClick"
:range-separator="$t('adminDash.zhi')"
:start-placeholder="$t('adminDash.beginTime')"
:end-placeholder="$t('adminDash.beginTime')">
</el-date-picker>
</div>
<div class="contentEchart">
<div class="userEcharts" ref="userEcharts"></div>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import echarts from 'echarts';
import '../../../public/js/techbook';
export default {
name: "requireCmpt",
data() {
return {
visible: true,
tabIndex:1,
valueDate:"",
legendData:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
dataOption:{
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[],
bottom:0
},
grid: {
top:"7%",
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle:{
normal:{
color: function (params) {
let colorList = [
"#07835F",
"#07835F",
"#07835F",
"#FFD600",
];
return colorList[params.dataIndex];
},
lineStyle:{
normal:{
color: function (params) {
let colorList = [
"#07835F",
"#07835F",
"#07835F",
"#FFD600",
];
return colorList[params.dataIndex];
},
}
}
}
}
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
}
},
methods: {
handleCancel() {
this.visible = false;
this.$emit("isVisible", this.visible);
},
handleTab(type){
this.tabIndex = type;
},
searchClick(data){
console.log(data)
},
getInitEcharts(){
this.$nextTick(function () {
let mapChart = this.$refs.userEcharts,
resultEchart;
mapChart.style.width = "100%";
mapChart.style.height = '410px';
resultEchart = echarts.init(mapChart, 'techbook');
this.dataOption.legend.data = this.legendData;
resultEchart.setOption(this.dataOption, true);
});
}
},
mounted(){
this.getInitEcharts();
}
}
</script>
<style scoped lang="scss">
.content{
}
.amountBox{
padding:15px 0;
border-bottom: 1px solid #E8EAF3;
}
.amountDiv {
display: -webkit-flex; /*新版本语法：chrome 21+*/
display: -webkit-box; /*老版本语法：Safari,iOS,Android browser,old Webkit browser*/
display: -moz-box; /*老版本语法：Firefox(buggy)*/
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
align-items: center;
padding-top: 15px;
padding-bottom: 10px;
flex-wrap: wrap;
&>span{
width: 16.6%;
text-align: center;
&>p:first-of-type{
font-size: 30px;
font-weight: 500;
color: #3F3F53;
line-height: 42px;
}
&>p:last-of-type{
color: #69697A;
line-height: 20px;
}
}
}
.lineEchartsBox{
padding: 25px 20px;
.tabDiv{
color: #3F3F53;
&>span{
display: inline-block;
padding: 4px 10px;
font-size: 12px;
text-align: center;
cursor: pointer;
&.activeSpan{
color: #fff;
background: #5d78ff;
border-radius: 3px;
}
}
}
.contentEchart{
padding-bottom:20px;
.echartTitle{
padding-top: 20px;
color: #3F3F53;
font-weight:500;
}
}
.userEcharts{
width: 100%;
height: 410px;
}
}
</style>
\ No newline at end of file
src/components/dashboard/userCmpt.vue
View file @ d2f19131
......@@ -35,9 +35,7 @@
<p>29182</p>
<p>{{$t("adminDash.userDialogPhone")}}</p>
</span>
</div>
<div class="amountDiv">
<span>
<span>
<p>29182</p>
<p>{{$t("adminDash.userDialogAmount")}}</p>
</span>
......@@ -67,6 +65,23 @@
<div class="tabDiv">
<span :class="tabIndex==1?'activeSpan':''" @click="handleTab(1)">{{$t("adminDash.today")}}</span>
<span :class="tabIndex==2?'activeSpan':''" @click="handleTab(2)">{{$t("adminDash.sevenDays")}}</span>
<el-date-picker
value-format="yyyy-MM-dd"
size="mini"
v-model="valueDate"
type="daterange"
@change="searchClick"
:range-separator="$t('adminDash.zhi')"
:start-placeholder="$t('adminDash.beginTime')"
:end-placeholder="$t('adminDash.beginTime')">
</el-date-picker>
</div>
<div class="contentEchart" style="border-bottom: 1px solid #E8EAF3;">
<div class="userEcharts" ref="userEcharts"></div>
</div>
<div class="contentEchart">
<p class="echartTitle">{{$t("completeInfo.channelTitle")}}</p>
<div class="userEcharts" ref="registerEcharts"></div>
</div>
</div>
</div>
......@@ -75,12 +90,103 @@
</template>
<script>
import echarts from 'echarts';
import '../../../public/js/techbook';
export default {
name: "userCmpt",
data() {
return {
visible: true,
tabIndex:1
tabIndex:1,
valueDate:"",
userLegendData:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],
registerLegendData:['邮件营销','联盟广告','视频广告','直接访问'],
dataOption:{
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
legend: {
data:[],
bottom:0
},
grid: {
top:"7%",
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日']
},
yAxis: {
type: 'value'
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210],
itemStyle:{
normal:{
color: function (params) {
let colorList = [
"#07835F",
"#07835F",
"#07835F",
"#FFD600",
];
return colorList[params.dataIndex];
},
lineStyle:{
normal:{
color: function (params) {
let colorList = [
"#07835F",
"#07835F",
"#07835F",
"#FFD600",
];
return colorList[params.dataIndex];
},
}
}
}
}
},
{
name:'联盟广告',
type:'line',
stack: '总量',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:'视频广告',
type:'line',
stack: '总量',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:'直接访问',
type:'line',
stack: '总量',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:'搜索引擎',
type:'line',
stack: '总量',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
}
},
methods: {
......@@ -91,7 +197,30 @@
handleTab(type){
this.tabIndex = type;
},
searchClick(data){
console.log(data)
},
getInitEcharts(type){
this.$nextTick(function () {
let mapChart = type==1?this.$refs.userEcharts:this.$refs.registerEcharts,
resultEchart;
mapChart.style.width = "100%";
mapChart.style.height = '410px';
resultEchart = echarts.init(mapChart, 'techbook');
this.dataOption.legend.data = type==1?this.userLegendData:this.registerLegendData;
resultEchart.setOption(this.dataOption, true);
});
}
},
mounted(){
this.getInitEcharts(1);
this.getInitEcharts(2);
}
}
</script>
......@@ -100,7 +229,7 @@
.content{
}
.amountBox{
padding:15px 0;
padding:5px 0;
border-bottom: 1px solid #E8EAF3;
}
.amountDiv {
......@@ -110,13 +239,12 @@
display: -ms-flexbox; /*混合版本语法：IE 10*/
display: flex; /*新版本语法:opera 12.1,Firefox 22+*/
align-items: center;
justify-content: center;
padding-top: 15px;
padding-bottom: 10px;
flex-wrap: wrap;
&>span{
margin:0 25px;
flex: 1;
width: 16.6%;
text-align: center;
margin: 15px 0;
&>p:first-of-type{
font-size: 30px;
font-weight: 500;
......@@ -146,5 +274,17 @@
}
}
}
.contentEchart{
padding-bottom:20px;
.echartTitle{
padding-top: 20px;
color: #3F3F53;
font-weight:500;
}
}
.userEcharts{
width: 100%;
height: 410px;
}
}
</style>
\ No newline at end of file
src/views/dashboard/pages/index.vue
View file @ d2f19131
......@@ -485,17 +485,26 @@
<!--用户数-->
<userCmpt v-if="userDialogVisible" @isVisible="isUserVisible"></userCmpt>
<!--项目数-->
<projectCmpt v-if="projectDialogVisible" @isVisible="isProjectVisible"></projectCmpt>
<!--需求数-->
<requireCmpt v-if="requireDialogVisible" @isVisible="isRequireVisible"></requireCmpt>
</div>
</template>
<script>
import api from '../api/api';
import userCmpt from '../../../components/dashboard/userCmpt';
import projectCmpt from '../../../components/dashboard/projectCmpt';
import requireCmpt from '../../../components/dashboard/requireCmpt';
export default {
name: "adminDashboardIndex",
components:{
userCmpt
userCmpt,
projectCmpt,
requireCmpt
},
data() {
return {
......@@ -889,11 +898,19 @@
this.projectDialogVisible = true;
},
isProjectVisible(data){
this.projectDialogVisible = data;
},
//需求总数
handleRequireDialog(){
this.requireDialogVisible = true;
},
isRequireVisible(data){
this.requireDialogVisible = data;
},
},
mounted() {
this.getAuditDataFunc();
......
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