|
|
@@ -0,0 +1,300 @@
|
|
|
+<template>
|
|
|
+ <div id="tabFunNumOverview">
|
|
|
+ <!-- 查询 新增 -->
|
|
|
+ <div class="query-area" style="padding:10px;">
|
|
|
+ <!-- <el-input :placeholder="`请输入表号功能号`" v-model="tabFunNum" @keyup.enter.native="handleCurrentChange(1)" style="width:240px;">-->
|
|
|
+ <!-- <i slot="suffix" class="el-input__icon el-icon-search" @click="handleCurrentChange(1)"></i>-->
|
|
|
+ <!-- </el-input>-->
|
|
|
+ <!-- <p style="overflow: hidden;float:right;">-->
|
|
|
+ <!-- <el-button style="height:32px" @click='handleDrawer({},3)'>新增自定义</el-button>-->
|
|
|
+ <!-- </p>-->
|
|
|
+ <el-select v-model="value" placeholder="请选择数据源">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="value" placeholder="请选择状态">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="value" placeholder="请选择获取方式">
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <!-- 数据表格 -->
|
|
|
+ <div class="table-area">
|
|
|
+ <el-table :data="tableData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading"
|
|
|
+ :header-cell-style="headerStyle"
|
|
|
+ @row-click="handleClickRow">
|
|
|
+ <el-table-column
|
|
|
+ label="序号"
|
|
|
+ type="index"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='' label='状态' show-overflow-tooltip width="35" header-align='center'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <i class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;font-size:18px;"></i>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='MeterFunc' label='表号-功能号' show-overflow-tooltip align='center'></el-table-column>
|
|
|
+ <el-table-column prop='Data.Data' label='查看分精度' show-overflow-tooltip align='center'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button style="padding:7px 15px;font-size:15px;" @click="handleDrawer(scope.row, 0)">
|
|
|
+ <i class="el-icon-s-data"/></el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='Data.Time' label='对应值 - 获取时间' show-overflow-tooltip min-width="270" header-align='center'
|
|
|
+ align='center'
|
|
|
+ style="position:relative;">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="width:175px;display:inline-block;">
|
|
|
+ <span style="line-height:29px;">{{ scope.row.Data? (scope.row.Data.Data || '--'): '--' }} </span>
|
|
|
+ <span style="line-height:29px;">{{ scope.row.Data? scope.row.Data.Time : '' }}</span>
|
|
|
+ </div>
|
|
|
+ <span style="width:55.33px;display:inline-block;padding-left:10px;">
|
|
|
+ <el-button class="dialog-btn" @click="refreshThisRow(scope.row)"><i
|
|
|
+ class="el-icon-refresh"></i></el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='RelatedPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150" align='center'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="display:inline-block;width:16px;line-height:29px;">{{ scope.row.RelatedPoint }}</span>
|
|
|
+ <span style="width:55.33px;display:inline-block;padding-left:10px;">
|
|
|
+ <el-button class="dialog-btn" v-if="scope.row.RelatedPoint" @click="handleDrawer(scope.row, 1)"><i
|
|
|
+ class="el-icon-coin"></i></el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop='RelatedInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150"
|
|
|
+ align='center'>
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span style="display:inline-block;width:16px;line-height:29px;">{{ scope.row.RelatedInstance }}</span>
|
|
|
+ <span style="width:55.33px;display:inline-block;padding-left:10px;">
|
|
|
+ <el-button class="dialog-btn" v-if="scope.row.RelatedInstance" @click="handleDrawer(scope.row, 2)"><i
|
|
|
+ class="el-icon-coin"></i>
|
|
|
+ </el-button>
|
|
|
+ </span>
|
|
|
+ </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="total"
|
|
|
+ style="float:right;margin-top:10px;padding:2px 5px;">
|
|
|
+ </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="35%">
|
|
|
+ <dataSource :tabFunNum='drawers[1].objId'></dataSource>
|
|
|
+ </el-drawer>
|
|
|
+ <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer"
|
|
|
+ :direction="drawers[2].direction" size="35%">
|
|
|
+ <objectInstance :tabFunNum='drawers[2].objId' :reValue='drawers[2].value'></objectInstance>
|
|
|
+ </el-drawer>
|
|
|
+ <el-dialog title="新增表号功能号" :visible.sync="drawers[3].drawer">
|
|
|
+ <addTabFunNum @closeDrawer="closeDrawer()" @reloadData="reloadData()"></addTabFunNum>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {Message} from 'element-ui';
|
|
|
+ import {getTabFunNumOverview} from '@/api/scan/request'
|
|
|
+ import historyChart from './historyChart'
|
|
|
+ import dataSource from './dataSource'
|
|
|
+ import objectInstance from './objectInstance'
|
|
|
+ import addTabFunNum from './addTabFunNum'
|
|
|
+ import lStorage from '@/utils/localStorage'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //表格头样式
|
|
|
+ headerStyle: {
|
|
|
+ backgroundColor: '#e1e4e5',
|
|
|
+ color: '#2b2b2b',
|
|
|
+ lineHeight: '30px'
|
|
|
+ },
|
|
|
+ // allTableData: [],//所有表格数据
|
|
|
+ tableData: [],
|
|
|
+ pageSizes: [10, 20, 50, 100],
|
|
|
+ pageSize: 50,
|
|
|
+ currentPage: 1,
|
|
|
+ total: 0,
|
|
|
+ loading: false,//加载
|
|
|
+ tabFunNum: null,//表号功能号
|
|
|
+ //抽屉
|
|
|
+ drawers: [
|
|
|
+ {drawer: false, direction: 'rtl', objId: ''},
|
|
|
+ {drawer: false, direction: 'rtl', objId: ''},
|
|
|
+ {drawer: false, direction: 'rtl', objId: '', value: ''},
|
|
|
+ {drawer: false, direction: 'rtl', objId: ''}
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //抽屉处理
|
|
|
+ handleDrawer(row, index) {
|
|
|
+ if (index == 2 || index == 1) {
|
|
|
+ //实例数量大于0才能打开
|
|
|
+ if ((row.RelatedInstance > 0 && index == 2) || (row.RelatedPoint > 0 && index == 1)) {
|
|
|
+ this.drawers[index].value = row.Data ? row.Data.Data : '';
|
|
|
+ this.drawers[index].objId = row.MeterFunc;
|
|
|
+ this.drawers[index].drawer = true;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (index != 3)
|
|
|
+ this.drawers[index].objId = row.MeterFunc;
|
|
|
+ this.drawers[index].drawer = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleClickRow(row, column, event) {//点击表格行
|
|
|
+ lStorage.set('screen_data', {
|
|
|
+ path: this.$route.path,
|
|
|
+ data: {MeterFunc: row.MeterFunc, RelatedInstance: row.RelatedInstance}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //获取统计数据
|
|
|
+ getOverViewList() {
|
|
|
+ this.loading = true;
|
|
|
+ let pa = {
|
|
|
+ MeterFunc: this.tabFunNum,
|
|
|
+ PageSize: this.pageSize,
|
|
|
+ PageNumber: this.currentPage
|
|
|
+ }
|
|
|
+ getTabFunNumOverview(pa, res => {
|
|
|
+ // this.allTableData = res.Content;
|
|
|
+ this.tableData = res.Content;
|
|
|
+ this.total = res.Total
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //刷新当前行数据
|
|
|
+ refreshThisRow(row) {
|
|
|
+ let index = this.tableData.indexOf(row);
|
|
|
+ let pa = {
|
|
|
+ MeterFunc: row.MeterFunc
|
|
|
+ }
|
|
|
+ getTabFunNumOverview(pa, res => {
|
|
|
+ res.Content.forEach(t => {
|
|
|
+ if (t.MeterFunc == row.MeterFunc) {
|
|
|
+ if (t.Data) {
|
|
|
+ this.tableData[index].Data.Data = t.Data.Data || '';
|
|
|
+ this.tableData[index].Data.Time = t.Data.Time || '';
|
|
|
+ }
|
|
|
+ this.tableData[index].DataQuality = t.DataQuality;
|
|
|
+ this.tableData[index].RelatedInstance = t.RelatedInstance;
|
|
|
+ this.tableData[index].RelatedPoint = t.RelatedPoint;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ Message.success('已刷新');
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //分页更换size
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.pageSize = val;
|
|
|
+ this.getOverViewList()
|
|
|
+ },
|
|
|
+ //分页更换页
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.getOverViewList()
|
|
|
+ },
|
|
|
+ //子组件关闭抽屉
|
|
|
+ closeDrawer() {
|
|
|
+ this.drawers[3].drawer = false;
|
|
|
+ },
|
|
|
+ //新建自定义后重载页面
|
|
|
+ reloadData() {
|
|
|
+ this.$emit('reloadData');
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.getOverViewList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ //根据分页，获取要展示的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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-area {
|
|
|
+ height: calc(100% - 72px);
|
|
|
+ padding: 0px 10px 10px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-area i {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-btn {
|
|
|
+ display: none;
|
|
|
+ height: 29px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-drawer__body {
|
|
|
+ height: 90%;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-table__body-wrapper tr:hover {
|
|
|
+ .dialog-btn {
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-dialog__body {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .el-drawer__header > :first-child:focus {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+</style>
|
