Skip to content

C
CRM
Commit 990fa1dc authored by 罗超's avatar 罗超
Browse files
Options

新增自定义日期

parent 04e552b4
Hide whitespace changes
Inline Side-by-side
Showing with 203 additions and 135 deletions
src/components/Home.vue
View file @ 990fa1dc
...@@ -5,19 +5,38 @@ ...@@ -5,19 +5,38 @@
<el-card class="rank-card" shadow="never"> <el-card class="rank-card" shadow="never">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="4">
<span>排行榜</span> <span>排行榜</span>
</el-col> </el-col>
<el-col :span="12" class="option-item" style="display:flex;align-items:center;flex-direction: row-reverse;"> <el-col :span="20" class="option-item" style="display:flex;align-items:center;flex-direction: row-reverse;">
<el-select v-model="rankMsg.RankType" size="mini" style="width:120px;" placeholder="请选择" <el-select v-model="rankMsg.RankType" size="mini" style="width:120px;" placeholder="请选择"
@change="GetRankingList"> @change="GetRankingList">
<el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option> <el-option v-for="(x,i) in rankTypeList" :key="i" :label="x.name" :value="x.id"></el-option>
</el-select> </el-select>
<div style="width:235px;margin-right:25px;"> <div v-if="diyDateRange==''">
<el-button plain size="mini" class="hide_input_time" style="margin:0 25px;">自定义日期
<el-date-picker
v-model="diyDateRange"
type="daterange"
align="right"
unlink-panels
ref="diydateRef"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="setDiyDateRange"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions">
</el-date-picker>
</el-button>
</div>
<div style="width:235px;" v-if="diyDateRange==''">
<el-tabs v-model="currentRankRange" @tab-click="changeRankTypeHandler" class="hide-tabs-content"> <el-tabs v-model="currentRankRange" @tab-click="changeRankTypeHandler" class="hide-tabs-content">
<el-tab-pane v-for="(x,i) in dataRangeList" :key="i" :label="x.name" :name="x.id.toString()"></el-tab-pane> <el-tab-pane v-for="(x,i) in dataRangeList" :key="i" :label="x.name" :name="x.id.toString()"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
<el-tag class="f12" size="medium" @close="clearDiyDateRange" closable v-if="diyDateRange!=''" style="margin-right:25px;">自定义日期：{{diyDateRange[0]}} 至 {{diyDateRange[1]}}</el-tag>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
...@@ -390,6 +409,37 @@ export default { ...@@ -390,6 +409,37 @@ export default {
}, },
data() { data() {
return { return {
pickerOptions: {
shortcuts: [
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
},
},
{
text: "最近三个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit("pick", [start, end]);
},
},
],
},
rankType: 1, rankType: 1,
rankType2: "1", rankType2: "1",
RankingList: [], RankingList: [],
...@@ -443,6 +493,7 @@ export default { ...@@ -443,6 +493,7 @@ export default {
type: "3", type: "3",
}, },
], ],
diyDateRange: "",
currentRankType: {}, currentRankType: {},
currentRankRange: "2", currentRankRange: "2",
rankMsg: { rankMsg: {
...@@ -514,6 +565,18 @@ export default { ...@@ -514,6 +565,18 @@ export default {
this.dataRangeList[3].startTime = this.formatDate(date, "YYYY", 0); this.dataRangeList[3].startTime = this.formatDate(date, "YYYY", 0);
this.dataRangeList[3].endTime = this.dataRangeList[3].startTime; this.dataRangeList[3].endTime = this.dataRangeList[3].startTime;
}, },
clearDiyDateRange() {
this.diyDateRange = "";
this.changeRankTypeHandler();
},
setDiyDateRange() {
if (this.diyDateRange != "") {
this.rankMsg.QueryType = 1;
this.rankMsg.StartDay = this.diyDateRange[0];
this.rankMsg.EndDay = this.diyDateRange[1];
this.GetRankingList();
}
},
changeRankTypeHandler() { changeRankTypeHandler() {
this.clearRankMsgHandler(); this.clearRankMsgHandler();
let temp = this.dataRangeList.find( let temp = this.dataRangeList.find(
...@@ -1050,4 +1113,13 @@ export default { ...@@ -1050,4 +1113,13 @@ export default {
.hide-tabs-content .el-tabs__nav-wrap::after { .hide-tabs-content .el-tabs__nav-wrap::after {
background: none !important; background: none !important;
} }
.hide_input_time {
position: relative !important;
}
.hide_input_time .el-date-editor {
position: absolute;
top: 0;
left: 0;
opacity: 0;
}
</style> </style>
src/views/workstatistics/dayStatistics.vue
View file @ 990fa1dc
<template> <template>
<div class="customerManage"> <div class="customerManage" style="height:100%;">
<div class="tools"> <div class="tools">
<div class="tools-item"> <div class="tools-item">
<h1>每日引流统计</h1> <h1>每日引流统计</h1>
...@@ -20,8 +20,8 @@ ...@@ -20,8 +20,8 @@
</el-dropdown> </el-dropdown>
</div> </div>
</div> </div>
<div class="page-content" style="padding-bottom:20px;"> <div class="page-content" style="padding-bottom:20px;height:calc(100% - 61px);box-sizing:border-box;">
<el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;height:100%;" border <el-table :data="tableData" tooltip-effect="dark" v-loading="loading" style="width: 100%;" height="100%" border
:cell-class-name="tableCellClassName" :row-class-name="tableRowClassName"> :cell-class-name="tableCellClassName" :row-class-name="tableRowClassName">
<el-table-column> <el-table-column>
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -74,151 +74,147 @@ ...@@ -74,151 +74,147 @@
</template> </template>
<script> <script>
import clueComponent from "@/components/clueManagement/clueComponent"; import clueComponent from "@/components/clueManagement/clueComponent";
export default { export default {
components: { components: {
clueComponent clueComponent,
},
data() {
return {
queryTime: {
StartTime: "",
EndTime: "",
},
drawer: false,
isDrawer: true,
msg: {
month: "",
YearStr: "",
MonthStr: "",
},
total: 0,
tableData: [],
loading: false,
};
},
created() {
let d = new Date();
this.msg.month = d;
this.msg.YearStr = d.getFullYear();
this.msg.MonthStr = d.getMonth() + 1;
},
mounted() {
this.init();
},
methods: {
handleClose(done) {
done();
}, },
data() { // 查看详情
return { seeDetails(row) {
queryTime: { var d = new Date();
StartTime: '', var currentY = this.msg.YearStr;
EndTime: '' var currentM = this.msg.MonthStr;
}, var MonthDayNum = new Date(currentY, currentM, 0).getDate(); //计算当月的天数
drawer: false, this.queryTime.StartTime = this.msg.YearStr + "-" + row.DateStr;
isDrawer: true, this.queryTime.EndTime = this.msg.YearStr + "-" + row.DateStr;
msg: { this.drawer = true;
month: "", },
YearStr: "", init() {
MonthStr: "", if (this.loading) return;
this.loading = true;
this.apipost(
"/api/ClueStatic/GetClueDay",
this.msg,
(res) => {
this.loading = false;
this.tableData = res.data.data;
}, },
total: 0, (e) => {
tableData: [], this.loading = false;
loading: false, }
}; );
}, },
created() { tableRowClassName({ row }) {
let d = new Date(); let cname = "font-size-12";
this.msg.month = d; if (
this.msg.YearStr = d.getFullYear(); row.DateStr == "总数" ||
this.msg.MonthStr = d.getMonth() + 1; row.DateStr == "上期总数" ||
row.DateStr == "环比成长"
) {
cname += " xiaoji-row";
} else if (row.DateStr == "月总数") {
cname += " sum-row";
}
return cname;
}, },
mounted() { tableCellClassName({ row, column }) {
this.init(); if (
}, row[column.property] &&
methods: { row[column.property].toString().indexOf("-") != -1 &&
handleClose(done) { column.property != "DateStr"
done(); ) {
}, return "warning-col";
// 查看详情 } else if (column.property == "InvalidCount") {
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
this.drawer = true
},
init() {
if (this.loading) return;
this.loading = true;
this.apipost(
"/api/ClueStatic/GetClueDay",
this.msg,
(res) => {
this.loading = false;
this.tableData = res.data.data;
},
(e) => {
this.loading = false;
}
);
},
tableRowClassName({
row
}) {
let cname = "font-size-12";
if (
row.DateStr == "总数" ||
row.DateStr == "上期总数" ||
row.DateStr == "环比成长"
) {
cname += " xiaoji-row";
} else if (row.DateStr == "月总数") {
cname += " sum-row";
}
return cname;
},
tableCellClassName({
row,
column
}) {
if ( if (
row[column.property] && row[column.property].toString().indexOf("-") != -1 && parseFloat(row[column.property]) / parseFloat(row.PushCount) >=
column.property != "DateStr" 0.2
) { ) {
return "warning-col"; return "warning-col";
} else if (column.property == "InvalidCount") {
if (
parseFloat(row[column.property]) / parseFloat(row.PushCount) >=
0.2
) {
return "warning-col";
}
} }
}, }
changeMonthHandler(val) { },
this.msg.YearStr = val.getFullYear(); changeMonthHandler(val) {
this.msg.MonthStr = val.getMonth() + 1; this.msg.YearStr = val.getFullYear();
this.init(); this.msg.MonthStr = val.getMonth() + 1;
}, this.init();
handleCommand(command) { },
if (command == "1") { handleCommand(command) {
this.downloadHandler(); if (command == "1") {
this.downloadHandler();
}
},
downloadHandler() {
this.GetLocalFile(
"/api/ClueStatic/DownLoadClueDay",
this.msg,
"每日引流数据统计.xls",
(res) => {
this.$message({
message: "导出成功",
type: "success",
});
} }
}, );
downloadHandler() {
this.GetLocalFile(
"/api/ClueStatic/DownLoadClueDay",
this.msg,
"每日引流数据统计.xls",
(res) => {
this.$message({
message: "导出成功",
type: "success",
});
}
);
},
}, },
}; },
};
</script> </script>
<style> <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; padding-bottom: 8px !important;
} }
.el-table .xiaoji-row { .el-table .xiaoji-row {
background: #ffff00; background: #ffff00;
} }
.el-table .sum-row { .el-table .sum-row {
background: #00b0f0; background: #00b0f0;
} }
.el-table .warning-col { .el-table .warning-col {
background: red; background: red;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.pointer:hover { .pointer:hover {
color: #00b0f0; color: #00b0f0;
} }
</style> </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