| | |
| | | <div |
| | | :class="[ |
| | | 'state', |
| | | { level1: 1 == level, level2: 2 == level, level3: 3 == level , 'alarm': flag }, |
| | | |
| | | { |
| | | level1: 1 == level, |
| | | level2: 2 == level, |
| | | level3: 3 == level, |
| | | alarm: isAlarm, |
| | | }, |
| | | ]" |
| | | ></div> |
| | | </div> |
| | |
| | | }, |
| | | childrenVisible: { |
| | | type: Boolean, |
| | | default: false |
| | | default: false, |
| | | }, |
| | | flag: { |
| | | type: Number, |
| | | type: [Number, Array], |
| | | default: 0, |
| | | } |
| | | }, |
| | | }, |
| | | computed: { |
| | | cols() { |
| | |
| | | } |
| | | return Math.ceil(this.childrenCount / this.cols); |
| | | }, |
| | | isAlarm() { |
| | | const flag = this.flag; |
| | | if (Array.isArray(flag)) { |
| | | return flag.some((v) => v > 0); |
| | | } else { |
| | | return !!flag; |
| | | } |
| | | }, |
| | | }, |
| | | data() { |
| | | return {}; |
| | |
| | | components: {}, |
| | | methods: { |
| | | close() { |
| | | console.log('close?'); |
| | | this.$emit('close'); |
| | | } |
| | | console.log("close?"); |
| | | this.$emit("close"); |
| | | }, |
| | | }, |
| | | |
| | | mounted() { |
| | | }, |
| | | mounted() {}, |
| | | }; |
| | | </script> |
| | | |
| | |
| | | } |
| | | .row { |
| | | display: flex; |
| | | &~.row { |
| | | & ~ .row { |
| | | margin-top: 8px; |
| | | } |
| | | .col { |
| | | flex: 1; |
| | | & ~.col { |
| | | & ~ .col { |
| | | margin-left: 8px; |
| | | } |
| | | } |
| | |
| | | left: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | background: rgba(0,0,0,.4); |
| | | background: rgba(0, 0, 0, 0.4); |
| | | z-index: 99; |
| | | } |
| | | } |