Commit 51c3c978 authored by Bill's avatar Bill
Browse files

Add menu

parent 3371e0bd

docs/.vuepress/client.js

+2 −4
Original line number Diff line number Diff line
@@ -5,8 +5,7 @@ import RealtimeMap from './components/RealtimeMap.vue' 
import WeatherSpan from './components/weather-span.vue'

import BusChartVue from './components/BusChartVue.vue'



import CanteenTraffic from './components/CanteenTraffic.vue'

import TrendChart from './components/TrendChart.vue'

import Canteen from './components/Canteen.vue'



export default defineClientConfig({

  enhance({ app }) {
@@ -16,7 +15,6 @@ export default defineClientConfig({ 
    app.component("WeatherSpan", WeatherSpan)

    app.component("BusChartVue", BusChartVue)

    

    app.component("CanteenTraffic", CanteenTraffic)

    app.component("TrendChart", TrendChart)

    app.component("Canteen", Canteen)

  },

})

docs/.vuepress/components/Canteen.vue

0 → 100644
+105 −0
Original line number Diff line number Diff line 
<template>

  <div>

    <a-config-provider :theme="{

      token: {

        colorPrimary: '#49BF7C',

      },

    }">

      <a-segmented v-model:value="initSelect" :options="tabOptions" @change="switchTab">

        <template #label="{ payload }">

          <div style="padding: 4px 8px">

            <div>{{ payload.title }}</div>

            <div>{{ payload.subTitle }}</div>

          </div>

        </template>

      </a-segmented>

    </a-config-provider>



    <div class="tab-container">

      <div v-if="currentSelect === 'realtime-queue-length'">

        <RealtimeTraffic></RealtimeTraffic>

      </div>



      <div v-if="currentSelect === 'queue-trend-chart'">

        <TrendChart></TrendChart>

      </div>



      <div v-if="currentSelect === 'daily-menus'">

        <Menu></Menu>

      </div>



    </div>



  </div>

</template>



<script>

import { ConfigProvider } from 'ant-design-vue';

import { Segmented } from 'ant-design-vue';

import { watch, ref } from 'vue';



import RealtimeTraffic from './canteen/RealtimeTraffic.vue'

import TrendChart from './canteen/TrendChart.vue';

import Menu from './canteen/Menu.vue'



export default {

  name: "Canteen",

  components: {

    AConfigProvider: ConfigProvider,

    ASegmented: Segmented,

    RealtimeTraffic,

    TrendChart,

    Menu



  },

  data() {

    return {



    }

  },

  setup() {

    const initSelect = ref('realtime-queue-length');

    const currentSelect = ref('realtime-queue-length');

    const tabOptions = ref([

      {

        value: 'realtime-queue-length',

        payload: {

          title: '实时排队人数',

          subTitle: 'Realtime Queue Length',

        },

      },

      {

        value: 'queue-trend-chart',

        payload: {

          title: '排队趋势图',

          subTitle: 'Queue Trend Chart',

        },

      },

      {

        value: 'daily-menus',

        payload: {

          title: '今日菜谱',

          subTitle: 'Daily Menus'

        }

      }

    ]);



    const switchTab = (tabOptionValue) => {

      currentSelect.value = tabOptionValue;

    };



    return {

      initSelect,

      currentSelect,

      tabOptions,

      switchTab,

    };

  },

}

</script>



<style>

.tab-container {

  margin-top: 6px;

}

</style>
 
 No newline at end of file

docs/.vuepress/components/canteen/Menu.vue

0 → 100644
+45 −0
Original line number Diff line number Diff line 
<template>

  <div v-for="menu in dailyMenus" :key="menu.canteen_id">

    <img class="menu-img" :src="menu.url" :alt="menu.canteen_id" sizes="width=200px">

  </div>

</template>



<script>

import { onMounted, ref } from 'vue';

import axios from 'axios';



export default {

  name: 'Menu',

  setup() {

    const dailyMenus = ref([]);



    const getDailyMenus = () => {

      const currentDate = new Date();

      const year = currentDate.getFullYear();

      const month = String(currentDate.getMonth() + 1).padStart(2, '0');

      const day = String(currentDate.getDate()).padStart(2, '0');



      axios.get(`http://localhost:8102/api/v1/menu/${year}/${month}/${day}`)

        .then((res) => {

          dailyMenus.value = res.data.data;

        });

    };



    onMounted(() => {

      getDailyMenus();

    });



    return {

      dailyMenus,

    };

  },

};

</script>



<style scoped>



.menu-img {

  margin-bottom: 2rem;

}



</style>

docs/.vuepress/components/CanteenTraffic.vue→docs/.vuepress/components/canteen/RealtimeTraffic.vue

+18 −101
Original line number Diff line number Diff line 
<template>

  <div>

    <a-config-provider :theme="{

      token: {

        colorPrimary: '#49BF7C',

      },

    }">

      <a-segmented v-model:value="initSelect" :options="tabOptions" @change="switchTab">

        <template #label="{ payload }">

          <div style="padding: 4px 8px">

            <div>{{ payload.title }}</div>

            <div>{{ payload.subTitle }}</div>

          </div>

        </template>

      </a-segmented>



      <div class="tab-container">

        <!-- realtime-queue-length -->

        <div v-if="currentSelect === 'realtime-queue-length'">

  <div class="container mt-3" :class="{ 'dark-mode': isDarkMode }">

    <div v-for="canteen in trafficList" :key="canteen.canteen_id" class="card mb-3">

      <div class="card-header">
@@ -31,30 +13,18 @@ 
      </ul>

    </div>

  </div>

        </div>



        <!-- 第二个 div 根据 value 控制显示与隐藏 -->

        <div v-if="currentSelect === 'queue-trend-chart'">

          <TrendChart></TrendChart>

        </div>

      </div>





    </a-config-provider>

  </div>

</template>



<script>

import axios from 'axios';

import { ConfigProvider } from 'ant-design-vue';

import { Segmented } from 'ant-design-vue';

import { watch, ref } from 'vue';





export default {

  name: "CanteenTraffic",

  name: "RealtimeTraffic",

  data() {

    return {

      baseUrl: "http://localhost:8102/api/v1/traffic",

      baseUrl: "https://susteen.itbill.cn/api/v1/traffic",

      trafficList: [],

      isDarkMode: false,

      formatter: new Intl.DateTimeFormat('zh-CN', {
@@ -65,7 +35,8 @@ export default { 
        hour: '2-digit',

        minute: '2-digit',

        second: '2-digit'

      })

      }),

      weeklyMenusUrl: "https://mp.weixin.qq.com/s/-SnCM3MMDTk26_0DYdA84A"

    };

  },
@@ -112,58 +83,6 @@ export default { 
      return formattedTime

    }

  },



  components: {

    AConfigProvider: ConfigProvider,

    ASegmented: Segmented

  },

  props: {

    isMapTabEnabled: {

      type: Boolean,

      default: true,

    },

  },

  setup(props) {

    const initSelect = ref('realtime-queue-length');

    const currentSelect = ref('realtime-queue-length');

    const tabOptions = ref([

      {

        value: 'realtime-queue-length',

        payload: {

          title: '实时排队人数',

          subTitle: 'Realtime Queue Length',

        },

      },

      {

        value: 'queue-trend-chart',

        payload: {

          title: '排队趋势图',

          subTitle: 'Queue Trend Chart',

        },

      },

      {

        value: 'weekly-menus',

        payload: {

          title: '本周菜谱',

          subTitle: 'Weekly Menus'

        }

      }

    ]);



    const switchTab = (tabOptionValue) => {

      currentSelect.value = tabOptionValue;

    };



    let showMapChart = props.isMapTabEnabled;



    return {

      initSelect,

      currentSelect,

      tabOptions,

      switchTab,

      showMapChart

    };

  },

};

</script>
@@ -239,7 +158,5 @@ export default { 
  padding-bottom: 4px;

}



.tab-container {

  margin-top: 6px;

}



</style>

docs/.vuepress/components/TrendChart.vue→docs/.vuepress/components/canteen/TrendChart.vue

+10 −5
Original line number Diff line number Diff line
@@ -33,8 +33,8 @@ import { CanvasRenderer } from 'echarts/renderers'; 
import { LineChart } from 'echarts/charts';

import { GridComponent, TooltipComponent, TitleComponent, LegendComponent, DataZoomComponent } from 'echarts/components';



import ObjectSelector from "./bus/ObjectSelector.vue";

import DataRequest from "./bus/DataRequest.vue";

import ObjectSelector from "../bus/ObjectSelector.vue";

import DataRequest from "../bus/DataRequest.vue";



use([

  CanvasRenderer,
@@ -65,8 +65,13 @@ export default { 


  methods: {

    getUrl(boothId, meal) {

      const date = "20231113"; // TODO

      return `http://localhost:8102/api/v1/traffic/booths/${boothId}?date=${date}&meal=${meal}`;

      const currentDate = new Date();

      const year = currentDate.getFullYear();

      const month = String(currentDate.getMonth() + 1).padStart(2, '0');

      const day = String(currentDate.getDate()).padStart(2, '0');

      const date = `${year}${month}${day}`;



      return `https://susteen.itbill.cn/api/v1/traffic/booths/${boothId}?date=${date}&meal=${meal}`;

    },



    getChartData(trafficList, meal) {
@@ -112,6 +117,6 @@ export default { 
<style>

.echarts {

  width: 100%;

  height: 300px;

  height: 250px;

}

</style>

CRA Git | Maintained and supported by SUSTech CRA and CCSE