344 lines
14 KiB
Vue
344 lines
14 KiB
Vue
<template>
|
||
<div class="app-container">
|
||
<el-tabs v-model="activeName" @tab-click="handleTabClick">
|
||
<el-tab-pane label="营业额总览" name="1">
|
||
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="90px">
|
||
<el-form-item label="时间类型">
|
||
<el-select v-model="queryParams.dateType" style="width: 240px">
|
||
<el-option label="按日" :value="2"></el-option>
|
||
<el-option label="按月" :value="1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="日期范围" v-if="queryParams.dateType==2">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
align="right"
|
||
unlink-panels
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 220px"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item label="日期范围" v-if="queryParams.dateType==1">
|
||
|
||
|
||
</el-form-item>
|
||
<el-form-item label="所属区域" prop="areaIdList">
|
||
<el-cascader v-model="queryParams.areaIdList"
|
||
:options="treeAreaOptions" :filterable="true" style="width: 220px" :show-all-levels="false"
|
||
:props="{
|
||
multiple: true,
|
||
emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
|
||
checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
|
||
value:'id',label:'treeName'
|
||
}" clearable collapse-tags @change="getTenantGroupAreaTreeData">
|
||
</el-cascader>
|
||
</el-form-item>
|
||
<el-form-item label="食堂/超市" prop="canteenStallIds">
|
||
<el-cascader v-model="queryParams.canteenStallIds"
|
||
:options="tenantOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
|
||
:props="{
|
||
multiple:true,
|
||
emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
|
||
checkStrictly: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
|
||
value:'id',label:'treeName'
|
||
}" collapse-tags
|
||
clearable>
|
||
</el-cascader>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
|
||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="width: 100%;display: flex;align-items: center;margin-bottom: 20px;">
|
||
<div style="width: 24%;">
|
||
<div class="title">营业额(元)</div>
|
||
<div class="num">78058.76</div>
|
||
</div>
|
||
<div style="width: 24%;">
|
||
<div class="title">用户数(人)</div>
|
||
<div class="num">1036</div>
|
||
</div>
|
||
<div style="width: 24%;">
|
||
<div class="title">订单数(个)</div>
|
||
<div class="num">2215</div>
|
||
</div>
|
||
<div style="width: 24%;">
|
||
<div class="title">均单价(元)</div>
|
||
<div class="num">8.4</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;margin-bottom: 20px;display: flex;justify-content: flex-end;padding-right: 40px;">
|
||
<el-radio-group v-model="lineType" size="mini">
|
||
<el-radio-button label="按食堂"></el-radio-button>
|
||
<el-radio-button label="按餐次"></el-radio-button>
|
||
</el-radio-group>
|
||
</div>
|
||
<div id="lineChartOne" style="width: 100%;height: 300px;margin-bottom: 20px;"></div>
|
||
<div style="width: 100%;height: auto;margin-bottom: 20px;">
|
||
<div id="pieChartOne" style="width: 50%;height: 250px;"></div>
|
||
<div id="pieChartTwo" style="width: 50%;height: 250px;"></div>
|
||
</div>
|
||
<div style="width: 100%;height: auto;margin-bottom: 20px;">
|
||
<div id="pieChartThree" style="width: 50%;height: 250px;"></div>
|
||
<div id="pieChartFour" style="width: 50%;height: 250px;"></div>
|
||
</div> -->
|
||
<Business />
|
||
</el-tab-pane>
|
||
<el-tab-pane label="餐次营业额" name="2"></el-tab-pane>
|
||
<el-tab-pane label="食堂营业额" name="3"></el-tab-pane>
|
||
<el-tab-pane label="充值分析" name="4"></el-tab-pane>
|
||
<el-tab-pane label="用户满意度" name="5"></el-tab-pane>
|
||
</el-tabs>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import * as echarts from 'echarts'
|
||
// import { systemAreaTreeApi,tenantGroupAreaTreeApi } from '@/api/reportCenter/analysis'
|
||
import Business from './business.vue'
|
||
export default {
|
||
name: "",
|
||
dicts: [],
|
||
components: {
|
||
Business
|
||
},
|
||
data() {
|
||
return {
|
||
activeName:'1',
|
||
// dateRange:[this.formatDate(new Date()),this.formatDate(new Date())],
|
||
// pickerOptions: {
|
||
// shortcuts: [{
|
||
// text: '最近一周',
|
||
// onClick(picker) {
|
||
// const start = new Date();
|
||
// const end = new Date();
|
||
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
|
||
// picker.$emit('pick', [start, end]);
|
||
// }
|
||
// },{
|
||
// text: '最近一个月',
|
||
// onClick(picker) {
|
||
// const start = new Date();
|
||
// const end = new Date();
|
||
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||
// picker.$emit('pick', [start, end]);
|
||
// }
|
||
// },{
|
||
// text: '最近三个月',
|
||
// onClick(picker) {
|
||
// const start = new Date();
|
||
// const end = new Date();
|
||
// start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
|
||
// picker.$emit('pick', [start, end]);
|
||
// }
|
||
// }]
|
||
// },
|
||
// treeAreaOptions:[],//区域树
|
||
// tenantOptions:[],//食堂超市树 queryParams.areaIdList
|
||
// queryParams:{
|
||
// dateType:2,
|
||
// areaIdList:[],
|
||
// canteenStallIds:[]
|
||
// },
|
||
// lineType:'按食堂',
|
||
|
||
};
|
||
},
|
||
created() {
|
||
// this.getAreaTreeData()
|
||
},
|
||
methods: {
|
||
handleTabClick(tab, event) {
|
||
console.log(tab.name,tab.label)
|
||
},
|
||
// //区域树
|
||
// getAreaTreeData() {
|
||
// systemAreaTreeApi({}).then((response) => {
|
||
// this.treeAreaOptions = response;
|
||
// });
|
||
// },
|
||
// //食堂超市树
|
||
// getTenantGroupAreaTreeData() {
|
||
// tenantGroupAreaTreeApi({
|
||
// // "dataSelectList": this.queryParams.areaIdList,
|
||
// "size": -1,
|
||
// "current": 1
|
||
// }).then((response) => {
|
||
// this.tenantOptions = response;
|
||
// });
|
||
// },
|
||
|
||
|
||
|
||
|
||
// /** 搜索按钮操作 */
|
||
// handleQuery1() {
|
||
// this.getData();
|
||
// },
|
||
// /** 重置按钮操作 */
|
||
// resetQuery1() {
|
||
// this.dateRange = [this.formatDate(new Date()),this.formatDate(new Date())],
|
||
// this.queryParams = {
|
||
// dateType:2,
|
||
// areaIdList:[],
|
||
// canteenStallIds:[]
|
||
// }
|
||
// this.resetForm("queryForm");
|
||
// this.handleQuery1();
|
||
// },
|
||
// /** 查询列表 */
|
||
// getData() {
|
||
// console.log(this.queryParams)
|
||
// console.log(this.dateRange)
|
||
// // let param = {
|
||
// // "startDate": this.queryParams.startDate,
|
||
// // "endDate": this.queryParams.endDate,
|
||
// // }
|
||
// // accountDataTotalApi(param).then(response => {
|
||
// // this.accTotalData = response.data
|
||
// // console.log(this.accTotalData)
|
||
// // });
|
||
// this.InitECharts()
|
||
// },
|
||
// InitECharts() {
|
||
// // const chartBox = this.$echarts.init(document.getElementById("lineChartOne"));
|
||
// var option = {
|
||
// tooltip: {
|
||
// trigger: 'axis',
|
||
// axisPointer: {
|
||
// type: 'shadow',
|
||
// },
|
||
// },
|
||
// legend: {
|
||
// bottom: '-2%',
|
||
// // data: ["Forest", "Steppe", "Desert", "Wetland"],
|
||
// },
|
||
// grid: {
|
||
// left: '0',
|
||
// right: '0',
|
||
// bottom: '10%',
|
||
// containLabel: true,
|
||
// },
|
||
// xAxis: [
|
||
// {
|
||
// type: 'category',
|
||
// axisTick: { show: false },
|
||
// axisLabel: { color: '#b3b5bb' },
|
||
// data: ['一级', '二级', '三级'],
|
||
// },
|
||
// ],
|
||
// yAxis: [
|
||
// {
|
||
// type: 'value',
|
||
// name: '单位（次）',
|
||
// nameTextStyle: {
|
||
// color: '#b3b5bb',
|
||
// alighn: 'end',
|
||
// padding: [0, 0, 0, -15],
|
||
// },
|
||
// nameGap: 30,
|
||
// axisTick: { show: false },
|
||
// axisLine: { show: false },
|
||
// axisLabel: { color: '#b3b5bb' },
|
||
// // 修改y轴分割线
|
||
// splitLine: {
|
||
// lineStyle: {
|
||
// color: '#e6e6e6',
|
||
// type: 'dashed',
|
||
// },
|
||
// },
|
||
// },
|
||
// ],
|
||
// series: [
|
||
// {
|
||
// name: '新增',
|
||
// type: 'bar',
|
||
// barGap: '10%',
|
||
// emphasis: {
|
||
// focus: 'series',
|
||
// },
|
||
// data: [2500, 6000, 4200],
|
||
// itemStyle: {
|
||
// color: '#0091ff',
|
||
// },
|
||
// },
|
||
// {
|
||
// name: '修改',
|
||
// type: 'bar',
|
||
// barGap: '10%',
|
||
// emphasis: {
|
||
// focus: 'series',
|
||
// },
|
||
// itemStyle: {
|
||
// color: '#44d7b6',
|
||
// },
|
||
// data: [5900, 4100, 7900],
|
||
// },
|
||
// {
|
||
// name: '删除',
|
||
// type: 'bar',
|
||
// barGap: '10%',
|
||
// emphasis: {
|
||
// focus: 'series',
|
||
// },
|
||
// itemStyle: {
|
||
// color: '#f7b500',
|
||
// },
|
||
// data: [2500, 5800, 4100],
|
||
// },
|
||
// {
|
||
// name: '导出',
|
||
// type: 'bar',
|
||
// barGap: '10%',
|
||
// emphasis: {
|
||
// focus: 'series',
|
||
// },
|
||
// itemStyle: {
|
||
// color: '#fa1f1f',
|
||
// },
|
||
// data: [1800, 1500, 1900],
|
||
// },
|
||
// ],
|
||
// };
|
||
// let myCharts = echarts.init(document.querySelector('#lineChartOne'));
|
||
// myCharts.setOption(option)
|
||
// // chartBox.setOption(option);
|
||
// // // 根据页面大小自动响应图表大小
|
||
// // window.addEventListener("resize", function () {
|
||
// // chartBox.resize();
|
||
// // });
|
||
// },
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
// //日期
|
||
// formatDate(date) {
|
||
// // 格式化为 YYYY-MM-DD
|
||
// const year = date.getFullYear();
|
||
// const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
|
||
// const day = String(date.getDate()).padStart(2, '0');
|
||
// return `${year}-${month}-${day}`;
|
||
// }
|
||
}
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.title{
|
||
color: #00000073;font-size: 14px;margin-bottom: 20px;
|
||
}
|
||
.num{
|
||
font-size: 20px;font-weight: 600;margin-top: 10px;
|
||
}
|
||
</style>
|
||
|