123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- <template>
- <div id="tabFunNumOverview">
- <!-- 查询 新增 -->
- <div class="query-area">
- <el-input :placeholder="`请输入表号功能号`" v-model="tabFunNum" @keyup.enter.native="getOverViewList()" style="width:240px;">
- <i slot="suffix" class="el-input__icon el-icon-search" @click="getOverViewList()"></i>
- </el-input>
- <el-button size="mini" @click="handleDrawer({},3)" style="float: right;">新增自定义</el-button>
- </div>
- <!-- 数据表格 -->
- <div class="table-area">
- <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)" v-loading="loading" :header-cell-style="headerStyle">
- <el-table-column prop='TableNum' label='表号-功能号' show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop='CoValue' label='对应值(单位)' show-overflow-tooltip min-width="120">
- <template slot-scope="scope">
- <span>{{ scope.row.CoValue }}</span>
- <i @click="handleDrawer(scope.row, 0)" class="el-icon-s-data"></i>
- </template>
- </el-table-column>
- <el-table-column prop='GetTime' label='获取时间' show-overflow-tooltip>
- <template slot-scope="scope">
- <span>{{ scope.row.GetTime }}</span>
- <i class="el-icon-refresh" @click="refreshThisRow(scope.row)"></i>
- </template>
- </el-table-column>
- <el-table-column prop='SubSysPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150">
- <template slot-scope="scope">
- <span>{{ scope.row.SubSysPoint }}</span>
- <i @click="handleDrawer(scope.row, 1)" class="el-icon-coin"></i>
- </template>
- </el-table-column>
- <el-table-column prop='ObjInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150">
- <template slot-scope="scope">
- <span>{{ scope.row.ObjInstance }}</span>
- <i @click="handleDrawer(scope.row, 2)" class="el-icon-coin"></i>
- </template>
- </el-table-column>
- </el-table>
- <!-- 分页 -->
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage"
- :page-sizes="pageSizes"
- :page-size="pageSize"
- layout="total, sizes, prev, pager, next, jumper"
- :total="allTableData.length">
- </el-pagination>
- </div>
- <!-- 对话框和抽屉统一放在drawers中 -->
- <!-- 对话框 -->
- <el-dialog :title="'< ' + drawers[0].objId + ' > 的历史数据'" :visible.sync="drawers[0].drawer">
- <historyChart :tabFunNum='drawers[0].objId'></historyChart>
- </el-dialog>
- <!-- 抽屉 -->
- <el-drawer :title="'< ' + drawers[1].objId + ' > 的子系统点位'" :visible.sync="drawers[1].drawer" :direction="drawers[1].direction" size="50%">
- <dataSource :tabFunNum='drawers[1].objId'></dataSource>
- </el-drawer>
- <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer" :direction="drawers[2].direction" size="50%">
- <objectInstance :tabFunNum='drawers[2].objId'></objectInstance>
- </el-drawer>
- <el-drawer title="新增表号功能号" :visible.sync="drawers[3].drawer" :direction="drawers[3].direction" size="50%">
- <addTabFunNum @closeDrawer="closeDrawer()"></addTabFunNum>
- </el-drawer>
- </div>
- </template>
- <script>
- import { mapGetters, mapActions } from 'vuex'
- import {
- getTabFunNumOverview
- } from '@/api/point/request'
- import historyChart from './historyChart'
- import dataSource from './dataSource'
- import objectInstance from './objectInstance'
- import addTabFunNum from './addTabFunNum'
- export default {
- data() {
- return {
- //表格头样式
- headerStyle: {
- backgroundColor: '#e1e4e5',
- color: '#2b2b2b',
- lineHeight: '30px'
- },
- allTableData: [],//所有表格数据
- pageSizes:[5,10,20,50],
- pageSize:10,
- currentPage:1,
- loading: false,//加载
- tabFunNum: null,//表号功能号
- //抽屉
- drawers: [
- {drawer: false, direction: 'rtl', objId:''},
- {drawer: false, direction: 'rtl', objId:''},
- {drawer: false, direction: 'rtl', objId:''},
- {drawer: false, direction: 'rtl', objId:''}
- ]
-
- }
- },
- methods:{
- //抽屉处理
- handleDrawer(row, index){
- if(index != 3)
- this.drawers[index].objId = row.TableNum;
- this.drawers[index].drawer = true;
- },
- //获取统计数据
- getOverViewList(){
- this.loading = true;
- getTabFunNumOverview({}, res => {
- // this.tableData = res;
- this.allTableData = [
- {TableNum: 'DK1', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
- {TableNum: 'DK2', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
- {TableNum: 'DK3', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
- {TableNum: 'DK4', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
- {TableNum: 'DK5', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
- {TableNum: 'DK6', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
- {TableNum: 'DK7', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
- {TableNum: 'DK8', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
- {TableNum: 'DK9', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
- {TableNum: 'DK10', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
- {TableNum: 'DK11', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
- {TableNum: 'DK12', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
- {TableNum: 'DK13', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
- {TableNum: 'DK14', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
- {TableNum: 'DK15', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'}
- ];
- this.loading = false;
- });
- },
- //刷新当前行数据
- refreshThisRow(row){
- let index = this.tableData.indexOf(row);
- getTabFunNumOverview({}, res => {
- this.tableData[index].GetTime = new Date().getTime();
- });
- },
- //分页更换size
- handleSizeChange(val){
- this.pageSize = val;
- },
- //分页更换页
- handleCurrentChange(val){
- this.currentPage = val;
- },
- //子组件关闭抽屉
- closeDrawer(){
- this.drawers[3].drawer = false;
- },
- init() {
- this.getOverViewList();
- }
- },
- mounted() {
- this.init();
- },
- computed: {
- ...mapGetters('layout', ['projectId', 'userId']),
- //根绝分页,获取要展示的tableData
- tableData: function() {
- return this.allTableData.slice(
- (this.currentPage - 1) * this.pageSize,
- (this.currentPage * this.pageSize < this.allTableData.length)? this.currentPage * this.pageSize : this.allTableData.length );
-
- }
- },
- components: {
- historyChart,
- dataSource,
- objectInstance,
- addTabFunNum
- }
- }
- </script>
- <style lang="less" scoped>
- #tabFunNumOverview{
- border-top:5px solid #eee;
- height:calc(100% - 5px);
- width:100%;
- overflow:hidden;
- }
- .query-area{
- margin:4px 8px;
- }
- .table-area{
- height:calc(100% - 40px);
- }
- .table-area i{
- text-align:right;
- font-size:16px;
- cursor: pointer;
- float:right;
- line-height:22.4px;
- }
- /deep/ .el-drawer__body{
- height:90%;
- }
- </style>
|