+
-
+
设计验证表
@@ -165,24 +165,18 @@ const handleShowInfo = async (value: string | number) => {
// 日期格式化方法
const dateFormat = (date: string | Date | null): string => {
if (!date) return '';
-
// 处理字符串类型的日期
if (typeof date === 'string') {
date = new Date(date);
}
-
// 检查日期是否有效
if (isNaN(date.getTime())) {
return '';
}
-
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
- const hours = String(date.getHours()).padStart(2, '0');
- const minutes = String(date.getMinutes()).padStart(2, '0');
-
- return `${year}-${month}-${day} ${hours}:${minutes}`;
+ return `${year}年${month}月${day}日`;
};
// 获取详情
diff --git a/src/views/design/volumeCatalog/index.vue b/src/views/design/volumeCatalog/index.vue
index 13c6ff9..ac55b85 100644
--- a/src/views/design/volumeCatalog/index.vue
+++ b/src/views/design/volumeCatalog/index.vue
@@ -47,6 +47,8 @@
+
+
@@ -55,8 +57,6 @@
-
-
@@ -68,6 +68,7 @@
查看文件
+
@@ -100,7 +101,7 @@
-
+
+
+

+
+
+ 多云 9°/18°
+ {{ week[date.week] }} ({{ date.ymd }})
+
+
+
+
+
+
+

+
管理系统
+
+
+
+
+
+
+
+
+
diff --git a/src/views/largeScreen/components/leftPage.vue b/src/views/largeScreen/components/leftPage.vue
new file mode 100644
index 0000000..4638875
--- /dev/null
+++ b/src/views/largeScreen/components/leftPage.vue
@@ -0,0 +1,13 @@
+
+ 左边
+
+
+
+
+
diff --git a/src/views/largeScreen/components/optionList.ts b/src/views/largeScreen/components/optionList.ts
new file mode 100644
index 0000000..7d9486f
--- /dev/null
+++ b/src/views/largeScreen/components/optionList.ts
@@ -0,0 +1,735 @@
+import * as echarts from 'echarts/core';
+// import { PictorialBarChart } from 'echarts/charts'
+// 客流量图
+export const getOption = (xData: any, yData: any) => {
+ const data = {
+ xData,
+ yData
+ };
+ const maxData = Math.ceil(Math.max(...data.yData));
+ const barData = data.yData.map((item) => {
+ return maxData;
+ });
+ const option = {
+ grid: {
+ top: '10%',
+ left: '8%',
+ right: '5%',
+ bottom: '20%'
+ // containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: data.xData,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: true
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ yAxis: {
+ show: true,
+ type: 'value',
+ max: maxData,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'solid',
+ color: 'rgba(73, 169, 191, 0.2)'
+ }
+ }
+ },
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: '',
+ textStyle: {
+ color: '#fff'
+ }
+ },
+ dataZoom: [
+ {
+ // show: true,
+ start: 0,
+ end: 30,
+ bottom: 2, // 下滑块距离x轴底部的距离
+ height: 23
+ },
+ {
+ type: 'inside'
+ }
+ ],
+ series: [
+ {
+ name: '柱图',
+ type: 'bar',
+ // barWidth: '10%',
+ data: barData,
+ tooltip: {
+ show: false
+ },
+ barGap: '-50%',
+ itemStyle: {
+ normal: {
+ color: 'rgba(73, 169, 191, 0.2)'
+ }
+ }
+ },
+ {
+ name: '客单价',
+ type: 'line',
+ showAllSymbol: true,
+ symbol: 'circle',
+ symbolSize: 8,
+ lineStyle: {
+ normal: {
+ color: 'rgba(217, 231, 255, 0.3)',
+ shadowColor: 'rgba(0, 0, 0, .3)',
+ shadowBlur: 0
+ // shadowOffsetY: 5,
+ // shadowOffsetX: 5,
+ }
+ },
+ itemStyle: {
+ color: 'rgba(224, 194, 22, 1)',
+ borderWidth: 0,
+ shadowBlur: 0
+ },
+ label: {
+ show: false, // 显示数据标签
+ color: 'rgba(255, 208, 59, 1)'
+ },
+ data: data.yData
+ }
+ ]
+ };
+ return option;
+};
+
+// 上菜分析图
+export const getOption2 = (data: any) => {
+ const maxData = Math.max(...data.yData);
+ const option = {
+ // backgroundColor: "#38445E",
+ grid: {
+ left: '10%',
+ top: '13%',
+ bottom: '16%',
+ right: '10%'
+ },
+ xAxis: {
+ data: data.xData,
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255, 129, 109, 0.1)',
+ width: 1 //这里是为了突出显示加上的
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#999',
+ fontSize: 12
+ }
+ }
+ },
+ yAxis: [
+ {
+ splitNumber: 2,
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255, 129, 109, 0.1)',
+ width: 1 //这里是为了突出显示加上的
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#999'
+ }
+ },
+ splitArea: {
+ areaStyle: {
+ color: 'rgba(255,255,255,.5)'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(255,255,255,.5)',
+ width: 0.5,
+ type: 'dashed'
+ }
+ }
+ }
+ ],
+ dataZoom: [
+ {
+ // show: true,
+
+ start: 0,
+ end: 30,
+ bottom: 2, // 下滑块距离x轴底部的距离
+ height: 23
+ },
+ {
+ type: 'inside'
+ }
+ ],
+ tooltip: {
+ trigger: 'axis', // 设置为 'item',表示鼠标悬浮在图形上时显示 tooltip
+ // formatter: function (params) {
+ // return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
+ // },
+ backgroundColor: '', // 设置提示框的背景颜色
+ textStyle: {
+ color: '#fff' // 设置文字颜色
+ // fontSize: 14 // 设置文字大小
+ }
+ },
+ series: [
+ {
+ name: '订单数',
+ type: 'pictorialBar',
+ barCategoryGap: '0%',
+ symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
+ label: {
+ show: false,
+ position: 'top',
+ distance: 15,
+ color: 'rgba(255, 235, 59, 1)',
+ // fontWeight: "bolder",
+ fontSize: 16
+ },
+ itemStyle: {
+ normal: {
+ // color: {
+ // type: "linear",
+ // x: 0,
+ // y: 0,
+ // x2: 0,
+ // y2: 1,
+ // colorStops: [
+ // {
+ // offset: 0,
+ // color: "rgba(232, 94, 106, .8)", // 0% 处的颜色
+ // },
+ // {
+ // offset: 1,
+ // color: "rgba(232, 94, 106, .1)", // 100% 处的颜色
+ // },
+ // ],
+ // global: false, // 缺省为 false
+ // },
+ color: function (params: any) {
+ if (params.data === maxData) {
+ return 'rgba(255, 219, 103, 0.6)';
+ } else {
+ return 'rgba(239, 244, 255, 0.45)';
+ }
+ }
+ },
+ emphasis: {
+ opacity: 1
+ }
+ },
+ data: data.yData,
+ z: 10
+ }
+ ]
+ };
+ return option;
+};
+//食堂周报图
+export const getLineOption = (lineData: any) => {
+ const maxData = Math.ceil(Math.max(...lineData.line1));
+ const option = {
+ backgroundColor: '',
+ tooltip: {
+ trigger: 'axis',
+ backgroundColor: 'transparent',
+ color: '#7ec7ff',
+ textStyle: {
+ color: '#fff'
+ },
+ borderColor: '#7ec7ff'
+ },
+ // legend: {
+ // align: 'left',
+ // right: '5%',
+ // top: '1%',
+ // type: 'plain',
+ // textStyle: {
+ // color: '#fff',
+ // fontSize: 12
+ // },
+ // // icon:'rect',
+ // itemGap: 15,
+ // itemWidth: 18,
+ // data: [
+ // {
+ // name: '上周销售量'
+ // },
+ // {
+ // name: '本周销售量'
+ // }
+ // ]
+ // },
+ grid: {
+ top: '12%',
+ left: '1%',
+ right: '3%',
+ bottom: '12%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: lineData.xLabel,
+ axisLine: {
+ show: false
+ },
+ axisTick: {
+ show: true
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ },
+ yAxis: {
+ show: true,
+ type: 'value',
+ max: maxData,
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'solid',
+ color: 'rgba(73, 169, 191, 0.2)'
+ }
+ }
+ },
+ dataZoom: [
+ {
+ // show: true,
+ start: 0,
+ end: 30,
+ bottom: 2, // 下滑块距离x轴底部的距离
+ height: 23
+ },
+ {
+ type: 'inside'
+ }
+ ],
+ series: [
+ {
+ name: '逆变器功率',
+ type: 'line',
+ symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
+ showAllSymbol: false,
+ symbolSize: 0,
+ smooth: true,
+ lineStyle: {
+ width: 1,
+ color: 'rgba(80, 164, 225, 1)', // 线条颜色
+ borderColor: 'rgba(0,0,0,.4)'
+ },
+ itemStyle: {
+ color: 'rgba(80, 164, 225, 1)',
+ borderWidth: 2,
+ show: false
+ },
+ tooltip: {
+ show: true
+ },
+ areaStyle: {
+ //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: 'rgba(80, 164, 225, 0.4)'
+ },
+ {
+ offset: 1,
+ color: 'rgba(80, 164, 225, 0)'
+ }
+ ],
+ false
+ ),
+ shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
+ shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+ },
+ data: lineData.line1
+ }
+ ]
+ };
+ return option;
+};
+//#endregion
+
+// 菜品销售图
+export const getDishesOption = (data?: any) => {
+ const res = data;
+ const dataIndex = 1;
+ const option = {
+ xAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'category',
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ margin: 10 // 增大标签与轴线间距
+ },
+ width: 60, // 增大Y轴宽度
+ data: res.name,
+ axisLine: {
+ lineStyle: {
+ color: '#93C9C3'
+ }
+ }
+ },
+ grid: {
+ top: '5%', // 设置网格区域与容器之间的边距
+ bottom: '5%', // 同理
+ left: '5%',
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'bar',
+ data: res.ratio,
+ barMaxWidth: 25,
+ itemStyle: {
+ barBorderRadius: 3,
+ color: 'rgba(12, 242, 216, 0.2)'
+ },
+ label: {
+ show: false
+ }
+ },
+ {
+ type: 'bar',
+ data: res.data,
+ barGap: '-100%',
+ barMaxWidth: 25,
+ itemStyle: {
+ barBorderRadius: 3,
+ color: function (params: any) {
+ if (params.data <= 300) {
+ return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { color: 'rgba(252, 105, 0, 1)', offset: 0 },
+ { color: 'rgba(250, 42, 42, 1)', offset: 1 }
+ ]);
+ } else {
+ return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { color: 'rgba(73, 169, 191, 1)', offset: 0 },
+ { color: 'rgba(108, 248, 236, 1)', offset: 1 }
+ ]);
+ }
+ }
+ },
+ label: {
+ show: true,
+ position: [200, -15],
+ formatter: function (params: any) {
+ if (params.data <= 300) {
+ return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+ } else {
+ return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
+ }
+ },
+ rich: {
+ a: {
+ color: 'rgba(255, 78, 51, 1)'
+ },
+ b: {
+ color: 'rgba(255, 235, 59, 1)'
+ }
+ }
+ }
+ }
+ ]
+ };
+ return option;
+};
+// 菜品库存图
+export const getInventoryOption = () => {
+ const res = {
+ data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
+ name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
+ ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
+ },
+ dataIndex = 1;
+ const option = {
+ xAxis: {
+ type: 'value',
+ axisTick: {
+ show: false
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'category',
+ show: false,
+ axisTick: {
+ show: false
+ },
+ axisLabel: {
+ margin: 10 // 增大标签与轴线间距
+ },
+ width: 20, // 增大Y轴宽度
+ data: res.name,
+ axisLine: {
+ show: false,
+ lineStyle: {
+ color: '#93C9C3'
+ }
+ }
+ },
+ grid: {
+ top: '5%', // 设置网格区域与容器之间的边距
+ bottom: '5%', // 同理
+ left: '5%',
+ containLabel: true
+ },
+ series: [
+ {
+ type: 'bar',
+ data: res.ratio,
+ barMaxWidth: 6,
+ itemStyle: {
+ barBorderRadius: 3,
+ color: 'rgba(12, 242, 216, 0.2)'
+ },
+ label: {
+ show: true,
+ position: [0, -15],
+ fontSize: 14,
+ color: '#fff',
+ formatter: function (params: any) {
+ return params.name;
+ }
+ // rich: {
+ // a: {
+ // color: "rgba(255, 78, 51, 1)",
+ // },
+ // b: {
+ // color: "rgba(255, 235, 59, 1)",
+ // },
+ // },
+ }
+ },
+ {
+ type: 'bar',
+ data: res.data,
+ barGap: '-100%',
+ barMaxWidth: 6,
+ itemStyle: {
+ barBorderRadius: 0,
+ color: function (params: any) {
+ if (params.dataIndex === dataIndex) {
+ return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { color: 'rgba(255, 78, 51, 1)', offset: 0 },
+ { color: 'rgba(252, 105, 0, 0)', offset: 1 }
+ ]);
+ } else {
+ return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
+ { color: 'rgba(242, 224, 27, 1)', offset: 0 },
+ { color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
+ { color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
+ ]);
+ }
+ }
+ },
+ label: {
+ show: true,
+ position: [200, -15],
+ formatter: function (params: any) {
+ if (params.dataIndex === dataIndex) {
+ return `{a| ${params.value}g}`;
+ } else {
+ return `{b| ${params.value}g}`;
+ }
+ },
+ rich: {
+ a: {
+ color: 'rgba(255, 78, 51, 1)'
+ },
+ b: {
+ color: 'rgba(255, 235, 59, 1)'
+ }
+ }
+ }
+ }
+ ]
+ };
+ return option;
+};
+export const getBarOptions = (data: any) => {
+ const option = {
+ backgroundColor: '',
+ grid: {
+ left: '7%',
+ top: '4%',
+ bottom: '25%',
+ right: '2%'
+ },
+ tooltip: {
+ show: true,
+ backgroundColor: '',
+ trigger: 'axis',
+ formatter: '{b0}:{c0}元',
+ textStyle: {
+ color: '#fff'
+ }
+ // borderColor: 'rgba(252, 217, 18, 1)'
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: data.name,
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(108, 128, 151, 0.3)'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: '#999',
+ fontSize: 12
+ }
+ },
+ axisTick: {
+ // show: true,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(108, 128, 151, 0.3)',
+ type: 'dashed'
+ }
+ }
+ }
+ ],
+ yAxis: [
+ {
+ axisLabel: {
+ formatter: function (value) {
+ if (value >= 1000) {
+ value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
+ }
+ return value;
+ },
+ color: 'rgba(255, 255, 255, 0.8)'
+ },
+ axisTick: {
+ show: false
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(108, 128, 151, 0.3)'
+ }
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: 'rgba(108, 128, 151, 0.3)',
+ type: 'dashed'
+ }
+ }
+ }
+ ],
+ dataZoom: [
+ {
+ // show: true,
+ start: 0,
+ end: 30,
+ bottom: 2, // 下滑块距离x轴底部的距离
+ height: 23
+ },
+ {
+ type: 'inside'
+ }
+ ],
+ series: [
+ {
+ type: 'bar',
+ data: data.value,
+ stack: '合并',
+ barWidth: '15',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
+ },
+ {
+ offset: 0.7,
+ color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
+ }
+ ],
+ false
+ )
+ },
+ label: {
+ show: true,
+ formatter: '{c}',
+ position: 'top',
+ color: '#fff',
+ fontSize: 10
+ // padding: 5
+ }
+ }
+ // {
+ // type: 'bar',
+ // stack: '合并',
+ // data: topData,
+ // barWidth: '15',
+ // itemStyle: {
+ // color: 'rgba(252, 217, 18, 1)'
+ // }
+ // }
+ ]
+ };
+ return option;
+};
diff --git a/src/views/largeScreen/components/rightPage.vue b/src/views/largeScreen/components/rightPage.vue
new file mode 100644
index 0000000..247c4ce
--- /dev/null
+++ b/src/views/largeScreen/components/rightPage.vue
@@ -0,0 +1,13 @@
+
+ 右边
+
+
+
+
+
diff --git a/src/views/largeScreen/index.vue b/src/views/largeScreen/index.vue
new file mode 100644
index 0000000..8ce47fd
--- /dev/null
+++ b/src/views/largeScreen/index.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
diff --git a/src/views/login.vue b/src/views/login.vue
index d9016a7..6531c73 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -73,7 +73,7 @@