<template>
|
<a-layout id="app-layout-sider">
|
<a-layout-sider theme="light" width="196">
|
<a-menu class="menuClass"
|
:items="menu"
|
theme="light"
|
mode="inline"
|
:selectedKeys="[current]"
|
@click="menuHandle"
|
></a-menu>
|
<div class="sb">
|
<a-tag :color="getServerStatusColor" >
|
{{ getServerStatusText }}
|
</a-tag>
|
<span class="tip">读写器</span>
|
</div>
|
</a-layout-sider>
|
<a-layout-content>
|
<router-view />
|
</a-layout-content>
|
</a-layout>
|
</template>
|
<script setup>
|
import {ref, h, watch, computed} from "vue";
|
import {ipc} from '@/utils/ipcRenderer'
|
|
import {CloudServerOutlined,CreditCardOutlined,SettingOutlined,SyncOutlined} from '@ant-design/icons-vue';
|
import router from "@/router";
|
import {useRoute} from "vue-router";
|
const route = useRoute();
|
const menu = ref([
|
{label: '通讯设置', key: 'Communication',icon: h(CloudServerOutlined)},
|
{label: '卡片设置', key: 'Card', icon: h(CreditCardOutlined)},
|
// {label: '高级设置', key: 'Advanced', icon: h(SettingOutlined)},
|
])
|
const current = ref('Communication');
|
|
const menuHandle = (e) => {
|
console.log(e);
|
current.value = e ? e.key: current.value;
|
router.push({name: current.value});
|
}
|
current.value = router.currentRoute.value.name?router.currentRoute.value.name :'Communication'
|
const status = ref(0);
|
const getServerStatusColor = computed(()=>{
|
if (status.value === 0){
|
return 'error'
|
}else if (status.value === 1){
|
return 'success'
|
}
|
})
|
const getServerStatusText = computed(()=>{
|
if (status.value === 0){
|
return '未连接'
|
}else if (status.value === 1){
|
return '已连接'
|
}
|
})
|
|
ipc.on('controller.icrf.service',(event,result)=>{
|
console.log(result)
|
status.value = result.status >0?1:0;
|
})
|
watch(()=>route.name,(val)=>{
|
current.value = val;
|
})
|
</script>
|
<style scoped lang="less">
|
#app-layout-sider{
|
height: 100%;
|
.menuClass{
|
width: 196px;
|
margin-top:20px;
|
v-deep(.ant-menu-item-icon){
|
font-size: 22px;
|
}
|
v-deep(.ant-menu-title-content){
|
text-align: left;
|
}
|
}
|
}
|
|
.sb{
|
position: absolute;
|
bottom: 10px;
|
text-align: center;
|
width: 100%;
|
.tip{
|
font-size: 12px;
|
}
|
}
|
</style>
|
