You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
2.9 KiB
Vue
132 lines
2.9 KiB
Vue
<template>
|
|
<div class="head">
|
|
<el-row>
|
|
<el-form-item>
|
|
<el-date-picker style="margin-left: 8px; width: 300px" v-model="searchInfo.dateRange"
|
|
type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
|
|
value-format="YYYY-MM-DD" />
|
|
</el-form-item>
|
|
<el-button @click="countAppointmentTypeFunc()" style="margin-left: 10px;">搜索</el-button>
|
|
|
|
</el-row>
|
|
</div>
|
|
<div v-if="monthNameList.length>0" id="MonthCount" class="MonthCount"></div>
|
|
<el-table :data="tableData" style="width: 100%;" row-key="id" v-loading="loading">
|
|
<el-table-column prop="name" label="方式" />
|
|
<el-table-column prop="count" label="数量" />
|
|
|
|
</el-table>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,computed, nextTick
|
|
} from 'vue'
|
|
import * as echarts from 'echarts';
|
|
import {
|
|
countAppointmentType,GetServiceDateTime,
|
|
} from '@/api/api.js'
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
const groupList_new = computed(() => {
|
|
return groupList.value.filter(item => (item.id ==2));
|
|
});
|
|
let loading=ref(false);
|
|
let searchInfo=ref({
|
|
name:''
|
|
})
|
|
let Info=ref({
|
|
id:null,
|
|
name:'',
|
|
status:1
|
|
})
|
|
|
|
let dialogVisible=ref(false);
|
|
|
|
//获取设备list
|
|
let tableData = ref([])
|
|
let monthData=ref();
|
|
let currentPage = ref(1) //当前页码
|
|
let pageSize = ref(15) //每页数量
|
|
let total = 0 //总数量
|
|
//获取服务器时间
|
|
const GetServiceDate = () => {
|
|
GetServiceDateTime().then(res => {
|
|
if (res.status) {
|
|
let datetime = res.data.datetime.substr(0, 10)
|
|
searchInfo.value.dateRange = [datetime, datetime]
|
|
countAppointmentTypeFunc()
|
|
}
|
|
})
|
|
}
|
|
let monthNameList=ref([]);
|
|
let monthCountList=ref([]);
|
|
const countAppointmentTypeFunc=()=>{
|
|
loading.value = true
|
|
countAppointmentType({searchInfo:searchInfo.value}).then(res => {
|
|
loading.value = false
|
|
if (res.status) {
|
|
tableData.value=res.data.list
|
|
monthData.value=res.data.monthList
|
|
monthNameList.value=[];
|
|
monthCountList.value=[];
|
|
monthData.value.forEach((v,i)=>{
|
|
monthNameList.value.push(v.month)
|
|
monthCountList.value.push(v.count)
|
|
})
|
|
if(monthNameList.value.length>0){
|
|
nextTick(()=>{
|
|
DrawMonth()
|
|
})
|
|
|
|
}
|
|
|
|
} else {
|
|
ElMessage.error(res.msg)
|
|
}
|
|
|
|
})
|
|
}
|
|
const DrawMonth=()=>{
|
|
var ChartMonthCount = echarts.init(document.getElementById('MonthCount'));
|
|
// 绘制图表
|
|
ChartMonthCount.setOption({
|
|
title: {
|
|
text: searchInfo.value.dateRange[0]+'~'+searchInfo.value.dateRange[1]+'预约量统计（月）'
|
|
},
|
|
tooltip: {},
|
|
xAxis: {
|
|
data: monthNameList.value
|
|
},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
name: '数量',
|
|
type: 'bar',
|
|
data:monthCountList.value
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
onMounted(()=>{
|
|
GetServiceDate()
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 10px;
|
|
}
|
|
.MonthCount{
|
|
height: 400px;
|
|
width: 100%;
|
|
}
|
|
</style> |