网络配置修改

longyvfengyun

2023-06-17 c33ab23944906306eae8c2a4112927181c9ec5a3

网络配置修改

 src/assets/less/index.less

@@ -1,3 +1,5 @@
@font-color: #021a64;
@font-color-high-light: #00feff;
@font-color-primary: #4ba1fa;
@font-color-warning: #FFE329;
@border-color: #037fab;

 src/components/CardBox.vue

New file
@@ -0,0 +1,30 @@
<script setup>

</script>

<template>
    <div class="card-box-wrapper">
        <div class="card-box-header">
            <slot name="header"></slot>
        </div>
        <div class="card-box-body">
            <slot></slot>
        </div>
        <div class="card-box-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<style lang="less" scoped>
.card-box-wrapper {
    display: flex;
    flex-direction: column;
    border: 2px solid @border-color;
    background-color: #0b388a;
    color: @font-color-warning;
    .card-box-body {
        flex: 1;
    }
}
</style>

 src/router/routes.js

@@ -36,6 +36,21 @@
        component: () => import("../views/userManagement/userManagement.vue"),
      },
      {
        path: "asset/accessControl",
        name: "accessControlAsset",
        component: ()=>import('../views/assetManagement/accessControlAsset.vue'),
      },
      {
        path: "asset/air",
        name: "airAsset",
        component: ()=>import('../views/assetManagement/airConditioningAsset.vue'),
      },
      {
        path: "asset/video",
        name: "videoAsset",
        component: ()=>import('../views/assetManagement/videoAsset.vue'),
      },
      {
        path: '/:pathMatch(.*)*',
        name: "",
        component: () => import('../views/404.vue')

 src/views/assetManagement/accessControlAsset.vue

New file
@@ -0,0 +1,11 @@
<script setup>

</script>

<template>
    <div>门禁资产管理</div>
</template>

<style scoped>

</style>

 src/views/assetManagement/airConditioningAsset.vue

New file
@@ -0,0 +1,11 @@
<script setup>

</script>

<template>
    <div>空调资产管理</div>
</template>

<style scoped>

</style>

 src/views/assetManagement/index.vue

New file
@@ -0,0 +1,11 @@
<script setup>

</script>

<template>
    <div>123</div>
</template>

<style scoped>

</style>

 src/views/assetManagement/videoAsset.vue

New file
@@ -0,0 +1,11 @@
<script setup>

</script>

<template>
    <div>视频监控管理</div>
</template>

<style scoped>

</style>

 src/views/home/index.vue

@@ -1,11 +1,41 @@
<script setup>

import FlexLayout from "@/components/FlexLayout.vue";
import CardBox from "@/components/CardBox.vue";
import {ref} from "vue";

const homeInfo = ref([]);
for(let i=1; i<10; i++) {
    homeInfo.value.push({
        name: "#"+i+"室",
        temp: 32,
        hum: 7,
        diffPre: 1
    });
}
</script>

<template>
    <flex-layout>
        <div class="home-content">
            <div class="card-box-list">
                <div
                    class="card-box-item"
                    v-for="(item, index) in homeInfo" :key="'key'+index">
                    <card-box>
                        <div class="home-info-list">
                            <div class="home-info-item">
                                {{ item.name }}温度：{{ item.temp }}
                            </div>
                            <div class="home-info-item">
                                {{ item.name }}湿度：{{ item.hum }}
                            </div>
                            <div class="home-info-item">
                                {{ item.name }}压差：{{ item.diffPre }}
                            </div>
                        </div>
                    </card-box>
                </div>
            </div>

        </div>
    </flex-layout>
@@ -19,4 +49,15 @@
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.card-box-list {
    text-align: center;
    .card-box-item {
        display: inline-block;
        margin-left: 16px;
    }
}

.home-info-list {
    padding: 8px;
}
</style>

 src/views/mainLayout/components/SlideMenu.vue

@@ -2,6 +2,9 @@
import {computed, ref, watchEffect} from "vue";
import usePageMenuStore from "@/store/usePageMenuStore";
import FlexLayout from "@/components/FlexLayout.vue";
import {useRoute} from "vue-router";
const route = useRoute();

const pageMenuStore = usePageMenuStore();

const isCollapse = computed(()=>{
@@ -9,12 +12,12 @@
});

const isOpen = ref(!isCollapse.value);
const menuActive = ref("/");
const menuActive = ref(route.path);
const menuData = ref([]);
menuData.value = [
    {
        title: "首页",
        path: "/",
        path: "/home",
        icon: "HomeFilled"
    },
    {
@@ -23,29 +26,52 @@
        icon: "Checked",
    },
    {
        title: "视频监控",
        path: "/video",
        icon: "VideoCameraFilled",
    },
    {
        title: "空调",
        path: "/airConditioning",
        icon: "Postcard",
    },
    {
        title: "视频监控",
        path: "/video",
        icon: "VideoCameraFilled",
    },
    {
        title: "用户管理",
        path: "/userManagement",
        icon: "UserFilled"
    },
    {
        title: "资产管理",
        path: "/asset",
        icon: "School",
        children: [
            {
                title: "门禁资产管理",
                path: "/asset/accessControl",
            },
            {
                title: "空调资产管理",
                path: "/asset/air",
            },
            {
                title: "视频监控资产管理",
                path: "/asset/video",
            }
        ]
    },
];

const handleOpen = ()=>{
    isOpen.value = true;

};

watchEffect(()=>{
    if(isCollapse.value) {
        isOpen.value = false;
    }else {
        setTimeout(()=>{
            isOpen.value = true;
        }, 300);
    }
});
</script>
@@ -119,7 +145,8 @@
    min-height: 400px;
}
.sys-logo {
    padding: 6px 0 6px 16px;
    user-select: none;
    padding: 16px 0 16px 16px;
    .logo-img {
        display: inline-block;
        height: 28px;

 vite.config.js

@@ -19,6 +19,9 @@
    vue(),
    WindiCSS(),
  ],
  server: {
    host: '0.0.0.0'
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))