1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980 |
- <template>
- <!-- 点位/表号共更好对应总览 -->
- <div id="pointTabOverview">
- <!-- 对话框 -->
- <el-dialog title="点位/表号共更好对应总览" :visible.sync="dialogVisiable">
- <el-tabs v-model="activeName" style="height:600px;overflow:auto;">
- <!-- 一对多数据 -->
- <el-tab-pane label="一对多" name="otm">
- <el-table :data="oTMData" style="width: 100%">
- <el-table-column prop="Name" label="点位名称" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop="DataSourceId" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop="MeterList" label="表号功能号" show-overflow-tooltip min-width="100">
- <template slot-scope="scope">
- <div v-for="(item, index) in scope.row.MeterList" :key="index" >{{ item }}</div>
- </template>
- </el-table-column>
- </el-table>
- </el-tab-pane>
- <!-- 多对一数据 -->
- <el-tab-pane label="多对一" name="mto">
- <el-table :data="mTOData" style="width: 100%">
- <el-table-column prop="Data" label="点位名称" show-overflow-tooltip min-width="100">
- <template slot-scope="scope">
- <div v-for="(item, index) in scope.row.Data" :key="index" >{{ item.MeterList[0] }}</div>
- </template>
- </el-table-column>
- <el-table-column prop="DataSource" label="数据源" show-overflow-tooltip min-width="100"></el-table-column>
- <el-table-column prop="MeterFunc" label="表号功能号" show-overflow-tooltip min-width="100"></el-table-column>
- </el-table>
- </el-tab-pane>
- </el-tabs>
- </el-dialog>
- </div>
- </template>
- <script>
- import { tableFuncRelatedOverview } from '@/api/point/request'
- export default {
- data() {
- return {
- activeName: "otm", //默认展示一对多
- dialogVisiable: false, //显示对话
- mTOData: [], //多对一数据
- oTMData: [] //一对多数据
- };
- },
- methods: {
- //加载数据
- loadOverviewData() {
- tableFuncRelatedOverview({}, res => {
- this.dialogVisiable = true;
- let mD = res.Content[0].MtoO;
- this.mTOData = [];
- for(let k in mD){
- this.mTOData.push({
- "MeterFunc": k,
- "DataSource": null,
- "Data":mD[k]
- })
- };
- // this.mTOData= mD.map((key,item) => {
- // return {
- // "MeterFunc": key,
- // "DataSource": null,
- // "Data":item
- // }
- // });
- console.log(this.mTOData);
- this.oTMData = res.Content[0].OtoM;
-
- });
- }
- }
- };
- </script>
- <style lang="less" scoped>
- </style>
|