|
@@ -0,0 +1,205 @@
|
|
|
+<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>
|