|
@@ -1,70 +1,88 @@
|
|
<template>
|
|
<template>
|
|
- <a-modal
|
|
|
|
- class='modal'
|
|
|
|
- v-model='visible'
|
|
|
|
- :footer='null'
|
|
|
|
- :title='`${systemName}-${dialogInfo.label}`'
|
|
|
|
- @ok='handleOk'
|
|
|
|
- :maskClosable='false'
|
|
|
|
- width='100%'
|
|
|
|
- >
|
|
|
|
- <a-tabs
|
|
|
|
- v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'
|
|
|
|
- :default-active-key='dialogInfo.children[0].id'
|
|
|
|
- size='small'
|
|
|
|
- @change='fn'
|
|
|
|
- >
|
|
|
|
- <a-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :tab='`${value.label}`'>
|
|
|
|
- <img v-if='value.id.slice(2,4)=="YL"' src='@/assets/imgs/eq.jpg' />
|
|
|
|
- <tableList v-else></tableList>
|
|
|
|
- </a-tab-pane>
|
|
|
|
- </a-tabs>
|
|
|
|
- </a-modal>
|
|
|
|
|
|
+ <div class='dialog-container'>
|
|
|
|
+ <el-dialog :title='`${systemName}-${dialogInfo.label}`' :visible.sync='visible' :fullscreen='true'>
|
|
|
|
+ <div class='top'></div>
|
|
|
|
+ <el-tabs v-model='activeName' @tab-click='handleClick' v-if='Object.keys(dialogInfo).length>0 && dialogInfo.children.length>0'>
|
|
|
|
+ <el-tab-pane v-for='(value,index) in dialogInfo.children' :key='"u"+index' :label='`${value.label}`' :name='`${value.id}`'>
|
|
|
|
+ <div v-if='value.id.slice(2,4)=="YL"' style='width:100%;height:600px;overflow:hidden'>
|
|
|
|
+ <rotation :rotationImg='rotationImg'></rotation>
|
|
|
|
+ </div>
|
|
|
|
+ <tableList v-else></tableList>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
</template>
|
|
</template>
|
|
-
|
|
|
|
<script>
|
|
<script>
|
|
import tableList from './table/eqListTable'
|
|
import tableList from './table/eqListTable'
|
|
|
|
+
|
|
export default {
|
|
export default {
|
|
|
|
+ props: ['systemName'],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ activeName: '',
|
|
visible: false,
|
|
visible: false,
|
|
- mode: 'top'
|
|
|
|
|
|
+ dialogInfo: {},
|
|
|
|
+ rotationImg: [require('@/assets/imgs/eq.jpg'), require('@/assets/imgs/survey_pop2.png'), require('@/assets/imgs/survey_pop1.png')]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- props: ['dialogInfo', 'systemName'],
|
|
|
|
|
|
+ mounted() {},
|
|
components: { tableList },
|
|
components: { tableList },
|
|
methods: {
|
|
methods: {
|
|
- showModal() {
|
|
|
|
|
|
+ showModal(item) {
|
|
this.visible = true
|
|
this.visible = true
|
|
|
|
+ this.dialogInfo = item
|
|
|
|
+ if (Object.keys(this.dialogInfo).length > 0) {
|
|
|
|
+ this.activeName = this.dialogInfo.children[0].id
|
|
|
|
+ console.log(this.activeName)
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- handleOk(e) {
|
|
|
|
- console.log(e)
|
|
|
|
- this.visible = false
|
|
|
|
- },
|
|
|
|
- fn(key) {
|
|
|
|
- console.log(key)
|
|
|
|
|
|
+ handleClick(tab, event) {
|
|
|
|
+ console.log(tab, event)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
-
|
|
|
|
-<style lang='less'>
|
|
|
|
-.modal {
|
|
|
|
- .ant-tabs-bar {
|
|
|
|
- border: none;
|
|
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.top {
|
|
|
|
+ width: 1366px;
|
|
|
|
+ height: 1px;
|
|
|
|
+ background: rgba(0, 0, 0, 0.06);
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<style lang="less">
|
|
|
|
+.dialog-container {
|
|
|
|
+ .el-dialog__title {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
|
+ line-height: 24px;
|
|
}
|
|
}
|
|
- .ant-tabs-tab {
|
|
|
|
- text-align: center;
|
|
|
|
- background: rgba(255, 255, 255, 1);
|
|
|
|
- border-radius: 0px 4px 4px 0px;
|
|
|
|
- border: 1px solid rgba(217, 217, 217, 1);
|
|
|
|
- font-size: 14px;
|
|
|
|
- color: #1f2429;
|
|
|
|
- margin: 0;
|
|
|
|
- padding: 5px 15px !important;
|
|
|
|
|
|
+ .el-dialog__body {
|
|
|
|
+ padding: 0 24px;
|
|
|
|
+ }
|
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-bottom:nth-child(2),
|
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-top:nth-child(2),
|
|
|
|
+ .el-tabs--top .el-tabs__item.is-bottom:nth-child(2),
|
|
|
|
+ .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
|
|
|
|
+ padding-left: 16px;
|
|
}
|
|
}
|
|
- .ant-select {
|
|
|
|
- margin-right: 12px;
|
|
|
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-bottom:last-child,
|
|
|
|
+ .el-tabs--bottom .el-tabs__item.is-top:last-child,
|
|
|
|
+ .el-tabs--top .el-tabs__item.is-bottom:last-child,
|
|
|
|
+ .el-tabs--top .el-tabs__item.is-top:last-child {
|
|
|
|
+ padding-right: 16px;
|
|
|
|
+ }
|
|
|
|
+ .el-tabs__item {
|
|
|
|
+ padding: 5px 16px;
|
|
|
|
+ height: 30px;
|
|
|
|
+ line-height: 22px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ font-family: MicrosoftYaHei;
|
|
|
|
+ color: rgba(31, 36, 41, 1);
|
|
|
|
+ border: 1px solid rgba(195, 199, 203, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|