ibms/src/components/point/report/tabFunNumOverview.vue

<template>
  <div id="tabFunNumOverview">
    <!-- 查询 新增 -->
    <div class="query-area" style="padding:10px;">
      <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>
      <p style="overflow: hidden;float:right;">
        <el-button style="height:32px" @click='handleDrawer({},3)'>新增自定义</el-button>
      </p>
    </div>
    <!-- 数据表格 -->
    <div class="table-area">
      <el-table :data="tableData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading" :header-cell-style="headerStyle" >
        <el-table-column prop='' label='' show-overflow-tooltip width="35" header-align='center'>
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.DataQuality!=0" content="已断数，请检查" effect="dark" placement="top">
              <i class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;font-size:18px;"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop='MeterFunc' label='表号-功能号' show-overflow-tooltip min-width="100" header-align='left'></el-table-column>
        <el-table-column prop='Data.Data' label='查看分精度' show-overflow-tooltip min-width="90" header-align='center' align='center'>
          <template slot-scope="scope">
            <el-button style="padding:7px 15px;" @click="handleDrawer(scope.row, 0)"><i class="el-icon-s-data" style="font-size:15px;"></i></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  || '--'): '--' }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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="allTableData.length"
        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'
export default {
  data() {
    return {
      //表格头样式
      headerStyle: {
        backgroundColor: '#e1e4e5',
        color: '#2b2b2b',
        lineHeight: '30px'
      },
      allTableData: [],//所有表格数据
      pageSizes: [10, 20, 50, 100],
      pageSize: 50,
      currentPage: 1,
      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;
      }
    },
    //获取统计数据
    getOverViewList() {
      this.loading = true;
      getTabFunNumOverview({ MeterFunc: this.tabFunNum }, res => {
        this.allTableData = res.Content;
        this.loading = false;
      });
    },
    //刷新当前行数据
    refreshThisRow(row) {
      let index = this.tableData.indexOf(row);
      let pa = {
        MeterFunc: row.MeterFunc
      }
      getTabFunNumOverview(pa, res => {
        if (res.Content[0].Data) {
          this.tableData[index].Data.Data = res.Content[0].Data.Data;
          this.tableData[index].Data.Time = res.Content[0].Data.Time;
        }
        this.tableData[index].DataQuality = res.Content[0].DataQuality;
        this.tableData[index].RelatedInstance = res.Content[0].RelatedInstance;
        this.tableData[index].RelatedPoint = res.Content[0].RelatedPoint;
        Message.success('已刷新');
      });
    },
    //分页更换size
    handleSizeChange(val) {
      this.pageSize = val;
    },
    //分页更换页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //子组件关闭抽屉
    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%;
}
/deep/ .el-table__body-wrapper tr:hover{
  .dialog-btn{
    display:inline;
  }
}
/deep/ .el-dialog__body {
  padding-bottom:20px;
}
</style>