step1.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
  1. <template>
  2. <div id="handsonStep1">
  3. <div class="btns-view">
  4. <el-button style="float:right;margin-top:4px;margin-left:10px;" @click="saveData">保存</el-button>
  5. <el-button style="float:right;margin-top:4px;" @click="addRow">新增行</el-button>
  6. <el-button style="float:right;margin-top:4px;" @click="downData">导出配置点位表</el-button>
  7. <el-button style="float:right;margin-top:4px;" @click="updateExcel = true">导入Excel</el-button>
  8. <el-button style="float:right;margin-top:4px;" @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" 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 handsontableComponent from "@/components/common/handsontable"
  43. import getHeaderSetting from "@/utils/point_edit/handson_header"
  44. import ownDialog from "@/components/el_pack/dialog"
  45. import localtionFalg from "@/components/config_point/location_flag"
  46. import pagination from "@/components/common/myPagination"
  47. import "@/assets/js/chosen.jquery.min";
  48. import "@/assets/js/handsontable-chosen-editor";
  49. import Handsontable from "handsontable-pro"
  50. import {
  51. mapGetters,
  52. mapActions
  53. } from "vuex";
  54. import {
  55. changeHeader,
  56. showTypes
  57. } from "@/utils/handsontable/delType"
  58. import {
  59. queryPoint,
  60. updatePoint,
  61. createPoint,
  62. downloadTemplete,
  63. uploadPointFile,
  64. deletePoint,
  65. getPointValue
  66. } from "@/fetch/point_http"
  67. import uploadFile from "@/components/common/uploadFile"
  68. import axios from 'axios'
  69. export default {
  70. data() {
  71. return {
  72. checked: false,
  73. settings: {},
  74. hot: null,
  75. changeFlag: true, //是否发生修改
  76. localtionDialog: false,
  77. renderData: {},
  78. allData: [],
  79. pages: {
  80. size: 10,
  81. sizes: [10, 30, 50, 100],
  82. total: 0,
  83. currentPage: 0
  84. },
  85. oldPage: {
  86. currentPage: 0,
  87. size: 10
  88. },
  89. downloadExcel: false,
  90. isLoading: false,
  91. updateExcel: false,
  92. radio: '1',
  93. file: "", //上传的文件
  94. footer: {
  95. cancel: '取消',
  96. confirm: '确定'
  97. }
  98. }
  99. },
  100. computed: {
  101. ...mapGetters("project", [
  102. "projectId",
  103. "datasourceId",
  104. "protocolType"
  105. ])
  106. },
  107. created() {},
  108. mounted() {
  109. if (!this.protocolType) {
  110. this.$router.push({
  111. path: "/configPoint"
  112. })
  113. } else {
  114. this.getData()
  115. }
  116. },
  117. methods: {
  118. //关闭弹窗
  119. close() {
  120. this.downloadExcel = false
  121. this.updateExcel = false
  122. this.getData()
  123. },
  124. closeFalg() {
  125. this.localtionDialog = false
  126. },
  127. clickPointVal(){
  128. let data = this.hot.getSourceData()
  129. if(!data || !data.length){
  130. return false
  131. }
  132. console.log(data,'data')
  133. let param = {
  134. data: {
  135. DataSourceId: this.datasourceId,
  136. PointIds: data.map(item => {
  137. return item.Id
  138. })
  139. },
  140. type: this.protocolType
  141. }
  142. getPointValue(param,res => {
  143. console.log(res,'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. console.log(param, 'param')
  174. axios(param).then(function(res) {
  175. var blob = new Blob([res.data], {
  176. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  177. });
  178. var fileName = res.headers['content-disposition'];
  179. if (fileName)
  180. fileName = fileName.substring(fileName.indexOf('=') + 1);
  181. if ('download' in document.createElement('a')) { // 非IE下载
  182. const elink = document.createElement('a')
  183. elink.download = fileName
  184. elink.style.display = 'none'
  185. elink.href = URL.createObjectURL(blob)
  186. document.body.appendChild(elink)
  187. elink.click()
  188. URL.revokeObjectURL(elink.href) // 释放URL 对象
  189. document.body.removeChild(elink)
  190. } else { // IE10+下载
  191. navigator.msSaveBlob(blob, fileName)
  192. }
  193. }).catch(function(err) {
  194. console.dirxml(err);
  195. })
  196. },
  197. //删除点位
  198. delePoint(delData) {
  199. let param = {
  200. data: delData.map(item => {
  201. return item.Id
  202. }),
  203. type: this.protocolType
  204. }
  205. console.log(param, 'param')
  206. if (!param.length) {
  207. return false
  208. }
  209. this.$confirm('你确定要删除点位吗?').then(_ => {
  210. console.log(param, 'param')
  211. deletePoint(param, res => {
  212. this.$message.success("删除成功")
  213. this.getData()
  214. })
  215. }).catch(_ => {
  216. this.$message("取消删除")
  217. this.getData()
  218. })
  219. },
  220. //下载excel模板
  221. download() {
  222. axios({
  223. method: 'post',
  224. url: `/pointconfig/point/${this.protocolType}/template-export`,
  225. data: {
  226. DataSourceId: this.datasourceId
  227. },
  228. headers: {
  229. ProjectId: this.projectId
  230. },
  231. responseType: 'blob'
  232. }).then(function(res) {
  233. var blob = new Blob([res.data], {
  234. type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
  235. });
  236. var fileName = res.headers['content-disposition'];
  237. if (fileName)
  238. fileName = fileName.substring(fileName.indexOf('=') + 1);
  239. if ('download' in document.createElement('a')) { // 非IE下载
  240. const elink = document.createElement('a')
  241. elink.download = fileName
  242. elink.style.display = 'none'
  243. elink.href = URL.createObjectURL(blob)
  244. document.body.appendChild(elink)
  245. elink.click()
  246. URL.revokeObjectURL(elink.href) // 释放URL 对象
  247. document.body.removeChild(elink)
  248. } else { // IE10+下载
  249. navigator.msSaveBlob(blob, fileName)
  250. }
  251. }).catch(function(err) {
  252. console.dirxml(err);
  253. })
  254. },
  255. //点击表格
  256. clickTable(info, row) {
  257. let activeCell = this.hot.getActiveEditor()
  258. console.log(activeCell, 'activeCell')
  259. if(activeCell.prop == "Used"){
  260. info.Used = !info.Used
  261. }
  262. if (activeCell.prop == "LocationFlag") {
  263. this.renderData = info
  264. this.localtionDialog = true
  265. }
  266. },
  267. addRow() {
  268. if (!!this.allData.length) {
  269. let data = this.hot.getSourceData()
  270. data.unshift({})
  271. this.hot.loadData(data)
  272. this.hot.updateSettings({
  273. maxRows: data.length
  274. })
  275. } else {
  276. this.allData = [{}]
  277. this.createHot()
  278. }
  279. },
  280. //页面发生更改
  281. changePage() {
  282. if (!this.changeFlag) {
  283. //发生更改,提示是否保存
  284. this.$confirm('存在数据未保存, 是否继续?', '提示', {
  285. confirmButtonText: '确定',
  286. cancelButtonText: '取消',
  287. type: 'warning'
  288. }).then(() => {
  289. this.getData()
  290. }).catch(() => {
  291. this.pages.currentPage = this.oldPage.currentPage
  292. this.pages.size = this.oldPage.size
  293. return false
  294. });
  295. } else {
  296. this.getData()
  297. }
  298. },
  299. getData() {
  300. // width = (document.getElementById("app").clientWidth - 50) / header.length
  301. this.isLoading = true
  302. let param = {
  303. type: this.protocolType,
  304. data: {
  305. Filters: {
  306. DatasourceId: this.datasourceId,
  307. },
  308. "PageNumber": this.pages.currentPage || 1,
  309. "PageSize": this.pages.size,
  310. }
  311. }
  312. if (this.checked) {
  313. param.data.Filters.Used = true
  314. }
  315. this.oldPage = {
  316. size: this.pages.size,
  317. currentPage: this.pages.currentPage
  318. }
  319. queryPoint(param, res => {
  320. this.isLoading = false
  321. this.changeFlag = true
  322. this.allData = res.Content || []
  323. this.pages.total = res.Total
  324. this.createHot()
  325. })
  326. },
  327. //创建实例
  328. createHot() {
  329. let header, width, settings
  330. header = getHeaderSetting(this.protocolType)
  331. settings = {
  332. data: this.allData,
  333. colHeaders: changeHeader(header),
  334. columns: showTypes(header),
  335. rowHeights: 30,
  336. maxRows: this.allData.length,
  337. contextMenu: {
  338. items: {
  339. remove_row: {
  340. name: "删除点位"
  341. }
  342. }
  343. }
  344. }
  345. if (!this.allData.length) {
  346. return false
  347. }
  348. console.log(settings, 'settings')
  349. this.$nextTick(_ => {
  350. this.hot = this.$refs.handsontable.init(settings)
  351. console.log(this.hot)
  352. })
  353. },
  354. //修改提示
  355. changeHand(changeData, source) {
  356. if (!!changeData) {
  357. this.changeFlag = false
  358. }
  359. return false
  360. },
  361. //保存
  362. saveData() {
  363. if (!!this.hot) {
  364. console.log(this.hot.getSourceData())
  365. let data = this.hot.getSourceData(),
  366. updateList = [],
  367. arr1 = [],
  368. createList = [];
  369. data.map(item => {
  370. if (!!item.Id) {
  371. console.log(item)
  372. delete item.CreateTime
  373. delete item.LastUpdate
  374. if(item.hasOwnProperty('pointDate')){
  375. delete item.pointDate
  376. }
  377. if(item.hasOwnProperty('pointValue')){
  378. delete item.pointValue
  379. }
  380. arr1.push(item)
  381. updateList.push(item)
  382. } else {
  383. createList.push(item)
  384. }
  385. })
  386. console.log(updateList, arr1, "updateList")
  387. if (updateList.length) {
  388. this.update(updateList)
  389. }
  390. if (createList.length) {
  391. this.createList(createList)
  392. }
  393. } else {
  394. this.$message.error("请确保存在数据")
  395. }
  396. },
  397. async createList(createList) {
  398. console.log(createList)
  399. let i = 0;
  400. for (i; i < createList.length; i++) {
  401. if (createList[i].hasOwnProperty("Description")) {
  402. await this.create(createList[i])
  403. }
  404. }
  405. this.getData()
  406. this.changeFlag = true
  407. },
  408. async create(obj) {
  409. for (let key in obj) {
  410. if (key == "LocationFlag" && obj[key] == "") {
  411. obj[key] = []
  412. }
  413. if (obj[key] === "") {
  414. obj[key] = null
  415. }
  416. }
  417. obj.DatasourceId = this.datasourceId
  418. obj.ProjectId = this.projectId
  419. await createPoint({
  420. data: obj,
  421. type: this.protocolType
  422. }, res => {
  423. console.log(res)
  424. obj.Id = res.Id
  425. })
  426. },
  427. /**
  428. * @param {更新list} updateList
  429. *
  430. * 更新点位
  431. */
  432. update(updateList) {
  433. updatePoint({
  434. data: {
  435. Content: updateList
  436. },
  437. type: this.protocolType
  438. }, res => {
  439. console.log(res)
  440. this.getData()
  441. })
  442. },
  443. //没有保存的时候弹窗
  444. noSaveData() {
  445. return this.changeFlag
  446. },
  447. //上传文件
  448. changeFile(file) {
  449. this.file = file[0] || ''
  450. console.log(file, 'file')
  451. },
  452. //确定上传
  453. sureOfUpload() {
  454. if (!!this.file) {
  455. //有文件进行上传
  456. let param = {
  457. data: new FormData(),
  458. type: this.protocolType
  459. };
  460. param.data.set('DataSourceId', this.datasourceId)
  461. param.data.set('Used', this.radio == 1 ? true : false)
  462. param.data.set('multipartFile', this.file.raw)
  463. uploadPointFile(param, res => {
  464. this.$message.success("上传成功")
  465. this.getData()
  466. this.updateExcel = false
  467. })
  468. } else {
  469. this.$message.info("请选择文件")
  470. }
  471. }
  472. },
  473. components: {
  474. handsontableComponent,
  475. ownDialog,
  476. localtionFalg,
  477. pagination,
  478. uploadFile
  479. },
  480. }
  481. </script>
  482. <style lang="scss" scoped>
  483. .radio-left {
  484. display: block;
  485. line-height: 30px;
  486. margin-left: 100px;
  487. }
  488. #handsonStep1 {
  489. flex: 1;
  490. display: flex;
  491. flex-flow: column;
  492. .btns-view {
  493. height: 40px;
  494. line-height: 40px;
  495. margin-bottom: 10px;
  496. }
  497. #handsontableSteps1 {
  498. flex: 1;
  499. overflow: hidden;
  500. position: relative;
  501. }
  502. }
  503. </style>