Commit 96162b51 authored by 黄奎's avatar 黄奎

页面修改

parent b52edba8
......@@ -5,14 +5,8 @@
<h1>每日引流统计</h1>
</div>
<div style="width: 340px;">
<el-date-picker
v-model="msg.month"
type="month"
icon="el-icon-date"
slot="append"
class="input-with-select"
@change="changeMonthHandler"
placeholder="选择查询的月份">
<el-date-picker v-model="msg.month" type="month" icon="el-icon-date" slot="append" class="input-with-select"
@change="changeMonthHandler" placeholder="选择查询的月份">
</el-date-picker>
</div>
<div class="rightmenu">
......@@ -27,10 +21,16 @@
</div>
</div>
<div class="page-content" style="padding-bottom:20px;">
<el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;height:100%;" border :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
<el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;height:100%;" border
:cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
<el-table-column>
<template slot-scope="scope">
<span class="pointer" @click="seeDetails(scope.row)">{{scope.row.DateStr}}</span>
<template v-if="scope.row.YearStr>0&&scope.row.MonthStr>0">
<span class="pointer" style="color:blue;text-decoration:underline;" @click="seeDetails(scope.row)">{{scope.row.DateStr}}</span>
</template>
<template v-else>
<span>{{scope.row.DateStr}} </span>
</template>
</template>
</el-table-column>
<el-table-column prop="PushCount" label="引流总数">
......@@ -75,15 +75,15 @@
<script>
import clueComponent from "@/components/clueManagement/clueComponent";
export default {
export default {
components: {
clueComponent
},
data() {
return {
queryTime:{
StartTime:'',
EndTime:''
queryTime: {
StartTime: '',
EndTime: ''
},
drawer: false,
isDrawer: true,
......@@ -111,13 +111,13 @@ export default {
done();
},
// 查看详情
seeDetails(row){
seeDetails(row) {
var d = new Date();
var currentY = this.msg.YearStr;
var currentM = this.msg.MonthStr;
var MonthDayNum = new Date(currentY,currentM,0).getDate(); //计算当月的天数
this.queryTime.StartTime = this.msg.YearStr+'-'+row.DateStr
this.queryTime.EndTime = this.msg.YearStr+'-'+row.DateStr
var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
this.queryTime.StartTime = this.msg.YearStr + '-' + row.DateStr
this.queryTime.EndTime = this.msg.YearStr + '-' + row.DateStr
this.drawer = true
},
init() {
......@@ -136,7 +136,9 @@ export default {
}
);
},
tableRowClassName({ row }) {
tableRowClassName({
row
}) {
let cname = "font-size-12";
if (
row.DateStr == "总数" ||
......@@ -149,9 +151,12 @@ export default {
}
return cname;
},
tableCellClassName({ row, column }) {
tableCellClassName({
row,
column
}) {
if (
row[column.property]&&row[column.property].toString().indexOf("-") != -1 &&
row[column.property] && row[column.property].toString().indexOf("-") != -1 &&
column.property != "DateStr"
) {
return "warning-col";
......@@ -191,29 +196,33 @@ export default {
);
},
},
};
};
</script>
<style>
@import "../../assets/css/customerManage.css";
@import "../../assets/css/customerManage.css";
.el-table__fixed-body-wrapper table {
.el-table__fixed-body-wrapper table {
padding-bottom: 8px !important;
}
.el-table .xiaoji-row {
}
.el-table .xiaoji-row {
background: #ffff00;
}
}
.el-table .sum-row {
.el-table .sum-row {
background: #00b0f0;
}
.el-table .warning-col {
}
.el-table .warning-col {
background: red;
}
.pointer{
}
.pointer {
cursor: pointer;
}
.pointer:hover{
}
.pointer:hover {
color: #00b0f0;
}
}
</style>
\ No newline at end of file
......@@ -5,15 +5,8 @@
<h1>月度引流统计</h1>
</div>
<div style="width: 340px;">
<el-date-picker
v-model="msg.month"
type="year"
icon="el-icon-date"
slot="append"
class="input-with-select"
format="yyyy 年"
@change="changeMonthHandler"
placeholder="选择查询的月份">
<el-date-picker v-model="msg.month" type="year" icon="el-icon-date" slot="append" class="input-with-select"
format="yyyy 年" @change="changeMonthHandler" placeholder="选择查询的月份">
</el-date-picker>
</div>
<div class="rightmenu">
......@@ -30,10 +23,17 @@
<el-tabs v-model="activeName" style="flex:1;height:100%;" class="diy-eltabs" tab-position="top">
<el-tab-pane label="月度数据" name="monthdata" style="background:#000">
<div class="data-box-item">
<el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;" height="100%" border :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
<el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;" height="100%"
border :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
<el-table-column>
<template slot-scope="scope">
<span class="pointer" @click="seeDetails(scope.row)">{{scope.row.DateStr}}</span>
<template v-if="scope.row.MonthStr>0">
<span class="pointer" style="color:blue;text-decoration:underline;"
@click="seeDetails(scope.row)">{{scope.row.DateStr}}</span>
</template>
<template v-else>
<span>{{scope.row.DateStr}} </span>
</template>
</template>
</el-table-column>
<el-table-column prop="PushCount" label="引流总数">
......@@ -73,7 +73,9 @@
</el-tab-pane>
<el-tab-pane label="月度成长率" name="monthrate">
<div class="data-box-item">
<el-table :data="rateData" :formatter="formatter" tooltip-effect="dark" v-loading="rateLoading" style="width: 100%;" height="100%" border :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
<el-table :data="rateData" :formatter="formatter" tooltip-effect="dark" v-loading="rateLoading"
style="width: 100%;" height="100%" border :cell-class-name="tableCellClassName"
:row-class-name="tableRowClassName">
<el-table-column prop="ItemName" label="">
</el-table-column>
<el-table-column prop="JanuaryRate" label="1月" :formatter="formatter">
......@@ -114,18 +116,18 @@
<script>
import clueComponent from "@/components/clueManagement/clueComponent";
export default {
export default {
components: {
clueComponent
},
data() {
return {
queryTime:{
StartTime:'',
EndTime:''
queryTime: {
StartTime: '',
EndTime: ''
},
drawer:false,
isDrawer:true,
drawer: false,
isDrawer: true,
msg: {
month: "",
YearStr: "",
......@@ -152,18 +154,18 @@ export default {
done();
},
// 查看详情
seeDetails(row){
seeDetails(row) {
var d = new Date();
var currentY = this.msg.YearStr;
var currentM = this.msg.month;
if(row.DateStr.length==2){
currentM = '0'+row.DateStr.slice(0,1)
}else{
currentM = row.DateStr.slice(0,2)
if (row.DateStr.length == 2) {
currentM = '0' + row.DateStr.slice(0, 1)
} else {
currentM = row.DateStr.slice(0, 2)
}
var MonthDayNum = new Date(currentY,currentM,0).getDate(); //计算当月的天数
this.queryTime.StartTime = this.msg.YearStr+'-'+currentM+'-01'
this.queryTime.EndTime = currentY+'-'+currentM+'-'+MonthDayNum
var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
this.queryTime.StartTime = this.msg.YearStr + '-' + currentM + '-01'
this.queryTime.EndTime = currentY + '-' + currentM + '-' + MonthDayNum
this.drawer = true
},
init() {
......@@ -196,7 +198,9 @@ export default {
}
);
},
tableRowClassName({ row }) {
tableRowClassName({
row
}) {
let cname = "font-size-12";
if (row.DateStr == "平均") {
cname += " xiaoji-row";
......@@ -205,9 +209,12 @@ export default {
}
return cname;
},
tableCellClassName({ row, column }) {
tableCellClassName({
row,
column
}) {
if (
row[column.property]&&row[column.property].toString().indexOf("-") != -1 &&
row[column.property] && row[column.property].toString().indexOf("-") != -1 &&
column.property != "DateStr"
) {
return "warning-col";
......@@ -254,39 +261,45 @@ export default {
});
},
},
};
};
</script>
<style>
@import "../../assets/css/customerManage.css";
@import "../../assets/css/customerManage.css";
.el-table__fixed-body-wrapper table {
.el-table__fixed-body-wrapper table {
padding-bottom: 8px !important;
}
.el-table .xiaoji-row {
}
.el-table .xiaoji-row {
background: #ffff00;
}
}
.el-table .sum-row {
.el-table .sum-row {
background: #00b0f0;
}
.el-table .warning-col {
}
.el-table .warning-col {
background: red;
}
.diy-eltabs .el-tabs__content {
}
.diy-eltabs .el-tabs__content {
height: calc(100% - 40px);
}
.diy-eltabs .data-box-item {
}
.diy-eltabs .data-box-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.pointer{
}
.pointer {
cursor: pointer;
}
.pointer:hover{
}
.pointer:hover {
color: #00b0f0;
}
}
</style>
\ No newline at end of file
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