Main.vue 10.6 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="200px">
                    <a-menu v-model:openKeys="openKeys" mode="inline" theme="dark" v-model:selectedKeys="selectedKeys" @click="onClick">
											<a-sub-menu title="聚类结果" key="clusteringResults">
												<template #icon>
													<ClusterOutlined />
												</template>
												<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-sub-menu>
											<a-sub-menu title="数据验证" key="dataValidation">
												<template #icon>
													<ProfileOutlined />
												</template>
												<a-menu-item :key="'/Main/TestDriveHospitality'">
												    <div class="flex-vertical-center">
												        <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/Featurematching'">
														<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/FeatureMatchingAccuracy'">
														<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/newMenu'">
														<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/SnapshotCluster1'">
														<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/SourceTrajectoryAnalysis'">
														<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-sub-menu>
											<a-sub-menu title="数据修补" key="dataRepair">
												<template #icon>
													<SnippetsOutlined />
												</template>
												<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/dayAnalysisRerun'">
												    <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/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-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-sub-menu>
											<a-sub-menu title="其他" key="other">
												<template #icon>
													<SettingOutlined />
												</template>
												<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-sub-menu>
                    </a-menu>
                </el-aside>
                <el-main style="padding: 10px 20px;">
                    <router-view :key="$route.fullPath"></router-view>
                </el-main>
            </el-container>
        </el-main>
    </el-container>
</template>
<script>
import { ClusterOutlined, ProfileOutlined, SnippetsOutlined, SettingOutlined } from '@ant-design/icons-vue';
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 openKeys = ref(['clusteringResults'])
        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,
						openKeys,
            // sequence
            // mapping
            // function
            goto,
            getOpeneds,
            onClick,
            getWeek,
        }
    },
		components: {
			ClusterOutlined,
			ProfileOutlined,
			SnippetsOutlined,
			SettingOutlined,
		},
})
</script>
<style>
	.ant-menu-submenu-title{
		padding-left: 20px!important;
	}
	.ant-menu-item{
		padding-left: 40px!important;
	}
</style>