打包版本

master
“srekal” 10 months ago
parent fb4e847d3b
commit 0ebdbfe8a8

@ -0,0 +1,24 @@
# screen
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

@ -0,0 +1,39 @@
{
"name": "screen",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"echarts": "^5.0.0",
"element-ui": "^2.15.5",
"file-saver": "^2.0.5",
"gridmanager-vue": "^1.10.1",
"qs": "^6.10.1",
"vue": "^2.6.12",
"vue-router": "^3.2.0",
"vue-table-dynamic": "^0.4.6",
"vuex": "^3.4.0",
"vxe-table": "^4.0.25",
"xe-utils": "^3.3.1",
"xlsx": "^0.16.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",
"@vue/cli-plugin-eslint": "^4.5.0",
"@vue/cli-plugin-router": "^4.5.0",
"@vue/cli-plugin-vuex": "^4.5.0",
"@vue/cli-service": "^4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&&ak=BjhDt6PxSA6fd3vCH9aN9Z1MnTa6IPhF"></script> -->
<title>孙记报表中心</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

@ -0,0 +1,36 @@
<template>
<div id="app">
<router-view/>
</div>
</template>
<style lang="scss">
html,
body {
width: 100%;
height: 100%;
margin: 0 !important;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
width: 100%;
height: 100%;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

@ -0,0 +1,27 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// import echarts from 'echarts'
var echarts = require('echarts');
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// 将excel表格模板设置全局
Vue.prototype.$FileSaver = FileSaver;
Vue.prototype.$XLSX = XLSX;
Vue.use(ElementUI);//引入 elementUI
Vue.prototype.$echarts = echarts
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

@ -0,0 +1,15 @@
require("echarts/dist/extension/bmap.js");
export const createEcharts = {
created: function () {
},
methods: {
getModel(dom) {
return this.$echarts.init(document.getElementById(dom));
},
initCreate: function (dom, option) {
return this.$echarts.init(document.getElementById(dom)).setOption(option)
}
}
}

@ -0,0 +1,40 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
//
{
path: '/',
name: 'home',
component: () => import('../views/home')
},
{
path: '/payment',
// name: 'payment',
component: () => import('../views/payment')
},
{
path: '/sale',
name: 'sale',
component: () => import('../views/sale')
},
{
path: '/sale_summary',
// name: 'sale_summary',
component: () => import('../views/sale_summary')
},
]
const router = new VueRouter({
mode: 'hash',
// mode: 'history',
// base: process.env.BASE_URL,
routes
})
export default router

@ -0,0 +1,15 @@
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})

14713
src/style/app.min.css vendored

File diff suppressed because it is too large Load Diff

@ -0,0 +1,211 @@
.pr {
position: relative;
}
.wh100 {
width: 100%;
height: 100%;
}
.topWarn {
font-size: 15px;
font-weight: 700;
color: white;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
}
.main {
background: #021056;
// #000a3b;
width: 100%;
height: 100%;
}
.product {
width: 100%;
height: 100%;
padding: 0 20px 20px 20px;
box-sizing: border-box;
.top {
width: 100%;
height: 62px;
background: url(../assets/top.png) no-repeat;
background-size: 100% 100%;
font-size: 34px;
color: #01c4f7;
line-height: 62px;
margin-bottom: 22px;
font-weight: bold;
.navTool {
width: 143px;
height: 28px;
}
}
}
.echartsDom {
width: 100%;
height: 100%;
background: url('../assets/modelBg.png') no-repeat;
background-size: 100% 100%;
position: relative;
box-sizing: border-box;
}
.echartsDom_title {
background: url('../assets/biankuang.png') no-repeat;
background-size: 100% 100%;
position: absolute;
color: #02D9FD;
font-size: 20px;
width: 221px;
height: 34px;
line-height: 34px;
left: calc(50% - 110px);
top: -16px;
z-index: 9999;
}
.content {
width: 100%;
height: calc(100% - 84px);
display: flex;
justify-content: space-between;
}
.content_left {
width: 26%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.content_left_top {
width: 100%;
height: calc(70% - 15px);
display: flex;
flex-direction: column;
justify-content: space-between;
.content_left_top_one {
width: 100%;
height: calc(50% - 15px);
}
.content_left_top_two {
width: 100%;
height: calc(50% - 15px);
}
}
.content_left_bottom {
width: 100%;
height: calc(30% - 15px);
}
}
.content_center {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.content_center_top {
width: 100%;
height: calc(70% - 15px);
padding: 30px 20px 20px 20px;
box-sizing: border-box;
.map {
width: 100%;
height: calc(100% - 40px);
}
}
.content_left_bottom {
width: 100%;
height: calc(30% - 15px);
display: flex;
justify-content: space-between;
.left {
width: 73%;
height: 100%;
}
.consume {
width: 100%;
}
.right {
width: 25%;
height: 100%;
}
}
}
.content_right {
width: 26%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.content_right_top {
width: 100%;
height: calc(70% - 15px);
display: flex;
flex-direction: column;
justify-content: space-between;
.content_right_top_one {
width: 100%;
height: calc(50% - 15px);
}
.content_right_top_two {
padding: 20px;
box-sizing: border-box;
width: 100%;
height: calc(50% - 15px);
}
#content_right_top_two {
height: calc(100% - 40px);
}
}
.procurementModel {
height: calc(30% - 15px) !important;
.content_right_top_one {
width: 100%;
height: calc(100% - 15px);
}
}
.content_right_bottom {
width: 100%;
height: calc(30% - 15px);
}
.dashboard {
height: 70% !important;
}
}
// s
.procurment_overdue {
height: 100% !important;
#content_right_top_two {
height: 100% !important;
}
}
// e

@ -0,0 +1,80 @@
import axios from "axios";
import qs from "qs";
axios.defaults.timeout = 5000; //响应时间
axios.defaults.baseURL = "https://erp-test.ffcygl.com"; //配置接口地址
// axios.defaults.baseURL = "http://localhost:8070"; //配置接口地址
// axios.defaults.baseURL = "http://mode.spicycloud.cn"; //配置接口地址
//
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use(
config => {
//在发送请求之前做某件事
// config.headers['accesstoken'] = 'c41ee46ef177f02a5c652ef57899610ce8952891';
// config.headers['X-Openerp-Session-Id'] = '3a54d3a8ce177278c1f873bf83f32c1656763d63';
if (config.method === "post") {
config.data = qs.stringify(config.data);
}
return config;
},
error => {
console.log("错误的传参");
return Promise.reject(error);
}
);
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use(
res => {
//对响应数据做些事
if (!res.data.success) {
return Promise.resolve(res);
}
return res;
},
error => {
console.log("网络异常");
return Promise.reject(error);
}
);
//返回一个Promise(发送post请求)
export function fetchPost(url, params) {
return new Promise((resolve, reject) => {
axios
.post(url, params)
.then(
response => {
resolve(response);
},
err => {
reject(err);
}
)
.catch(error => {
reject(error);
});
});
}
////返回一个Promise(发送get请求)
export function fetchGet(url, param) {
return new Promise((resolve, reject) => {
axios
.get(url, { params: param })
.then(
response => {
resolve(response);
},
err => {
reject(err);
}
)
.catch(error => {
reject(error);
});
});
}
export default {
fetchPost,
fetchGet
};

@ -0,0 +1,55 @@
<template>
<section style="background-color: #f2f2f2;height: 100%;padding:4rem">
<!-- <header class="content__title">
<h1 style="font-size: 3rem;color:#ba000b">孙记集团报表中心</h1>
</header> -->
<div class="widget-visitors__stats">
<div style="background-color: #ba000b;" @click="link_to_payment">
<strong>收银汇总表</strong>
<small>Payment Report</small>
</div>
<div style="background-color: #ba000b;" @click="link_to_sale">
<strong>销售排行表</strong>
<small>Sale Report</small>
</div>
</div>
<div class="widget-visitors__stats">
<div style="background-color: #ba000b;" @click="link_to_sale_summary">
<strong>菜品销售汇总表</strong>
<small>Sale Summary Report</small>
</div>
</div>
</section>
</template>
<script>
export default {
methods: {
//
link_to_payment() {
window.location.href = '#/payment'
},link_to_sale() {
window.location.href = '#/sale'
},
link_to_sale_summary() {
window.location.href = '#/sale_summary'
},
}
}
</script>
<style>
</style>
<style src='../style/app.min.css'></style>

@ -0,0 +1,222 @@
<template>
<div style="width: 100%">
<div style="padding: 1rem;">
班次:<el-select v-model="handover" filterable multiple="" style="margin-left: 20px;" placeholder="请选择班次">
<el-option label="早班" value="morning"/>
<el-option label="中班" value="middle"/>
<el-option label="晚班" value="night"/>
</el-option>
</el-select>
日期:<el-date-picker v-model="date" type="daterange" range-separator="" start-placeholder=""
end-placeholder="统计结束日期" style="margin-left: 20px;">
</el-date-picker>
公司:<el-select v-model="company_ids" filterable multiple="" style="margin-left: 20px;" placeholder="请选择公司">
<el-option v-for="item in company_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="success" icon="el-icon-search" @click="check_data()"></el-button>
<el-button type="warning" icon="el-icon-search" @click='Export()'>导出EXCEL</el-button>
</div>
<el-table show-summary :data="tableData" stripe border style="width: 100%" id='table_excel'
:default-sort="{prop:'amount',order:'descending'}">
<el-table-column label="序号" fixed type="index" align="center" width="50">
</el-table-column>
<el-table-column label="店铺名称" fixed width="120" prop="company_name" sortable align="center">
</el-table-column>
<!-- <el-table-column label="日期" fixed prop="date" sortable>
</el-table-column> -->
<el-table-column label="金额" fixed prop="amount" sortable>
</el-table-column>
<el-table-column label="订单总量" width="120" prop="qty" sortable>
</el-table-column>
<el-table-column label="商品数量" width="120" prop="product_qty" sortable>
</el-table-column>
<!-- <el-table-column label="人均消费" width="120" prop="personal_avg_amount" sortable>
</el-table-column> -->
<el-table-column label="单均消费" width="120" prop="order_avg_amount" align="center" sortable>
</el-table-column>
<el-table-column label="销售方式" align="center">
<el-table-column label="堂食" prop="sale_type_tangshi_amount" align="center" sortable>
</el-table-column>
<el-table-column label="堂食单数" width="120" prop="sale_type_tangshi_qty" align="center" sortable>
</el-table-column>
<el-table-column label="外卖" prop="sale_type_waimai_amount" align="center" sortable>
</el-table-column>
<el-table-column label="外卖单数" width="120" prop="sale_type_waimai_qty" align="center" sortable>
</el-table-column>
<el-table-column label="自提" width="80" prop="sale_type_ziti_amount" align="center" sortable>
</el-table-column>
<el-table-column label="自提单数" width="120" prop="sale_type_ziti_qty" align="center" sortable>
</el-table-column>
</el-table-column>
<el-table-column label="外卖渠道" align="center">
<el-table-column label="美团金额" width="120" prop="sale_waimai_meituan_amount" align="center" sortable>
</el-table-column>
<el-table-column label="美团单数" width="120" prop="sale_waimai_meituan_qty" align="center" sortable>
</el-table-column>
<el-table-column label="饿了么金额" width="120" prop="sale_waimai_eleme_qty" align="center" sortable>
</el-table-column>
<el-table-column label="饿了么单数" width="120" prop="sale_waimai_eleme_amount" align="center" sortable>
</el-table-column>
<el-table-column label="小程序金额" width="120" prop="sale_waimai_xiaochengxu_amount" align="center" sortable>
</el-table-column>
<el-table-column label="小程序单数" width="120" prop="sale_waimai_xiaochengxu_qty" align="center" sortable>
</el-table-column>
</el-table-column>
<el-table-column label="支付渠道" align="center">
<el-table-column label="人民币" width="120" prop="sale_payment_rmb" align="center" sortable>
</el-table-column>
<el-table-column label="微信支付" width="120" prop="sale_payment_wxpay" align="center" sortable>
</el-table-column>
<el-table-column label="支付宝支付" width="120" prop="sale_payment_alipay" align="center" sortable>
</el-table-column>
<el-table-column label="美团支付" width="120" prop="sale_payment_meituan_pay" align="center" sortable>
</el-table-column>
<el-table-column label="银联商务" width="120" prop="sale_payment_unipay" align="center" sortable>
</el-table-column>
<el-table-column label="通联支付" width="120" prop="sale_payment_liantong_pay" align="center" sortable>
</el-table-column>
<el-table-column label="小记" prop="amount" align="center" sortable>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script>
import {
createEcharts
} from "../minixs/echarts.js";
import {
fetchGet,
fetchPost
} from "../utils/request"
import qs from 'qs'
export default {
mixins: [createEcharts],
name: 'Demo',
data() {
return {
handover:'',
title: '收银汇总表',
date: '',
company_ids: [],
tableData: [],
table_list: [],
company_options: [],
}
},
mounted() {
var self = this;
fetchGet('/ro/base/report/base/data/v1').then(function(data) {
console.log(data.data)
self.company_options = data.data['company_list']
})
},
components: {
},
methods: {
Export() {
this.$confirm("确定要导出文件到Excel?", "导出提示", {
//
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "info",
}).then(() => {
setTimeout(() => {
var xlsxParam = {
raw: true
} //
let tables = document.getElementById('table_excel'); //tableid
let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
const table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], {
type: "application/octet-stream"
}), `${this.title}.xlsx` //
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
}, 1000)
})
},
check_data() {
var self = this
if (this.date && this.company_ids&& this.handover) {
var postdata = {
'date': self.date,
'company_ids': self.company_ids.join(','),
'handover': self.handover.join(','),
}
console.log(postdata)
fetchPost('/ro/base/report/payment/data/v1', postdata, ).then(function(data) {
//
console.log(data)
// self.table_list = data.data['table_list']
self.tableData = data.data
})
//
// this.tableData = [{
// organization: '',
// department: '',
// trade_name: '',
// batch: '',
// date: '',
// supplier: '',
// purchase_quantity: '',
// purchase_unit_price: '',
// money: '',
// return_quantity: '退',
// return_unit_price: '退',
// return_amount: '退',
// cost_unit_price_after_deduction: '',
// loss_rate: '',
// },
// ]
} else {
alert('请填写完整信息')
}
}
}
}
</script>

@ -0,0 +1,209 @@
<template>
<div style="width: 100%">
<div style="padding: 1rem;">
班次:<el-select v-model="handover" filterable multiple style="margin-left: 20px;" placeholder="请选择班次">
<el-option label="早班" value="morning"/>
<el-option label="中班" value="middle"/>
<el-option label="晚班" value="night"/>
</el-option>
</el-select>
日期:<el-date-picker v-model="date" type="daterange" range-separator="" start-placeholder=""
end-placeholder="统计结束日期" style="margin-left: 20px;">
</el-date-picker>
品类:<el-select v-model="category_ids" filterable multiple="" style="margin-left: 20px;" placeholder="请选择品类">
<el-option v-for="item in category_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
公司:<el-select v-model="company_ids" filterable style="margin-left: 20px;" placeholder="请选择公司">
<el-option v-for="item in company_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="success" icon="el-icon-search" @click="check_data()"></el-button>
<el-button type="warning" icon="el-icon-search" @click='Export()'>导出EXCEL</el-button>
</div>
<el-table show-summary :data="tableData" stripe border style="width: 100%" id='table_excel'
:default-sort="{prop:'categ_name',order:'descending'}">
<el-table-column label="序号" fixed type="index" align="center" width="50">
</el-table-column>
<el-table-column label="菜品分类" fixed width="120" prop="categ_name" sortable align="center">
</el-table-column>
<el-table-column label="菜品编码" fixed width="120" prop="product_code" align="center">
</el-table-column>
<el-table-column label="菜品名称" fixed width="120" prop="product_name" sortable align="center">
</el-table-column>
<el-table-column label="菜品规格" fixed width="120" prop="product_uom" sortable align="center">
</el-table-column>
<el-table-column label="流水数量" fixed width="120" prop="qty" sortable align="center">
</el-table-column>
<!-- <el-table-column label="流水数量(%)" fixed width="150" prop="qty_percent" sortable align="center">
</el-table-column> -->
<!-- <el-table-column label="顾客点击率(%)" fixed width="150" prop="custom_click_percent" sortable align="center">
</el-table-column> -->
<el-table-column label="流水金额" fixed width="120" prop="amount" sortable align="center">
</el-table-column>
<!-- <el-table-column label="流水金额(%)" fixed width="150" prop="amount_percent" sortable align="center">
</el-table-column> -->
<el-table-column label="实收金额" fixed width="120" prop="amount_total" sortable align="center">
</el-table-column>
<!--
<el-table-column label="优惠金额" fixed width="120" prop="discount_amount" sortable align="center">
</el-table-column>
-->
<!-- <el-table-column label="单点销量" fixed width="120" prop="point_sale" sortable align="center">
</el-table-column>
<el-table-column label="单点金额" fixed width="120" prop="point_amount" sortable align="center">
</el-table-column>
<el-table-column label="套餐内销量" fixed width="120" prop="package_total" sortable align="center">
</el-table-column>
<el-table-column label="套餐金额" fixed width="120" prop="package_amount" sortable align="center">
</el-table-column> -->
</el-table>
</div>
</template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script>
import {
createEcharts
} from "../minixs/echarts.js";
import {
fetchGet,
fetchPost
} from "../utils/request"
import qs from 'qs'
export default {
mixins: [createEcharts],
name: 'Demo',
data() {
return {
title: '销售排行表',
date: '',
handover:'',
tableData: [],
table_list: [],
company_ids: [],
company_options: [],
category_ids: [],
category_options: [],
}
},
mounted() {
var self = this;
fetchGet('/ro/base/report/base/data/v1').then(function(data) {
console.log(data.data)
self.company_options = data.data['company_list']
self.category_options = data.data['category_list']
})
},
components: {
},
methods: {
Export() {
this.$confirm("确定要导出文件到Excel?", "导出提示", {
//
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "info",
}).then(() => {
setTimeout(() => {
var xlsxParam = {
raw: true
} //
let tables = document.getElementById('table_excel'); //tableid
let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
const table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], {
type: "application/octet-stream"
}), `${this.title}.xlsx` //
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
}, 1000)
})
},
check_data() {
var self = this
if (this.date && this.company_ids && this.category_ids&&this.handover) {
var postdata = {
'date': self.date,
'company_ids': self.company_ids,
'category_ids': self.category_ids.join(','),
'handover': self.category_ids.join(','),
}
console.log(postdata)
fetchPost('/ro/base/report/sale/data/v1', postdata, ).then(function(data) {
//
console.log(data)
// self.table_list = data.data['table_list']
self.tableData = data.data
})
//
// this.tableData = [{
// organization: '',
// department: '',
// trade_name: '',
// batch: '',
// date: '',
// supplier: '',
// purchase_quantity: '',
// purchase_unit_price: '',
// money: '',
// return_quantity: '退',
// return_unit_price: '退',
// return_amount: '退',
// cost_unit_price_after_deduction: '',
// loss_rate: '',
// },
// ]
} else {
alert('请填写完整信息')
}
}
}
}
</script>

@ -0,0 +1,306 @@
<template>
<div style="width: 100%">
<div style="padding: 1rem;">
班次:<el-select v-model="handover" filterable multiple="" style="margin-left: 20px;" placeholder="请选择班次">
<el-option label="早班" value="morning" />
<el-option label="中班" value="middle" />
<el-option label="晚班" value="night" />
</el-option>
</el-select>
日期:<el-date-picker v-model="date" type="daterange" range-separator="" start-placeholder=""
end-placeholder="统计结束日期" style="margin-left: 20px;">
</el-date-picker>
品类:<el-select v-model="category_ids" filterable multiple="" style="margin-left: 20px;" placeholder="请选择品类">
<el-option v-for="item in category_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
公司:<el-select v-model="company_ids" filterable style="margin-left: 20px;" placeholder="请选择公司">
<el-option v-for="item in company_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
<el-button type="success" icon="el-icon-search" @click="check_data()"></el-button>
<el-button type="warning" icon="el-icon-search" @click='Export()'>导出EXCEL</el-button>
</div>
<el-table show-summary :data="tableData" stripe border style="width: 100%" id='table_excel'
:default-sort="{prop:'amount',order:'descending'}">
<el-table-column label="序号" fixed type="index" align="center" width="50">
</el-table-column>
<el-table-column label="菜品分类" fixed width="120" prop="categ_name" sortable align="center">
</el-table-column>
<el-table-column label="订单类型" align="center">
<el-table-column label="堂食" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="tangshi_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="tangshi_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="tangshi_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="tangshi_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="tangshi_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="外带" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="waidai_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="waidai_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="waidai_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="waidai_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="waidai_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="电话外卖" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="waimai_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="waimai_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="waimai_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="waimai_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="waimai_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="餐桌" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="canzhuo_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="canzhuo_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="canzhuo_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="canzhuo_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="canzhuo_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="美团外卖" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="meituan_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="meituan_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="meituan_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="meituan_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="meituan_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="饿了么" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="eleme_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="eleme_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="eleme_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="eleme_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="eleme_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="百度外卖" width="120" align="center" sortable >
<el-table-column label="金额" width="120" align="center" prop="baidu_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="baidu_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="baidu_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="baidu_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="baidu_return_qty">
</el-table-column>
</el-table-column>
<el-table-column label="微信点餐" width="120" align="center" sortable>
<el-table-column label="金额" width="120" align="center" prop="weixin_amount" >
</el-table-column>
<el-table-column label="订单总量" width="120" align="center" prop="weixin_qty">
</el-table-column>
<el-table-column label="商品数量" width="120" align="center" prop="weixin_product_qty">
</el-table-column>
<el-table-column label="单均消费" width="120" align="center" prop="weixin_avg_price">
</el-table-column>
<el-table-column label="退单数" width="120" align="center" prop="weixin_return_qty">
</el-table-column>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<style>
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
</style>
<script>
import {
createEcharts
} from "../minixs/echarts.js";
import {
fetchGet,
fetchPost
} from "../utils/request"
import qs from 'qs'
export default {
mixins: [createEcharts],
name: 'Demo',
data() {
return {
title: '菜品销售汇总',
handover: '',
date: '',
payment_type: '',
tableData: [],
table_list: [],
company_ids: [],
company_options: [],
category_ids: [],
category_options: [],
}
},
mounted() {
var self = this;
fetchGet('/ro/base/report/base/data/v1').then(function(data) {
console.log(data.data)
self.company_options = data.data['company_list']
self.category_options = data.data['category_list']
})
},
components: {
},
methods: {
Export() {
this.$confirm("确定要导出文件到Excel?", "导出提示", {
//
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "info",
}).then(() => {
setTimeout(() => {
var xlsxParam = {
raw: true
} //
let tables = document.getElementById('table_excel'); //tableid
let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
const table_write = this.$XLSX.write(table_book, {
bookType: "xlsx",
bookSST: true,
type: "array",
});
try {
this.$FileSaver.saveAs(
new Blob([table_write], {
type: "application/octet-stream"
}), `${this.title}.xlsx` //
);
} catch (e) {
if (typeof console !== "undefined") console.log(e, table_write);
}
return table_write;
}, 1000)
})
},
check_data() {
var self = this
if (this.date && this.company_ids && this.category_ids &&this.handover) {
var postdata = {
'date': self.date,
'company_ids': self.company_ids,
'category_ids': self.category_ids.join(','),
'handover': self.handover.join(','),
}
console.log(postdata)
fetchPost('/ro/base/report/sale_summary/data/v1', postdata, ).then(function(data) {
//
console.log(data)
// self.table_list = data.data['table_list']
self.tableData = data.data
})
// //
// this.tableData = [{
// organization: '',
// department: '',
// trade_name: '',
// batch: '',
// date: '',
// supplier: '',
// purchase_quantity: '',
// purchase_unit_price: '',
// money: '',
// return_quantity: '退',
// return_unit_price: '退',
// return_amount: '退',
// cost_unit_price_after_deduction: '',
// loss_rate: '',
// },
// ]
} else {
alert('请填写完整信息')
}
}
}
}
</script>

@ -0,0 +1,32 @@
/*
* @Descripttion: 前端开发
* @version: 1.0
* @Author: ls
* @Date: 2019-11-26 18:09:54
* @LastEditors: ls
* @LastEditTime: 2020-08-15 09:52:51
*/
module.exports = {
lintOnSave: false,
publicPath: './',
css: {
},
productionSourceMap: false,
chainWebpack: config => {
// 其他配置
configureWebpack: config => {
config.entry.app = ["babel-polyfill", "./src/main.js"];
}
// 其他配置
},
// devServer: {
// proxy: {
// '/api': {
// target: 'http://mode.spicycloud.cn',
// secure: false,
// changeOrigin: true
// }
// }
// }
}
Loading…
Cancel
Save