123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- <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() {
- 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,.1) 0%,rgba(2,91,170,0) 100%);
- >svg{
- stroke: #025BAA;
- }
- >div:last-child{
- color: #025BAA;
- }
- }
- .module{
- width: 100%;
- height: calc(100% - 70px);
- }
- }
- </style>
|