zianxin/pj_plan_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:营养分析

Browse Source
This commit is contained in:
dzc committed 2025-10-27 18:08:32 +08:00
1 parent c0e98675b8
commit afb44c16e7
8 files changed
+393 -11
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+5 -5
View File
@@ -2,14 +2,14 @@
<html lang="zh-CN" class="dark">
<head>
<!-- 通用禁止所有搜索引擎 -->
<meta name="robots" content="noindex,nofollow">
<meta name="robots" content="noindex,nofollow" />
<!-- 针对性禁止百度 -->
<meta name="Baiduspider" content="noindex,nofollow">
<meta name="Baiduspider" content="noindex,nofollow" />
<!-- 针对性禁止谷歌 -->
<meta name="Googlebot" content="noindex,nofollow">
<meta name="Googlebot" content="noindex,nofollow" />
<!-- 针对性禁止 Bing -->
<meta name="Bingbot" content="noindex,nofollow">
<meta name="MSNBot" content="noindex,nofollow">
<meta name="Bingbot" content="noindex,nofollow" />
<meta name="MSNBot" content="noindex,nofollow" />
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
src/api/nutrition.js
+11
View File
@@ -65,4 +65,15 @@ export const repurchase = (data) => {
method: 'post',
data,
})
}
/**
* 外部就餐情况(合作商家)
*/
export const external = (data) => {
return service({
url: 'hard/panel-nutrition/external',
method: 'post',
data,
})
}
src/components/nutrition-analyse/index.vue
+1 -1
View File
@@ -47,7 +47,7 @@ const tabList = [
{ label: "本月", value: "THIS_MONTH", component: MonthStatistics },
{ label: "本年", value: "THIS_YEAR", component: YearStatistics },
];
const activeIndex = ref(0);
const activeIndex = ref(1);
const activeKey = computed(() => tabList[activeIndex.value].value);
const componentData = computed(() => {
if (!props.data) {
src/components/nutrition-external.vue
+327
View File
@@ -0,0 +1,327 @@
<template>
<div class="container">
<div v-if="false" class="segmented">
<el-segmented v-model="activeSegment" :options="props.segments" :props="{ label: 'label', value: 'value' }"
size="small" @change="dateTypeChange" />
</div>
<div ref="chartRef" style="width: 100%; height: 100%" />
</div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, watch, useTemplateRef, ref, reactive } from "vue";
import * as echarts from "echarts";
const emit = defineEmits(["changeDateType"]);
const props = defineProps({
labels: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
segments: {
type: Array,
default: () => [
{
label: "本周",
value: "THIS_WEEK",
},
{
label: "本月",
value: "THIS_MONTH",
},
{
label: "近半年",
value: "HALF_YEAR",
},
],
},
});
const activeSegment = ref(props.segments[0].value || "TODAY");
if (Array.isArray(props.segments) && props.segments.length > 0) {
activeSegment.value = props.segments[0].value;
}
const chartRef = useTemplateRef("chartRef");
let chartInstance = null;
onMounted(() => {
chartInstance = echarts.init(chartRef.value);
chartInstance.setOption(option);
window.addEventListener("resize", handleResize);
});
onBeforeUnmount(() => {
if (chartInstance) {
chartInstance.dispose();
chartInstance = null;
}
window.removeEventListener("resize", handleResize);
});
const handleResize = () => {
if (chartInstance) {
chartInstance.resize();
}
};
const dateTypeChange = (e) => {
emit("changeDateType", e);
};
watch(
() => [props.data, props.labels],
(val) => {
if (!chartInstance) return;
chartInstance.setOption({
xAxis: {
data: props.labels,
},
series: [{ data: props.data }],
});
}
);
const option = {
backgroundColor: "transparent",
grid: {
top: "18%",
left: "0%",
right: "4%",
bottom: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 0, 0, 0.8)",
borderColor: "#000000",
borderWidth: 1,
textStyle: {
color: "#ffffff",
fontSize: 12,
},
padding: 10,
// formatter: (params) => {
// return `${params[0].axisValue}<br/>${params[0].marker}${params[0].value}辆<br/>
// ${params[1].axisValue}<br/>${params[1].marker}${params[1].value}辆<br/>
// ${params[2].axisValue}<br/>${params[2].marker}${params[2].value}辆<br/>`;
// },
valueFormatter: (value) => value,
},
legend: {
icon: "rect",
right: 0,
top: 0,
itemWidth: 14,
itemHeight: 8,
itemGap: 16,
textStyle: { color: "#ffffff", fontSize: 12 },
itemStyle: { borderWidth: 0, borderColor: "transparent" },
data: [
{ itemStyle: { color: "#1DB996", borderWidth: 0, borderColor: "transparent" } },
{ itemStyle: { color: "#01C6EF", borderWidth: 0, borderColor: "transparent" } },
{ itemStyle: { color: "#F7CC08", borderWidth: 0, borderColor: "transparent" } },
],
},
xAxis: {
type: "category",
data: [],
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#21303C",
},
},
axisLabel: {
color: "#ffffff",
fontSize: 10,
// backgroundColor: "#2d5a3d",
// padding: [4, 4, 4, 4],
},
},
yAxis: {
type: "value",
name: "",
min: 0,
nameTextStyle: {
color: "#ffffff",
fontSize: 10,
padding: [0, 0, 0, 40]
// align: "right",
},
axisLine: {
show: false,
lineStyle: {
color: "#00ffff",
},
},
axisLabel: {
color: "#ffffff",
fontSize: 10,
},
splitLine: {
lineStyle: {
color: "rgba(255, 255, 255, 0.2)",
},
},
},
series: [
{
name: "",
type: "line",
// stack: "Total",
data: [],
smooth: true,
symbol: "circle",
symbolSize: 0,
yAxisIndex: 0,
lineStyle: {
color: "#1DB996",
width: 2,
},
itemStyle: {
color: "#1DB996",
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
formatter: "{c}",
color: "#1DB996",
fontWeight: "bold",
fontSize: 12,
},
areaStyle: {
color: "#1DB996",
opacity: 0.8,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
// { offset: 0, color: "rgba(255, 107, 107, 0.3)" },
{ offset: 0, color: "#1C7C67" },
{ offset: 1, color: "#0D1E25" },
],
},
},
},
{
name: "",
type: "line",
// stack: "Total",
data: [],
smooth: true,
symbol: "circle",
symbolSize: 0,
yAxisIndex: 0,
lineStyle: {
color: "#01C6EF",
width: 2,
},
itemStyle: {
color: "#01C6EF",
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
formatter: "{c}",
color: "#01C6EF",
fontWeight: "bold",
fontSize: 12,
},
areaStyle: {
color: "#01C6EF",
opacity: 0.8,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
// { offset: 0, color: "rgba(255, 107, 107, 0.3)" },
{ offset: 0, color: "#097186" },
{ offset: 1, color: "#0D1E25" },
],
},
},
},
{
name: "",
type: "line",
// stack: "Total",
data: [],
smooth: true,
symbol: "circle",
symbolSize: 0,
yAxisIndex: 0,
lineStyle: {
color: "#F7CC08",
width: 2,
},
itemStyle: {
color: "#F7CC08",
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
formatter: "{c}",
color: "#F7CC08",
fontWeight: "bold",
fontSize: 12,
},
areaStyle: {
color: "#F7CC08",
opacity: 0.8,
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
// { offset: 0, color: "rgba(255, 107, 107, 0.3)" },
{ offset: 0, color: "#6B6119" },
{ offset: 1, color: "#0D1E25" },
],
},
},
},
],
};
</script>
<style scoped lang="less">
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.segmented {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
.el-segmented {
--el-segmented-item-selected-color: var(--el-text-color-primary);
--el-segmented-item-selected-bg-color: #095d82;
--el-border-radius-base: 8px;
}
}
</style>
src/components/person-abnormal-event-line-chart.vue
+6 -2
View File
@@ -53,8 +53,6 @@ watch(
() => props.data,
(val) => {
if (!chartInstance) return;
// console.log(props.type, "type");
// console.log(props.data, "data");
if (props.type == "nutrition") {
const { hc, sc, zs } = props.data;
chartInstance.setOption({
@@ -127,6 +125,12 @@ const option = {
bottom: "10%",
containLabel: true,
},
dataZoom: [
{
type: 'inside',
throttle: 50
}
],
tooltip: {
trigger: "axis",
backgroundColor: "rgba(0, 0, 0, 0.8)",
src/views/canteen.vue
+1 -1
View File
@@ -183,7 +183,7 @@ onBeforeUnmount(() => {
});
const changeQueryDate = (e) => {
canteenReportRef.value?.refresh(e)
shopReportRef.value?.refresh(e)
}
// 用餐时间段统计
src/views/nutrition.vue
+38 -2
View File
@@ -10,8 +10,9 @@
</AsideBlock>
<AsideBlock>
<template #header>
<span>今日就餐人数统计</span>
<span>本周外部就餐情况(合作商家)</span>
</template>
<PersonAbnormalEventLineChart type="canteen" yTitle="购买人数" :data="timerObj.external.data" />
</AsideBlock>
<AsideBlock>
<template #header>
@@ -73,6 +74,7 @@ import AbnormalEventTypeStatus from "@/components/abnormal-event-type-status.vue
import NutritionAnalyse from "@/components/nutrition-analyse/index.vue"
import PersonThroughRank from "@/components/person-through-rank.vue";
import PersonAbnormalEventLineChart from "@/components/person-abnormal-event-line-chart.vue";
import NutritionExternal from "@/components/nutrition-external.vue"
import NutritionTop from "@/components/nutrition-top.vue"
const { notificationAdd, notificationClear } = useNotification();
@@ -102,7 +104,19 @@ const timerObj = reactive({
labels: null,
},
queryParams: {
dateRangeType: "YESTERDAY"
dateRangeType: "TODAY"
},
},
// 外部就餐情况(合作商家)
external: {
initial: null,
interval: 10 * 1000,
data: {
data: null,
labels: null,
},
queryParams: {
dateRangeType: "THIS_WEEK"
},
},
// 营养分析趋势
@@ -142,6 +156,7 @@ onMounted(() => {
getClassBuyCount()
getCuisineTop()
getNutritionAnalyseTrend()
getExternal()
})
onBeforeUnmount(() => {
@@ -196,6 +211,27 @@ const getNutritionAnalyseTrend = () => {
}, timerObj.nutritionAnalyseTrend.interval)
}
// 外部就餐情况(合作商家)
const getExternal = () => {
timerObj.external.initial = simplePoll(async () => {
try {
const { code, data } = await nutritionApi.external({ ...timerObj.external.queryParams });
if (code != 0) throw new Error("code!=0");
console.log("外部就餐情况(合作商家):", data);
if (!data) return;
timerObj.external.data = data;
} catch (error) {
console.error("|外部就餐情况(合作商家)|意外的错误:", error);
}
}, timerObj.external.interval)
}
const externalChangeDateType = (type) => {
console.log("type:", type);
timerObj.external.queryParams.dateRangeType = type;
timerObj.external.initial.executeOnce(type);
}
// 营养分析
const getNutritionAnalyse = () => {
timerObj.nutritionAnalyse.initial = simplePoll(async () => {
src/views/shop.vue
+4
View File
@@ -207,6 +207,10 @@ const getDeviceStatusData = () => {
}, timerObj.deviceTotal.interval);
};
const changeQueryDate = (e) => {
shopReportRef.value?.refresh(e)
}
// 设备在线率趋势 (近7日)
const getDeviceOnlineData = async () => {
timerObj.deviceOfflineRate.initial = simplePoll(async () => {