wangyifang
/
dangxingjiaoyujidi-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

up

Browse Source
master
刘翔宇-旅管家 3 years ago
parent 9800ae7fef
commit 2fb0b76aaa
2 changed files with 134 additions and 109 deletions
Show Stats Download Patch File Download Diff File

2
src/views/login/index.vue
Unescape View File

@ -25,7 +25,7 @@
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
placeholder="请输入密码" auto-complete="off" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" /> placeholder="请输入密码" name="password" tabindex="2" auto-complete="off" @keyup.enter.native="handleLogin" />
</el-form-item> </el-form-item>

241
src/views/report/visit/periodRpt.vue
Unescape View File

@ -7,16 +7,12 @@
<div slot="content"></div> <div slot="content"></div>
<slot> <slot>
<div> <div>
<el-date-picker <el-date-picker v-model="searchFields.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
v-model="searchFields.date" </el-date-picker>
value-format="yyyy-MM-dd"
type="date"
placeholder="选择日期">
</el-date-picker>
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button> <Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button> <Button type="primary" @click="viewPart" style="margin-left: 10px">{{btnText}}</Button>
<Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button> <Button type="primary" style="margin-left: 10px" @click="handleGo">导出</Button>
</div> </div>
</slot> </slot>
@ -31,17 +27,17 @@
<el-table-column prop="plan_total" label="预约人数" sortable> <el-table-column prop="plan_total" label="预约人数" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="use_total" label="入场人数" sortable> <el-table-column prop="use_total" label="入场人数" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="man_total" label="性别男" sortable> <el-table-column prop="man_total" label="性别男" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="woman_total" label="性别女" sortable> <el-table-column prop="woman_total" label="性别女" sortable>
</el-table-column> </el-table-column>
<el-table-column prop="per" label="核销比" sortable> <el-table-column prop="per" label="核销比" sortable>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div v-else> <div v-else>
<line-chart :chartData="periodData" :height="chartHeight"/> <line-chart :chartData="periodData" :height="chartHeight" />
</div> </div>
</div> </div>
@ -49,9 +45,11 @@
</template> </template>
<script> <script>
import LxHeader from "@/components/LxHeader/index.vue"; import LxHeader from "@/components/LxHeader/index.vue";
import LineChart from '../components/LineChart' import LineChart from '../components/LineChart'
import { ElMapExportTable } from "table-excel"; import {
import { ElMapExportTable
} from "table-excel";
import {
detailRpt detailRpt
} from "@/api/report/visit.js"; } from "@/api/report/visit.js";
export default { export default {
@ -67,40 +65,60 @@
data() { data() {
return { return {
showData: false, showData: false,
searchFields: { searchFields: {
date:"", date: "",
}, },
tableData: [], tableData: [],
tableHeight: 0, tableHeight: 0,
chartHeight:"", chartHeight: "",
btnText:"数据展示", btnText: "数据展示",
periodData: { periodData: {
xArr:[], xArr: [],
series:{}, series: {},
legendArr:["预约人数","入场人数","男性人数","女性人数"] legendArr: ["预约人数", "入场人数", "男性人数", "女性人数"]
} }
} }
}, },
methods: { methods: {
/** 导出按钮操作 */ /** 导出按钮操作 */
handleGo(){ handleGo() {
var data = this.tableData; // 这里面是数据列表 var data = this.tableData; // 这里面是数据列表
const column = [ const column = [{
{ title: "时段", dataIndex: "daterange" }, // dataIndex为数据列表中的数据字段 title: "时段",
{ title: "预约人数", dataIndex: "plan_total" }, dataIndex: "daterange"
{ title: "入场人数", dataIndex: "use_total" }, }, // dataIndex为数据列表中的数据字段
{ title: "性别男", dataIndex: "man_total" }, {
{ title: "性别女", dataIndex: "woman_total" }, title: "预约人数",
{ title: "核销比", dataIndex: "per" }, dataIndex: "plan_total"
]; },
const instance = new ElMapExportTable( {
{ column, data }, title: "入场人数",
{ progress: progress => console.log(progress) }// 进度条回调 dataIndex: "use_total"
); },
instance.download("时段统计报表"); // 导出的文件名 {
title: "性别男",
dataIndex: "man_total"
},
{
title: "性别女",
dataIndex: "woman_total"
},
{
title: "核销比",
dataIndex: "per"
},
];
const instance = new ElMapExportTable({
column,
data
}, {
progress: progress => console.log(progress)
} // 进度条回调
);
instance.download("时段统计报表"); // 导出的文件名
}, },
viewPart() { viewPart() {
this.showData = !this.showData; this.showData = !this.showData;
this.btnText = this.showData ? "图表展示" : "数据展示" this.btnText = this.showData ? "图表展示" : "数据展示"
}, },
initLoad() { initLoad() {
@ -110,76 +128,83 @@
var paginationHeight = 37; //分页的高度 var paginationHeight = 37; //分页的高度
var topHeight = 50; //页面 头部 var topHeight = 50; //页面 头部
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20; let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight; that.tableHeight = tableHeight;
that.chartHeight = tableHeight+"px"; that.chartHeight = tableHeight + "px";
this.searchFields.date = this.getToday(); this.searchFields.date = this.getToday();
}, },
load() { load() {
// this.showData = true; // this.showData = true;
var planarr=[]; var planarr = [];
var xArr=[]; var xArr = [];
var usearr=[]; var usearr = [];
var manarr = []; var manarr = [];
var womanarr = []; var womanarr = [];
detailRpt({
date: this.searchFields.date
}).then((res) => {
console.log(res)
var _res = [];
Object.keys(res).map((key, item) => {
_res.push(res[key])
});
for (var m of _res) {
console.log(m)
m.per = ((m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100).toFixed(2) + "%"
m.daterange = m.time;
xArr.push(m.daterange);
planarr.push(
m.plan_total
)
usearr.push(
m.use_total
)
manarr.push(
m.man_total
)
womanarr.push(
m.woman_total
)
detailRpt({ }
date:this.searchFields.date this.periodData.xArr = xArr;
}).then((res) => { this.periodData.series = [{
for (var m of res) { name: "预约人数",
m.per = ((m.use_total / (m.plan_total == 0 ? 1 : m.plan_total)) * 100).toFixed(2) + "%" type: 'bar',
m.daterange = m.start_time+"-"+m.end_time; data: planarr
xArr.push(m.daterange); },
planarr.push( {
m.plan_total name: "入场人数",
) type: 'bar',
usearr.push( data: usearr
m.use_total },
) {
manarr.push( name: "男性人数",
m.man_total type: 'bar',
) data: manarr
womanarr.push( },
m.woman_total {
) name: "女性人数",
type: 'bar',
} data: womanarr
this.periodData.xArr = xArr; },
this.periodData.series=[ ]
{
name:"预约人数",
type: 'bar',
data:planarr
},
{
name:"入场人数",
type: 'bar',
data:usearr
},
{
name:"男性人数",
type: 'bar',
data:manarr
},
{
name:"女性人数",
type: 'bar',
data:womanarr
},
]
this.tableData = res
}).catch((res) => {}) this.tableData = _res
},
getToday(){ }).catch((res) => {
let date =new Date() console.log(res)
var y = date.getFullYear(); })
var m = date.getMonth()+1; },
m = m <10?'0'+ m : m; getToday() {
var d = date.getDate(); let date = new Date()
d = d <10?'0'+ d : d; var y = date.getFullYear();
return y +'-'+ m +'-'+ d; var m = date.getMonth() + 1;
m = m < 10 ? '0' + m : m;
var d = date.getDate();
d = d < 10 ? '0' + d : d;
return y + '-' + m + '-' + d;
}, },
} }

Write Preview
Loading…
Cancel
Save