fast(设备详情、侧边样式): 告警属性添加枚举类型、侧边栏添加logo和底部收缩功能
This commit is contained in:
parent
10e2983623
commit
28eb483edf
|
@ -3,10 +3,10 @@
|
||||||
<svg
|
<svg
|
||||||
:class="{'is-active':isActive}"
|
:class="{'is-active':isActive}"
|
||||||
class="hamburger"
|
class="hamburger"
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="64"
|
|
||||||
height="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" />
|
<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>
|
</svg>
|
||||||
|
@ -36,6 +36,7 @@ export default {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hamburger.is-active {
|
.hamburger.is-active {
|
||||||
|
|
|
@ -1,22 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}">
|
<div :class="{'collapse':collapse}" class="sidebar-logo-container" @click="toggleSideBar">
|
||||||
<transition name="sidebarLogoFade">
|
<transition name="sidebarLogoFade">
|
||||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
<div v-if="collapse" key="collapse" class="sidebar-logo-link">
|
||||||
<!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
|
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||||
<h1 class="sidebar-title">{{ attribute }} </h1>
|
<h1 class="sidebar-title">{{ attribute }} </h1>
|
||||||
</router-link>
|
</div>
|
||||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
<div v-else key="expand" class="sidebar-logo-link">
|
||||||
<!-- <img v-if="logo" :src="logo" class="sidebar-logo"> -->
|
<img v-if="logo" :src="logo" class="sidebar-logo">
|
||||||
<h1 class="sidebar-title">{{ attribute }} </h1>
|
<h1 class="sidebar-title">{{ attribute }} </h1>
|
||||||
</router-link>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import logoImg from '@/assets/logo/logo.png'
|
// import logoImg from '@/assets/logo/logo.png'
|
||||||
import variables from '@/assets/styles/variables.scss'
|
import variables from '@/assets/styles/variables.scss'
|
||||||
import defaultConfig from '@/settings.js'
|
// import defaultConfig from '@/settings.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SidebarLogo',
|
name: 'SidebarLogo',
|
||||||
|
@ -41,10 +41,16 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '数字用电管理系统',
|
title: '数字用电管理系统',
|
||||||
logo: logoImg
|
logo: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.logo = '/images/' + process.env.VUE_APP_ICO_URL;
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
toggleSideBar() {
|
||||||
|
this.$store.dispatch('app/toggleSideBar')
|
||||||
|
},
|
||||||
themeMenuBg() {
|
themeMenuBg() {
|
||||||
// switch (this.sideTheme) {
|
// switch (this.sideTheme) {
|
||||||
// case "theme-dark":
|
// case "theme-dark":
|
||||||
|
@ -94,6 +100,7 @@ export default {
|
||||||
//background: $menuGreenLogoBg;
|
//background: $menuGreenLogoBg;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
& .sidebar-logo-link {
|
& .sidebar-logo-link {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -5,21 +5,22 @@
|
||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
:unique-opened="true"
|
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
|
:default-active="activeMenu"
|
||||||
|
:unique-opened="true"
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
v-for="(route, index) in sidebarRouters"
|
v-for="(route, index) in sidebarRouters"
|
||||||
:key="route.path + index"
|
:key="route.path + index"
|
||||||
:item="route"
|
|
||||||
:base-path="route.path"
|
:base-path="route.path"
|
||||||
|
:item="route"
|
||||||
/>
|
/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<!-- <logout />-->
|
<!-- <logout />-->
|
||||||
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -29,11 +30,12 @@ import Logo from "./Logo";
|
||||||
import SidebarItem from "./SidebarItem";
|
import SidebarItem from "./SidebarItem";
|
||||||
import variables from "@/assets/styles/variables.scss";
|
import variables from "@/assets/styles/variables.scss";
|
||||||
import Logout from './Logout'
|
import Logout from './Logout'
|
||||||
|
import Hamburger from '@/components/Hamburger'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SidebarItem, Logo, Logout },
|
components: { SidebarItem, Logo, Logout, Hamburger },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["settings"]),
|
...mapState(["settings","sidebar"]),
|
||||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||||
activeMenu() {
|
activeMenu() {
|
||||||
const route = this.$route;
|
const route = this.$route;
|
||||||
|
@ -55,6 +57,9 @@ export default {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
toggleSideBar() {
|
||||||
|
this.$store.dispatch('app/toggleSideBar')
|
||||||
|
},
|
||||||
themeMenuBg() {
|
themeMenuBg() {
|
||||||
// switch (this.settings.sideTheme) {
|
// switch (this.settings.sideTheme) {
|
||||||
// case "theme-dark":
|
// 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-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 v-model="activeName" accordion>
|
||||||
<el-collapse-item v-for="(item,index) in group.list" :key="item.funcKey" :name="item.funcKey" :title="item.funcName">
|
<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 class="device-attr-box" label-width="140px">
|
||||||
<el-form-item v-for="val in item.confJsonObj" :key="val.key" class="device-attr-item">
|
<el-form-item v-for="val in item.confJsonObj" :key="val.key" class="device-attr-item">
|
||||||
<template #label>
|
<template #label>
|
||||||
|
@ -50,6 +53,15 @@
|
||||||
active-color="#13ce66"
|
active-color="#13ce66"
|
||||||
inactive-color="#dcdfe6"
|
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
|
<el-input
|
||||||
v-else
|
v-else
|
||||||
v-model="val.value"
|
v-model="val.value"
|
||||||
|
@ -258,9 +270,12 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//判断告警数据类型
|
||||||
getAttrType(obj){
|
getAttrType(obj){
|
||||||
if(obj.key.endsWith('_state')){
|
if(obj.key.endsWith('_state')){
|
||||||
return 'switch';
|
return 'switch';
|
||||||
|
}else if(obj.key.endsWith('_select')){
|
||||||
|
return 'select';
|
||||||
}else{
|
}else{
|
||||||
return 'input';
|
return 'input';
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue