diff --git a/src/views/monitoring/equipmentProcessAmount/index.vue b/src/views/monitoring/equipmentProcessAmount/index.vue index 961297d7..e8a54590 100644 --- a/src/views/monitoring/equipmentProcessAmount/index.vue +++ b/src/views/monitoring/equipmentProcessAmount/index.vue @@ -10,16 +10,24 @@
-
+
{{ currentFactory || '工厂名称' }} -
-
    +
    +
    • + :value="fc.value" + class="factory-list__item"> + {{ fc.name }} +
    +
    - 无 -
@@ -95,6 +103,16 @@ export default { props: {}, data() { return { + factoryListOpen: false, + currentFactory: null, + factoryList: [ + { name: '1', value: 1 }, + { name: '2', value: 2 }, + { name: '3', value: 3 }, + { name: '4', value: 4 }, + { name: '5', value: 5 }, + { name: '6', value: 6 }, + ], sidebarContent: [ // { // id: 'fc1', @@ -295,6 +313,11 @@ export default { console.log('handle tab click: ', tab, event); }, + factoryChangeHandler(event) { + console.log('clicked factory change.......'); + this.factoryListOpen = false; + }, + handleSidebarItemClick({ label, id, type }) { console.log('lable clicked!', label, id, type); switch (type) { @@ -420,4 +443,51 @@ export default { /* cursor: pointer; */ border-left-color: #0008; } + +.factory-list__wrapper { + visibility: hidden; + position: absolute; + background: #fff; + box-shadow: 0 0 32px 10px #0002; + border-radius: 8px; + top: 36px; + left: 90px; + /* max-width: 128px; */ + height: auto; + padding: 8px; + overflow: hidden; + /* transition: all 0.3s ease-out; */ + z-index: 1000; +} + +.factory-list__wrapper.open { + visibility: visible; +} + +ul, +li { + margin: 0; + padding: 0; + list-style: none; +} + +.factory-list { + padding: 1px; + color: #0008; + max-height: 240px; + overflow-y: auto; +} + +.factory-list__item { + border-radius: 4px; + font-size: 16px; + line-height: 1; + padding: 8px 4px; + min-width: 64px; +} + +.factory-list__item:hover { + background: #ccc6; + color: #000e; +}