fast(设备详情、侧边样式): 告警属性添加枚举类型、侧边栏添加logo和底部收缩功能
This commit is contained in:
fhysy
parent
10e2983623
commit
28eb483edf
|
|
@ -3,10 +3,10 @@
|
|||
<svg
|
||||
:class="{'is-active':isActive}"
|
||||
class="hamburger"
|
||||
viewBox="0 0 1024 1024"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="64"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
|
||||
</svg>
|
||||
|
|
@ -36,6 +36,7 @@ export default {
|
|||
vertical-align: middle;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger.is-active {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,22 @@
|
|||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
||||
<div :class="{'collapse':collapse}" class="sidebar-logo-container" @click="toggleSideBar">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
|
||||
<div v-if="collapse" key="collapse" class="sidebar-logo-link">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 class="sidebar-title">{{ attribute }} </h1>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
|
||||
</div>
|
||||
<div v-else key="expand" class="sidebar-logo-link">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||
<h1 class="sidebar-title">{{ attribute }} </h1>
|
||||
</router-link>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import logoImg from '@/assets/logo/logo.png'
|
||||
// import logoImg from '@/assets/logo/logo.png'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
import defaultConfig from '@/settings.js'
|
||||
// import defaultConfig from '@/settings.js'
|
||||
|
||||
export default {
|
||||
name: 'SidebarLogo',
|
||||
|
|
@ -41,10 +41,16 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
title: '数字用电管理系统',
|
||||
logo: logoImg
|
||||
logo: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.logo = '/images/' + process.env.VUE_APP_ICO_URL;
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
themeMenuBg() {
|
||||
// switch (this.sideTheme) {
|
||||
// case "theme-dark":
|
||||
|
|
@ -94,6 +100,7 @@ export default {
|
|||
//background: $menuGreenLogoBg;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -5,21 +5,22 @@
|
|||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:unique-opened="true"
|
||||
:collapse-transition="false"
|
||||
:default-active="activeMenu"
|
||||
:unique-opened="true"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
:item="route"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<!-- <logout />-->
|
||||
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -29,11 +30,12 @@ import Logo from "./Logo";
|
|||
import SidebarItem from "./SidebarItem";
|
||||
import variables from "@/assets/styles/variables.scss";
|
||||
import Logout from './Logout'
|
||||
import Hamburger from '@/components/Hamburger'
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo, Logout },
|
||||
components: { SidebarItem, Logo, Logout, Hamburger },
|
||||
computed: {
|
||||
...mapState(["settings"]),
|
||||
...mapState(["settings","sidebar"]),
|
||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
|
|
@ -55,6 +57,9 @@ export default {
|
|||
},
|
||||
},
|
||||
methods: {
|
||||
toggleSideBar() {
|
||||
this.$store.dispatch('app/toggleSideBar')
|
||||
},
|
||||
themeMenuBg() {
|
||||
// switch (this.settings.sideTheme) {
|
||||
// case "theme-dark":
|
||||
|
|
|
|||
|
|
@ -33,6 +33,9 @@
|
|||
<el-tab-pane v-for="(group,groupIndex ) in groupList" :key="group.funcType" :label="group.funcTypeName" :name="group.funcType">
|
||||
<el-collapse v-model="activeName" accordion>
|
||||
<el-collapse-item v-for="(item,index) in group.list" :key="item.funcKey" :name="item.funcKey" :title="item.funcName">
|
||||
<template slot="title">
|
||||
{{item.funcName}} <span :style="{color:item.isAck?'green':'red'}">（{{item.isAck?'已同步设备':'未同步设备'}}）</span>
|
||||
</template>
|
||||
<el-form class="device-attr-box" label-width="140px">
|
||||
<el-form-item v-for="val in item.confJsonObj" :key="val.key" class="device-attr-item">
|
||||
<template #label>
|
||||
|
|
@ -50,6 +53,15 @@
|
|||
active-color="#13ce66"
|
||||
inactive-color="#dcdfe6"
|
||||
/>
|
||||
<el-select v-else-if="getAttrType(val) === 'select'" v-model="val.value" :disabled="item.disabled" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="selectItem in val.options"
|
||||
v-if="val.options"
|
||||
:key="selectItem.value"
|
||||
:label="selectItem.label"
|
||||
:value="selectItem.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="val.value"
|
||||
|
|
@ -258,9 +270,12 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
//判断告警数据类型
|
||||
getAttrType(obj){
|
||||
if(obj.key.endsWith('_state')){
|
||||
return 'switch';
|
||||
}else if(obj.key.endsWith('_select')){
|
||||
return 'select';
|
||||
}else{
|
||||
return 'input';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue