pointTabOverview.vue 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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/point/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. let mD = res.Content[0].MtoO;
  56. this.mTOData = [];
  57. for(let k in mD){
  58. if(mD[k].length > 1){
  59. this.mTOData.push({
  60. "MeterFunc": k,
  61. "Data":mD[k]
  62. })
  63. }
  64. };
  65. // this.mTOData= mD.map((key,item) => {
  66. // return {
  67. // "MeterFunc": key,
  68. // "DataSource": null,
  69. // "Data":item
  70. // }
  71. // });
  72. console.log(this.mTOData);
  73. let oD = res.Content[0].OtoM;
  74. for(let k in oD){
  75. if(oD[k].MeterList.length > 1){
  76. this.oTMData.push(oD[k]);
  77. }
  78. }
  79. });
  80. }
  81. }
  82. };
  83. </script>
  84. <style lang="less" scoped>
  85. </style>