| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <el-drawer direction="rtl" :visible.sync="visible" @close="handleClose" size="50%"> |
| 3 | <div style="padding: 10px;"> | |
| 4 | <el-form :inline="true" :model="dataForm" ref="dataForm" > | |
| 5 | <el-form-item prop="tagName"> | |
| 6 | <el-input v-model="dataForm.tagName" placeholder="名称" clearable> | |
| 7 | </el-input> | |
| 8 | </el-form-item> | |
| 9 | <el-form-item> | |
| 10 | <el-button @click="getDataList()">{{ $t("query") }} | |
| 11 | </el-button> | |
| 12 | </el-form-item> | |
| 13 | <el-form-item> | |
| 14 | <el-button type="primary" @click="addOrUpdateHandle()">新增 | |
| 15 | </el-button> | |
| 16 | </el-form-item> | |
| 17 | </el-form> | |
| 18 | <el-table v-loading="dataListLoading" :data="dataList" border | |
| 19 | @selection-change="dataListSelectionChangeHandle" | |
| 20 | @sort-change="dataListSortChangeHandle" | |
| 21 | style="width: 100%;">> | |
| 22 | <el-table-column prop="tagName" label="名称" header-align="center" align="left" | |
| 23 | min-width="150"></el-table-column> | |
| 24 | <el-table-column prop="dataType" label="数据类型" header-align="center" align="center"></el-table-column> | |
| 25 | <el-table-column prop="tagId" label="顺序号" header-align="center" align="center" min-width="50"></el-table-column> | |
| 26 | <el-table-column prop="tagDesc" label="测点描述" header-align="center" align="center"></el-table-column> | |
| 27 | <el-table-column prop="samplingRate" label="采集频率" header-align="center" align="center" | |
| 28 | width="120"></el-table-column> | |
| 29 | <el-table-column prop="enabled" label="是否启用" header-align="center" align="center"> | |
| 30 | <template slot-scope="scope"> | |
| 31 | <el-tag v-if="scope.row.enabled === true" size="small">是</el-tag> | |
| 32 | <el-tag v-else size="small" type="danger">否</el-tag> | |
| 33 | </template> | |
| 34 | </el-table-column> | |
| 35 | <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="180"> | |
| 36 | <template slot-scope="scope"> | |
| 37 | <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }} | |
| 38 | </el-button> | |
| 39 | <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t("delete") }} | |
| 40 | </el-button> | |
| 41 | <el-button type="text" size="small" @click="chartHandle(scope.row)">历史值</el-button> | |
| 42 | <el-button type="text" size="small" @click="currentHandle(scope.row)">当前值</el-button> | |
| 43 | </template> | |
| 44 | </el-table-column> | |
| 45 | </el-table> | |
| 46 | <el-pagination | |
| 47 | :current-page="page" | |
| 48 | :page-sizes="[10, 20, 50, 100]" | |
| 49 | :page-size="limit" | |
| 50 | :total="total" | |
| 51 | layout="total, sizes, prev, pager, next, jumper" | |
| 52 | @size-change="pageSizeChangeHandle" | |
| 53 | @current-change="pageCurrentChangeHandle"> | |
| 54 | </el-pagination> | |
| 55 | </div> | |
| 56 | ||
| 57 | <!-- 弹窗, 新增 / 修改 --> | |
| 58 | <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList()"></add-or-update> | |
| 59 | <!-- 弹窗, 历史数据 --> | |
| 60 | <chart-view v-if="chartViewVisible" ref="chartView"></chart-view> | |
| 61 | <!-- 弹窗, 当前数据 --> | |
| 62 | <current-view v-if="currentViewVisible" ref="currentView"></current-view> | |
| 63 | </el-drawer> | |
| 64 | </template> | |
| 65 | ||
| 66 | <script> | |
| 67 | import AddOrUpdate from "./kingio-tag-add-or-update"; | |
| 68 | import ChartView from "./components/data-tag-chart"; | |
| 69 | import CurrentView from "./components/data-tag-current.vue"; | |
| 70 | import mixinViewModule from '@/mixins/view-module' | |
| 71 | ||
| 72 | export default { | |
| 73 | mixins: [mixinViewModule], | |
| 74 | data() { | |
| 75 | return { | |
| 76 | mixinViewModuleOptions: { | |
| 77 | getDataListURL: '/data/channel/kio/tag/page', | |
| 78 | getDataListIsPage: true, | |
| 79 | deleteURL: '/data/channel/kio/tag', | |
| 80 | deleteIsBatch: true, | |
| 81 | createdIsNeed: false | |
| 82 | }, | |
| 83 | visible: false, | |
| 84 | currentViewVisible: false, | |
| 85 | chartViewVisible: false, | |
| 86 | }; | |
| 87 | }, | |
| 88 | components: { | |
| 89 | AddOrUpdate, | |
| 90 | ChartView, | |
| 91 | CurrentView | |
| 92 | }, | |
| 93 | methods: { | |
| 94 | init(name) { | |
| 95 | this.visible = true; | |
| 96 | this.$nextTick(() => { | |
| 97 | this.dataForm.device = name; | |
| 98 | if(this.dataForm.device){ | |
| 99 | this.getDataList(); | |
| 100 | } | |
| 101 | }); | |
| 102 | }, | |
| 103 | handleClose() { | |
| 104 | this.$refs["dataForm"].resetFields(); | |
| 105 | this.dataList = []; | |
| 106 | }, //历史数据 | |
| 107 | chartHandle(row) { | |
| 108 | this.chartViewVisible = true; | |
| 109 | this.$nextTick(() => { | |
| 110 | this.$refs.chartView.init(row); | |
| 111 | }); | |
| 112 | }, | |
| 113 | //当前数据 | |
| 114 | currentHandle(row) { | |
| 115 | this.currentViewVisible = true; | |
| 116 | this.$nextTick(() => { | |
| 117 | this.$refs.currentView.init(row); | |
| 118 | }); | |
| 119 | }, | |
| 120 | addOrUpdateHandle(id) { | |
| 121 | this.addOrUpdateVisible = true; | |
| 122 | this.$nextTick(() => { | |
| 123 | this.$refs.addOrUpdate.init( | |
| 124 | id, | |
| 125 | this.dataForm.device | |
| 126 | ); | |
| 127 | }); | |
| 128 | } | |
| 129 | }, | |
| 130 | }; | |
| 131 | </script> | |
