pointTabOverview.vue 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  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="Name" label="点位名称" show-overflow-tooltip min-width="100"></el-table-column>
  11. <el-table-column prop="DataSourceId" 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.MeterList[0] }}</div>
  25. </template>
  26. </el-table-column>
  27. <el-table-column prop="DataSource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
  28. <el-table-column prop="MeterFunc" label="表号功能号" show-overflow-tooltip min-width="100"></el-table-column>
  29. </el-table>
  30. </el-tab-pane>
  31. </el-tabs>
  32. </el-dialog>
  33. </div>
  34. </template>
  35. <script>
  36. import { tableFuncRelatedOverview } from '@/api/point/request'
  37. export default {
  38. data() {
  39. return {
  40. activeName: "otm", //默认展示一对多
  41. dialogVisiable: false, //显示对话
  42. mTOData: [], //多对一数据
  43. oTMData: [] //一对多数据
  44. };
  45. },
  46. methods: {
  47. //加载数据
  48. loadOverviewData() {
  49. tableFuncRelatedOverview({}, res => {
  50. this.dialogVisiable = true;
  51. let mD = res.Content[0].MtoO;
  52. this.mTOData = [];
  53. for(let k in mD){
  54. this.mTOData.push({
  55. "MeterFunc": k,
  56. "DataSource": null,
  57. "Data":mD[k]
  58. })
  59. };
  60. // this.mTOData= mD.map((key,item) => {
  61. // return {
  62. // "MeterFunc": key,
  63. // "DataSource": null,
  64. // "Data":item
  65. // }
  66. // });
  67. console.log(this.mTOData);
  68. this.oTMData = res.Content[0].OtoM;
  69. });
  70. }
  71. }
  72. };
  73. </script>
  74. <style lang="less" scoped>
  75. </style>