step1.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. <template>
  2. <div id="handsonStep1">
  3. <div class="btns-view">
  4. <el-button style="float:right;margin-top:4px;margin-left:10px;width:120px;" @click="saveData">保存</el-button>
  5. <el-button style="float:right;margin-top:4px;width:120px;" @click="addRow">新增行</el-button>
  6. <el-button style="float:right;margin-top:4px;width:120px;" @click="downData">导出配置点位表</el-button>
  7. <el-button style="float:right;margin-top:4px;width:120px;" @click="updateExcel = true">导入Excel</el-button>
  8. <el-button style="float:right;margin-top:4px;width:120px;" @click="downloadExcel = true">导出Excel模板</el-button>
  9. <el-checkbox style="float:right;line-height:40px;" @change="getData" v-model="checked">只显示使用的原始点位</el-checkbox>
  10. <el-button @click="clickPointVal">获取原始点位当前值</el-button>
  11. </div>
  12. <div id="handsontableSteps1" class="middle_sty" v-loading="isLoading">
  13. <handsontable-component v-if="!!allData.length" @delete="delePoint" ref="handsontable" @mouseDown="clickTable" @change="changeHand"></handsontable-component>
  14. <div v-else class="center">
  15. <i class="iconwushuju iconfont"></i>
  16. 暂无数据
  17. </div>
  18. </div>
  19. <own-dialog :width="'500px'" :index="true" title="位置标签" :dialogVisible="localtionDialog" @cancel="closeFalg">
  20. <localtion-falg :renderData="renderData" @changeTag="changeLoc"></localtion-falg>
  21. </own-dialog>
  22. <own-dialog :width="'300px'" :index="true" title="导出excel模板" :dialogVisible="downloadExcel" @cancel="close">
  23. <div class="center">
  24. <el-button type="text" @click="download">下载模板</el-button>
  25. </div>
  26. </own-dialog>
  27. <own-dialog :width="'500px'" :index="true" :footer="footer" title="导出excel模板" :dialogVisible="updateExcel" @confirm="sureOfUpload" @cancel="close">
  28. <div class="center" style="height:100px;">
  29. <upload-file accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" @change="changeFile"></upload-file>
  30. </div>
  31. <div>
  32. <el-radio class="radio-left" v-model="radio" label="1">默认使用导入的全部原始点位</el-radio>
  33. <el-radio class="radio-left" v-model="radio" label="2">默认不使用导入的全部原始点位</el-radio>
  34. </div>
  35. </own-dialog>
  36. <div class="right">
  37. <pagination :page="pages" @change="changePage"></pagination>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. import tools from "@/utils/scan/tools"
  43. import handsontableComponent from "@/components/common/handsontable"
  44. import getHeaderSetting from "@/utils/point_edit/handson_header"
  45. import ownDialog from "@/components/el_pack/dialog"
  46. import localtionFalg from "@/components/config_point/location_flag"
  47. import pagination from "@/components/common/myPagination"
  48. // import "@/assets/js/chosen.jquery.min";
  49. // import "@/assets/js/handsontable-chosen-editor";
  50. // import Handsontable from "handsontable-pro"
  51. import {
  52. mapGetters,
  53. mapActions
  54. } from "vuex";
  55. import {
  56. changeHeader,
  57. showTypes
  58. } from "@/utils/handsontable/delType"
  59. import {
  60. queryPoint,
  61. updatePoint,
  62. createPoint,
  63. downloadTemplete,
  64. uploadPointFile,
  65. deletePoint,
  66. getPointValue
  67. } from "@/fetch/point_http"
  68. import uploadFile from "@/components/common/uploadFile"
  69. import axios from 'axios'
  70. export default {
  71. data() {
  72. return {
  73. checked: false,
  74. settings: {},
  75. hot: null,
  76. changeFlag: true, //是否发生修改
  77. localtionDialog: false,
  78. renderData: {},
  79. allData: [],
  80. copyMain: [],
  81. pages: {
  82. size: 50,
  83. sizes: [10, 30, 50, 100, 150, 200],
  84. total: 0,
  85. currentPage: 0
  86. },
  87. oldPage: {
  88. currentPage: 0,
  89. size: 10
  90. },
  91. downloadExcel: false,
  92. isLoading: false,
  93. updateExcel: false,
  94. radio: '1',
  95. file: "", //上传的文件
  96. footer: {
  97. cancel: '取消',
  98. confirm: '确定'
  99. }
  100. }
  101. },
  102. computed: {
  103. ...mapGetters("project", [
  104. "projectId",
  105. "datasourceId",
  106. "protocolType"
  107. ])
  108. },
  109. created() {},
  110. mounted() {
  111. if (!this.datasourceId) {
  112. this.$router.push({
  113. path: "/point/pointsetting"
  114. })
  115. } else {
  116. this.getData()
  117. }
  118. },
  119. methods: {
  120. //关闭弹窗
  121. close() {
  122. this.downloadExcel = false
  123. this.updateExcel = false
  124. this.getData()
  125. },
  126. closeFalg() {
  127. this.localtionDialog = false
  128. },
  129. clickPointVal(){
  130. let data = this.hot.getSourceData()
  131. if(!data || !data.length){
  132. return false
  133. }
  134. let param = {
  135. data: {
  136. DataSourceId: this.datasourceId,
  137. PointIds: data.map(item => {
  138. return item.Id
  139. })
  140. },
  141. type: this.protocolType
  142. }
  143. getPointValue(param,res => {
  144. if(!!res.Content && res.Content.length){
  145. data.map(item => {
  146. res.Content.map(child => {
  147. if(item.Id == child.PointId){
  148. item.pointValue = child.Data.Data
  149. item.pointDate = child.Data.Time
  150. }
  151. })
  152. return item
  153. })
  154. }
  155. })
  156. },
  157. changeLoc(val) {
  158. this.renderData.LocationFlag = val
  159. this.changeFlag = false
  160. },
  161. downData() {
  162. let param = {
  163. method: 'post',
  164. url: `/pointconfig/point/${this.protocolType}/pointlist-export`,
  165. data: {
  166. DataSourceId: this.datasourceId
  167. },
  168. responseType: 'blob',
  169. headers: {
  170. ProjectId: this.projectId
  171. }
  172. }
  173. axios(param).then(function(res) {
  174. var blob = new Blob([res.data], {
  175. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  176. });
  177. var fileName = res.headers['content-disposition'];
  178. if (fileName)
  179. fileName = fileName.substring(fileName.indexOf('=') + 1);
  180. if ('download' in document.createElement('a')) { // 非IE下载
  181. const elink = document.createElement('a')
  182. elink.download = fileName
  183. elink.style.display = 'none'
  184. elink.href = URL.createObjectURL(blob)
  185. document.body.appendChild(elink)
  186. elink.click()
  187. URL.revokeObjectURL(elink.href) // 释放URL 对象
  188. document.body.removeChild(elink)
  189. } else { // IE10+下载
  190. navigator.msSaveBlob(blob, fileName)
  191. }
  192. }).catch(function(err) {
  193. })
  194. },
  195. //删除点位
  196. delePoint(delData) {
  197. let param = {
  198. data: delData.map(item => {
  199. return item.Id
  200. }),
  201. type: this.protocolType
  202. }
  203. console.log(delData,'delllll')
  204. if (!delData.length) {
  205. return false
  206. }
  207. if(!!delData){
  208. console.log(delData,'delData')
  209. if(!delData[0].Id){
  210. return false
  211. }
  212. }
  213. this.$confirm('你确定要删除点位吗?').then(_ => {
  214. deletePoint(param, res => {
  215. this.$message.success("删除成功")
  216. this.getData()
  217. })
  218. }).catch(_ => {
  219. this.$message("取消删除")
  220. this.getData()
  221. })
  222. },
  223. //下载excel模板
  224. download() {
  225. axios({
  226. method: 'post',
  227. url: `/pointconfig/point/${this.protocolType}/template-export`,
  228. data: {
  229. DataSourceId: this.datasourceId
  230. },
  231. headers: {
  232. ProjectId: this.projectId
  233. },
  234. responseType: 'blob'
  235. }).then(function(res) {
  236. var blob = new Blob([res.data], {
  237. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  238. });
  239. var fileName = res.headers['content-disposition'];
  240. if (fileName)
  241. fileName = fileName.substring(fileName.indexOf('=') + 1);
  242. if ('download' in document.createElement('a')) { // 非IE下载
  243. const elink = document.createElement('a')
  244. elink.download = fileName
  245. elink.style.display = 'none'
  246. elink.href = URL.createObjectURL(blob)
  247. document.body.appendChild(elink)
  248. elink.click()
  249. URL.revokeObjectURL(elink.href) // 释放URL 对象
  250. document.body.removeChild(elink)
  251. } else { // IE10+下载
  252. navigator.msSaveBlob(blob, fileName)
  253. }
  254. }).catch(function(err) {
  255. })
  256. },
  257. //点击表格
  258. clickTable(info, row) {
  259. let activeCell = this.hot.getActiveEditor()
  260. if(activeCell.prop == "Used"){
  261. info.Used = !info.Used
  262. }
  263. if (activeCell.prop == "LocationFlag") {
  264. this.renderData = info
  265. this.localtionDialog = true
  266. }
  267. },
  268. addRow() {
  269. if (!!this.allData.length) {
  270. let data = this.hot.getSourceData()
  271. data.unshift({
  272. Used: true,
  273. LocationFlag: []
  274. })
  275. this.hot.loadData(data)
  276. this.hot.updateSettings({
  277. maxRows: data.length
  278. })
  279. } else {
  280. this.allData = [{
  281. Used: true,
  282. LocationFlag: []
  283. }]
  284. this.createHot()
  285. }
  286. },
  287. //页面发生更改
  288. changePage() {
  289. if (!this.changeFlag) {
  290. //发生更改,提示是否保存
  291. this.$confirm('存在数据未保存, 是否继续?', '提示', {
  292. confirmButtonText: '确定',
  293. cancelButtonText: '取消',
  294. type: 'warning'
  295. }).then(() => {
  296. this.getData()
  297. }).catch(() => {
  298. this.pages.currentPage = this.oldPage.currentPage
  299. this.pages.size = this.oldPage.size
  300. return false
  301. });
  302. } else {
  303. this.getData()
  304. }
  305. },
  306. getData() {
  307. // width = (document.getElementById("app").clientWidth - 50) / header.length
  308. this.isLoading = true
  309. let param = {
  310. type: this.protocolType,
  311. data: {
  312. Filters: {
  313. DatasourceId: this.datasourceId,
  314. },
  315. "PageNumber": this.pages.currentPage || 1,
  316. "PageSize": this.pages.size,
  317. }
  318. }
  319. if (this.checked) {
  320. param.data.Filters.Used = true
  321. }
  322. this.oldPage = {
  323. size: this.pages.size,
  324. currentPage: this.pages.currentPage
  325. }
  326. queryPoint(param, res => {
  327. this.isLoading = false
  328. this.changeFlag = true
  329. this.allData = res.Content || []
  330. this.copyMain = JSON.parse(JSON.stringify(res.Content))
  331. this.pages.total = res.Total
  332. this.createHot()
  333. })
  334. },
  335. //创建实例
  336. createHot() {
  337. let header, width, settings
  338. header = getHeaderSetting(this.protocolType)
  339. settings = {
  340. data: this.allData,
  341. colHeaders: changeHeader(header),
  342. columns: showTypes(header),
  343. rowHeights: 30,
  344. maxRows: this.allData.length,
  345. contextMenu: {
  346. items: {
  347. remove_row: {
  348. name: "删除点位"
  349. }
  350. }
  351. }
  352. }
  353. if (!this.allData.length) {
  354. return false
  355. }
  356. this.$nextTick(_ => {
  357. this.hot = this.$refs.handsontable.init(settings)
  358. })
  359. },
  360. //修改提示
  361. changeHand(changeData, source) {
  362. if (!!changeData) {
  363. let tableData = this.hot.getSourceData()
  364. for(let i = 0; i < tableData.length; i++){
  365. let forFlag = true
  366. if(!tools.isObjectValueEqual(this.copyMain[i],tableData[i])) {
  367. this.changeFlag = false
  368. forFlag = false
  369. break
  370. } else if (i == tableData.length - 1 && forFlag) {
  371. this.changeFlag = true
  372. }
  373. }
  374. }
  375. return false
  376. },
  377. //保存
  378. saveData() {
  379. if (!!this.hot) {
  380. console.log(this.hot.getSourceData(),'getSourceData')
  381. let data = this.hot.getSourceData(),
  382. updateList = [],
  383. arr1 = [],
  384. createList = [];
  385. data.map(item => {
  386. if (!!item.Id) {
  387. delete item.CreateTime
  388. delete item.LastUpdate
  389. if(item.hasOwnProperty('pointDate')){
  390. delete item.pointDate
  391. }
  392. if(item.hasOwnProperty('pointValue')){
  393. delete item.pointValue
  394. }
  395. arr1.push(item)
  396. updateList.push(item)
  397. } else {
  398. createList.push(item)
  399. }
  400. })
  401. console.log(updateList,createList, arr1, "updateList")
  402. if (createList.length || updateList.length) {
  403. let flag = true
  404. if (createList.length) {
  405. for (let i = 0; i < createList.length; i++) {
  406. if (!(
  407. (createList[i].hasOwnProperty("SlaveId") &&
  408. createList[i].SlaveId &&
  409. createList[i].hasOwnProperty("RegistersAddress") &&
  410. createList[i].RegistersAddress &&
  411. createList[i].hasOwnProperty("RegistersQuality") &&
  412. createList[i].RegistersQuality &&
  413. createList[i].hasOwnProperty("ConvertType") &&
  414. createList[i].ConvertType
  415. ) ||
  416. (createList[i].hasOwnProperty("DeviceId") &&
  417. createList[i].DeviceId &&
  418. createList[i].hasOwnProperty("InstanceNumber") &&
  419. createList[i].InstanceNumber &&
  420. createList[i].hasOwnProperty("DataType") &&
  421. createList[i].DataType
  422. ) ||
  423. (createList[i].hasOwnProperty("Item") &&
  424. createList[i].Item
  425. ) ||
  426. (createList[i].hasOwnProperty("GroupAddress") &&
  427. createList[i].GroupAddress
  428. ) ||
  429. (createList[i].hasOwnProperty("Topic") &&
  430. createList[i].Topic
  431. ) ||
  432. (createList[i].hasOwnProperty("Exchange") &&
  433. createList[i].Exchange &&
  434. createList[i].hasOwnProperty("Type") &&
  435. createList[i].Type &&
  436. createList[i].hasOwnProperty("RoutingKey") &&
  437. createList[i].RoutingKey
  438. )
  439. )) {
  440. this.$message("请输入所有必填字段(带“*”列为必填列)")
  441. flag = false
  442. return false
  443. } else if (!(createList[i].hasOwnProperty("Description") && createList[i].Description)) {
  444. this.$message("请输入全部的原始点位描述")
  445. flag = false
  446. return false
  447. }
  448. }
  449. }
  450. if (flag) {
  451. this.createList(createList)
  452. if (updateList.length) {
  453. this.update(updateList)
  454. }
  455. }
  456. }
  457. } else {
  458. this.$message.error("请确保存在数据")
  459. }
  460. },
  461. async createList(createList) {
  462. for (let i = 0; i < createList.length; i++) {
  463. await this.create(createList[i])
  464. }
  465. this.changeFlag = true
  466. },
  467. async create(obj) {
  468. for (let key in obj) {
  469. if (key == "LocationFlag" && obj[key] == "") {
  470. obj[key] = []
  471. }
  472. if (obj[key] === "") {
  473. obj[key] = null
  474. }
  475. }
  476. obj.DatasourceId = this.datasourceId
  477. obj.ProjectId = this.projectId
  478. await createPoint({
  479. data: obj,
  480. type: this.protocolType
  481. }, res => {
  482. obj.Id = res.Id
  483. this.getData()
  484. })
  485. },
  486. /**
  487. * @param {更新list} updateList
  488. *
  489. * 更新点位
  490. */
  491. update(updateList) {
  492. updatePoint({
  493. data: {
  494. Content: updateList
  495. },
  496. type: this.protocolType
  497. }, res => {
  498. this.getData()
  499. })
  500. },
  501. //没有保存的时候弹窗
  502. noSaveData() {
  503. return this.changeFlag
  504. },
  505. //上传文件
  506. changeFile(file) {
  507. this.file = file[0] || ''
  508. },
  509. //确定上传
  510. sureOfUpload() {
  511. if (!!this.file) {
  512. //有文件进行上传
  513. let param = {
  514. data: new FormData(),
  515. type: this.protocolType
  516. };
  517. param.data.set('DataSourceId', this.datasourceId)
  518. param.data.set('Used', this.radio == 1 ? true : false)
  519. param.data.set('multipartFile', this.file.raw)
  520. uploadPointFile(param, res => {
  521. this.$message.success("上传成功")
  522. this.getData()
  523. this.updateExcel = false
  524. })
  525. } else {
  526. this.$message.info("请选择文件")
  527. }
  528. }
  529. },
  530. components: {
  531. handsontableComponent,
  532. ownDialog,
  533. localtionFalg,
  534. pagination,
  535. uploadFile
  536. },
  537. }
  538. </script>
  539. <style lang="scss" scoped>
  540. .radio-left {
  541. display: block;
  542. line-height: 30px;
  543. margin-left: 100px;
  544. }
  545. #handsonStep1 {
  546. flex: 1;
  547. display: flex;
  548. flex-flow: column;
  549. padding-bottom: 10px;
  550. .btns-view {
  551. height: 40px;
  552. line-height: 40px;
  553. margin-bottom: 10px;
  554. padding: 0 10px;
  555. }
  556. #handsontableSteps1 {
  557. flex: 1;
  558. overflow: hidden;
  559. position: relative;
  560. margin: 0 10px;
  561. }
  562. }
  563. </style>