diff --git a/package.json b/package.json index 04be2bf..f1eeb30 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "axios": "^1.7.9", "codemirror": "^5.65.18", "codemirror-editor-vue3": "^2.8.0", + "dayjs": "^1.11.13", "default-passive-events": "^2.0.0", "echarts": "^5.6.0", "element-plus": "^2.9.3", diff --git a/src/api/data/index.js b/src/api/data/index.js new file mode 100644 index 0000000..b624bab --- /dev/null +++ b/src/api/data/index.js @@ -0,0 +1,153 @@ +import request from "@/utils/request"; + +/** + * 汇总数据 + * @returns + */ +export function summaryGet() { + return request({ + url: "/api/summary", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + }, + }); +} + +/** + * 今日数据 + * @returns + */ +export function summaryTodayGet() { + return request({ + url: "/api/summary/today", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + }, + }); +} + +/** + * 今日数据 + * @returns + */ +export function summaryDateGet(day) { + return request({ + url: "/api/summary/date", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day, + }, + }); +} + +/** + * 销售额柱状图 + * @returns + */ +export function dateAmount(day) { + return request({ + url: "/api/summary/dateAmount", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day, + }, + }); +} + +/** + * 商品销售排行 + * @returns + */ +export function dateProduct(day, page, size) { + return request({ + // url: "/api/summary/dateProduct", + url: "/api/summary/productSaleDate", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day, + page: page, + size: size, + }, + }); +} + +/** + * 支付类型占比 + * @returns + */ +export function datePayType(day) { + return request({ + url: "/api/summary/datePayType", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + day: day, + }, + }); +} + +/** + * 导出数据 + * @returns + */ +export function daydownload(data) { + return request({ + url: "/api/summary/day/download", + method: "post", + data: { + shopId: localStorage.getItem("shopId"), + ...data, + }, + responseType: "blob", + }); +} + +/** + * 总数统计 + * @returns + */ +export function daycount(params) { + return request({ + url: "/api/summary/day/count", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + ...params, + }, + }); +} + +/** + * 获取数据 + * @returns + */ +export function summaryday(params) { + return request({ + url: "/api/summary/day", + method: "get", + params: { + shopId: localStorage.getItem("shopId"), + ...params, + }, + }); +} + +/** + * 营业板块 + * @returns + */ +export function summarytrade(data) { + return request({ + url: "/api/summary/trade", + method: "post", + data: { + shopId: localStorage.getItem("shopId"), + ...data, + }, + }); +} diff --git a/src/router/index.ts b/src/router/index.ts index 3dc7383..78104ef 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -30,6 +30,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "数据统计", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -100,6 +101,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "店铺管理", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -144,6 +146,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "线上店铺", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -180,6 +183,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "系统设置", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -231,6 +235,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "应用中心", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -261,6 +266,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "设备管理", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -281,6 +287,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "商品管理", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -328,6 +335,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "进销存", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -348,6 +356,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "用户管理", icon: "data_statistics", + alwaysShow: true, }, children: [ { @@ -377,6 +386,7 @@ export const constantRoutes: RouteRecordRaw[] = [ meta: { title: "订单管理", icon: "data_statistics", + alwaysShow: true, }, children: [ { diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 35fa8cb..384dd71 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -9,6 +9,8 @@ import { setToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/ export const useUserStore = defineStore("user", () => { const userInfo = useStorage("userInfo", {} as UserInfo); + localStorage.setItem("shopId", "" + userInfo.value.shopId); + /** * 登录 * @@ -44,6 +46,7 @@ export const useUserStore = defineStore("user", () => { reject("Verification failed, please Login again."); return; } + localStorage.setItem("shopId", "" + userInfo.value.shopId); Object.assign(userInfo.value, { ...data }); resolve(data); }) diff --git a/src/utils/tools.js b/src/utils/tools.js new file mode 100644 index 0000000..53089ca --- /dev/null +++ b/src/utils/tools.js @@ -0,0 +1,443 @@ +/** + * Created by PanJiaChen on 16/11/18. + */ + +/** + * Parse the time to string + * @param {(Object|string|number)} time + * @param {string} cFormat + * @returns {string} + */ +export function parseTime(time, cFormat) { + if (arguments.length === 0) { + return null; + } + const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}"; + let date; + if (typeof time === "undefined" || time === null || time === "null") { + return ""; + } else if (typeof time === "object") { + date = time; + } else { + if (typeof time === "string" && /^[0-9]+$/.test(time)) { + time = parseInt(time); + } + if (typeof time === "number" && time.toString().length === 10) { + time = time * 1000; + } + date = new Date(time); + } + const formatObj = { + y: date.getFullYear(), + m: date.getMonth() + 1, + d: date.getDate(), + h: date.getHours(), + i: date.getMinutes(), + s: date.getSeconds(), + a: date.getDay(), + }; + const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => { + let value = formatObj[key]; + // Note: getDay() returns 0 on Sunday + if (key === "a") { + return ["日", "一", "二", "三", "四", "五", "六"][value]; + } + if (result.length > 0 && value < 10) { + value = "0" + value; + } + return value || 0; + }); + return time_str; +} + +/** + * @param {number} time + * @param {string} option + * @returns {string} + */ +export function formatTime(time, option) { + if (("" + time).length === 10) { + time = parseInt(time) * 1000; + } else { + time = +time; + } + const d = new Date(time); + const now = Date.now(); + + const diff = (now - d) / 1000; + + if (diff < 30) { + return "刚刚"; + } else if (diff < 3600) { + // less 1 hour + return Math.ceil(diff / 60) + "分钟前"; + } else if (diff < 3600 * 24) { + return Math.ceil(diff / 3600) + "小时前"; + } else if (diff < 3600 * 24 * 2) { + return "1天前"; + } + if (option) { + return parseTime(time, option); + } else { + return ( + d.getMonth() + 1 + "月" + d.getDate() + "日" + d.getHours() + "时" + d.getMinutes() + "分" + ); + } +} + +/** + * @param {string} url + * @returns {Object} + */ +export function getQueryObject(url) { + url = url == null ? window.location.href : url; + const search = url.substring(url.lastIndexOf("?") + 1); + const obj = {}; + const reg = /([^?&=]+)=([^?&=]*)/g; + search.replace(reg, (rs, $1, $2) => { + const name = decodeURIComponent($1); + let val = decodeURIComponent($2); + val = String(val); + obj[name] = val; + return rs; + }); + return obj; +} + +/** + * @param {string} input value + * @returns {number} output value + */ +export function byteLength(str) { + // returns the byte length of an utf8 string + let s = str.length; + for (var i = str.length - 1; i >= 0; i--) { + const code = str.charCodeAt(i); + if (code > 0x7f && code <= 0x7ff) s++; + else if (code > 0x7ff && code <= 0xffff) s += 2; + if (code >= 0xdc00 && code <= 0xdfff) i--; + } + return s; +} + +/** + * @param {Array} actual + * @returns {Array} + */ +export function cleanArray(actual) { + const newArray = []; + for (let i = 0; i < actual.length; i++) { + if (actual[i]) { + newArray.push(actual[i]); + } + } + return newArray; +} + +/** + * @param {Object} json + * @returns {Array} + */ +export function param(json) { + if (!json) return ""; + return cleanArray( + Object.keys(json).map((key) => { + if (json[key] === undefined) return ""; + return encodeURIComponent(key) + "=" + encodeURIComponent(json[key]); + }) + ).join("&"); +} + +/** + * @param {string} url + * @returns {Object} + */ +export function param2Obj(url) { + const search = url.split("?")[1]; + if (!search) { + return {}; + } + return JSON.parse( + '{"' + + decodeURIComponent(search) + .replace(/"/g, '\\"') + .replace(/&/g, '","') + .replace(/=/g, '":"') + .replace(/\+/g, " ") + + '"}' + ); +} + +/** + * @param {string} val + * @returns {string} + */ +export function html2Text(val) { + const div = document.createElement("div"); + div.innerHTML = val; + return div.textContent || div.innerText; +} + +/** + * Merges two objects, giving the last one precedence + * @param {Object} target + * @param {(Object|Array)} source + * @returns {Object} + */ +export function objectMerge(target, source) { + if (typeof target !== "object") { + target = {}; + } + if (Array.isArray(source)) { + return source.slice(); + } + Object.keys(source).forEach((property) => { + const sourceProperty = source[property]; + if (typeof sourceProperty === "object") { + target[property] = objectMerge(target[property], sourceProperty); + } else { + target[property] = sourceProperty; + } + }); + return target; +} + +/** + * @param {HTMLElement} element + * @param {string} className + */ +export function toggleClass(element, className) { + if (!element || !className) { + return; + } + let classString = element.className; + const nameIndex = classString.indexOf(className); + if (nameIndex === -1) { + classString += "" + className; + } else { + classString = + classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length); + } + element.className = classString; +} + +/** + * @param {string} type + * @returns {Date} + */ +export function getTime(type) { + if (type === "start") { + return new Date().getTime() - 3600 * 1000 * 24 * 90; + } else { + return new Date(new Date().toDateString()); + } +} + +/** + * @param {Function} func + * @param {number} wait + * @param {boolean} immediate + * @return {*} + */ +export function debounce(func, wait, immediate) { + let timeout, args, context, timestamp, result; + + const later = function () { + // 据上一次触发时间间隔 + const last = +new Date() - timestamp; + + // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait + if (last < wait && last > 0) { + timeout = setTimeout(later, wait - last); + } else { + timeout = null; + // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 + if (!immediate) { + result = func.apply(context, args); + if (!timeout) context = args = null; + } + } + }; + + return function (...args) { + context = this; + timestamp = +new Date(); + const callNow = immediate && !timeout; + // 如果延时不存在，重新设定延时 + if (!timeout) timeout = setTimeout(later, wait); + if (callNow) { + result = func.apply(context, args); + context = args = null; + } + + return result; + }; +} + +/** + * This is just a simple version of deep copy + * Has a lot of edge cases bug + * If you want to use a perfect deep copy, use lodash's _.cloneDeep + * @param {Object} source + * @returns {Object} + */ +export function deepClone(source) { + if (!source && typeof source !== "object") { + throw new Error("error arguments", "deepClone"); + } + const targetObj = source.constructor === Array ? [] : {}; + Object.keys(source).forEach((keys) => { + if (source[keys] && typeof source[keys] === "object") { + targetObj[keys] = deepClone(source[keys]); + } else { + targetObj[keys] = source[keys]; + } + }); + return targetObj; +} + +/** + * @param {Array} arr + * @returns {Array} + */ +export function uniqueArr(arr) { + return Array.from(new Set(arr)); +} + +/** + * @returns {string} + */ +export function createUniqueString() { + const timestamp = +new Date() + ""; + const randomNum = parseInt((1 + Math.random()) * 65536) + ""; + return (+(randomNum + timestamp)).toString(32); +} + +/** + * Check if an element has a class + * @param {HTMLElement} elm + * @param {string} cls + * @returns {boolean} + */ +export function hasClass(ele, cls) { + return !!ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); +} + +/** + * Add class to element + * @param {HTMLElement} elm + * @param {string} cls + */ +export function addClass(ele, cls) { + if (!hasClass(ele, cls)) ele.className += " " + cls; +} + +/** + * Remove class from element + * @param {HTMLElement} elm + * @param {string} cls + */ +export function removeClass(ele, cls) { + if (hasClass(ele, cls)) { + const reg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); + ele.className = ele.className.replace(reg, " "); + } +} + +// 替换邮箱字符 +export function regEmail(email) { + if (String(email).indexOf("@") > 0) { + const str = email.split("@"); + let _s = ""; + if (str[0].length > 3) { + for (var i = 0; i < str[0].length - 3; i++) { + _s += "*"; + } + } + var new_email = str[0].substr(0, 3) + _s + "@" + str[1]; + } + return new_email; +} + +// 替换手机字符 +export function regMobile(mobile) { + if (mobile.length > 7) { + var new_mobile = mobile.substr(0, 3) + "****" + mobile.substr(7); + } + return new_mobile; +} + +// 下载文件 +export function downloadFile(obj, name, suffix) { + const url = window.URL.createObjectURL(new Blob([obj])); + const link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + const fileName = parseTime(new Date()) + "-" + name + "." + suffix; + link.setAttribute("download", fileName); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + +/** + * 生成范围随机数 + * @param {Object} Min + * @param {Object} Max + */ +export function RandomNumBoth(Max, Min = 0) { + var Range = Max - Min; + var Rand = Math.random(); + var num = Min + Math.round(Rand * Range); //四舍五入 + return num; +} + +/** + * 判断是不是PC浏览器 + * @returns + */ +export function isPcBowser() { + if (!window.navigator) { + return false; + } else { + if (/Mobile|Android|webOS|iPhone|iPad|Phone/i.test(navigator.userAgent)) { + return false; + } else { + return true; + } + } +} + +/** + * 保留小数n位，不进行四舍五入 + * num你传递过来的数字, + * decimal你保留的几位,默认保留小数后两位 + * isInt 是否保留0 + */ +export function formatDecimal(num = 0, decimal = 2, isInt = false) { + num = num.toFixed(3).toString(); + const index = num.indexOf("."); + if (index !== -1) { + num = num.substring(0, decimal + index + 1); + } else { + num = num.substring(0); + } + //截取后保留两位小数 + if (isInt) { + return parseFloat(num); + } else { + return parseFloat(num).toFixed(decimal); + } +} + +/** + * 传入数组，以及要交换位置的2个元素的下标 + * @param {*} arr + * @param {*} i1 + * @param {*} i2 + * @returns + */ +export function swapArrayEle(arr, i1, i2) { + arr[i1] = arr.splice(i2, 1, arr[i1])[0]; + return arr; +} diff --git a/src/views/data/index.vue b/src/views/data/index.vue index e5e6a79..8a98c27 100644 --- a/src/views/data/index.vue +++ b/src/views/data/index.vue @@ -1,3 +1,1479 @@ \ No newline at end of file +
+ +
+
+
+
+ 营业 +
+
+ + 今天 + 昨天 + 最近7天 + 最近30天 + 本周 + 本月 + 自定义 + + +
+
+
+
+
+
+
{{ formatDecimal(tradeSale.incomeAmountAll || 0) }}
+
+ 营业实收（元） + +
+
+
+ + {{ item.payType }} +
+ {{ item.payAmount }} +
+
+ + +
+
+
+
+
+
销售金额（元）
+ +
+
+
+
+
+
+ +
+ 收：{{ formatDecimal(tradeSale.incomeAmount || 0) }} + 退：{{ formatDecimal(tradeSale.refundAmount || 0) }} +
+
+
+
+
+
充值金额（元）
+ +
+
+
+
+
+
+ +
+ 收：{{ formatDecimal(tradeSale.inAmount || 0) }} + 退：{{ formatDecimal(tradeSale.outAmount || 0) }} +
+
+
+
+
+
+
+
+
{{ formatDecimal(tradeVip.useAmount || 0) }}
+
会员消费（元）
+
+
+
+
+ 新增会员数 + {{ tradeVip.newFlow || 0 }}(人) +
+
+ 会员消费笔数 + {{ tradeVip.useNum || 0 }} +
+
+
+
+
+
+
客单价
+
+ +
{{ formatDecimal(tradeCount.unitPrice || 0) }}
+
+
+
+
+ 翻台率 + + + +
+
+ +
{{ tradeCount.turnoverRate }}
+
+
+
+
优惠金额
+
+ +
{{ formatDecimal(tradeCount.saveAmount || 0) }}
+
+
+
+
优惠笔数
+
+ +
{{ tradeCount.saveNum || 0 }}
+
+
+
+
+
+ +
+
+
+
+
+ 销售趋势 +
+
+ 支付占比 +
+
+ + 近7天 + 30天 + +
+
+
+
+ +
+
+
+
商品销售排行
+
+ + + 近7天 + 30天 + +
+
+ + +
+
+ + + + + + +
+ +
+
+
+
+ +
+ + + + + +