tabFunNumOverview.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. <template>
  2. <div id="tabFunNumOverview">
  3. <!-- 查询 新增 -->
  4. <div class="query-area">
  5. <el-input :placeholder="`请输入表号功能号`" v-model="tabFunNum" @keyup.enter.native="getOverViewList()" style="width:240px;">
  6. <i slot="suffix" class="el-input__icon el-icon-search" @click="getOverViewList()"></i>
  7. </el-input>
  8. <el-button size="mini" @click="handleDrawer({},3)" style="float: right;">新增自定义</el-button>
  9. </div>
  10. <!-- 数据表格 -->
  11. <div class="table-area">
  12. <el-table :data="tableData" style="width: 100%" height="calc(100% - 40px)" v-loading="loading" :header-cell-style="headerStyle">
  13. <el-table-column prop='TableNum' label='表号-功能号' show-overflow-tooltip min-width="100"></el-table-column>
  14. <el-table-column prop='CoValue' label='对应值(单位)' show-overflow-tooltip min-width="120">
  15. <template slot-scope="scope">
  16. <span>{{ scope.row.CoValue }}</span>
  17. <i @click="handleDrawer(scope.row, 0)" class="el-icon-s-data"></i>
  18. </template>
  19. </el-table-column>
  20. <el-table-column prop='GetTime' label='获取时间' show-overflow-tooltip>
  21. <template slot-scope="scope">
  22. <span>{{ scope.row.GetTime }}</span>
  23. <i class="el-icon-refresh" @click="refreshThisRow(scope.row)"></i>
  24. </template>
  25. </el-table-column>
  26. <el-table-column prop='SubSysPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150">
  27. <template slot-scope="scope">
  28. <span>{{ scope.row.SubSysPoint }}</span>
  29. <i @click="handleDrawer(scope.row, 1)" class="el-icon-coin"></i>
  30. </template>
  31. </el-table-column>
  32. <el-table-column prop='ObjInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150">
  33. <template slot-scope="scope">
  34. <span>{{ scope.row.ObjInstance }}</span>
  35. <i @click="handleDrawer(scope.row, 2)" class="el-icon-coin"></i>
  36. </template>
  37. </el-table-column>
  38. </el-table>
  39. <!-- 分页 -->
  40. <el-pagination
  41. @size-change="handleSizeChange"
  42. @current-change="handleCurrentChange"
  43. :current-page="currentPage"
  44. :page-sizes="pageSizes"
  45. :page-size="pageSize"
  46. layout="total, sizes, prev, pager, next, jumper"
  47. :total="allTableData.length">
  48. </el-pagination>
  49. </div>
  50. <!-- 对话框和抽屉统一放在drawers中 -->
  51. <!-- 对话框 -->
  52. <el-dialog :title="'< ' + drawers[0].objId + ' > 的历史数据'" :visible.sync="drawers[0].drawer">
  53. <historyChart :tabFunNum='drawers[0].objId'></historyChart>
  54. </el-dialog>
  55. <!-- 抽屉 -->
  56. <el-drawer :title="'< ' + drawers[1].objId + ' > 的子系统点位'" :visible.sync="drawers[1].drawer" :direction="drawers[1].direction" size="50%">
  57. <dataSource :tabFunNum='drawers[1].objId'></dataSource>
  58. </el-drawer>
  59. <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer" :direction="drawers[2].direction" size="50%">
  60. <objectInstance :tabFunNum='drawers[2].objId'></objectInstance>
  61. </el-drawer>
  62. <el-drawer title="新增表号功能号" :visible.sync="drawers[3].drawer" :direction="drawers[3].direction" size="50%">
  63. <addTabFunNum @closeDrawer="closeDrawer()"></addTabFunNum>
  64. </el-drawer>
  65. </div>
  66. </template>
  67. <script>
  68. import { mapGetters, mapActions } from 'vuex'
  69. import {
  70. getTabFunNumOverview
  71. } from '@/api/point/request'
  72. import historyChart from './historyChart'
  73. import dataSource from './dataSource'
  74. import objectInstance from './objectInstance'
  75. import addTabFunNum from './addTabFunNum'
  76. export default {
  77. data() {
  78. return {
  79. //表格头样式
  80. headerStyle: {
  81. backgroundColor: '#e1e4e5',
  82. color: '#2b2b2b',
  83. lineHeight: '30px'
  84. },
  85. allTableData: [],//所有表格数据
  86. pageSizes:[5,10,20,50],
  87. pageSize:10,
  88. currentPage:1,
  89. loading: false,//加载
  90. tabFunNum: null,//表号功能号
  91. //抽屉
  92. drawers: [
  93. {drawer: false, direction: 'rtl', objId:''},
  94. {drawer: false, direction: 'rtl', objId:''},
  95. {drawer: false, direction: 'rtl', objId:''},
  96. {drawer: false, direction: 'rtl', objId:''}
  97. ]
  98. }
  99. },
  100. methods:{
  101. //抽屉处理
  102. handleDrawer(row, index){
  103. if(index != 3)
  104. this.drawers[index].objId = row.TableNum;
  105. this.drawers[index].drawer = true;
  106. },
  107. //获取统计数据
  108. getOverViewList(){
  109. this.loading = true;
  110. getTabFunNumOverview({}, res => {
  111. // this.tableData = res;
  112. this.allTableData = [
  113. {TableNum: 'DK1', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
  114. {TableNum: 'DK2', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
  115. {TableNum: 'DK3', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
  116. {TableNum: 'DK4', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
  117. {TableNum: 'DK5', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
  118. {TableNum: 'DK6', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
  119. {TableNum: 'DK7', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
  120. {TableNum: 'DK8', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
  121. {TableNum: 'DK9', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
  122. {TableNum: 'DK10', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
  123. {TableNum: 'DK11', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
  124. {TableNum: 'DK12', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'},
  125. {TableNum: 'DK13', CoValue: 'DK2', GetTime: 'DK3', SubSysPoint: 'DK4', ObjInstance: 'DK5'},
  126. {TableNum: 'DK14', CoValue: 'DK7', GetTime: 'DK8', SubSysPoint: 'DK9', ObjInstance: 'DK10'},
  127. {TableNum: 'DK15', CoValue: 'DK12', GetTime: 'DK13', SubSysPoint: 'DK14', ObjInstance: 'DK15'}
  128. ];
  129. this.loading = false;
  130. });
  131. },
  132. //刷新当前行数据
  133. refreshThisRow(row){
  134. let index = this.tableData.indexOf(row);
  135. getTabFunNumOverview({}, res => {
  136. this.tableData[index].GetTime = new Date().getTime();
  137. });
  138. },
  139. //分页更换size
  140. handleSizeChange(val){
  141. this.pageSize = val;
  142. },
  143. //分页更换页
  144. handleCurrentChange(val){
  145. this.currentPage = val;
  146. },
  147. //子组件关闭抽屉
  148. closeDrawer(){
  149. this.drawers[3].drawer = false;
  150. },
  151. init() {
  152. this.getOverViewList();
  153. }
  154. },
  155. mounted() {
  156. this.init();
  157. },
  158. computed: {
  159. ...mapGetters('layout', ['projectId', 'userId']),
  160. //根绝分页,获取要展示的tableData
  161. tableData: function() {
  162. return this.allTableData.slice(
  163. (this.currentPage - 1) * this.pageSize,
  164. (this.currentPage * this.pageSize < this.allTableData.length)? this.currentPage * this.pageSize : this.allTableData.length );
  165. }
  166. },
  167. components: {
  168. historyChart,
  169. dataSource,
  170. objectInstance,
  171. addTabFunNum
  172. }
  173. }
  174. </script>
  175. <style lang="less" scoped>
  176. #tabFunNumOverview{
  177. border-top:5px solid #eee;
  178. height:calc(100% - 5px);
  179. width:100%;
  180. overflow:hidden;
  181. }
  182. .query-area{
  183. margin:4px 8px;
  184. }
  185. .table-area{
  186. height:calc(100% - 40px);
  187. }
  188. .table-area i{
  189. text-align:right;
  190. font-size:16px;
  191. cursor: pointer;
  192. float:right;
  193. line-height:22.4px;
  194. }
  195. /deep/ .el-drawer__body{
  196. height:90%;
  197. }
  198. </style>