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