第一次提交

2025-11-04 15:49:23 +08:00
commit 968fe28de1
20 changed files with 19619 additions and 0 deletions
@@ -0,0 +1,2 @@
+NODE_ENV=development
+VUE_APP_BASE_API=http://192.168.1.209:9002
@@ -0,0 +1,2 @@
+NODE_ENV=production
+VUE_APP_BASE_API=https://yyjk.shuziweidao.com/gateway
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,24 @@
+# mutrition_mon
+
+## 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,44 @@
+{
+  "name": "mutrition_mon",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "axios": "^1.13.0",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.6.5"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.19",
+    "@vue/cli-plugin-eslint": "~4.5.19",
+    "@vue/cli-service": "~4.5.19",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}
@@ -0,0 +1,65 @@
+{
+  "title": "营养监控项目运营核心数据总览",
+  "sections": [
+    {
+      "name": "基础资源",
+      "items": [
+        {
+          "title": "基础规模",
+          "lines": ["单位数：26 个","食堂数：93 个"]
+        },
+        {
+          "title": "食品资源",
+          "lines": ["食品总数：4074 个","食管数量：2174 个"]
+        },
+        {
+          "title": "使用数据",
+          "lines": ["总人数：3068 人","本周总使用人数：2101 人，较上周：-1.02%"]
+        },
+        {
+          "title": "设备配置",
+          "lines": ["餐线数：87 条"],
+          "secondTitle": ["包好设备"],
+          "secondlines": [["D款：389 台", "H款：178 台", "F款：137 台", "绑盘机款：97 台", "落地屏：93 台"]]
+        }
+      ]
+    },
+    {
+      "name": "核心运营",
+      "items": [
+        {
+          "title": "运营周期",
+          "lines": ["总运行天数：975 天"]
+        },
+        {
+          "title": "重量消耗",
+          "lines": ["总消耗重量：871238 kg","总用餐重量：6360.2 kg"]
+        },
+        {
+          "title": "用餐数据",
+          "lines": ["总用餐人次数：3026 人","总用餐热量：9,4096,950 kcal"]
+        },
+        {
+          "title": "数据资产",
+          "secondTitle": ["总数据量","总数据条"],
+          "secondlines": [["存储空间：179 Gb / 387 Mb"], ["就餐记录：507367 条"]]
+        }
+      ]
+    },
+    {
+      "name": "人均消察",
+      "items": [
+        {
+          "title": "人均指标",
+          "secondTitle": ["日平均(本周/上周)","早餐平均(本周/上周)","午餐平均(本周/上周)","晚餐平均(本周/上周)"],
+          "secondlines": [
+            ["重量：2031 g / +61 g","热量：1798 kcal / +35 kcal"],
+            ["重量：356 g / -28 g","热量：412 kcal / -18 kcal"],
+            ["重量：890 g / +61 g","热量：998 kcal / +37 kcal"],
+            ["重量：702 g / +33 g","热量：1011 kcal / +51 kcal"]
+          ]
+        }
+      ]
+    }
+  ]
+}
@@ -0,0 +1,65 @@
+{
+  "title": "营养监控项目运营核心数据总览",
+  "sections": [
+    {
+      "name": "基础资源",
+      "items": [
+        {
+          "title": "基础规模",
+          "lines": ["单位数：19 个","食堂数：30 个"]
+        },
+        {
+          "title": "餐品资源",
+          "lines": ["食品总数：6687 个","食管数量：2174 个"]
+        },
+        {
+          "title": "使用数据",
+          "lines": ["总人数：13722 人","本总使用人次：14349 人次，较上周：-1.02%"]
+        },
+        {
+          "title": "设备配置",
+          "lines": ["餐线数：31 条"],
+          "secondTitle": ["包含设备"],
+          "secondlines": [["D款：389 台", "H款：178 台", "F款：137 台", "绑盘机款：87 台", "落地屏：93 台"]]
+        }
+      ]
+    },
+    {
+      "name": "核心运营",
+      "items": [
+        {
+          "title": "运营周期",
+          "lines": ["总运行天数：975 天"]
+        },
+        {
+          "title": "重量消耗",
+          "lines": ["总消耗重量：871238 kg","总消耗量：6360.2 kg"]
+        },
+        {
+          "title": "用餐数据",
+          "lines": ["总用餐人次数：3026 人","总用餐热量：9,4096,950 kcal"]
+        },
+        {
+          "title": "数据资产",
+          "secondTitle": ["总数据量","总数据条"],
+          "secondlines": [["存储空间：179 Gb / 387 Mb"], ["就餐记录：507367 条"]]
+        }
+      ]
+    },
+    {
+      "name": "人均洞察",
+      "items": [
+        {
+          "title": "人均指标",
+          "secondTitle": ["日平均(本周/上周)","早餐平均(本周/上周)","午餐平均(本周/上周)","晚餐平均(本周/上周)"],
+          "secondlines": [
+            ["重量：2031 g / +61 g","热量：1798 kcal / +35 kcal"],
+            ["重量：356 g / -28 g","热量：412 kcal / -18 kcal"],
+            ["重量：890 g / +61 g","热量：998 kcal / +37 kcal"],
+            ["重量：702 g / +33 g","热量：1011 kcal / +51 kcal"]
+          ]
+        }
+      ]
+    }
+  ]
+}
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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="data:;base64,=">
+    <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,27 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default { name: 'App' }
+</script>
+
+<style>
+/* 简洁样式重置 */
+*, *::before, *::after { box-sizing: border-box; }
+html, body, #app { height: 100%; }
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #f4f6fb;
+}
+h1, h2, h3, h4, h5, h6, p { margin: 0; }
+ul, ol { margin: 0; padding: 0; list-style: none; }
+a { color: inherit; text-decoration: none; }
+img { max-width: 100%; display: block; }
+button, input, textarea, select { font: inherit; color: inherit; background: transparent; border: 0; outline: none; }
+</style>
@@ -0,0 +1,28 @@
+import request from './index'
+
+// 查询基础资源统计
+export function getStResourceBasicStats(params) {
+  return request({
+    url: '/foodInfoReport/basicstats/stResourceBasicStats/queryByStats',
+    method: 'get',
+    params
+  })
+}
+
+// 查询核心运营统计
+export function getStOperationCoreStats(params) {
+  return request({
+    url: '/foodInfoReport/basicstats/stOperationCoreStats/queryByStats',
+    method: 'get',
+    params
+  })
+}
+
+// 查询人均洞察统计
+export function getStInsightPerCapitaStats(params) {
+  return request({
+    url: '/foodInfoReport/basicstats/stInsightPerCapitaStats/queryByStats',
+    method: 'get',
+    params
+  })
+}
@@ -0,0 +1,37 @@
+import axios from 'axios'
+
+// 创建 axios 实例
+const service = axios.create({
+  baseURL: process.env.VUE_APP_BASE_API || 'http://192.168.1.209:9002', // 根据环境自动切换，默认指向后端服务
+  timeout: 10000 // 请求超时时间
+})
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    // 加 token 等操作
+    // const token = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NjEyMTc0ODMsInVzZXJJZCI6IjAwMDAwMDAwMDAwMDAwMDAwMDEifQ.nUFCqtYJyNRaQy7tv2dJg5MDob77jljqNIQWi6yABMc'
+    // config.headers['Authorization'] = token
+    // config.headers['x-access-token'] = token
+    return config
+  },
+  error => {
+    console.error('请求错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    const res = response.data
+    // 这里可根据返回结构调整
+    return res
+  },
+  error => {
+    console.error('响应错误:', error)
+    return Promise.reject(error)
+  }
+)
+
+export default service
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  render: h => h(App),
+}).$mount('#app')
@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from '@/views/Home.vue'
+// import Dashboard from '@/views/Dashboard.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  mode: 'history',
+  routes: [
+    { path: '/', name: 'Home', component: Home },
+    // { path: '/', name: 'Dashboard', component: Dashboard }
+  ]
+})
@@ -0,0 +1,386 @@
+<template>
+  <div class="dashboard">
+    <h2 class="page-title">{{ ds.title }}</h2>
+
+    <div class="cards" v-if="ds.sections && ds.sections.length">
+      <section
+        v-for="(sec, sidx) in ds.sections"
+        :key="'sec-' + sidx"
+        class="card"
+      >
+        <header
+          class="card-header"
+          :class="headerClassByIndex(sidx)"
+        >
+          <span>{{ sec.name }}</span>
+        </header>
+
+        <div class="card-body">
+          <ul class="list">
+            <li
+              v-for="(it, idx) in sec.items"
+              :key="'sec-' + sidx + '-' + idx"
+              class="item"
+            >
+              <div class="item-content">
+                <div class="item-title" v-if="it.title">
+                  <span class="sq"></span>
+                  {{ it.title }}
+                </div>
+
+                <!-- secondTitle 与 secondlines 对应展示：若只有一个标题则把 secondlines 全部按两列分组显示 -->
+                <div v-if="it.secondTitle && it.secondTitle.length">
+                  <!-- 先显示本项的 lines（例如：餐线数） -->
+                  <div class="sub-row" v-for="(pair, i) in pairLines(it.lines || [])" :key="'pre-' + i">
+                    <div class="sub-col" v-if="pair[0]">
+                      <span
+                        v-for="(p, pi) in tokenize(pair[0])"
+                        :key="'pre1-' + i + '-' + pi"
+                        :class="[p.isNum ? 'num' : '', p.signClass]"
+                      >{{ p.text }}</span>
+                    </div>
+                    <div class="sub-col" v-if="pair[1]">
+                      <span
+                        v-for="(p, pi) in tokenize(pair[1])"
+                        :key="'pre2-' + i + '-' + pi"
+                        :class="[p.isNum ? 'num' : '', p.signClass]"
+                      >{{ p.text }}</span>
+                    </div>
+                  </div>
+                  <!-- 多标题：每个标题对应 secondlines 的两条 -->
+                  <template v-if="it.secondTitle.length > 1">
+                    <div class="group" v-for="(st, gi) in it.secondTitle" :key="'st-' + gi">
+                      <div class="item-sub group-title">{{ st }}</div>
+                      <div
+                        class="sub-row"
+                        v-for="(pair, i) in pairLines((it.secondlines && it.secondlines[gi]) ? it.secondlines[gi] : [])"
+                        :key="'sg-' + gi + '-' + i"
+                      >
+                        <div class="sub-col" v-if="pair[0]">
+                          <span
+                            v-for="(p, pi) in tokenize(pair[0])"
+                            :key="'sg1-' + gi + '-' + i + '-' + pi"
+                            :class="[p.isNum ? 'num' : '', p.signClass]"
+                          >{{ p.text }}</span>
+                        </div>
+                        <div class="sub-col" v-if="pair[1]">
+                          <span
+                            v-for="(p, pi) in tokenize(pair[1])"
+                            :key="'sg2-' + gi + '-' + i + '-' + pi"
+                            :class="[p.isNum ? 'num' : '', p.signClass]"
+                          >{{ p.text }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                  <!-- 单一标题：secondlines 全部展示，左右分组 -->
+                  <template v-else>
+                    <div class="group" :key="'st-0'">
+                      <div class="item-sub group-title">{{ it.secondTitle[0] }}</div>
+                      <div class="sub-row" v-for="(pair, i) in pairLines((it.secondlines && it.secondlines[0]) ? it.secondlines[0] : [])" :key="'sp-' + i">
+                        <div class="sub-col" v-if="pair[0]">
+                          <span
+                            v-for="(p, pi) in tokenize(pair[0])"
+                            :key="'sp1-' + i + '-' + pi"
+                            :class="[p.isNum ? 'num' : '', p.signClass]"
+                          >{{ p.text }}</span>
+                        </div>
+                        <div class="sub-col" v-if="pair[1]">
+                          <span
+                            v-for="(p, pi) in tokenize(pair[1])"
+                            :key="'sp2-' + i + '-' + pi"
+                            :class="[p.isNum ? 'num' : '', p.signClass]"
+                          >{{ p.text }}</span>
+                        </div>
+                      </div>
+                    </div>
+                  </template>
+                </div>
+
+                <!-- 无 secondTitle：按两条一组左右排列 -->
+                <div v-else>
+                  <div class="sub-row" v-for="(pair, i) in pairLines(it.lines)" :key="i">
+                    <div class="sub-col" v-if="pair[0]">
+                      <span
+                        v-for="(p, pi) in tokenize(pair[0])"
+                        :key="'l-' + i + '-0-' + pi"
+                        :class="[p.isNum ? 'num' : '', p.signClass]"
+                      >{{ p.text }}</span>
+                    </div>
+                    <div class="sub-col" v-if="pair[1]">
+                      <span
+                        v-for="(p, pi) in tokenize(pair[1])"
+                        :key="'l-' + i + '-1-' + pi"
+                        :class="[p.isNum ? 'num' : '', p.signClass]"
+                      >{{ p.text }}</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="equip-grid" v-if="it.grid && it.grid.length">
+                  <div v-for="(g, gi) in it.grid" :key="gi">{{ g }}</div>
+                </div>
+
+                <div class="sub-row" v-if="it.trend">
+                  <div class="sub-col">较上周：</div>
+                  <div class="sub-col">
+                    <span class="trend" :class="it.trend.type === 'up' ? 'trend--up' : 'trend--down'">
+                      <span
+                        v-for="(p, pi) in tokenize(it.trend.value)"
+                        :key="pi"
+                        :class="[p.isNum ? 'num' : '', p.signClass]"
+                      >{{ p.text }}</span>
+                    </span>
+                  </div>
+                </div>
+
+                <template v-if="it.trends && it.trends.length">
+                  <div class="sub-row" v-for="(t, ti) in it.trends" :key="ti">
+                    <div class="sub-col">{{ t.label }}：</div>
+                    <div class="sub-col">
+                      <span class="trend" :class="t.type === 'up' ? 'trend--up' : 'trend--down'">
+                        <span
+                          v-for="(p, pi) in tokenize(t.value)"
+                          :key="pi"
+                          :class="[p.isNum ? 'num' : '', p.signClass]"
+                        >{{ p.text }}</span>
+                      </span>
+                    </div>
+                  </div>
+                </template>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Dashboard',
+  data() {
+    return {
+      ds: { title: '', sections: [] }
+    }
+  },
+  mounted() {
+    fetch('/dashboard1019.json')
+      .then(res => res.json())
+      .then(json => { this.ds = json })
+      .catch(err => { console.error('加载 dashboard.json 失败：', err) })
+  },
+  methods: {
+    headerClassByIndex(idx) {
+      return {
+        'card-header--blue': idx === 0,
+        'card-header--green': idx === 1,
+        'card-header--orange': idx === 2
+      }
+    },
+    dotClass(color) {
+      return {
+        'dot--blue': color === 'blue',
+        'dot--green': color === 'green',
+        'dot--orange': color === 'orange'
+      }
+    },
+    tokenize(str) {
+      const parts = [];
+      // const regex = /([+\-]?\d[\d,]*\.?\d*)/g;
+      const regex = /([+-]?\d[\d,]*\.?\d*)/g;
+      let last = 0, m;
+      while ((m = regex.exec(str)) !== null) {
+        if (m.index > last) parts.push({ text: str.slice(last, m.index), isNum: false, signClass: '' });
+        const token = m[1];
+        const signClass = token[0] === '+' ? 'pos' : (token[0] === '-' ? 'neg' : '');
+        parts.push({ text: token, isNum: true, signClass });
+        last = regex.lastIndex;
+      }
+      if (last < str.length) parts.push({ text: str.slice(last), isNum: false, signClass: '' });
+      return parts;
+    },
+    pairLines(lines = []) {
+      const pairs = [];
+      for (let i = 0; i < lines.length; i += 2) {
+        pairs.push([lines[i] || '', lines[i + 1] || '']);
+      }
+      return pairs;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dashboard {
+  /* background: #f4f6fb; */
+  min-height: 100vh;
+  padding: 48px 24px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.page-title {
+  text-align: center;
+  font-size: 36px;
+  font-weight: 600;
+  margin: 12px 0 60px 0;
+  color: #2b2b2b;
+}
+.cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+}
+.card {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 6px 20px rgba(25, 55, 88, 0.08);
+  overflow: hidden;
+}
+.card-header {
+  height: 70px;
+  display: flex;
+  align-items: center;
+  padding: 0 18px;
+  color: #fff;
+  font-weight: 400;
+  font-size: 24px;
+  justify-content: center;
+}
+.card-header--blue {
+  background: linear-gradient(90deg, #3569E6 0%, #519DF9 100%);
+}
+.card-header--green {
+  background: linear-gradient(90deg, #00C27F 0%, #1AD0CE 100%);
+}
+.card-header--orange {
+  background: linear-gradient(90deg, #E26229 0%, #F29554 100%);
+}
+.card-body {
+  padding: 16px 18px 22px;
+}
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 0;
+}
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  flex: 0 0 10px;
+  margin-top: 6px;
+}
+.dot--blue { background: #366AE6; }
+.dot--green { background: #00C27F; }
+.dot--orange { background: #E26229; }
+.item-content {
+  flex: 1;
+}
+.item-title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #000;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sq {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  display: inline-block;
+  background: #366AE6;
+}
+.num {
+  font-weight: 700;
+  color: #000;
+}
+.item-sub {
+  color: #5a6678;
+  line-height: 22px;
+  padding: 0 15px;
+  font-size: 14px;
+}
+
+.group-title {
+  padding-left: 15px;
+  margin-bottom: 20px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000;
+}
+
+.sub-row {
+  display: flex;
+  gap: 24px;
+  padding: 2px 15px;
+  margin-bottom: 15px;
+}
+
+.sub-col {
+  flex: 1;
+  text-align: left;
+  min-width: 0;
+}
+.sub-col span{
+    color: #5a6678;
+}
+.sub-col .num{
+    color: #000;
+}
+
+.sub-row {
+  display: flex;
+  gap: 24px;
+  padding: 2px 15px;
+}
+
+.sub-col {
+  flex: 1;
+  text-align: left;
+  min-width: 0;
+}
+
+/* 第1、2个卡片的第3个条目不使用 flex 布局 */
+.cards .card:nth-child(-n+2) .list .item:nth-child(3) .sub-row {
+  display: block;
+}
+.cards .card:nth-child(-n+2) .list .item:nth-child(3) .sub-col {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.equip-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 12px;
+  margin-top: 6px;
+  color: #5a6678;
+}
+.trend {
+  font-weight: 400;
+}
+.trend--up { color: #0DA700; }
+.trend--down { color: #E63838; }
+.pos { color: #E63838 !important; }
+.neg { color: #0DA700 !important; }
+
+/* 响应式 */
+@media (max-width: 1024px) {
+  .cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
@@ -0,0 +1,506 @@
+<template>
+  <div class="dashboard">
+    <h2 class="page-title">营养监控项目运营核心数据总览</h2>
+
+    <div class="cards">
+      <!-- 基础资源 -->
+      <section class="card">
+        <header class="card-header card-header--blue"><span>基础资源</span></header>
+        <div class="card-body">
+          <ul class="list">
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>基础规模</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>单位数：</span><span class="num">{{ stResourceBasicStats.unitCount || 0 }}</span><span> 个</span>
+                  </div>
+                  <div class="sub-col">
+                    <span>食堂数：</span><span class="num">{{ stResourceBasicStats.canteenCount || 0 }}</span><span>
+                      个</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>餐品资源</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>餐品总数：</span><span class="num">{{ stResourceBasicStats.foodTotal || 0 }}</span><span> 个</span>
+                  </div>
+                  <div class="sub-col">
+                    <span>食堂餐品：</span><span class="num">{{ stResourceBasicStats.canteenFood || 0 }}</span><span>
+                      个</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>使用数据</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>总人数：</span><span class="num">{{ stResourceBasicStats.totalPeople || 0 }}</span><span> 个</span>
+                  </div>
+                  <div class="sub-col">
+                    <span>本周总使用人次：</span><span class="num">{{ stResourceBasicStats.weekUsage || 0 }}</span><span>
+                      人，较上周：</span><span :class="stResourceBasicStats.weekUsageRate > 0 ? 'red' : 'green'">{{
+                        stResourceBasicStats.weekUsageRate || 0 }}%</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>设备配置</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>餐线数：</span><span class="num">{{ stResourceBasicStats.mealLine || 0 }}</span><span> 条</span>
+                  </div>
+                </div>
+                <div class="sub-title">
+                  <span>包含设备</span>
+                </div>
+                <div class="equip-grid">
+                  <div>D款：<span>{{ stResourceBasicStats.deviceD || 0 }}</span> 台</div>
+                  <div>H款：<span>{{ stResourceBasicStats.deviceH || 0 }}</span> 台</div>
+                  <div>F款：<span>{{ stResourceBasicStats.deviceF || 0 }}</span> 台</div>
+                  <div>绑盘机款：<span>{{ stResourceBasicStats.deviceDish || 0 }}</span> 台</div>
+                  <div>落地屏：<span>{{ stResourceBasicStats.deviceScreen || 0 }}</span> 台</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- 核心运营 -->
+      <section class="card">
+        <header class="card-header card-header--green"><span>核心运营</span></header>
+        <div class="card-body">
+          <ul class="list">
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>运营周期</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>总运行天数：</span><span class="num">{{ stOperationCoreStats.operationDays || 0 }}</span><span>
+                      天</span>
+                  </div>
+                  <div class="sub-col"></div>
+                </div>
+              </div>
+            </li>
+
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>重量消耗</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>总称餐重量：</span><span class="num">{{ fmtNum(stOperationCoreStats.totalFoodWeight) }}</span><span>
+                      kg</span>
+                  </div>
+                  <div class="sub-col">
+                    <span>总用餐重量：</span><span class="num">{{ fmtNum(stOperationCoreStats.totalMealWeight) }}</span><span>
+                      kg</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>用餐数据</div>
+                <div class="sub-row">
+                  <div class="sub-col">
+                    <span>总用餐人次数：</span><span class="num">{{ fmtNum(stOperationCoreStats.mealPeople) }}</span><span>
+                      人</span>
+                  </div>
+                  <div class="sub-col">
+                    <span>总用餐热量：</span><span class="num">{{ fmtNum(stOperationCoreStats.mealEnergy) }}</span><span>
+                      mcal</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>数据资产</div>
+                <div class="sub-title">
+                  <span>总数据量</span>
+                </div>
+                <div class="sub-row">
+                  <div class="sub-col indent">
+                    <span>存储空间：</span><span class="num">{{ stOperationCoreStats.dataStorage || 0 }}</span><span> {{
+                      stOperationCoreStats.dataStorageUnit || 'Gb' }}</span>
+                  </div>
+                </div>
+                <div class="sub-title">
+                  <span>总数据条</span>
+                </div>
+                <div class="sub-row">
+                  <div class="sub-col indent">
+                    <span>就餐记录：</span><span class="num">{{ stOperationCoreStats.mealRecord || 0 }}</span><span> 条</span>
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <!-- 人均洞察 -->
+      <section class="card">
+        <header class="card-header card-header--orange"><span>人均洞察</span></header>
+        <div class="card-body">
+          <ul class="list">
+            <li class="item">
+              <div class="item-content">
+                <div class="item-title"><span class="sq"></span>人均指标</div>
+
+                <div class="group">
+                  <div class="item-sub group-title">日平均(本周/上周)</div>
+                  <div class="sub-row indent">
+                    <div class="sub-col">
+                      <span>重量：</span><span class="num">{{ stInsightPerCapitaStats.dailyAvgWeight || 0 }}</span><span>
+                        g</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.dailyAvgWeightChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.dailyAvgWeightChange || 0 }}</span><span> g</span>
+                    </div>
+                    <div class="sub-col">
+                      <span>热量：</span><span class="num">{{ stInsightPerCapitaStats.dailyAvgEnergy || 0 }}</span><span>
+                        kcal</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.dailyAvgEnergyChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.dailyAvgEnergyChange || 0 }}</span><span> kcal</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="group">
+                  <div class="item-sub group-title">早餐平均(本周/上周)</div>
+                  <div class="sub-row indent">
+                    <div class="sub-col">
+                      <span>重量：</span><span class="num">{{ stInsightPerCapitaStats.morningAvgWeight || 0 }}</span><span>
+                        g</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.morningAvgWeightChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.morningAvgWeightChange || 0 }}</span><span> g</span>
+                    </div>
+                    <div class="sub-col">
+                      <span>热量：</span><span class="num">{{ stInsightPerCapitaStats.morningAvgEnergy || 0 }}</span><span>
+                        kcal</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.morningAvgEnergyChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.morningAvgEnergyChange || 0 }}</span><span> kcal</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="group">
+                  <div class="item-sub group-title">午餐平均(本周/上周)</div>
+                  <div class="sub-row indent">
+                    <div class="sub-col">
+                      <span>重量：</span><span class="num">{{ stInsightPerCapitaStats.lunchAvgWeight || 0 }}</span><span>
+                        g</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.lunchAvgWeightChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.lunchAvgWeightChange || 0 }}</span><span> g</span>
+                    </div>
+                    <div class="sub-col">
+                      <span>热量：</span><span class="num">{{ stInsightPerCapitaStats.lunchAvgEnergy || 0 }}</span><span>
+                        kcal</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.lunchAvgEnergyChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.lunchAvgEnergyChange || 0 }}</span><span> kcal</span>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="group">
+                  <div class="item-sub group-title">晚餐平均(本周/上周)</div>
+                  <div class="sub-row indent">
+                    <div class="sub-col">
+                      <span>重量：</span><span class="num">{{ stInsightPerCapitaStats.dinnerAvgWeight || 0 }}</span><span>
+                        g</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.dinnerAvgWeightChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.dinnerAvgWeightChange || 0 }}</span><span> g</span>
+                    </div>
+                    <div class="sub-col">
+                      <span>热量：</span><span class="num">{{ stInsightPerCapitaStats.dinnerAvgEnergy || 0 }}</span><span>
+                        kcal</span><span> / </span><span
+                        :class="stInsightPerCapitaStats.dinnerAvgEnergyChange > 0 ? 'red' : 'green'">{{
+                          stInsightPerCapitaStats.dinnerAvgEnergyChange || 0 }}</span><span> kcal</span>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getStResourceBasicStats, getStOperationCoreStats, getStInsightPerCapitaStats } from '@/api/api'
+export default {
+  name: 'Home',
+  data() {
+    return {
+      stResourceBasicStats: {},
+      stOperationCoreStats: {},
+      stInsightPerCapitaStats: {}
+    }
+  },
+  async mounted() {
+    await this.refreshAll()
+    this._hourlyTimer = setInterval(() => {
+      this.refreshAll()
+    }, 3600000)
+  },
+  methods: {
+    async refreshAll() {
+      await Promise.all([
+        this.loadBasicStatsData(),
+        this.loadCoreStatsData(),
+        this.loadCapitaStatsData()
+      ])
+    },
+    async loadBasicStatsData() {
+      try {
+        const res = await getStResourceBasicStats({})
+        this.stResourceBasicStats = res.result || {}
+      } catch (err) { console.error(err) }
+    },
+    async loadCoreStatsData() {
+      try {
+        const res = await getStOperationCoreStats({})
+        this.stOperationCoreStats = res.result || {}
+      } catch (err) { console.error(err) }
+    },
+    async loadCapitaStatsData() {
+      try {
+        const res = await getStInsightPerCapitaStats({})
+        this.stInsightPerCapitaStats = res.result || {}
+      } catch (err) { console.error(err) }
+    },
+    fmtNum(n) {
+      if (n === undefined || n === null) return 0
+      return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dashboard {
+  min-height: 100vh;
+  padding: 48px 24px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.page-title {
+  text-align: center;
+  font-size: 36px;
+  font-weight: 600;
+  margin: 12px 0 60px 0;
+  color: #2b2b2b;
+}
+
+.cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 30px;
+}
+
+.card {
+  background: #fff;
+  border-radius: 14px;
+  box-shadow: 0 6px 20px rgba(25, 55, 88, 0.08);
+  overflow: hidden;
+}
+
+.card-header {
+  height: 70px;
+  display: flex;
+  align-items: center;
+  padding: 0 18px;
+  color: #fff;
+  font-weight: 400;
+  font-size: 24px;
+  justify-content: center;
+}
+
+.card-header--blue {
+  background: linear-gradient(90deg, #3569E6 0%, #519DF9 100%);
+}
+
+.card-header--green {
+  background: linear-gradient(90deg, #00C27F 0%, #1AD0CE 100%);
+}
+
+.card-header--orange {
+  background: linear-gradient(90deg, #E26229 0%, #F29554 100%);
+}
+
+.card-body {
+  padding: 16px 18px 22px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 8px 0;
+}
+
+.item-content {
+  flex: 1;
+}
+
+.item-title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #000;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.sq {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  display: inline-block;
+  background: #366AE6;
+}
+
+.num {
+  font-weight: 700;
+  color: #000;
+}
+
+.item-sub {
+  color: #5a6678;
+  line-height: 22px;
+  padding: 0 15px;
+  font-size: 14px;
+}
+
+.red {
+  color: #E63838 !important;
+  font-weight: bold;
+}
+
+.green {
+  color: #0DA700 !important;
+  font-weight: bold;
+}
+
+.group-title {
+  padding-left: 15px;
+  margin-bottom: 20px;
+  font-weight: 400;
+  font-size: 14px;
+  color: #000;
+}
+
+.sub-row {
+  display: flex;
+  gap: 24px;
+  padding: 2px 15px;
+  margin-bottom: 15px;
+}
+
+.sub-col {
+  flex: 1;
+  text-align: left;
+  min-width: 0;
+}
+
+.indent {
+  text-indent: 1em;
+}
+
+.sub-col span {
+  color: #5a6678;
+}
+
+.sub-col .num {
+  color: #000;
+}
+
+.sub-title {
+  padding: 2px 15px;
+}
+
+.sub-title span {
+  font-weight: 400;
+  font-size: 14px;
+  color: #000;
+}
+
+.cards .card:nth-child(-n+2) .list .item:nth-child(3) .sub-row {
+  display: block;
+}
+
+.cards .card:nth-child(-n+2) .list .item:nth-child(3) .sub-col {
+  display: block;
+  width: 100%;
+  margin-bottom: 10px;
+}
+
+.equip-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 10px 2em;
+  gap: 6px 12px;
+  margin-top: 6px;
+  color: #5a6678;
+  font-size: 16px;
+}
+
+.equip-grid span {
+  font-weight: bold;
+  color: #000;
+}
+
+.trend {
+  font-weight: 400;
+}
+
+.trend--up {
+  color: #0DA700;
+}
+
+.trend--down {
+  color: #E63838;
+}
+
+.pos {
+  color: #E63838 !important;
+}
+
+.neg {
+  color: #0DA700 !important;
+}
+
+@media (max-width: 1024px) {
+  .cards {
+    grid-template-columns: 1fr;
+  }
+}
+</style>