| 提交 | 用户 | 时间 | ||
| 850106 | 1 | <template> |
| H | 2 | <el-card shadow="never" class="aui-card--fill"> |
| 3 | <div> | |
| 4 | <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"> | |
| 5 | <el-form-item> | |
| 6 | <el-input v-model="dataForm.pointname" placeholder="采集点名称" clearable></el-input> | |
| 7 | </el-form-item> | |
| 8 | <el-form-item> | |
| 9 | <el-input v-model="dataForm.pointno" placeholder="编号" clearable></el-input> | |
| 10 | </el-form-item> | |
| 11 | <el-form-item> | |
| 12 | <el-input v-model="dataForm.tagno" placeholder="Tag号" clearable></el-input> | |
| 13 | </el-form-item> | |
| 14 | <el-form-item> | |
| 15 | <el-select v-model="dataForm.pointtypeid" placeholder="点类型" clearable> | |
| 16 | <el-option | |
| 17 | v-for="item in pointtypeList" | |
| 18 | :key="item.id" | |
| 19 | :label="item.descp" | |
| 20 | :value="item.id"> | |
| 21 | </el-option> | |
| 22 | </el-select> | |
| 23 | </el-form-item> | |
| 24 | <el-form-item> | |
| 25 | <el-select v-model="dataForm.isenable" placeholder="是否启用" clearable> | |
| 26 | <el-option | |
| 27 | v-for="item in isEnableList" | |
| 28 | :key="item.code" | |
| 29 | :label="item.name" | |
| 30 | :value="item.code"> | |
| 31 | </el-option> | |
| 32 | </el-select> | |
| 33 | </el-form-item> | |
| 34 | <el-form-item> | |
| 35 | <el-button @click="searchDataList()">查询</el-button> | |
| 36 | <el-button type="primary" @click="addOrUpdateHandle()">新增</el-button> | |
| 37 | <el-button type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button> | |
| 38 | <el-button type="primary" @click="enable()" :disabled="dataListSelections.length <= 0">批量启用</el-button> | |
| 39 | <el-button type="danger" @click="disable()" :disabled="dataListSelections.length <= 0">批量禁用</el-button> | |
| 40 | <!-- <el-button type="primary" @click="downloadTemplate()">下载模板</el-button>--> | |
| 41 | </el-form-item> | |
| 42 | <el-form-item> | |
| 43 | <el-upload | |
| 44 | class="upload-demo" | |
| 45 | :limit="1" | |
| 46 | :file-list="fileList" | |
| 47 | :before-upload="beforeUpload" | |
| 48 | :on-success="uploadModelSuccess" | |
| 49 | :on-error="uploadModelError" | |
| 50 | :action="uploadModelUrl"> | |
| 51 | <el-button size="small" type="primary">导入采集点</el-button> | |
| 52 | </el-upload> | |
| 53 | </el-form-item> | |
| 54 | </el-form> | |
| 55 | <el-table | |
| 56 | :data="dataList" | |
| 57 | border | |
| 58 | v-loading="dataListLoading" | |
| 59 | @selection-change="selectionChangeHandle" | |
| 60 | style="width: 100%;"> | |
| 61 | <el-table-column | |
| 62 | type="selection" | |
| 63 | header-align="center" | |
| 64 | align="center" | |
| 65 | width="50"> | |
| 66 | </el-table-column> | |
| 67 | <el-table-column | |
| 68 | type="index" | |
| 69 | align="center" | |
| 70 | width="50" | |
| 71 | label="序号"> | |
| 72 | </el-table-column> | |
| 73 | <el-table-column | |
| 74 | prop="pointName" | |
| 75 | header-align="center" | |
| 76 | align="center" | |
| 77 | width="260" | |
| 78 | label="采集点名称"> | |
| 79 | </el-table-column> | |
| 80 | <el-table-column | |
| 81 | prop="pointNo" | |
| 82 | header-align="center" | |
| 83 | align="center" | |
| 84 | width="120" | |
| 85 | label="编号"> | |
| 86 | </el-table-column> | |
| 87 | <el-table-column | |
| 88 | prop="tagNo" | |
| 89 | header-align="center" | |
| 90 | align="center" | |
| 91 | width="120" | |
| 92 | label="Tag号"> | |
| 93 | </el-table-column> | |
| 94 | <el-table-column | |
| 95 | prop="pointtypedescp" | |
| 96 | header-align="center" | |
| 97 | align="center" | |
| 98 | label="点类型"> | |
| 99 | </el-table-column> | |
| 100 | <el-table-column | |
| 101 | prop="minfreqid" | |
| 102 | header-align="center" | |
| 103 | align="center" | |
| 104 | label="采集频率"> | |
| 105 | </el-table-column> | |
| 106 | <el-table-column | |
| 107 | prop="storeType" | |
| 108 | header-align="center" | |
| 109 | align="center" | |
| 110 | width="120" | |
| 111 | label="存储类型"> | |
| 112 | </el-table-column> | |
| 113 | <el-table-column | |
| 114 | prop="logicmax" | |
| 115 | header-align="center" | |
| 116 | align="center" | |
| 117 | label="逻辑上限"> | |
| 118 | </el-table-column> | |
| 119 | <el-table-column | |
| 120 | prop="logicmin" | |
| 121 | header-align="center" | |
| 122 | align="center" | |
| 123 | label="逻辑下限"> | |
| 124 | </el-table-column> | |
| 125 | <el-table-column | |
| 126 | prop="defaultvalue" | |
| 127 | header-align="center" | |
| 128 | align="center" | |
| 129 | label="缺省值"> | |
| 130 | </el-table-column> | |
| 131 | <el-table-column | |
| 132 | prop="maxvalue" | |
| 133 | header-align="center" | |
| 134 | align="center" | |
| 135 | label="最大值"> | |
| 136 | </el-table-column> | |
| 137 | <el-table-column | |
| 138 | prop="minvalue" | |
| 139 | header-align="center" | |
| 140 | align="center" | |
| 141 | label="最小值"> | |
| 142 | </el-table-column> | |
| 143 | <el-table-column | |
| 144 | prop="unit" | |
| 145 | header-align="center" | |
| 146 | align="center" | |
| 147 | label="单位"> | |
| 148 | </el-table-column> | |
| 149 | <el-table-column | |
| 150 | prop="isenable" | |
| 151 | header-align="center" | |
| 152 | align="center" | |
| 153 | width="100" | |
| 154 | :formatter="formatStatus" | |
| 155 | label="启用状态"> | |
| 156 | </el-table-column> | |
| 157 | <el-table-column | |
| 158 | fixed="right" | |
| 159 | header-align="center" | |
| 160 | align="center" | |
| 161 | width="180" | |
| 162 | label="操作"> | |
| 163 | <template slot-scope="scope"> | |
| 164 | <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id, scope.row.pointtypename)" | |
| 165 | >修改</el-button> | |
| 166 | <el-button type="text" size="small" @click="viewHandle(scope.row.id, scope.row.pointtypename)">详情</el-button> | |
| 167 | <el-button type="text" size="small" @click="chartHandle(scope.row.pointno, scope.row.pointname, scope.row.storetable)">采集值</el-button> | |
| 168 | </template> | |
| 169 | </el-table-column> | |
| 170 | </el-table> | |
| 171 | <el-pagination | |
| 172 | @size-change="sizeChangeHandle" | |
| 173 | @current-change="currentChangeHandle" | |
| 174 | :current-page="pageIndex" | |
| 175 | :page-sizes="[10, 20, 50, 100]" | |
| 176 | :page-size="pageSize" | |
| 177 | :total="totalPage" | |
| 178 | layout="total, sizes, prev, pager, next, jumper"> | |
| 179 | </el-pagination> | |
| 180 | <!-- 弹窗, 新增 / 修改 --> | |
| 181 | <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> | |
| 182 | <!-- 弹窗, 详情 --> | |
| 183 | <detail-view v-if="detailViewVisible" ref="detailView"></detail-view> | |
| 184 | <!-- 弹窗, 预测值 --> | |
| 185 | <chart-view v-if="chartViewVisible" ref="chartView"></chart-view> | |
| 186 | </div> | |
| 187 | </el-card> | |
| 188 | ||
| 189 | </template> | |
| 190 | ||
| 191 | <script> | |
| 192 | import AddOrUpdate from './da-data-point-add-or-update' | |
| 193 | import DetailView from './da-data-point-view' | |
| 194 | import ChartView from './da-data-point-chart' | |
| 195 | import Cookies from "js-cookie"; | |
| 196 | ||
| 197 | export default { | |
| 198 | data () { | |
| 199 | return { | |
| 200 | pointtypeList: [], | |
| 201 | isEnableList: [ | |
| 202 | { | |
| 203 | code: 0, | |
| 204 | name: '禁用' | |
| 205 | }, | |
| 206 | { | |
| 207 | code: 1, | |
| 208 | name: '启用' | |
| 209 | } | |
| 210 | ], | |
| 211 | fileList: [], | |
| 212 | uploadModelUrl: `/data/point/import-points?token=${Cookies.get('token')}`, | |
| 213 | dataForm: { | |
| 214 | pointname: '', | |
| 215 | pointno: '', | |
| 216 | tagtno: '', | |
| 217 | pointtypeid: '', | |
| 218 | pointtypename: '', | |
| 219 | minfreqid: '', | |
| 220 | minfreqname: '', | |
| 221 | unit: '', | |
| 222 | dimension: '', | |
| 223 | descp: '', | |
| 224 | defaultvalue: '', | |
| 225 | maxvalue: '', | |
| 226 | minvalue: '', | |
| 227 | storetypeid: '', | |
| 228 | storetypename: '', | |
| 229 | logicmax: '', | |
| 230 | logicmin: '', | |
| 231 | unittransfactor: '', | |
| 232 | iscorrect: '', | |
| 233 | isenable: '' | |
| 234 | }, | |
| 235 | dataList: [], | |
| 236 | pageIndex: 1, | |
| 237 | pageSize: 10, | |
| 238 | totalPage: 0, | |
| 239 | dataListLoading: false, | |
| 240 | dataListSelections: [], | |
| 241 | addOrUpdateVisible: false, | |
| 242 | detailViewVisible: false, | |
| 243 | chartViewVisible: false | |
| 244 | } | |
| 245 | }, | |
| 246 | components: { | |
| 247 | AddOrUpdate, | |
| 248 | DetailView, | |
| 249 | ChartView | |
| 250 | }, | |
| 251 | mounted () { | |
| 252 | this.getDataList() | |
| 253 | // this.getPointtypeList() | |
| 254 | }, | |
| 255 | methods: { | |
| 256 | searchDataList () { | |
| 257 | this.pageIndex = 1 | |
| 258 | this.getDataList() | |
| 259 | }, | |
| 260 | // 获取数据列表 | |
| 261 | getDataList () { | |
| 262 | this.dataListLoading = true | |
| 263 | this.$http({ | |
| 264 | url: '/data/point/list', | |
| 265 | method: 'get', | |
| 266 | params: this.$http.adornParams({ | |
| 267 | 'page': this.pageIndex, | |
| 268 | 'limit': this.pageSize, | |
| 269 | 'pointname': this.dataForm.pointname, | |
| 270 | 'pointno': this.dataForm.pointno, | |
| 271 | 'tagno': this.dataForm.tagno, | |
| 272 | 'pointtypeid': this.dataForm.pointtypeid, | |
| 273 | 'minfreqid': this.dataForm.minfreqid, | |
| 274 | 'unit': this.dataForm.unit, | |
| 275 | 'dimension': this.dataForm.dimension, | |
| 276 | 'descp': this.dataForm.descp, | |
| 277 | 'defaultvalue': this.dataForm.defaultvalue, | |
| 278 | 'maxvalue': this.dataForm.maxvalue, | |
| 279 | 'minvalue': this.dataForm.minvalue, | |
| 280 | 'storetypeid': this.dataForm.storetypeid, | |
| 281 | 'logicmax': this.dataForm.logicmax, | |
| 282 | 'logicmin': this.dataForm.logicmin, | |
| 283 | 'unittransfactor': this.dataForm.unittransfactor, | |
| 284 | 'iscorrect': this.dataForm.iscorrect, | |
| 285 | 'isenable': this.dataForm.isenable | |
| 286 | }) | |
| 287 | }).then(({data}) => { | |
| 288 | if (data) { | |
| 289 | this.dataList = data | |
| 290 | this.totalPage = data.length | |
| 291 | } else { | |
| 292 | this.dataList = [] | |
| 293 | this.totalPage = 0 | |
| 294 | } | |
| 295 | this.dataListLoading = false | |
| 296 | }) | |
| 297 | }, | |
| 298 | // 格式状态 | |
| 299 | formatStatus: function (row, column, cellValue, index) { | |
| 300 | if (cellValue === 1) { | |
| 301 | return '启用' | |
| 302 | } else { | |
| 303 | return '禁用' | |
| 304 | } | |
| 305 | }, | |
| 306 | getPointtypeList () { | |
| 307 | this.$http({ | |
| 308 | url: '/data/point-type/list', | |
| 309 | method: 'get', | |
| 310 | params: this.$http.adornParams({ | |
| 311 | 'page': 1, | |
| 312 | 'limit': 100 | |
| 313 | }) | |
| 314 | }).then(({data}) => { | |
| 315 | if (data && data.code === 0) { | |
| 316 | this.pointtypeList = data.page.list | |
| 317 | } else { | |
| 318 | this.pointtypeList = [] | |
| 319 | } | |
| 320 | }) | |
| 321 | }, | |
| 322 | // 每页数 | |
| 323 | sizeChangeHandle (val) { | |
| 324 | this.pageSize = val | |
| 325 | this.pageIndex = 1 | |
| 326 | this.getDataList() | |
| 327 | }, | |
| 328 | // 当前页 | |
| 329 | currentChangeHandle (val) { | |
| 330 | this.pageIndex = val | |
| 331 | this.getDataList() | |
| 332 | }, | |
| 333 | // 多选 | |
| 334 | selectionChangeHandle (val) { | |
| 335 | this.dataListSelections = val | |
| 336 | }, | |
| 337 | // 新增 / 修改 | |
| 338 | addOrUpdateHandle (id, pointtypename) { | |
| 339 | this.addOrUpdateVisible = true | |
| 340 | this.$nextTick(() => { | |
| 341 | this.$refs.addOrUpdate.init(id, pointtypename) | |
| 342 | }) | |
| 343 | }, | |
| 344 | // 详情 | |
| 345 | viewHandle (id, pointtypename) { | |
| 346 | this.detailViewVisible = true | |
| 347 | this.$nextTick(() => { | |
| 348 | this.$refs.detailView.init(id, pointtypename) | |
| 349 | }) | |
| 350 | }, | |
| 351 | // 预测值 | |
| 352 | chartHandle (pointno, pointname, tableName) { | |
| 353 | this.chartViewVisible = true | |
| 354 | this.$nextTick(() => { | |
| 355 | this.$refs.chartView.init(pointno, pointname, tableName) | |
| 356 | }) | |
| 357 | }, | |
| 358 | // 删除 | |
| 359 | deleteHandle (id) { | |
| 360 | var ids = id ? [id] : this.dataListSelections.map(item => { | |
| 361 | return item.id | |
| 362 | }) | |
| 363 | this.$confirm(`确定删除选中的${ids.length}项数据?`, '提示', { | |
| 364 | confirmButtonText: '确定', | |
| 365 | cancelButtonText: '取消', | |
| 366 | type: 'warning' | |
| 367 | }).then(() => { | |
| 368 | this.$http({ | |
| 369 | url: '/data/point/delete', | |
| 370 | method: 'post', | |
| 371 | data: this.$http.adornData(ids, false) | |
| 372 | }).then(({data}) => { | |
| 373 | if (data && data.code === 0) { | |
| 374 | this.$message({ | |
| 375 | message: '操作成功', | |
| 376 | type: 'success', | |
| 377 | duration: 1500, | |
| 378 | onClose: () => { | |
| 379 | this.getDataList() | |
| 380 | } | |
| 381 | }) | |
| 382 | } else { | |
| 383 | this.$message.error(data.msg) | |
| 384 | } | |
| 385 | }) | |
| 386 | }).catch(() => {}) | |
| 387 | }, | |
| 388 | // 启用 | |
| 389 | enable (id) { | |
| 390 | var ids = id ? [id] : this.dataListSelections.map(item => { | |
| 391 | return item.id | |
| 392 | }) | |
| 393 | this.$confirm(`确定启用选中的${ids.length}项数据?`, '提示', { | |
| 394 | confirmButtonText: '确定', | |
| 395 | cancelButtonText: '取消', | |
| 396 | type: 'warning' | |
| 397 | }).then(() => { | |
| 398 | this.$http({ | |
| 399 | url: '/data/point/enable', | |
| 400 | method: 'post', | |
| 401 | data: this.$http.adornData(ids, false) | |
| 402 | }).then(({data}) => { | |
| 403 | if (data && data.code === 0) { | |
| 404 | this.$message({ | |
| 405 | message: '操作成功', | |
| 406 | type: 'success', | |
| 407 | duration: 1500, | |
| 408 | onClose: () => { | |
| 409 | this.getDataList() | |
| 410 | } | |
| 411 | }) | |
| 412 | } else { | |
| 413 | this.$message.error(data.msg) | |
| 414 | } | |
| 415 | }) | |
| 416 | }).catch(() => {}) | |
| 417 | }, | |
| 418 | // 禁用 | |
| 419 | disable (id) { | |
| 420 | var ids = id ? [id] : this.dataListSelections.map(item => { | |
| 421 | return item.id | |
| 422 | }) | |
| 423 | this.$confirm(`确定启用选中的${ids.length}项数据?`, '提示', { | |
| 424 | confirmButtonText: '确定', | |
| 425 | cancelButtonText: '取消', | |
| 426 | type: 'warning' | |
| 427 | }).then(() => { | |
| 428 | this.$http({ | |
| 429 | url:'/data/point/disable', | |
| 430 | method: 'post', | |
| 431 | data: this.$http.adornData(ids, false) | |
| 432 | }).then(({data}) => { | |
| 433 | if (data && data.code === 0) { | |
| 434 | this.$message({ | |
| 435 | message: '操作成功', | |
| 436 | type: 'success', | |
| 437 | duration: 1500, | |
| 438 | onClose: () => { | |
| 439 | this.getDataList() | |
| 440 | } | |
| 441 | }) | |
| 442 | } else { | |
| 443 | this.$message.error(data.msg) | |
| 444 | } | |
| 445 | }) | |
| 446 | }).catch(() => {}) | |
| 447 | }, | |
| 448 | ||
| 449 | downloadTemplate () { | |
| 450 | let that = this | |
| 451 | this.$axios.get(`/sys/oss/download/static?path=/excel/测量点导入模板.xls`, | |
| 452 | { | |
| 453 | responseType: 'blob' | |
| 454 | }).then(function (res) { | |
| 455 | let blob = res.data | |
| 456 | // FileReader主要用于将文件内容读入内存 | |
| 457 | let reader = new FileReader() | |
| 458 | reader.readAsDataURL(blob) | |
| 459 | // onload当读取操作成功完成时调用 | |
| 460 | reader.onload = function (e) { | |
| 461 | let a = document.createElement('a') | |
| 462 | a.download = that.dataForm.pointname + '测量点导入模板.xls' | |
| 463 | a.href = e.target.result | |
| 464 | document.body.appendChild(a) | |
| 465 | a.click() | |
| 466 | document.body.removeChild(a) | |
| 467 | } | |
| 468 | }) | |
| 469 | }, | |
| 470 | ||
| 471 | beforeUpload (file) { | |
| 472 | let fileName = file.name | |
| 473 | let first = fileName.lastIndexOf('.') | |
| 474 | let nameLength = fileName.length | |
| 475 | let fileSuffix = fileName.substring(first + 1, nameLength) | |
| 476 | if (fileSuffix !== 'xls') { | |
| 477 | this.$message({ | |
| 478 | message: '只能上传xls类型文件', | |
| 479 | type: 'error', | |
| 480 | duration: 1500 | |
| 481 | }) | |
| 482 | return false | |
| 483 | } | |
| 484 | }, | |
| 485 | uploadModelSuccess (response, file, fileList) { | |
| 486 | if (response.code === 0) { | |
| 487 | this.$message({ | |
| 488 | message: '上传成功', | |
| 489 | type: 'success', | |
| 490 | duration: 1500 | |
| 491 | }) | |
| 492 | this.searchDataList() | |
| 493 | } else { | |
| 494 | this.$message({ | |
| 495 | message: '上传失败！' + response.msg, | |
| 496 | type: 'error', | |
| 497 | duration: 1500 | |
| 498 | }) | |
| 499 | } | |
| 500 | this.fileList = [] | |
| 501 | }, | |
| 502 | uploadModelError (file, err, fileList) { | |
| 503 | } | |
| 504 | } | |
| 505 | } | |
| 506 | </script> | |
| 507 | ||
