Main.vue 8.13 KB
<template>
    <el-container>
        <el-header style="background: black">
            <el-row style="height: 100%">
                <el-col :span="2">
                    <div class="flex-vertical-center" style="height: 100%">
                        <img :src="require('./Icons/logo.svg')" style="height: auto;width:210px"/>
                    </div>
                </el-col>
                <el-col :span="22">
                    <div class="flex-vertical-center" style="font-size: 17px;display: flex;height: 100%;color: white; justify-content: flex-end">
                        <span style="margin:  0 20px">{{ currentTime }}</span>
                        <span>{{ getWeek() }}</span>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="padding: 0">
            <el-container>
                <el-aside style="background: #001529" width="190px">
                    <a-menu mode="inline" theme="dark" v-model:selectedKeys="selectedKeys" @click="onClick">
                        <a-menu-item :key="'/Main/DataRerun'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/1.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">数据重跑</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/DataRepair'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/2.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">数据修补</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/FeatureReExtract'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/3.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">特征重提</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/FeatureLibraryRebuild'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/4.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">特征库重建</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/PeopleReContrast'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/5.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">人员重新比对</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/SnapshotCluster'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/6.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">抓拍聚类</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/EquipmentTimeErrorVerification'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/7.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">设备时间错误校验</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/FeatureComparisonVerification'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/7.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">特征对比验证</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/ComparisonCapturedPictures'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/7.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">抓拍图片对比</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/MinutePassenger'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/7.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">分钟客流数据</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/SystemLog'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/7.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">系统日志</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/DataReplay'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/2.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">数据重放</span>
                            </div>
                        </a-menu-item>
                        <a-menu-item :key="'/Main/equipmentDataRetransmission'">
                            <div class="flex-vertical-center">
                                <img :src="require('./Icons/2.svg')" style="height: auto;width:20px"/>
                                <span style="padding: 0 5px">设备数据重传</span>
                            </div>
                        </a-menu-item>
                    </a-menu>
                </el-aside>
                <el-main>
                    <router-view :key="$route.fullPath"></router-view>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import {defineComponent, getCurrentInstance, ref} from 'vue'
import {useRouter} from 'vue-router'
import moment from "moment"

export default defineComponent({
    setup() {
        const {proxy} = getCurrentInstance()
        const selectedKeys = ref([proxy.$root.$route.path])

        const router = useRouter()
        const currentTime = ref(moment().format("YYYY-MM-DD HH:mm:ss"))
        const goto = function(path) {
            router.push(path)
        }

        const getOpeneds = function() {
            let result = []
            for (let i = 0; i < 1000; i++)
            {
                result.push(i)
            }
            return result
        }

        const onClick = function({key}) {
            router.push(
                `${key}`
            )
        }

        const getWeek = function(date) {
            let week = moment(date).day()
            switch (week)
            {
                case 1:
                    return '星期一'
                case 2:
                    return '星期二'
                case 3:
                    return '星期三'
                case 4:
                    return '星期四'
                case 5:
                    return '星期五'
                case 6:
                    return '星期六'
                case 0:
                    return '星期天'
            }
        }

        const __main = function() {
            setInterval(() => {
                currentTime.value = moment().format("YYYY-MM-DD HH:mm:ss")
            }, 1000)
        }

        __main()

        return {
            // scalar
            currentTime,
            selectedKeys,
            // sequence
            // mapping
            // function
            goto,
            getOpeneds,
            onClick,
            getWeek,
        }
    },
})
</script>
<style>
</style>