Browse Source

动态添加icon

zhulizhen1111 4 years ago
parent
commit
cf5dd1b64e

File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cddt.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cddt2.svg


File diff suppressed because it is too large
+ 23 - 0
src/assets/imgs/cdgd.svg


File diff suppressed because it is too large
+ 23 - 0
src/assets/imgs/cdgd2.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdgps.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdgps2.svg


File diff suppressed because it is too large
+ 23 - 0
src/assets/imgs/cdnt1.svg


File diff suppressed because it is too large
+ 23 - 0
src/assets/imgs/cdnt2.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdrd.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdrd2.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdrq.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdrq2.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdtj.svg


File diff suppressed because it is too large
+ 22 - 0
src/assets/imgs/cdtj2.svg


File diff suppressed because it is too large
+ 23 - 0
src/assets/imgs/cdxf.svg


File diff suppressed because it is too large
+ 23 - 0
src/assets/imgs/cdxf2.svg


File diff suppressed because it is too large
+ 5 - 5
src/assets/imgs/fzyf.svg


File diff suppressed because it is too large
+ 17 - 0
src/assets/imgs/fzyf2.svg


File diff suppressed because it is too large
+ 17 - 0
src/assets/imgs/swzxgyf.svg


File diff suppressed because it is too large
+ 17 - 0
src/assets/imgs/swzxgyf2.svg


File diff suppressed because it is too large
+ 16 - 0
src/assets/imgs/zhkzt.svg


File diff suppressed because it is too large
+ 16 - 0
src/assets/imgs/zhkzt2.svg


File diff suppressed because it is too large
+ 3 - 3
src/assets/imgs/zhsx.svg


File diff suppressed because it is too large
+ 16 - 0
src/assets/imgs/zhsx2.svg


+ 293 - 209
src/components/Select/Drop.vue

@@ -1,124 +1,152 @@
 <template>
-    <transition name="selectDownUpExtend">
-        <div class="p-select-option-box"  v-show="dropVisible">
-            <div >
-                <ul class="p-select-option-menu"  v-show="data.length" @mousewheel.stop @click.stop>
-                    <template v-for="(option, index) in data" >
-                        <li v-if="option.classify"  @click.stop="handlePrevent" class="p-select-option-classify" :key="index+option.classify">{{option.classify}}</li>
-                        <li v-else
-                            :class="['p-select-option', option.divider && 'p-select-option-divider',option.disabled ? 'p-select-option-disabled' : option.selected ? 'p-select-option-selected' : '']"
-                            :key="index"
-                            @click.stop="clickHandle(option,index)"
+    <transition name='selectDownUpExtend'>
+        <div class='p-select-option-box' v-show='dropVisible'>
+            <div>
+                <ul class='p-select-option-menu' v-show='data.length' @mousewheel.stop @click.stop>
+                    <template v-for='(option, index) in data'>
+                        <li
+                            v-if='option.classify'
+                            @click.stop='handlePrevent'
+                            class='p-select-option-classify'
+                            :key='index+option.classify'
+                        >{{option.classify}}</li>
+                        <li
+                            v-else
+                            :class='["p-select-option", option.divider && "p-select-option-divider",option.disabled ? "p-select-option-disabled" : option.selected ? "p-select-option-selected" : ""]'
+                            :key='index'
+                            @click.stop='clickHandle(option,index)'
                         >
-                            <div class="p-select-option-content" >
-                                <div class="p-select-option-wraper" v-if="option.src || option.label">
-                                    <div v-if="option.src" class="p-select-option-avatar"  >
+                            <div class='p-select-option-content'>
+                                <div class='p-select-option-wraper' v-if='option.src || option.label'>
+                                    <div v-if='option.src' class='p-select-option-avatar'>
                                         <!-- <Avatar :size="option.sub? 'large':'medium'">
                                             <img :src="option.src">
-                                        </Avatar> -->
+                                        </Avatar>-->
                                     </div>
-                                    <span v-if="option.label" :style="labelStyle(index)" class="p-select-option-label">{{option.label}}</span>
+                                    <span v-if='option.label' :style='labelStyle(index)' class='p-select-option-label'>{{option.label}}</span>
                                 </div>
                                 <div>
-                                    <section v-if="option.display" :style="widthStyle(option)" :class="['p-select-option-main', option.disabled ? 'p-select-option-main-disabled' :option.selected ? 'p-select-option-main-selected' : '' ]" :title="option.name" v-html="option.display"></section>
-                                    <section v-else :style="widthStyle(option)" :class="['p-select-option-main', option.disabled ? 'p-select-option-main-disabled' :option.selected ? 'p-select-option-main-selected' : '' ]" :title="option.name">{{option.name}}</section>
-                                    <section v-if="option.sub" :style="widthStyle(option)" :class="['p-select-option-desc', option.disabled ? 'p-select-option-desc-disabled' :option.selected ? 'p-select-option-desc-selected' : '' ]" :title="option.sub">{{option.sub}}</section>
+                                    <section
+                                        v-if='option.display'
+                                        :style='widthStyle(option)'
+                                        :class='["p-select-option-main", option.disabled ? "p-select-option-main-disabled" :option.selected ? "p-select-option-main-selected" : "" ]'
+                                        :title='option.name'
+                                        v-html='option.display'
+                                    ></section>
+                                    <section
+                                        v-else
+                                        :style='widthStyle(option)'
+                                        :class='["p-select-option-main", option.disabled ? "p-select-option-main-disabled":option.selected ? "p-select-option-main-selected" : "" ]'
+                                        :title='option.name'
+                                    >{{option.name}}</section>
+                                    <section
+                                        v-if='option.sub'
+                                        :style='widthStyle(option)'
+                                        :class='["p-select-option-desc", option.disabled ? "p-select-option-desc-disabled" :option.selected ? "p-select-option-desc-selected" : "" ]'
+                                        :title='option.sub'
+                                    >{{option.sub}}</section>
                                 </div>
                             </div>
-                            <div class="p-select-multiple-icon" v-if="multiple&&option.selected"></div>
+                            <div class='p-select-multiple-icon' v-if='multiple&&option.selected'></div>
                         </li>
                     </template>
                 </ul>
-                <div @click.stop="() => false" v-if="multiple&&data.length" :class="['p-select-confirm-panel', data.length > 5 ? 'p-select-panel-shadow': '' ]">
-                    <span @click.stop.capture="cancel">取消</span>
-                    <span @click.stop.capture="confirm" :class="[disableConfirm ? 'disabled-confirm-button' : '']">确定</span>
+                <div
+                    @click.stop='() => false'
+                    v-if='multiple&&data.length'
+                    :class='["p-select-confirm-panel", data.length > 5 ? "p-select-panel-shadow": ""]'
+                >
+                    <span @click.stop.capture='cancel'>取消</span>
+                    <span @click.stop.capture='confirm' :class='[disableConfirm ? "disabled-confirm-button" : ""]'>确定</span>
                 </div>
             </div>
-            <div ref='notfound' class="p-select-not-found"  v-show="(query && !data.length) || !data.length" >没有找到任何内容</div>
+            <div ref='notfound' class='p-select-not-found' v-show='(query && !data.length) || !data.length'>没有找到任何内容</div>
         </div>
     </transition>
 </template>
 
 <script>
 import './static/stylus/animate/selectDownUpExtend.styl'
-import selected from './static/iconSvg/selected.svg'
+//import selected from './static/iconSvg/selected.svg'
 // import Avatar from '../Avatar'
 export default {
-    name:'selectDrop',
-    props:{
+    name: 'selectDrop',
+    props: {
         /**
          * 是否多选
          */
-        multiple:{
-            type:Boolean,
+        multiple: {
+            type: Boolean,
             default: false
         },
         /**
          * 搜索内容
          */
-        query:{
-            type:String,
+        query: {
+            type: String,
             default: ''
         },
         /**
          * 下拉框数据
          */
-        data:{
-            type:Array,
+        data: {
+            type: Array,
             default: () => []
         },
-        width:{
-            type:[String, Number]
+        width: {
+            type: [String, Number]
         }
     },
-    computed:{
-        tagBgColors () {  //标签背景颜色
-            return  ['#E1F2FF' , '#D5F6F2', '#D9F5D6', '#FAF1D1', '#FEEAD2', '#FDE3E2', '#FDDDEF', '#ECE2FE' ,'#B2E6F2', '#EFF0F1']
+    computed: {
+        tagBgColors() {
+            //标签背景颜色
+            return ['#E1F2FF', '#D5F6F2', '#D9F5D6', '#FAF1D1', '#FEEAD2', '#FDE3E2', '#FDDDEF', '#ECE2FE', '#B2E6F2', '#EFF0F1']
         },
-        tagTextColors () { // 标签字体颜色
+        tagTextColors() {
+            // 标签字体颜色
             return ['#0065B3', '#078372', '#237B19', '#AA7803', '#B26206', '#AC2F28', '#8C218C', '#4E1BA7', '#161FA2', '#373C43']
-        },
+        }
     },
-    data () {
+    data() {
         return {
-            dropVisible:false,
-            value:'',
+            dropVisible: false,
+            value: '',
             disableConfirm: true
         }
     },
-    watch:{
-        value:{
+    watch: {
+        value: {
             handler(n, o) {
                 if (n !== o) {
                     this.selectById()
                 }
             },
-            immediate :true
-        },
+            immediate: true
+        }
     },
-    components:{selected,},  //√ 图标
-    methods:{
-        widthStyle (option) {
+    // components: { selected }, //√ 图标
+    methods: {
+        widthStyle(option) {
             let width = 0
             if (option.src) {
-                width = option.sub ? this.width - 68  : this.width - 60 // 有头像的情况
+                width = option.sub ? this.width - 68 : this.width - 60 // 有头像的情况
             } else if (option.label) {
-                width = this.width - 76   // 有标签的情况
+                width = this.width - 76 // 有标签的情况
             } else {
-                width = this.width - 24   // 只有文字的情况
+                width = this.width - 24 // 只有文字的情况
             }
             if (this.multiple) {
-                width = width - 28   // 多选情况下还要再减去右边勾选图标的宽度
+                width = width - 28 // 多选情况下还要再减去右边勾选图标的宽度
             }
-            return {width : width + 'px'}
+            return { width: width + 'px' }
         },
-        handlePrevent (e) {
+        handlePrevent() {
             return false
         },
         /**
          * description 如果用户设置了默认选中项 则默认选中
          */
-        selectById () {
+        selectById() {
             const index = this.data.findIndex(item => {
                 return item.id === this.value
             })
@@ -129,18 +157,18 @@ export default {
         /**
          * description 设置标签的样式
          * params  index: 序号
-        */
-        labelStyle (index) {
+         */
+        labelStyle(index) {
             return {
-                color:this.tagTextColors[index],
-                backgroundColor:this.tagBgColors[index]
+                color: this.tagTextColors[index],
+                backgroundColor: this.tagBgColors[index]
             }
         },
         /**
          * description 处理点击操作 向上传递事件和选中项
          * params  option:当前项个   index: 序号
-        */
-        clickHandle (option) {
+         */
+        clickHandle(option) {
             if (option.disabled) {
                 return
             }
@@ -149,161 +177,217 @@ export default {
         },
         /**
          * description 响应取消事件
-        */
-        cancel () {
+         */
+        cancel() {
             this.$emit('cancel')
         },
         /**
          * description 响应确认事件
-        */
-        confirm () {
-            if (this.disableConfirm) return;
+         */
+        confirm() {
+            if (this.disableConfirm) return
             this.$emit('confirm')
         }
     }
 }
 </script>
  <style lang="stylus">
-.p-select-not-found
-    height 54px
-    padding 16px 0 16px 12px
-    border-radius 4px
-    line-height 22px
-    font-size 14px
-    color $grey-400
-    background: $white
-    box-sizing border-box
-    min-width 180px
-    overflow hidden
-    text-overflow ellipsis
-    white-space nowrap
-.p-select-option-box
-    position absolute
-    border 1px solid $grey-300
-    max-height 300px
-    border-radius 4px
-    box-shadow $box-shadow-bottom
-    background $white
-    font-size 0
-    .p-select-option-menu
-        font-size 0
-        padding-top 8px
-        padding-bottom 8px
-        max-height 248px
-        overflow auto
-        .p-select-option-selected
-            background-color $blue-100
-        .p-select-option
-            display flex
-            align-items center
-            justify-content space-between
-            position relative
-            width 100%
-            box-size border-box
-            border-radius 0
-            padding 8px 0 8px 12px
-            cursor pointer
-            overflow hidden
-            text-overflow ellipsis
-            white-space nowrap
-            &:hover
-                background-color $grey-100
-            .p-select-option-content
-                display flex
-                align-items center
-                justify-content: flex-start
-                font-size 0
-                .p-select-option-wraper
-                    display flex
-                    align-items center
-                    justify-content: center
-                    .p-select-option-avatar
-                        display flex
-                        align-items center
-                        justify-content: center
-                        margin 4px 0 4px 0
-                        overflow hidden
-                    .p-select-option-label
-                        display inline-block
-                        width 44px
-                        height 24px
-                        margin-right 8px
-                        line-height 24px
-                        font-size 14px
-                        text-align center
-                        overflow hidden
-                .p-select-option-main
-                    overflow hidden
-                    text-overflow ellipsis
-                    white-space nowrap
-                    font-size 14px
-                    line-height 22px
-                    color $grey-900
-                .p-select-option-main-selected
-                    color $blue-500
-                .p-select-option-main-disabled
-                    color $grey-400
-                .p-select-option-desc
-                    overflow hidden
-                    text-overflow ellipsis
-                    white-space nowrap
-                    font-size 12px
-                    line-height 18px
-                    color $grey-500
-                .p-select-option-desc-selected
-                    color $blue-500
-                .p-select-option-desc-disabled
-                    color $grey-400
-            .p-select-multiple-icon
-                position absolute
-                right 12px
-                top 50%
-                width 12px
-                height 6px
-                border:2px solid rgb(0, 145, 255)
-                border-top none
-                border-right none
-                transform translateY(-50%) rotate(-45deg)
-    .p-select-confirm-panel
-        display flex
-        justify-content flex-end
-        align-items center
-        height 46px
-        width 100%
-        span
-            font-size 14px
-            cursor pointer
-        span:first-child
-            color $grey-900
-            margin-right 16px
-        span:last-child
-            color $blue-500
-            margin-right 12px
-        span.disabled-confirm-button
-            font-size 14px
-            color $grey-400
-            cursor not-allowed
-    .p-select-panel-shadow
-        position relative
-        &::after
-            content ''
-            display block
-            position absolute
-            top 0
-            left 0
-            width 100%
-            height 100%
-            pointer-events none
-            box-shadow  $box-shadow-top
-    .p-select-option-divider
-        border-bottom 1px solid $red-200
-    .p-select-option-disabled
-        color $grey-400
-        background $red-200
-        cursor not-allowed!important
-    .p-select-option-classify
-        padding 8px 0 8px 12px
-        color $grey-500
-        font-size 14px
-        line-height 22px
+ .p-select-not-found {
+     height: 54px;
+     padding: 16px 0 16px 12px;
+     border-radius: 4px;
+     line-height: 22px;
+     font-size: 14px;
+     color: $grey-400;
+     background: $white;
+     box-sizing: border-box;
+     min-width: 180px;
+     overflow: hidden;
+     text-overflow: ellipsis;
+     white-space: nowrap;
+ }
+
+ .p-select-option-box {
+     position: absolute;
+     border: 1px solid $grey-300;
+     max-height: 300px;
+     border-radius: 4px;
+     box-shadow: $box-shadow-bottom;
+     background: $white;
+     font-size: 0;
+
+     .p-select-option-menu {
+         font-size: 0;
+         padding-top: 8px;
+         padding-bottom: 8px;
+         max-height: 248px;
+         overflow: auto;
+         z-index: 9999;
+         border: 1px solid #ccc;
+         background: #fff;
+
+         .p-select-option-selected {
+             background-color: $blue-100;
+         }
+
+         .p-select-option {
+             display: flex;
+             align-items: center;
+             justify-content: space-between;
+             position: relative;
+             width: 100%;
+             box-size: border-box;
+             border-radius: 0;
+             padding: 8px 0 8px 12px;
+             cursor: pointer;
+             overflow: hidden;
+             text-overflow: ellipsis;
+             white-space: nowrap;
+
+             &:hover {
+                 background-color: $grey-100;
+             }
+
+             .p-select-option-content {
+                 display: flex;
+                 align-items: center;
+                 justify-content: flex-start;
+                 font-size: 0;
+
+                 .p-select-option-wraper {
+                     display: flex;
+                     align-items: center;
+                     justify-content: center;
+
+                     .p-select-option-avatar {
+                         display: flex;
+                         align-items: center;
+                         justify-content: center;
+                         margin: 4px 0 4px 0;
+                         overflow: hidden;
+                     }
+
+                     .p-select-option-label {
+                         display: inline-block;
+                         width: 44px;
+                         height: 24px;
+                         margin-right: 8px;
+                         line-height: 24px;
+                         font-size: 14px;
+                         text-align: center;
+                         overflow: hidden;
+                     }
+                 }
+
+                 .p-select-option-main {
+                     overflow: hidden;
+                     text-overflow: ellipsis;
+                     white-space: nowrap;
+                     font-size: 14px;
+                     line-height: 22px;
+                     color: $grey-900;
+                 }
+
+                 .p-select-option-main-selected {
+                     color: $blue-500;
+                 }
+
+                 .p-select-option-main-disabled {
+                     color: $grey-400;
+                 }
+
+                 .p-select-option-desc {
+                     overflow: hidden;
+                     text-overflow: ellipsis;
+                     white-space: nowrap;
+                     font-size: 12px;
+                     line-height: 18px;
+                     color: $grey-500;
+                 }
+
+                 .p-select-option-desc-selected {
+                     color: $blue-500;
+                 }
+
+                 .p-select-option-desc-disabled {
+                     color: $grey-400;
+                 }
+             }
+
+             .p-select-multiple-icon {
+                 position: absolute;
+                 right: 12px;
+                 top: 50%;
+                 width: 12px;
+                 height: 6px;
+                 border: 2px solid rgb(0, 145, 255);
+                 border-top: none;
+                 border-right: none;
+                 transform: translateY(-50%) rotate(-45deg);
+             }
+         }
+     }
+
+     .p-select-confirm-panel {
+         display: flex;
+         justify-content: flex-end;
+         align-items: center;
+         height: 46px;
+         width: 100%;
+
+         span {
+             font-size: 14px;
+             cursor: pointer;
+         }
+
+         span:first-child {
+             color: $grey-900;
+             margin-right: 16px;
+         }
+
+         span:last-child {
+             color: $blue-500;
+             margin-right: 12px;
+         }
+
+         span.disabled-confirm-button {
+             font-size: 14px;
+             color: $grey-400;
+             cursor: not-allowed;
+         }
+     }
+
+     .p-select-panel-shadow {
+         position: relative;
+
+         &::after {
+             content: '';
+             display: block;
+             position: absolute;
+             top: 0;
+             left: 0;
+             width: 100%;
+             height: 100%;
+             pointer-events: none;
+             box-shadow: $box-shadow-top;
+         }
+     }
+
+     .p-select-option-divider {
+         border-bottom: 1px solid $red-200;
+     }
+
+     .p-select-option-disabled {
+         color: $grey-400;
+         background: $red-200;
+         cursor: not-allowed !important;
+     }
+
+     .p-select-option-classify {
+         padding: 8px 0 8px 12px;
+         color: $grey-500;
+         font-size: 14px;
+         line-height: 22px;
+     }
+ }
 </style>

+ 1 - 1
src/components/legendremarks.vue

@@ -26,7 +26,7 @@ export default {
         showModal() {
             this.visible = true
         },
-        handleOk(e) {
+        handleOk() {
             this.visible = false
         }
     }

+ 230 - 212
src/utils/plugins/components.js

@@ -1,542 +1,558 @@
 var system = [
         {
-            name: '供电系统',
+            name: "供电系统",
             id: 1,
+            icon: require("@/assets/imgs/cdgd.svg"),
+            icon1: require("@/assets/imgs/cdgd2.svg"),
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [],
                 },
                 {
-                    label: '变配电室内部设备清单',
+                    label: "变配电室内部设备清单",
                     children: [],
                 },
                 {
-                    label: '楼层电井(间)控制商铺范围清单',
+                    label: "楼层电井(间)控制商铺范围清单",
                     children: [
                         {
-                            label: 'BA楼宇智能化',
-                            id: 'GDQD1',
+                            label: "BA楼宇智能化",
+                            id: "GDQD1",
                         },
                         {
-                            label: '门禁管理(科松)',
-                            id: 'GDQD2',
+                            label: "门禁管理(科松)",
+                            id: "GDQD2",
                         },
                         {
-                            label: '视频监控',
-                            id: 'GDQD3',
+                            label: "视频监控",
+                            id: "GDQD3",
                         },
                     ],
                 },
                 {
-                    label: '维保事项',
+                    label: "维保事项",
                     children: [
                         {
-                            label: '配电室内',
-                            id: 'GDWB1',
+                            label: "配电室内",
+                            id: "GDWB1",
                         },
                         {
-                            label: '配电室外',
-                            id: 'GDWB2',
+                            label: "配电室外",
+                            id: "GDWB2",
                         },
                     ],
                 },
                 {
-                    label: '维修事项',
+                    label: "维修事项",
                     children: [
                         {
-                            label: '配电室内',
-                            id: 'GDWX1',
+                            label: "配电室内",
+                            id: "GDWX1",
                         },
                         {
-                            label: '配电室外',
-                            id: 'GDWX2',
+                            label: "配电室外",
+                            id: "GDWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'GDZW1',
+                            label: "专项维修",
+                            id: "GDZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'GDZW2',
+                            label: "其他事项",
+                            id: "GDZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '暖通系统',
+            name: "暖通系统",
             id: 2,
+            icon: require("@/assets/imgs/cdnt2.svg"),
+            icon1: require("@/assets/imgs/cdnt1.svg"),
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [
                         {
-                            label: '空调系统原理图',
-                            id: 'NTYL1',
+                            label: "空调系统原理图",
+                            id: "NTYL1",
                         },
                         {
-                            label: '超市空调系统原理图',
-                            id: 'NTYL2',
+                            label: "超市空调系统原理图",
+                            id: "NTYL2",
                         },
                         {
-                            label: '分水器支路分布明细',
-                            id: 'NTYL3',
+                            label: "分水器支路分布明细",
+                            id: "NTYL3",
                         },
                         {
-                            label: '分水器支路分布图',
-                            id: 'NTYL4',
+                            label: "分水器支路分布图",
+                            id: "NTYL4",
                         },
                     ],
                 },
                 {
-                    label: '主要设备清单',
+                    label: "主要设备清单",
                     children: [
                         {
-                            label: '冷热源机房内',
-                            id: 'NTQD1',
+                            label: "冷热源机房内",
+                            id: "NTQD1",
                         },
                         {
-                            label: '楼层末端',
-                            id: 'NTQD2',
+                            label: "楼层末端",
+                            id: "NTQD2",
                         },
                     ],
                 },
                 {
-                    label: '维保事项',
+                    label: "维保事项",
                     children: [
                         {
-                            label: '冷源机房内',
-                            id: 'NTWB1',
+                            label: "冷源机房内",
+                            id: "NTWB1",
                         },
                         {
-                            label: '冷源机房外',
-                            id: 'NTWB2',
+                            label: "冷源机房外",
+                            id: "NTWB2",
                         },
                     ],
                 },
                 {
-                    label: '维修事项',
+                    label: "维修事项",
                     children: [
                         {
-                            label: '冷源机房内',
-                            id: 'NTWX1',
+                            label: "冷源机房内",
+                            id: "NTWX1",
                         },
                         {
-                            label: '冷源机房外',
-                            id: 'NTWX2',
+                            label: "冷源机房外",
+                            id: "NTWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'NTZW1',
+                            label: "专项维修",
+                            id: "NTZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'NTZW2',
+                            label: "其他事项",
+                            id: "NTZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '消防系统',
+            name: "消防系统",
+            icon: require("@/assets/imgs/cdxf.svg"),
+            icon1: require("@/assets/imgs/cdxf2.svg"),
             id: 3,
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [
                         {
-                            label: '消防电系统原理示意图',
-                            id: 'XFYL1',
+                            label: "消防电系统原理示意图",
+                            id: "XFYL1",
                         },
                         {
-                            label: '消防喷淋系统示意图',
-                            id: 'XFYL2',
+                            label: "消防喷淋系统示意图",
+                            id: "XFYL2",
                         },
                         {
-                            label: '消防窗喷系统示意图',
-                            id: 'XFYL3',
+                            label: "消防窗喷系统示意图",
+                            id: "XFYL3",
                         },
                         {
-                            label: '消防栓系统示意图',
-                            id: 'XFYL4',
+                            label: "消防栓系统示意图",
+                            id: "XFYL4",
                         },
                         {
-                            label: '消防泵房引出管路分布图',
-                            id: 'XFYL5',
+                            label: "消防泵房引出管路分布图",
+                            id: "XFYL5",
                         },
                     ],
                 },
                 {
-                    label: '主要设备清单',
+                    label: "主要设备清单",
                     children: [],
                 },
                 {
-                    label: '维保事项',
+                    label: "维保事项",
                     children: [
                         {
-                            label: '中控室/消防泵房内',
-                            id: 'XFWB1',
+                            label: "中控室/消防泵房内",
+                            id: "XFWB1",
                         },
                         {
-                            label: '中控室/消防泵房外',
-                            id: 'XFWB2',
+                            label: "中控室/消防泵房外",
+                            id: "XFWB2",
                         },
                     ],
                 },
                 {
-                    label: '维修事项',
+                    label: "维修事项",
                     children: [
                         {
-                            label: '中控室/消防泵房内',
-                            id: 'XFWX1',
+                            label: "中控室/消防泵房内",
+                            id: "XFWX1",
                         },
                         {
-                            label: '中控室/消防泵房外',
-                            id: 'XFWX2',
+                            label: "中控室/消防泵房外",
+                            id: "XFWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'XFZW1',
+                            label: "专项维修",
+                            id: "XFZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'XFZW2',
+                            label: "其他事项",
+                            id: "XFZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '弱电系统',
+            name: "弱电系统",
             id: 4,
+            icon: require("@/assets/imgs/cdrd.svg"),
+            icon1: require("@/assets/imgs/cdrd2.svg"),
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [
                         {
-                            label: '视频监控系统原理图',
-                            id: 'RDYL1',
+                            label: "视频监控系统原理图",
+                            id: "RDYL1",
                         },
                         {
-                            label: '门禁管理系统原理图',
-                            id: 'RDYL2',
+                            label: "门禁管理系统原理图",
+                            id: "RDYL2",
                         },
                         {
-                            label: 'BA楼宇智能化系统原理图',
-                            id: 'RDYL3',
+                            label: "BA楼宇智能化系统原理图",
+                            id: "RDYL3",
                         },
                     ],
                 },
                 {
-                    label: '主要设备清单',
+                    label: "主要设备清单",
                     children: [
                         {
-                            label: 'BA楼宇智能化',
-                            id: 'RDQD1',
+                            label: "BA楼宇智能化",
+                            id: "RDQD1",
                         },
                         {
-                            label: '门禁管理',
-                            id: 'RDQD2',
+                            label: "门禁管理",
+                            id: "RDQD2",
                         },
                         {
-                            label: '视频监控',
-                            id: 'RDQD3',
+                            label: "视频监控",
+                            id: "RDQD3",
                         },
                     ],
                 },
                 {
-                    label: '维保事项',
+                    label: "维保事项",
                     children: [
                         {
-                            label: '慧云机房内',
-                            id: 'RDWB1',
+                            label: "慧云机房内",
+                            id: "RDWB1",
                         },
                         {
-                            label: '慧云机房外',
-                            id: 'RDWB2',
+                            label: "慧云机房外",
+                            id: "RDWB2",
                         },
                     ],
                 },
                 {
-                    label: '维修事项',
+                    label: "维修事项",
                     children: [
                         {
-                            label: '慧云机房内',
-                            id: 'RDWX1',
+                            label: "慧云机房内",
+                            id: "RDWX1",
                         },
                         {
-                            label: '慧云机房外',
-                            id: 'RDWX2',
+                            label: "慧云机房外",
+                            id: "RDWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'RDZW1',
+                            label: "专项维修",
+                            id: "RDZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'RDZW2',
+                            label: "其他事项",
+                            id: "RDZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '给排水系统',
+            name: "给排水系统",
             id: 5,
+            icon: require("@/assets/imgs/cdgps.svg"),
+            icon1: require("@/assets/imgs/cdgps2.svg"),
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [
                         {
-                            label: '给水系统原理示意图',
-                            id: 'GSYL1',
+                            label: "给水系统原理示意图",
+                            id: "GSYL1",
                         },
                         {
-                            label: '排水系统原理示意图',
-                            id: 'GSYL2',
+                            label: "排水系统原理示意图",
+                            id: "GSYL2",
                         },
                     ],
                 },
                 {
-                    label: '主要设备清单',
+                    label: "主要设备清单",
                     children: [],
                 },
                 {
-                    label: '维保事项',
+                    label: "维保事项",
                     children: [
                         {
-                            label: '给水系统',
-                            id: 'GSQD1',
+                            label: "给水系统",
+                            id: "GSQD1",
                         },
                         {
-                            label: '排水系统',
-                            id: 'GSQD2',
+                            label: "排水系统",
+                            id: "GSQD2",
                         },
                     ],
                 },
                 {
-                    label: '维修事项',
+                    label: "维修事项",
                     children: [
                         {
-                            label: '给水系统',
-                            id: 'GSWX1',
+                            label: "给水系统",
+                            id: "GSWX1",
                         },
                         {
-                            label: '排水系统',
-                            id: 'GSWX2',
+                            label: "排水系统",
+                            id: "GSWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '给水系统专项维修',
-                            id: 'GSZW1',
+                            label: "给水系统专项维修",
+                            id: "GSZW1",
                         },
                         {
-                            label: '排水系统专项维修',
-                            id: 'GSZW2',
+                            label: "排水系统专项维修",
+                            id: "GSZW2",
                         },
                         {
-                            label: '其他事项',
-                            id: 'GSZW3',
+                            label: "其他事项",
+                            id: "GSZW3",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '电梯系统',
+            name: "电梯系统",
             id: 6,
+            icon: require("@/assets/imgs/cddt.svg"),
+            icon1: require("@/assets/imgs/cddt2.svg"),
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [
                         {
-                            label: '扶梯原理图',
-                            id: 'DTYL1',
+                            label: "扶梯原理图",
+                            id: "DTYL1",
                         },
                         {
-                            label: '直梯原理图',
-                            id: 'DTYL2',
+                            label: "直梯原理图",
+                            id: "DTYL2",
                         },
                     ],
                 },
                 {
-                    label: '主要设备清单',
+                    label: "主要设备清单",
                     children: [],
                 },
                 {
-                    label: '维修及维保事项',
+                    label: "维修及维保事项",
                     children: [
                         {
-                            label: '维保事项',
-                            id: 'DTWX1',
+                            label: "维保事项",
+                            id: "DTWX1",
                         },
                         {
-                            label: '维修事项',
-                            id: 'DTWX2',
+                            label: "维修事项",
+                            id: "DTWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'DTZW1',
+                            label: "专项维修",
+                            id: "DTZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'DTZW2',
+                            label: "其他事项",
+                            id: "DTZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '燃气系统',
+            name: "燃气系统",
             id: 7,
+            icon: require("@/assets/imgs/cdrq.svg"),
+            icon1: require("@/assets/imgs/cdrq2.svg"),
             children: [
                 {
-                    label: '系统原理图',
+                    label: "系统原理图",
                     children: [],
                 },
                 {
-                    label: '主要设备清单',
+                    label: "主要设备清单",
                     children: [],
                 },
                 {
-                    label: '维修及维保事项',
+                    label: "维修及维保事项",
                     children: [
                         {
-                            label: '维保事项',
-                            id: 'RQWX1',
+                            label: "维保事项",
+                            id: "RQWX1",
                         },
                         {
-                            label: '维修事项',
-                            id: 'RQWX2',
+                            label: "维修事项",
+                            id: "RQWX2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'RQZW1',
+                            label: "专项维修",
+                            id: "RQZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'RQZW2',
+                            label: "其他事项",
+                            id: "RQZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
         },
         {
-            name: '土建系统',
+            name: "土建系统",
+            icon: require("@/assets/imgs/cdtj.svg"),
+            icon1: require("@/assets/imgs/cdtj2.svg"),
             id: 8,
             children: [
                 {
-                    label: '建筑立面图',
+                    label: "建筑立面图",
                     children: [
                         {
-                            label: '西面外立面',
+                            label: "西面外立面",
                         },
                         {
-                            label: '南面外立面',
+                            label: "南面外立面",
                         },
                         {
-                            label: '东面外立面',
+                            label: "东面外立面",
                         },
                         {
-                            label: '北面外立面',
+                            label: "北面外立面",
                         },
                     ],
                 },
                 {
-                    label: '主要材料清单',
+                    label: "主要材料清单",
                     children: [],
                 },
                 {
-                    label: '维修及维保事项',
+                    label: "维修及维保事项",
                     children: [
                         {
-                            label: '维保事项',
-                            id: 'TJWB1',
+                            label: "维保事项",
+                            id: "TJWB1",
                         },
                         {
-                            label: '维修事项',
-                            id: 'TJWB2',
+                            label: "维修事项",
+                            id: "TJWB2",
                         },
                     ],
                 },
                 {
-                    label: '专维及其他事项',
+                    label: "专维及其他事项",
                     children: [
                         {
-                            label: '专项维修',
-                            id: 'TJZW1',
+                            label: "专项维修",
+                            id: "TJZW1",
                         },
                         {
-                            label: '其他事项',
-                            id: 'TJZW2',
+                            label: "其他事项",
+                            id: "TJZW2",
                         },
                     ],
                 },
                 {
-                    label: '查看图纸',
+                    label: "查看图纸",
                     children: [],
                 },
             ],
@@ -544,44 +560,46 @@ var system = [
     ],
     floors = [
         {
-            floorName: 'F4',
-            id: 'f4',
+            floorName: "F4",
+            id: "f4",
         },
         {
-            floorName: 'F3',
-            id: 'f3',
+            floorName: "F3",
+            id: "f3",
         },
         {
-            floorName: 'F2',
-            id: 'f2',
+            floorName: "F2",
+            id: "f2",
         },
         {
-            floorName: 'F1',
-            id: 'f1',
+            floorName: "F1",
+            id: "f1",
         },
         {
-            floorName: 'B1',
-            id: 'b1',
+            floorName: "B1",
+            id: "b1",
         },
         {
-            floorName: 'B2',
-            id: 'b2',
+            floorName: "B2",
+            id: "b2",
         },
     ],
     // 事项
     matter = [
         {
-            icon: require('@/assets/imgs/zhsx.svg'),
-            name: '综合事项管理',
-            id: '1',
+            icon: require("@/assets/imgs/zhsx.svg"),
+            icon1: require("@/assets/imgs/zhsx2.svg"),
+            name: "综合事项管理",
+            id: "1",
         },
         {
-            icon: require('@/assets/imgs/fzyf.svg'),
-            name: '辅助用房管理',
-            id: '2',
+            icon: require("@/assets/imgs/fzyf.svg"),
+            icon1: require("@/assets/imgs/fzyf2.svg"),
+            name: "辅助用房管理",
+            id: "2",
             children: [
-                { label: '广场辅助用房汇总统计表', type: 1 },
-                { label: '广场辅助用房调改变更记录', type: 2 },
+                { label: "广场辅助用房汇总统计表", type: 1 },
+                { label: "广场辅助用房调改变更记录", type: 2 },
             ],
         },
     ]

+ 10 - 7
src/views/equipment/index.vue

@@ -1,13 +1,10 @@
 <template>
     <div id='equipment'>
         <div class='eq-top'>
-            <span
-                class='eq-system'
-                v-for='(item,index) in system'
-                :class='item.id==systemId?"isActive":""'
-                :key='index'
-                @click='tabSyatem(item)'
-            >{{item.name}}</span>
+            <span class='eq-system' v-for='(item,index) in system' :class='item.id==systemId?"isActive":""' :key='index' @click='tabSyatem(item)'>
+                <img :src='item.id==systemId?item.icon1:item.icon' />
+                {{item.name}}
+            </span>
         </div>
         <div class='eq-bottom'>
             <div class='eq-left'>
@@ -96,6 +93,12 @@ export default {
             background: #fff;
             font-size: 16px;
             cursor: pointer;
+            img {
+                width: 16px;
+                height: 16px;
+                margin-right: 4px;
+                margin-bottom: 3px;
+            }
         }
         .isActive {
             color: #025baa;

+ 13 - 12
src/views/equipment/table/eqListTable.vue

@@ -1,23 +1,18 @@
 <!-- 设备清单的有select的表格 -->
 <template>
     <div class='eq-list'>
-        <a-select default-value='全部' style='width: 120px' @change='handleChange'>
-            <a-select-option value='全部'>全部</a-select-option>
-        </a-select>
-        <a-select default-value='3F' style='width: 120px' @change='handleChange'>
-            <a-select-option value='3F'>3F</a-select-option>
-        </a-select>
-        <a-select default-value='全部' style='width: 120px' @change='handleChange'>
-            <a-select-option value='全部'>全部</a-select-option>
-        </a-select>
-        <a-input-search placeholder style='width: 200px' @search='onSearch' />
+        <Select width='146' tipPlace='top' caption='品牌:' :selectdata='dataSelect2' :placeholder='"请选择"'></Select>
+        <Select width='120' tipPlace='top' caption='楼层:' :selectdata='dataSelect2' style='margin:0 12px'></Select>
+        <Select width='224' tipPlace='top' caption='生产厂商:' :selectdata='dataSelect2' :placeholder='"请选择"'></Select>
+        <a-input-search placeholder style='width: 192px;margin-left:12px' @search='onSearch' />
         <a-table size='small' style='margin-top:12px' :columns='columns' :data-source='data'></a-table>
     </div>
 </template>
 <script>
 import { queryEquipmentList } from '@/api/equipmentList.js'
+import Select from '@/components/Select/Select.vue'
 export default {
-    components: {},
+    components: { Select },
     data() {
         return {
             columns: [
@@ -54,7 +49,13 @@ export default {
                     dataIndex: 'people'
                 }
             ],
-            data: []
+            data: [],
+            dataSelect2: [
+                { id: 'test1', name: '选择项' },
+                { id: 'test2', name: '单平米' },
+                { id: 'test3', name: '下级分项' },
+                { id: 'test4', name: '滑动平均滑动平均' }
+            ]
         }
     },
     methods: {

+ 1 - 1
src/views/other/index.vue

@@ -2,7 +2,7 @@
     <div class='other'>
         <div class='other-top'>
             <span class='other-system' v-for='(item,index) in matter' :class='item.id==matterId?"isActive":""' :key='index' @click='tabSyatem(item)'>
-                <img :src='item.icon' alt />
+                <img :src='item.id==matterId?item.icon:item.icon1' alt />
                 {{item.name}}
             </span>
         </div>