<template>
|
<div>
|
<el-form :model="queryParams" ref="tableList" :inline="true" label-width="76px" style="margin: 10px 10px">
|
<el-form-item label="体检时间" prop="date">
|
<el-date-picker v-model="value1" type="datetimerange" align="right" start-placeholder="开始日期"
|
:picker-options="pickerOptions" end-placeholder="结束日期" :default-time="['00:00:00', '23:00:00']"
|
format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" @change="dateChangebirthday1">
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm">搜索</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="data-view">
|
<div id="main"></div>
|
</div>
|
</div>
|
</template>
|
|
|
<script>
|
import { GetChartByDate } from "@/api/count/chart";
|
const echarts = require("echarts/lib/echarts");
|
require("echarts/lib/component/title");
|
require("echarts/lib/component/tooltip");
|
require("echarts/lib/component/legend");
|
require("echarts/lib/chart/pie");
|
import {
|
getNumber,
|
hasReport,
|
getPdf,
|
getOrderList,
|
getNewDateList,
|
} from "@/api/hosp/order";
|
import moment from "moment";
|
|
export default {
|
name: "chart",
|
data() {
|
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]);
|
}
|
}]
|
},
|
value1: "",
|
DateList: [],
|
startTime: "",
|
dateAll: [],
|
queryParams: {
|
date: null,
|
startDate: null,
|
endDate: null,
|
},
|
};
|
},
|
|
created() {
|
this.getdate();
|
},
|
methods: {
|
getdate() {
|
getNewDateList().then((res) => {
|
this.value1 = [
|
moment(res.data).format("YYYY-MM-DD 00:00:00"),
|
moment(res.data).format("YYYY-MM-DD 23:59:00")
|
];;
|
this.getList()
|
});
|
},
|
getList() {
|
if (this.value1) {
|
this.queryParams.startDate = this.value1[0];
|
this.queryParams.endDate = this.value1[1];
|
}else if(this.value1 == null) {
|
this.queryParams.startDate = null;
|
this.queryParams.endDate = null;
|
} else {
|
this.queryParams.startDate = this.startTime[0];
|
this.queryParams.endDate = this.startTime[1];
|
}
|
|
GetChartByDate(this.queryParams).then((response) => {
|
this.DateList = response;
|
console.log(this.DateList);
|
let dataValue1 = [];
|
let dataValue2 = [];
|
this.dateAll = [];
|
this.DateList.forEach((item) => {
|
this.dateAll.push(item.date);
|
dataValue1.push(item.num.personNum);
|
dataValue2.push(item.num.teamNum);
|
});
|
let myChart = this.$echarts.init(document.getElementById("main"));
|
//你进入页面先把图表渲染了 然后才获取的数据把
|
myChart.setOption({
|
legend: {},
|
|
tooltip: {},
|
xAxis: {
|
type: "category",
|
name: "月份",
|
data: this.dateAll,
|
},
|
yAxis: {},
|
series: [
|
{
|
name: "个人体检数",
|
type: "bar",
|
data: dataValue1,
|
},
|
{ name: "团体体检数", type: "bar", data: dataValue2 },
|
],
|
});
|
});
|
},
|
// 时间
|
dateChangebirthday1(val) {
|
this.startTime = val;
|
},
|
|
// 搜索
|
submitForm() {
|
this.queryParams.pageNum = 1;
|
this.getList();
|
},
|
},
|
|
mounted() {
|
this.getList();
|
},
|
};
|
</script>
|
<style>
|
.data-view {
|
margin: 5px 15px;
|
height: 580px;
|
}
|
|
#main {
|
padding: 10px;
|
height: 580px;
|
background-color: #fff;
|
}
|
</style>
|
