pointTabOverview.vue 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <!-- 点位/表号功能号对应总览 -->
  3. <div id="pointTabOverview">
  4. <!-- 对话框 -->
  5. <el-dialog title="点位/表号功能号对应总览" :visible.sync="dialogVisiable">
  6. <el-tabs v-model="activeName" style="height:600px;overflow:auto;">
  7. <!-- 一对多数据 -->
  8. <el-tab-pane label="一对多" name="otm">
  9. <el-table :data="oTMData" style="width: 100%">
  10. <el-table-column prop="Description" label="点位名称" show-overflow-tooltip min-width="100"></el-table-column>
  11. <el-table-column prop="Name" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
  12. <el-table-column prop="MeterList" label="表号功能号" show-overflow-tooltip min-width="100">
  13. <template slot-scope="scope">
  14. <div v-for="(item, index) in scope.row.MeterList" :key="index">{{ item }}</div>
  15. </template>
  16. </el-table-column>
  17. </el-table>
  18. </el-tab-pane>
  19. <!-- 多对一数据 -->
  20. <el-tab-pane label="多对一" name="mto">
  21. <el-table :data="mTOData" style="width: 100%">
  22. <el-table-column prop="Data" label="点位名称" show-overflow-tooltip min-width="100">
  23. <template slot-scope="scope">
  24. <div v-for="(item, index) in scope.row.Data" :key="index">{{ item.Description }}</div>
  25. </template>
  26. </el-table-column>
  27. <el-table-column prop="Data" label="数据源" show-overflow-tooltip min-width="100">
  28. <template slot-scope="scope">
  29. <div v-for="(item, index) in scope.row.Data" :key="index">{{ item.Name }}</div>
  30. </template>
  31. </el-table-column>
  32. <el-table-column prop="MeterFunc" label="表号功能号" show-overflow-tooltip min-width="100"></el-table-column>
  33. </el-table>
  34. </el-tab-pane>
  35. </el-tabs>
  36. </el-dialog>
  37. </div>
  38. </template>
  39. <script>
  40. import { tableFuncRelatedOverview } from '@/api/scan/request'
  41. export default {
  42. data() {
  43. return {
  44. activeName: "otm", //默认展示一对多
  45. dialogVisiable: false, //显示对话
  46. mTOData: [], //多对一数据
  47. oTMData: [] //一对多数据
  48. };
  49. },
  50. methods: {
  51. //加载数据
  52. loadOverviewData() {
  53. tableFuncRelatedOverview({}, res => {
  54. this.dialogVisiable = true;
  55. //去掉非多对一数据
  56. let mD = res.Content[0].MtoO;
  57. this.mTOData = [];
  58. for (let k in mD) {
  59. if (mD[k].length > 1) {
  60. this.mTOData.push({
  61. "MeterFunc": k,
  62. "Data": mD[k]
  63. })
  64. }
  65. };
  66. //去掉非一对多数据
  67. this.oTMData = [];
  68. let oD = res.Content[0].OtoM;
  69. for (let k in oD) {
  70. if (oD[k].MeterList.length > 1) {
  71. this.oTMData.push(oD[k]);
  72. }
  73. }
  74. });
  75. }
  76. }
  77. };
  78. </script>
  79. <style lang="less" scoped>
  80. </style>