| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <template>
- <div class='analysis-table'>
- <div class='module-navs-container'>
- <div>
- <div
- v-for='(item) in navList'
- :key='"key_" + item.id'
- class='item-nav'
- :class='{"nav-active": item.isActive}'
- @click='changeModule(item.id)'
- >
- <NavTable v-if='item.imgType === "table"' />
- <NavApply v-if='item.imgType === "apply"' />
- <NavGantt v-if='item.imgType === "gantt"' />
- <div>{{item.name}}</div>
- </div>
- </div>
- </div>
- <div class='module'>
- <CoreDeviceReport v-if='curModule.id === 1' />
- <SpecificationUpdateRecord v-if='curModule.id === 2' />
- <GanttChart v-if='curModule.id === 3' />
- </div>
- </div>
- </template>
- <script>
- import NavTable from '../../assets/svg/table.svg'
- import NavApply from '../../assets/svg/apply.svg'
- import NavGantt from '../../assets/svg/gantt_chart.svg'
- import CoreDeviceReport from './CoreDeviceReport'
- import SpecificationUpdateRecord from './SpecificationUpdateRecord'
- import GanttChart from './GanttChart'
- import _ from 'lodash'
- export default {
- data() {
- return {
- navList: [
- { id: 1, name: '核心设备报表', imgType: 'table', isActive: true },
- { id: 2, name: '说明书更新记录', imgType: 'apply', isActive: false },
- { id: 3, name: '事项甘特图', imgType: 'gantt', isActive: false }
- ],
- curModule: {} // 当前选中的模块
- }
- },
- components: {
- NavTable,
- NavApply,
- NavGantt,
- CoreDeviceReport,
- SpecificationUpdateRecord,
- GanttChart
- },
- mounted() {
- const { query } = this.$route
- if (!_.isEmpty(query)) {
- if (query.module === 'specification') {
- _.map(this.navList, o => {
- return (o.isActive = o.id === 2)
- })
- } else if (query.module === 'gantt') {
- _.map(this.navList, o => {
- return (o.isActive = o.id === 3)
- })
- }
- }
- this.findCurModule()
- },
- methods: {
- /**
- * 查询当前选中模块
- */
- findCurModule() {
- this.curModule = _.find(this.navList, item => {
- return item.isActive
- })
- },
- /**
- * 切换模块
- */
- changeModule(id) {
- _.map(this.navList, item => {
- return (item.isActive = item.id === id)
- })
- this.findCurModule()
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .analysis-table {
- height: calc(100% - 48px);
- background: #f2f5f7;
- .module-navs-container {
- margin: 12px 0;
- display: flex;
- justify-content: center;
- > div {
- display: flex;
- }
- }
- .item-nav {
- padding-top: 12px;
- padding-bottom: 12px;
- padding-left: 20px;
- padding-right: 16px;
- display: flex;
- align-items: center;
- background: #fff;
- cursor: pointer;
- > svg {
- margin-right: 6px;
- }
- > div:last-child {
- font-size: 16px;
- color: #1f2429;
- line-height: 22px;
- }
- }
- .nav-active {
- background: linear-gradient(360deg, rgba(2, 91, 170, 0.1) 0%, rgba(2, 91, 170, 0) 100%);
- > svg {
- stroke: #025baa;
- }
- > div:last-child {
- color: #025baa;
- }
- }
- .module {
- width: 100%;
- height: calc(100% - 70px);
- }
- }
- </style>
|