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