|
@@ -0,0 +1,72 @@
|
|
|
+<template>
|
|
|
+ <div class='system-menu'>
|
|
|
+ <div class='system' v-for='(system ,index) in systemData' :key='index' @click='changeSystem(system)' :class='system.active?"active":""'>
|
|
|
+ <i class='iconfont' :class='system.icon'></i>
|
|
|
+ <div>{{system.text}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 设备设施左侧菜单
|
|
|
+ */
|
|
|
+export default {
|
|
|
+ name: 'systemMenu',
|
|
|
+ props: {},
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ systemData: [
|
|
|
+ { text: '供电', categoryId: 'GDXT', smsxt: '1001', icon: 'wanda-gongdian1', active: true },
|
|
|
+ { text: '暖通', categoryId: 'NTXT', smsxt: '1002', icon: 'wanda-nuantong1', active: false },
|
|
|
+ { text: '消防', categoryId: 'XFXT', smsxt: '1003', icon: 'wanda-xiaofang1', active: false },
|
|
|
+ { text: '弱电', categoryId: 'RDXT', smsxt: '1004', icon: 'wanda-ruodian1', active: false },
|
|
|
+ { text: '给排水', categoryId: 'JPSXT', smsxt: '1005', icon: 'wanda-geipaishui1', active: false },
|
|
|
+ { text: '电梯', categoryId: 'DTXT', smsxt: '1006', icon: 'wanda-dianti1', active: false },
|
|
|
+ { text: '燃气', categoryId: 'RQXT', smsxt: '1007', icon: 'wanda-ranqi1', active: false },
|
|
|
+ { text: '土建', categoryId: 'SCPZ', smsxt: '1008', icon: 'wanda-tujian1', active: false },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ create() {},
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 点击系统,进行切换,并传回 父组件选中系统值
|
|
|
+ */
|
|
|
+ changeSystem(system) {
|
|
|
+ this.systemData.map((item) => {
|
|
|
+ item.active = false
|
|
|
+ if (item.categoryId === system.categoryId) {
|
|
|
+ item.active = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.system-menu {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ flex-direction: column;
|
|
|
+ text-align: center;
|
|
|
+ .system {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ // 激活的系统图标颜色
|
|
|
+ .active {
|
|
|
+ background-color: #fff;
|
|
|
+ color: #025baa;
|
|
|
+ i {
|
|
|
+ color: #025baa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|