fast(设备详情、侧边样式): 告警属性添加枚举类型、侧边栏添加logo和底部收缩功能

src/components/Hamburger/index.vue

@@ -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 {

src/layout/components/Sidebar/Logo.vue

@@ -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="/">
+      <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>
-      </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>
-      </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%;

src/layout/components/Sidebar/index.vue

@@ -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":

src/views/profile/DeviceAlarmConfig/DeviceAlarmConfig.vue

@@ -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';
       }