step4.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491
  1. <template>
  2. <div class="h100 steps4">
  3. <div class="btns-view">
  4. <el-button @click="checkedAll">获取展开点位数据</el-button>
  5. <el-button @click="clickTabs">获取全部点位数据</el-button>
  6. </div>
  7. <div class="center point-border">
  8. <el-radio-group v-model="activeIndex" @change="clickTabs">
  9. <el-radio-button label="0">从物理世界角度检查</el-radio-button>
  10. <el-radio-button label="1">从原始点位表角度检查</el-radio-button>
  11. </el-radio-group>
  12. </div>
  13. <div class="jsmind-container" v-show="activeIndex == 0">
  14. <js-mind-component ref="jsmind"></js-mind-component>
  15. </div>
  16. <div class="jsmind-container" v-show="activeIndex == 1">
  17. <js-mind-component ref="jsmind1"></js-mind-component>
  18. </div>
  19. <!-- <el-tabs type="border-card" @tab-click="clickTabs" class="tabs-h" tab-position="bottom">
  20. <el-tab-pane>
  21. <span slot="label">
  22. 从物理世界角度检查
  23. </span>
  24. </el-tab-pane>
  25. <el-tab-pane class="h100" label="从原始点位表角度检查">
  26. <js-mind-component ref="jsmind1" @openNode="openNode"></js-mind-component>
  27. </el-tab-pane>
  28. </el-tabs> -->
  29. </div>
  30. </template>
  31. <script>
  32. import {
  33. mapGetters,
  34. mapActions
  35. } from "vuex";
  36. import jsMindComponent from "@/components/common/jsmind"
  37. import {
  38. queryAllRela,
  39. platformEqJsMind,
  40. platformIdentJsMind,
  41. platformInfoJsMind,
  42. platformPointJsMind,
  43. queryAllPointRela,
  44. pointPostJsMind,
  45. pointInfoJsMind,
  46. pointTypeJsMind,
  47. } from "@/fetch/point_http"
  48. export default {
  49. name: "steps4",
  50. data() {
  51. return {
  52. jsMind: "",
  53. activeIndex: 0,
  54. mindArr: []
  55. }
  56. },
  57. computed: {
  58. ...mapGetters("project", [
  59. "datasourceId",
  60. "protocolType",
  61. "dataName"
  62. ]),
  63. projectId () {
  64. return this.$store.getters['layout/projectId']
  65. }
  66. },
  67. created() {},
  68. mounted() {
  69. this.clickTabs({
  70. index: this.activeIndex
  71. })
  72. },
  73. methods: {
  74. checkedAll() {
  75. this.mindArr[this.activeIndex].expand_all()
  76. },
  77. //节点选中事件
  78. // async openNode(node) {
  79. // //次级列表children,自定义id ownId,请求参数,请求函数ajaxFun,显示子集的文案text,子集的data
  80. // let children, ownId, param, ajaxFun, text, nodeOwnData;
  81. // this.jsMind.options.editable = true
  82. // console.log(node.data)
  83. // //删除已有的假节点
  84. // this.removeNode(node, this.jsMind)
  85. // if (!!node.data && node.data.pointType == "system") {
  86. // //系统级
  87. // param = {
  88. // DataSourceId: this.datasourceId,
  89. // PhysicalSystem: node.data.name
  90. // }
  91. // ajaxFun = this.activeIndex == 0 ? platformEqJsMind : pointTypeJsMind
  92. // console.log(ajaxFun)
  93. // children = await this.getList(param, ajaxFun)
  94. // console.log(children)
  95. // children.map(item => {
  96. // text = item.EquipmentType || `${item.Description}(${item.Address})`
  97. // nodeOwnData = {
  98. // pointType: "eq",
  99. // name: item.EquipmentType || item.Description,
  100. // systemName: node.data.name
  101. // }
  102. // ownId = this.createRandomId()
  103. // this.jsMind.add_node(node, ownId, text, nodeOwnData)
  104. // this.addNodeDefault(ownId)
  105. // })
  106. // }
  107. // if (!!node.data && node.data.pointType == "eq") {
  108. // //标识级
  109. // param = {
  110. // DataSourceId: this.datasourceId,
  111. // EquipmentType: node.data.name,
  112. // PhysicalSystem: node.data.systemName
  113. // }
  114. // ajaxFun = this.activeIndex == 0 ? platformIdentJsMind : pointPostJsMind
  115. // children = await this.getList(param, ajaxFun)
  116. // if (!children) {
  117. // return false
  118. // }
  119. // console.log(children)
  120. // children.map(item => {
  121. // text = this.activeIndex == 0 ? item.DataQuality + item.EquipmentMark : `${item.Description}(${item.Address}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`
  122. // nodeOwnData = {
  123. // pointType: "ident",
  124. // name: this.activeIndex == 0 ? item.EquipmentMark : item.Description,
  125. // systemName: node.data.systemName,
  126. // EquipmentType: node.data.name
  127. // }
  128. // console.log(text, nodeOwnData)
  129. // ownId = this.createRandomId()
  130. // this.jsMind.add_node(node, ownId, text, nodeOwnData)
  131. // this.addNodeDefault(ownId)
  132. // })
  133. // }
  134. // if (!!node.data && node.data.pointType == "ident") {
  135. // //信息级
  136. // param = {
  137. // DataSourceId: this.datasourceId,
  138. // EquipmentType: node.data.EquipmentType,
  139. // PhysicalSystem: node.data.systemName,
  140. // [this.activeIndex == 0 ? "EquipmentMark" : "Description"]: node.data.name
  141. // }
  142. // ajaxFun = this.activeIndex == 0 ? platformInfoJsMind : pointInfoJsMind
  143. // children = await this.getList(param, ajaxFun)
  144. // if (!children) {
  145. // return false
  146. // }
  147. // console.log(children)
  148. // children.map(item => {
  149. // ownId = this.createRandomId()
  150. // text = `${item.InfomationPoint}(${item.MeterFunc}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`
  151. // nodeOwnData = {
  152. // pointType: "point",
  153. // InfomationPoint: item.InfomationPoint,
  154. // EquipmentMark: node.data.name,
  155. // systemName: node.data.systemName,
  156. // EquipmentType: node.data.EquipmentType
  157. // }
  158. // this.jsMind.add_node(node, ownId, text, nodeOwnData)
  159. // if (this.activeIndex == 0) {
  160. // console.log(111)
  161. // this.addNodeDefault(ownId)
  162. // }
  163. // })
  164. // }
  165. // if (!!node.data && node.data.pointType == "point") {
  166. // //信息级
  167. // children = await this.getList({
  168. // DataSourceId: this.datasourceId,
  169. // EquipmentType: node.data.EquipmentType,
  170. // PhysicalSystem: node.data.systemName,
  171. // EquipmentMark: node.data.EquipmentMark,
  172. // InfomationPoint: node.data.InfomationPoint
  173. // }, platformPointJsMind)
  174. // if (!children) {
  175. // return false
  176. // }
  177. // console.log(children)
  178. // children.map(item => {
  179. // ownId = this.createRandomId()
  180. // this.jsMind.add_node(node, ownId, `${item.Description}(${item.Address}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`, {
  181. // pointType: "point",
  182. // InfomationPoint: item.InfomationPoint,
  183. // EquipmentMark: node.data.name,
  184. // systemName: node.data.systemName,
  185. // EquipmentType: node.data.EquipmentType
  186. // })
  187. // })
  188. // }
  189. // },
  190. //统一添加默认级数
  191. addNodeDefault(ownId) {
  192. //给下一级添加默认的级数
  193. this.jsMind.add_node(ownId, this.createRandomId(), "")
  194. //收起该节点下的子节点
  195. this.jsMind.collapse_node(ownId)
  196. },
  197. /**
  198. * 删除某个节点下所有的节点
  199. * @param {该节点} node
  200. * @param {jsmind实例} jsmind
  201. */
  202. removeNode(node, jsmind) {
  203. if (!!node.children) {
  204. node.children.map(item => {
  205. this.jsMind.remove_node(item)
  206. })
  207. }
  208. },
  209. //获取接口封装
  210. getList(param, fun) {
  211. return new Promise((resolve, reject) => {
  212. fun(
  213. param,
  214. res => {
  215. console.log(res)
  216. resolve(res.Content)
  217. }
  218. )
  219. })
  220. },
  221. clickTabs(val) {
  222. this.activeIndex = this.activeIndex
  223. var data = {
  224. id: "root",
  225. topic: this.dataName,
  226. children: []
  227. },
  228. mind = {
  229. /* 元数据,定义思维导图的名称、作者、版本等信息 */
  230. meta: {
  231. name: "jsMind-demo-tree",
  232. author: "sagacloud",
  233. version: "0.2"
  234. },
  235. /* 数据格式声明 */
  236. format: "node_tree",
  237. /* 数据内容 */
  238. data: data
  239. },
  240. id, func;
  241. func = this.activeIndex == 0 ? queryAllRela : queryAllPointRela
  242. func({
  243. DataSourceId: this.datasourceId
  244. }, res => {
  245. console.log(res)
  246. data.children = res.Content.map(item => {
  247. id = this.createRandomId();
  248. return {
  249. id: id,
  250. topic: `${item.SpecialtySystem}(${item.PointCount})`,
  251. expanded: false,
  252. pointType: "system",
  253. name: item.SpecialtySystem,
  254. // children: [{
  255. // id: this.createRandomId()
  256. // }]
  257. }
  258. })
  259. console.log(data, "data")
  260. this.$nextTick(_ => {
  261. if (!!this.mindArr[this.activeIndex]) {
  262. this.jsMind = this.mindArr[this.activeIndex]
  263. return false
  264. }
  265. // console.log(val.index, this.$refs.jsmind, this.$refs.jsmind1)
  266. if (this.activeIndex == 0) {
  267. data.children = this.delPlatform(res.Content)
  268. console.log(data.children)
  269. this.jsMind = this.$refs.jsmind.initData({}, mind)
  270. } else {
  271. data.children = this.delPoint(res.Content)
  272. console.log(data.children)
  273. this.jsMind = this.$refs.jsmind1.initData({}, mind)
  274. }
  275. this.mindArr[this.activeIndex] = this.jsMind
  276. this.setBgColor([data], this.jsMind)
  277. this.jsMind.options.editable = false
  278. })
  279. })
  280. },
  281. delPlatform(arr) {
  282. return arr.map(item => {
  283. if (item.hasOwnProperty('EquipmentTypeList')) {
  284. let obj = {
  285. id: this.createRandomId(),
  286. topic: `${item.SpecialtySystem}(${item.PointCount})`,
  287. expanded: false,
  288. DataQuality: item.DataQuality
  289. }
  290. if (item.hasOwnProperty("EquipmentTypeList")) {
  291. obj.children = []
  292. obj.children = item.EquipmentTypeList.map(child => {
  293. let obj1 = {
  294. id: this.createRandomId(),
  295. topic: `${child.EquipmentType}`,
  296. children: [],
  297. expanded: false,
  298. DataQuality: child.DataQuality
  299. }
  300. if (child.hasOwnProperty("EquipmentMarkList")) {
  301. child.EquipmentMarkList.map(node => {
  302. let obj2 = {
  303. id: this.createRandomId(),
  304. topic: `${node.EquipmentMark}`,
  305. expanded: false,
  306. children: [],
  307. DataQuality: node.DataQuality
  308. }
  309. if (node.hasOwnProperty("InfoList")) {
  310. node.InfoList.map(node1 => {
  311. let obj3 = {
  312. id: this.createRandomId(),
  313. expanded: false,
  314. topic: `${node1.InfomationPoint}(${node1.MeterFunc}):${node1.Data.Time}-${node1.Data.Data}-${node1.Data.Unit}`,
  315. children: [],
  316. DataQuality: node1.DataQuality
  317. }
  318. if (node1.hasOwnProperty("PointList")) {
  319. node1.PointList.map(node2 => {
  320. let obj4 = {
  321. id: this.createRandomId(),
  322. DataQuality: node2.DataQuality,
  323. topic: `${node2.Description}(${node2.Address}):${node2.Data.Time}-${node2.Data.Data}-${node2.Data.Unit}`,
  324. }
  325. obj3.children.push(obj4)
  326. })
  327. }
  328. obj2.children.push(obj3)
  329. })
  330. }
  331. obj1.children.push(obj2)
  332. })
  333. }
  334. return obj1
  335. })
  336. }
  337. return obj
  338. }
  339. if (item.hasOwnProperty("CheckTodos")) {
  340. let obj = {
  341. id: this.createRandomId(),
  342. topic: `${item.SpecialtySystem}(${item.PointCount})`,
  343. expanded: false,
  344. DataQuality: item.DataQuality,
  345. children: []
  346. }
  347. obj.children = item.CheckTodos.map(node => {
  348. return {
  349. id: this.createRandomId(),
  350. topic: `${node.Description}(${node.Address})`,
  351. DataQuality: node.DataQuality
  352. }
  353. })
  354. return obj
  355. }
  356. })
  357. },
  358. setBgColor(data, jm) {
  359. data.map(item => {
  360. if (item.DataQuality) {
  361. jm.set_node_color(item.id, "#e6a23c", "#fff")
  362. }
  363. if (item.children && item.children.length) {
  364. this.setBgColor(item.children, jm)
  365. }
  366. })
  367. },
  368. changeData(arr) {
  369. console.log(arr)
  370. if (arr && arr instanceof Array) {
  371. return arr.map(item => {
  372. if (item.children && item.children.length) {
  373. return {
  374. id: item.id,
  375. topic: item.topic,
  376. expanded: item.expanded,
  377. children: this.changeData(item.children),
  378. theme: item.DataQuality ? "orange" : "greensea"
  379. };
  380. } else {
  381. return {
  382. id: item.id,
  383. expanded: item.expanded,
  384. topic: item.topic,
  385. theme: item.DataQuality ? "orange" : "greensea"
  386. };
  387. }
  388. });
  389. } else {
  390. return {
  391. id: "root",
  392. topic: arr.topic,
  393. children: this.changeData(arr.children)
  394. };
  395. }
  396. },
  397. delPoint(arr) {
  398. return arr.map(item => {
  399. if (item.hasOwnProperty('EquipmentTypeList')) {
  400. let obj = {
  401. id: this.createRandomId(),
  402. topic: `${item.SpecialtySystem}(${item.PointCount})`,
  403. expanded: false,
  404. DataQuality: item.DataQuality
  405. }
  406. if (item.hasOwnProperty("EquipmentTypeList")) {
  407. obj.children = []
  408. obj.children = item.EquipmentTypeList.map(child => {
  409. let obj1 = {
  410. id: this.createRandomId(),
  411. topic: `${child.EquipmentType}`,
  412. children: [],
  413. expanded: false,
  414. DataQuality: item.DataQuality
  415. }
  416. if (child.hasOwnProperty("OriginalPointList")) {
  417. child.OriginalPointList.map(node => {
  418. let obj2 = {
  419. id: this.createRandomId(),
  420. topic: `${node.Description}(${node.Address}):${node.Data.Time}-${node.Data.Data}-${node.Data.Unit}`,
  421. expanded: false,
  422. children: [],
  423. DataQuality: item.DataQuality
  424. }
  425. if (node.hasOwnProperty("InfoList")) {
  426. node.InfoList.map(node1 => {
  427. let obj3 = {
  428. id: this.createRandomId(),
  429. expanded: false,
  430. topic: `${node1.EquipmentMark}-${node1.InfomationPoint}(${node1.MeterFunc}):${node1.Data.Time}-${node1.Data.Data}-${node1.Data.Unit}`,
  431. children: [],
  432. DataQuality: item.DataQuality
  433. }
  434. obj2.children.push(obj3)
  435. })
  436. }
  437. obj1.children.push(obj2)
  438. })
  439. }
  440. return obj1
  441. })
  442. }
  443. return obj
  444. }
  445. if (item.hasOwnProperty("CheckTodos")) {
  446. let obj = {
  447. id: this.createRandomId(),
  448. topic: `${item.SpecialtySystem}(${item.PointCount})`,
  449. expanded: false,
  450. children: [],
  451. DataQuality: item.DataQuality
  452. }
  453. obj.children = item.CheckTodos.map(node => {
  454. return {
  455. id: this.createRandomId(),
  456. topic: `${node.Description}(${node.Address})`,
  457. DataQuality: item.DataQuality
  458. }
  459. })
  460. return obj
  461. }
  462. })
  463. },
  464. createRandomId() {
  465. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  466. }
  467. },
  468. components: {
  469. jsMindComponent
  470. }
  471. }
  472. </script>
  473. <style lang="scss">
  474. .steps4 {
  475. flex: 1;
  476. display: flex;
  477. flex-flow: column;
  478. .btns-view {
  479. height: 40px;
  480. line-height: 40px;
  481. margin-bottom: 10px;
  482. text-align: right;
  483. padding: 0 10px;
  484. }
  485. .point-border {}
  486. .jsmind-container {
  487. flex: 1;
  488. }
  489. }
  490. </style>