Skip to content

V
vue3portal
Commit 55d45e1e authored by 左玲玲's avatar 左玲玲 😬
Browse files
Options

1320

parent 30bd26a7
Show whitespace changes
Inline Side-by-side
Showing with 225 additions and 84 deletions
src/assets/less/main.less
View file @ 55d45e1e
.lang-cn .system-name {
.ff("cn0");
line-height: 54px;
}
.lang-hk .system-name {
font-size: 30px;
font-weight: bold;
line-height: 54px;
}
.lang-en .system-name {
.ff("en0");
font-size: 30px;
font-weight: bold;
line-height: 54px;
}
body {
......@@ -21,6 +24,11 @@ body {
display: flex;
align-items: center;
}
.centerflex{
display: flex;
justify-content: center;
align-items: center;
}
.colflex {
display: flex;
......@@ -47,11 +55,22 @@ body {
width: 100%;
height: 100%;
}
.oneText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.twoText {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.scrollbar {
&::-webkit-scrollbar {
......@@ -64,34 +83,38 @@ body {
}
&::-webkit-scrollbar-track {
background-color:#05192e;
background-color: #05192e;
border-radius: 5px;
}
&::-webkit-scrollbar-button {}
}
.home{
.home {
.el-radio-button {
&:last-child{
.el-radio-button__inner{
border-radius:0 0 6px 0 !important;
&:last-child {
.el-radio-button__inner {
border-radius: 0 0 6px 0 !important;
}
}
}
.el-radio-button__inner{
.el-radio-button__inner {
background-color: #015b85 !important;
color: #ccc !important;
border-color: #015b85 !important;
outline: none !important;
border-radius:0 !important;
border-radius: 0 !important;
display: flex;
}
.el-radio-button__original-radio:checked+.el-radio-button__inner{
.el-radio-button__original-radio:checked+.el-radio-button__inner {
background-color: #39bae8 !important;
border-color: #39bae8 !important;
color: #fff !important;
}
.el-badge__content{
.el-badge__content {
background-color: #19e5e6;
}
}
\ No newline at end of file
src/pages/layouts/components/Scrolltable.vue
View file @ 55d45e1e
......@@ -6,8 +6,7 @@
width: it.width ? it.width + 'px' : 'auto',
flex: it.width ? 'none' : 1,
}">
{{ it.title }}
</div>
{{ it.title }} </div>
</div>
<div :style="{ '--thumbcolor': colors.thumbcolor }" class="tbody">
<div v-for="(it, i) in dataSource" class="br" :key="i">
......@@ -16,9 +15,7 @@
flex: item.width ? 'none' : 1,
}">
<div v-if="item.render" :key="j">{{ item.render(_, it) }}</div>
<div v-if="!item.render" :key="j" :title="it[item.key]">
{{ it[item.key] }}
</div>
<div v-if="!item.render" :key="j" :title="it[item.key]">{{ it[item.key] }}</div>
</div>
</div>
</div>
......@@ -66,6 +63,14 @@ const props = defineProps({
.hd {
padding: 4px;
flex: 1;
display: -webkit-box;
//width: 100%;
overflow: hidden;
font-size: 14px !important;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
word-break: break-all;
}
}
......@@ -105,7 +110,7 @@ const props = defineProps({
.tbody::-webkit-scrollbar {
/*滚动条整体样式*/
width: 4px;
width: 2px;
/*高宽分别对应横竖滚动条的尺寸*/
height: 4px;
......
src/pages/layouts/components/Systems.vue
View file @ 55d45e1e
......@@ -2,15 +2,22 @@
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-16 09:00:42
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-16 18:30:31
* @LastEditTime: 2023-08-18 11:11:37
* @FilePath: \vue3portal\src\pages\layouts\components\Systems.vue
* @Description:
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
<div v-for="item in datas" :key="item.key">
<div @click="handleclick(item)" :class="['itembox',item.catalogue==1 ? 'menufa' : 'menuch']" :style="{cursor:item.url ? 'pointer':'default'}">{{ item.title }}</div>
<div v-for="item in datas" :key="item.key"
:class="[(item.catalogue == 1 || item.title.indexOf('首页') > -1) ? 'rowflex sysitem' : '',]">
<div @click="handleclick(item)"
:class="['itembox', (item.catalogue == 1 || item.title.indexOf('首页') > -1) ? 'menufa' : 'menuch']"
:style="{ cursor: item.url ? 'pointer' : 'default' }">
<component v-if="item.icon" :is="item.icon+'-outlined'" style="font-size: 19px;margin-right: 10px;"></component>
{{ item.title }}
</div>
<div v-if="item?.children?.length" class="rowflex flexbox">
<Systems :datas="item?.children"></Systems>
</div>
......@@ -26,48 +33,41 @@ const props = defineProps({
}
});
const handleclick= (it)=>{
if(it.url){
window.open(it.url,"_self");
const handleclick = (it) => {
if (it.url) {
window.open(it.url, "_self");
}
}
</script>
<style lang="less" scoped>
.sysitem {
border-bottom: 1px solid rgba(151, 151, 151, 0.2);
}
.itembox {
height: 34px;
display: flex;
justify-content: flex-start;
align-items: center;
margin-right: 20px;
border-radius: 6px;
&.menufa {
// background-color: #015b85;
margin-bottom: 15px;
margin-top: 5px;
font-size: 16px;
position: relative;
padding-left: 18px;
&::before{
content: '';
position: absolute;
left: 0;
top: 9px;
height: 18px;
width: 4px;
background-color: rgb(0, 89, 255);
border-radius: 4px;
}
margin-right: 20px;
}
&.menuch{
// background: #01aefe;
margin-bottom: 10px;
color: rgba(255,255,255,0.7);
&.menuch {
color: #ADB4C7;
margin-right: 15px;
}
}
.flexbox {
flex: 1;
flex-wrap: wrap;
}
</style>
\ No newline at end of file
padding: 4px 0;
}</style>
\ No newline at end of file
src/pages/layouts/components/Tabsmessage.vue
View file @ 55d45e1e
......@@ -2,7 +2,7 @@
* @Author: zuolingling zuolingling@jsnangao.com
* @Date: 2023-08-17 15:37:50
* @LastEditors: zuolingling zuolingling@jsnangao.com
* @LastEditTime: 2023-08-17 17:52:01
* @LastEditTime: 2023-08-18 11:29:29
* @FilePath: \vue3portal\src\pages\layouts\components\Tabsmessage.vue
* @Description:
*
......@@ -15,7 +15,6 @@
<el-radio-button label="1">
告警信息&nbsp;&nbsp;
<DigitalTransform :value="alarmnum" dislocation :interval="500"></DigitalTransform>
</el-radio-button>
<el-radio-button label="2">
业务信息&nbsp;&nbsp;
......@@ -24,26 +23,26 @@
</el-radio-group>
</div>
<div class="scrolltabs scrollbar">
<div class="colflex" style="gap:10px" v-if="switchvalue=='1'">
<div v-for="it in currentData" class="itemmsg">
<div class="colflex" style="gap:10px" v-if="switchvalue == '1' && alarmData?.length">
<div v-for="it in alarmData" class="itemmsg">
<div class="itemt oneText" :key="it.id">
<span>【{{ it.deviceName}}】</span>
<span>【{{ it.deviceName }}】</span>
<span :title="it.type">{{ it.type }}</span>
</div>
<div class="itemb rowflex">
<div style="margin-right: 15px;">
<div style="margin-right: 12px;">
<el-tag size="small" :type="types[it.severityCode]?.type" class="mx-1" effect="dark">
{{ types[it.severityCode]?.name }}
</el-tag>
</div>
<div class="time">
{{ it.alarmTimes }}
{{ it.alarmTime }}
</div>
</div>
</div>
</div>
<div class="colflex" style="gap:10px" v-else>
<div v-for="it in currentData" class="itemmsg">
<div class="colflex" style="gap:10px" v-if="switchvalue == '2' && msgData?.length">
<div v-for="it in msgData" class="itemmsg">
<div class="itemt oneText" :key="it.id">
<span>【{{ it.eventTypeName }}】</span>
<span :title="it.messageContent">{{ it.messageContent }}</span>
......@@ -81,7 +80,8 @@ const switchvalue = ref('1'),
alarmnum = ref(0),
msgnum = ref(0);
const state = reactive({
currentData: []
alarmData: [],
msgData: []
});
const handlchange = (e) => {
switchvalue.value = e;
......@@ -91,7 +91,7 @@ onMounted(() => {
getData("1");
getData("2");
});
const {currentData} = toRefs(state);
const { alarmData, msgData } = toRefs(state);
function getData(type) {
postFetch({ url: "/message/userMessageList", params: { type } }).then(res => {
......@@ -99,17 +99,20 @@ function getData(type) {
let data = res?.data?.page ?? {};
if (type == "1") {
alarmnum.value = data?.total;
alarmData.value = data?.records ?? [];
} else {
msgnum.value = data?.total;
msgData.value = data?.records ?? [];
}
currentData.value = data?.records ?? [];
}
})
}
watch(() => switchvalue.value, (newValue, oldValue) => {
currentData.value=[];
alarmData.value = [];
msgData.value = [];
getData(newValue);
})
</script>
......@@ -120,8 +123,8 @@ watch(() => switchvalue.value, (newValue, oldValue) => {
.tabs {
position: absolute;
top: -32px;
left: 0;
top: -33px;
left: -1px;
}
.scrolltabs {
......@@ -134,10 +137,12 @@ watch(() => switchvalue.value, (newValue, oldValue) => {
overflow-y: auto;
}
.itemt {}
.itemb {
padding: 3px 8px;
.time {
color: rgb(151, 151, 151);
font-size: 12px;
......
src/pages/layouts/components/elsmain.vue
View file @ 55d45e1e
......@@ -26,18 +26,41 @@
<div class="set2 colflex" style="gap: 12px;">
<div class="middlebox">
<aYinTechBorderB4 :config="systemconfig">
<div class="pad12 swh rowflex" style="gap:12px">
<div class="coltab scrollbar">
<div class="colflex">
<div :class="['tabitem', activeitem.id == it.id ? 'tabactive' : '']" v-for="it in menus"
:key="it.id" @click="handleClick(it)">{{ it.appName }}
<div class="swh colflex" style="padding: 15px;">
<div class="systitle" v-if="!Object.keys(activeitem)?.length">
<aim-outlined style="color: #0f828d;margin-right: 18px;font-size: 24px;" />
致力于打造满足数字化要求的智慧工厂
</div>
<div class="syscontent rowflex" v-if="!Object.keys(activeitem)?.length">
<div v-for="(it, i) in menus" :key="it.id" @click="handleClick(it)"
:class="['sysitem', 'colflex', activeitem.id == it.id ? 'tabactive' : '', i != 1 && i != 4 && i != 7 ? 'no-left-right-border' : '', i == 3 || i == 4 || i == 5 ? 'no-top-bottom-border' : '']">
<div class="rowflex systop">
<div class="appName">
{{ it.appName }}
</div>
<div v-if="it.abbreviation" class="abbreviation">
{{ it.abbreviation }}
</div>
<div class="tabcontent scrollbar">
<right-outlined style="color:#6DD400;font-size:18px" />
</div>
<div class="twoText describe">
{{ it.describe }}
</div>
</div>
</div>
<div class="colflex" v-if="Object.keys(activeitem)?.length" style="overflow: hidden;">
<div class="itemtitle rowflex">
<div class="centerflex" @click="activeitem = {}">
<left-outlined style="color:#6DD400;font-size:18px;margin-right: 12px;" />
<div class="systile">{{ activeitem.appName }}</div>
</div>
<div class="sysdescribe oneText">{{ activeitem.describe }}</div>
</div>
<div class="scrollbar" style="flex:1;overflow-y: auto;">
<Systems v-if="activeitem?.menuList?.length" :datas="activeitem.menuList"></Systems>
</div>
</div>
</div>
</aYinTechBorderB4>
</div>
<div class="box3 rowflex" style="gap: 12px;">
......@@ -72,7 +95,6 @@
</div>
<div class="box3">
<aYinTechBorderB4 :config="systemconfig">
<!-- <component is="step-backward-outlined"></component> -->
<Tabsmessage></Tabsmessage>
</aYinTechBorderB4>
</div>
......@@ -252,7 +274,6 @@ function queryAppAndMenus() {
postFetch({ url: "/index/queryAppAndMenus", params: {} }).then(res => {
if (res.code == "0000") {
menus.value = res?.data?.dataList ?? [];
activeitem.value = res?.data?.dataList?.[0] ?? {}
}
})
......@@ -480,31 +501,118 @@ const handleClick = (it) => {
overflow: hidden;
}
.coltab {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
width: 162px;
.tabitem {
.systitle {
width: 100%;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 12px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: rgba(25, 229, 230, 0.47);
font-weight: 400;
padding-bottom: 20px;
}
.syscontent {
flex: 1;
width: 100%;
height: 40px;
flex-wrap: wrap;
.sysitem {
width: 33.33%;
height: 33.33%;
background-color: #05192e;
padding: 19px;
justify-content: center;
cursor: pointer;
border: 1px solid rgba(151, 151, 151, 0.36);
&.no-left-right-border {
border-left: none;
border-right: none;
}
&.no-top-bottom-border {
border-top: none;
border-bottom: none;
}
&:hover {
background-color: #0a4c5c;
.appName {
color: #19E5E6;
font-weight: 600;
}
.abbreviation {
color: #6099EA;
font-weight: 600;
}
.describe {
color: #C6D5E1;
;
}
}
&.tabactive {
background: transparent;
border: none;
color: #fff;
background-color: rgb(1, 91, 133);
.appName {
font-family: PingFangSC-Regular;
font-size: 22px;
color: rgba(25, 229, 230, 0.80);
font-weight: 400;
margin-right: 12px;
}
.abbreviation {
font-family: PingFangSC-Regular;
font-size: 22px;
color: rgba(96, 153, 234, 0.80);
font-weight: 400;
margin-right: 12px;
}
.systop {
align-items: center;
margin-bottom: 15px;
}
.describe {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(198, 213, 225, 0.55);
font-weight: 400;
}
}
}
.itemtitle {
justify-content: space-between;
cursor: pointer;
margin-bottom: 12px;
.systile {
font-family: PingFangSC-Regular;
font-size: 24px;
color: #19E5E6;
font-weight: 400;
}
.sysdescribe {
font-family: PingFangSC-Regular;
font-size: 14px;
color: rgba(198, 213, 225, 0.59);
font-weight: 400;
flex:1;
text-align: right;
margin-left: 30px;
}
}
.tabcontent {
flex: 1;
width: 100%;
height: 100%;
border: 1px solid #3d668e !important;
padding: 12px !important;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment