tabFunNumOverview.vue 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217
  1. <template>
  2. <div id="tabFunNumOverview">
  3. <!-- 查询 新增 -->
  4. <div class="query-area" style="padding:10px;">
  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. <p style="overflow: hidden;float:right;">
  9. <el-button style="height:32px" @click='handleDrawer({},3)'>新增自定义</el-button>
  10. </p>
  11. </div>
  12. <!-- 数据表格 -->
  13. <div class="table-area">
  14. <el-table :data="tableData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading" :header-cell-style="headerStyle">
  15. <el-table-column prop='' label='' show-overflow-tooltip width="30" header-align='center'>
  16. <template slot-scope="scope">
  17. <el-tooltip v-if="scope.row.DataQuality!=0" content="已断数,请检查" effect="dark" placement="top">
  18. <i class="el-icon-warning-outline" style="float:left;margin: 0 5px;color: red;"></i>
  19. </el-tooltip>
  20. </template>
  21. </el-table-column>
  22. <el-table-column prop='MeterFunc' label='表号-功能号' show-overflow-tooltip min-width="100" header-align='center'></el-table-column>
  23. <el-table-column prop='Data.Data' label='对应值(单位)' show-overflow-tooltip min-width="90" header-align='center'>
  24. <template slot-scope="scope">
  25. <span style="line-height:29px;">{{ scope.row.Data? scope.row.Data.Data : '' }}</span>
  26. <el-button style="padding:7px 15px;float:right;" @click="handleDrawer(scope.row, 0)"><i class="el-icon-s-data"></i></el-button>
  27. </template>
  28. </el-table-column>
  29. <el-table-column prop='Data.Time' label='获取时间' show-overflow-tooltip min-width="130" header-align='center'>
  30. <template slot-scope="scope">
  31. <span style="line-height:29px;">{{ scope.row.Data? scope.row.Data.Time: '' }}</span>
  32. <el-button style="padding:7px 15px;float:right;" @click="refreshThisRow(scope.row)"><i class="el-icon-refresh"></i></el-button>
  33. </template>
  34. </el-table-column>
  35. <el-table-column prop='RelatedPoint' label='涉及子系统点位(数据来源)' show-overflow-tooltip min-width="150" align='center'>
  36. <template slot-scope="scope">
  37. <span style="display:inline-block;width:16px;line-height:29px;">{{ scope.row.RelatedPoint }}</span>
  38. <p style="width:55.33px;display:inline-block;">
  39. <el-button v-if="scope.row.RelatedPoint" style="padding:7px 15px;margin-left:10px;" @click="handleDrawer(scope.row, 1)"><i
  40. class="el-icon-coin"></i></el-button>
  41. </p>
  42. </template>
  43. </el-table-column>
  44. <el-table-column prop='RelatedInstance' label='涉及的对象实例(应用到)' show-overflow-tooltip min-width="150" align='center'>
  45. <template slot-scope="scope">
  46. <span style="display:inline-block;width:16px;line-height:29px;">{{ scope.row.RelatedInstance }}</span>
  47. <p style="width:55.33px;display:inline-block;">
  48. <el-button v-if="scope.row.RelatedInstance" style="padding:7px 15px;margin-left:10px;" @click="handleDrawer(scope.row, 2)"><i
  49. class="el-icon-coin"></i></el-button>
  50. </p>
  51. </template>
  52. </el-table-column>
  53. </el-table>
  54. <!-- 分页 -->
  55. <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes"
  56. :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="allTableData.length"
  57. style="float:right;margin-top:10px;padding:2px 5px;">
  58. </el-pagination>
  59. </div>
  60. <!-- 对话框和抽屉统一放在drawers中 -->
  61. <!-- 对话框 -->
  62. <el-dialog :title="'< ' + drawers[0].objId + ' > 的历史数据'" :visible.sync="drawers[0].drawer">
  63. <historyChart :tabFunNum='drawers[0].objId'></historyChart>
  64. </el-dialog>
  65. <!-- 抽屉 -->
  66. <el-drawer :title="'< ' + drawers[1].objId + ' > 的子系统点位'" :visible.sync="drawers[1].drawer" :direction="drawers[1].direction" size="35%">
  67. <dataSource :tabFunNum='drawers[1].objId'></dataSource>
  68. </el-drawer>
  69. <el-drawer :title="'< ' + drawers[2].objId + ' > 的对象实例'" :visible.sync="drawers[2].drawer" :direction="drawers[2].direction" size="35%">
  70. <objectInstance :tabFunNum='drawers[2].objId' :reValue='drawers[2].value'></objectInstance>
  71. </el-drawer>
  72. <el-dialog title="新增表号功能号" :visible.sync="drawers[3].drawer">
  73. <addTabFunNum @closeDrawer="closeDrawer()" @reloadData="reloadData()"></addTabFunNum>
  74. </el-dialog>
  75. </div>
  76. </template>
  77. <script>
  78. import { Message } from 'element-ui';
  79. import {
  80. getTabFunNumOverview
  81. } from '@/api/scan/request'
  82. import historyChart from './historyChart'
  83. import dataSource from './dataSource'
  84. import objectInstance from './objectInstance'
  85. import addTabFunNum from './addTabFunNum'
  86. export default {
  87. data() {
  88. return {
  89. //表格头样式
  90. headerStyle: {
  91. backgroundColor: '#e1e4e5',
  92. color: '#2b2b2b',
  93. lineHeight: '30px'
  94. },
  95. allTableData: [],//所有表格数据
  96. pageSizes: [10, 20, 50, 100],
  97. pageSize: 50,
  98. currentPage: 1,
  99. loading: false,//加载
  100. tabFunNum: null,//表号功能号
  101. //抽屉
  102. drawers: [
  103. { drawer: false, direction: 'rtl', objId: '' },
  104. { drawer: false, direction: 'rtl', objId: '' },
  105. { drawer: false, direction: 'rtl', objId: '', value: '' },
  106. { drawer: false, direction: 'rtl', objId: '' }
  107. ]
  108. }
  109. },
  110. methods: {
  111. //抽屉处理
  112. handleDrawer(row, index) {
  113. if (index == 2 || index == 1) {
  114. //实例数量大于0才能打开
  115. if ((row.RelatedInstance > 0 && index == 2) || (row.RelatedPoint > 0 && index == 1)) {
  116. this.drawers[index].value = row.Data ? row.Data.Data : '';
  117. this.drawers[index].objId = row.MeterFunc;
  118. this.drawers[index].drawer = true;
  119. }
  120. }
  121. else {
  122. if (index != 3)
  123. this.drawers[index].objId = row.MeterFunc;
  124. this.drawers[index].drawer = true;
  125. }
  126. },
  127. //获取统计数据
  128. getOverViewList() {
  129. this.loading = true;
  130. getTabFunNumOverview({ MeterFunc: this.tabFunNum }, res => {
  131. this.allTableData = res.Content;
  132. this.loading = false;
  133. });
  134. },
  135. //刷新当前行数据
  136. refreshThisRow(row) {
  137. let index = this.tableData.indexOf(row);
  138. let pa = {
  139. MeterFunc: row.MeterFunc
  140. }
  141. getTabFunNumOverview(pa, res => {
  142. if (res.Content[0].Data) {
  143. this.tableData[index].Data.Data = res.Content[0].Data.Data;
  144. this.tableData[index].Data.Time = res.Content[0].Data.Time;
  145. }
  146. this.tableData[index].DataQuality = res.Content[0].DataQuality;
  147. this.tableData[index].RelatedInstance = res.Content[0].RelatedInstance;
  148. this.tableData[index].RelatedPoint = res.Content[0].RelatedPoint;
  149. Message.success('已刷新');
  150. });
  151. },
  152. //分页更换size
  153. handleSizeChange(val) {
  154. this.pageSize = val;
  155. },
  156. //分页更换页
  157. handleCurrentChange(val) {
  158. this.currentPage = val;
  159. },
  160. //子组件关闭抽屉
  161. closeDrawer() {
  162. this.drawers[3].drawer = false;
  163. },
  164. //新建自定义后重载页面
  165. reloadData() {
  166. this.$emit('reloadData');
  167. },
  168. init() {
  169. this.getOverViewList();
  170. }
  171. },
  172. mounted() {
  173. this.init();
  174. },
  175. computed: {
  176. //根据分页,获取要展示的tableData
  177. tableData: function () {
  178. return this.allTableData.slice(
  179. (this.currentPage - 1) * this.pageSize,
  180. (this.currentPage * this.pageSize < this.allTableData.length) ? this.currentPage * this.pageSize : this.allTableData.length);
  181. }
  182. },
  183. components: {
  184. historyChart,
  185. dataSource,
  186. objectInstance,
  187. addTabFunNum
  188. }
  189. }
  190. </script>
  191. <style lang="less" scoped>
  192. #tabFunNumOverview {
  193. border-top: 5px solid #eee;
  194. height: calc(100% - 5px);
  195. width: 100%;
  196. overflow: hidden;
  197. }
  198. .table-area {
  199. height: calc(100% - 72px);
  200. padding: 0px 10px 10px 10px;
  201. }
  202. .table-area i {
  203. text-align: right;
  204. font-size: 12px;
  205. cursor: pointer;
  206. float: right;
  207. }
  208. /deep/ .el-drawer__body {
  209. height: 90%;
  210. }
  211. /deep/ .el-dialog__body {
  212. padding-bottom:20px;
  213. }
  214. </style>