diff --git a/src/assets/css/index.css b/src/assets/css/index.css index dbcd2f727726cbceb7230d1395bb89c83b7d1a2f..6772c5e1d72ef52c3e6e90ace81f1b3c033ee13b 100644 --- a/src/assets/css/index.css +++ b/src/assets/css/index.css @@ -609,10 +609,14 @@ width: 620px!important; color: #999; cursor: not-allowed; } +.apass_table .row_action .disabled.hide { + opacity: 0; + cursor: auto; +} .apass_table .row_action .interval_line { - font-size: 14px; - color: #dde4ff; - margin: 0 20px; + font-size: 14px; + color: #dde4ff; + margin: 0 20px; } .apass_table .border-active td { padding: 10px 0; diff --git a/src/components/apass-table.vue b/src/components/apass-table.vue index 74988caafcaa09347e6f7dc6f565e863368fca19..cfdbada9632e2539c180cf222080ae5ba3fdd3c6 100644 --- a/src/components/apass-table.vue +++ b/src/components/apass-table.vue @@ -25,6 +25,7 @@ @@ -42,8 +43,24 @@ v-if="i < item.actionList.length - 1" class="interval_line" :key="'line_' + index + '_' + i" - >| + | + + +
@@ -94,7 +111,7 @@ tag_flag_arr[scope.$index] == 0 && scope.row[item.prop].length > 2 " - @click.stop="change_tag(scope.$index, 1)" + @click.stop="changeTag(scope.$index, 1)" >
2 " - @click.stop="change_tag(scope.$index, 0)" + @click.stop="changeTag(scope.$index, 0)" >
@@ -115,16 +132,32 @@ :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3" /> - {{ scope.row["cpu_use"] }}.00mm - 0mm - {{ scope.row["memory_use"] }}Mi - 0Mi
@@ -210,6 +243,22 @@ + + @@ -257,6 +306,12 @@ export default { strokeOpacity: 0, strokeDasharray: "2, 2", }, + moreActionList: [], + showMoreActionList: false, + moreActionStyle: { + top: 0, + left: 0, + }, }; }, mounted() { @@ -266,7 +321,7 @@ export default { ); }, methods: { - change_tag(index, val) { + changeTag(index, val) { this.$set(this.tag_flag_arr, index, val); }, sortChange(value) { @@ -278,6 +333,42 @@ export default { getPercent(num) { return Math.round(num * 100) + "%"; }, + mouseenter($event, moreActionList, row) { + let _self = this; + + _self.moreActionList = []; + _self.showMoreActionList = true; + _self.moreActionList = moreActionList.map((item) => ({ + id: row.id, + label: item.label, + callback() { + _self.showMoreActionList = false; + _self.moreActionList = []; + + item.callback && item.callback(row); + }, + })); + + _self.$nextTick(() => { + let targetInfo = $event.target.getBoundingClientRect(); + let containerInfo = _self.$refs.moreActionList.getBoundingClientRect(); + + _self.moreActionStyle = { + top: targetInfo.y + targetInfo.height + 15 + "px", + left: + targetInfo.x - (containerInfo.width - targetInfo.width) / 2 + "px", + }; + }); + }, + mouseleave() { + this.showMoreActionList = false; + }, + enterMoreActionList() { + this.showMoreActionList = true; + }, + leaveMoreActionList() { + this.showMoreActionList = false; + }, }, }; @@ -389,4 +480,48 @@ export default { .selected_icon.selected > span { display: block; } +.more_action_list { + position: fixed; +} +.more_action_list > li { + padding: 5px 20px; + background-color: #0f2683; + font-size: 12px; + line-height: 20px; + color: #fff; + cursor: pointer; + position: relative; +} +.more_action_list > li:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +.more_action_list > li:first-child::before { + content: ""; + position: absolute; + top: -14px; + right: calc(50% - 14px); + width: 28px; + height: 14px; +} +.more_action_list > li:first-child::after { + content: ""; + position: absolute; + top: -14px; + right: calc(50% - 7px); + border-top: 0 solid transparent; + border-right: 7px solid transparent; + border-bottom: 14px solid #0f2683; + border-left: 7px solid transparent; +} +.more_action_list > li:last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +.more_action_list > li:hover { + background-color: #3f4f9c; +} +.more_action_list > li:first-child:hover::after { + border-bottom: 14px solid #3f4f9c; +} diff --git a/src/components/work-flow/super-flow.vue b/src/components/work-flow/super-flow.vue index 39b968bf6dca922896c9a149296f4636cb1ea2aa..96698428333e1744a54899427157f751b4924ab8 100644 --- a/src/components/work-flow/super-flow.vue +++ b/src/components/work-flow/super-flow.vue @@ -1,13 +1,6 @@ - +