123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491 |
- <template>
- <div class="h100 steps4">
- <div class="btns-view">
- <el-button @click="checkedAll">获取展开点位数据</el-button>
- <el-button @click="clickTabs">获取全部点位数据</el-button>
- </div>
- <div class="center point-border">
- <el-radio-group v-model="activeIndex" @change="clickTabs">
- <el-radio-button label="0">从物理世界角度检查</el-radio-button>
- <el-radio-button label="1">从原始点位表角度检查</el-radio-button>
- </el-radio-group>
- </div>
- <div class="jsmind-container" v-show="activeIndex == 0">
- <js-mind-component ref="jsmind"></js-mind-component>
- </div>
- <div class="jsmind-container" v-show="activeIndex == 1">
- <js-mind-component ref="jsmind1"></js-mind-component>
- </div>
- <!-- <el-tabs type="border-card" @tab-click="clickTabs" class="tabs-h" tab-position="bottom">
- <el-tab-pane>
- <span slot="label">
- 从物理世界角度检查
- </span>
-
- </el-tab-pane>
- <el-tab-pane class="h100" label="从原始点位表角度检查">
- <js-mind-component ref="jsmind1" @openNode="openNode"></js-mind-component>
- </el-tab-pane>
- </el-tabs> -->
- </div>
- </template>
- <script>
- import {
- mapGetters,
- mapActions
- } from "vuex";
- import jsMindComponent from "@/components/common/jsmind"
- import {
- queryAllRela,
- platformEqJsMind,
- platformIdentJsMind,
- platformInfoJsMind,
- platformPointJsMind,
- queryAllPointRela,
- pointPostJsMind,
- pointInfoJsMind,
- pointTypeJsMind,
- } from "@/fetch/point_http"
- export default {
- name: "steps4",
- data() {
- return {
- jsMind: "",
- activeIndex: 0,
- mindArr: []
- }
- },
- computed: {
- ...mapGetters("project", [
- "datasourceId",
- "protocolType",
- "dataName"
- ]),
- projectId () {
- return this.$store.getters['layout/projectId']
- }
- },
- created() {},
- mounted() {
- this.clickTabs({
- index: this.activeIndex
- })
- },
- methods: {
- checkedAll() {
- this.mindArr[this.activeIndex].expand_all()
- },
- //节点选中事件
- // async openNode(node) {
- // //次级列表children,自定义id ownId,请求参数,请求函数ajaxFun,显示子集的文案text,子集的data
- // let children, ownId, param, ajaxFun, text, nodeOwnData;
- // this.jsMind.options.editable = true
- // console.log(node.data)
- // //删除已有的假节点
- // this.removeNode(node, this.jsMind)
- // if (!!node.data && node.data.pointType == "system") {
- // //系统级
- // param = {
- // DataSourceId: this.datasourceId,
- // PhysicalSystem: node.data.name
- // }
- // ajaxFun = this.activeIndex == 0 ? platformEqJsMind : pointTypeJsMind
- // console.log(ajaxFun)
- // children = await this.getList(param, ajaxFun)
- // console.log(children)
- // children.map(item => {
- // text = item.EquipmentType || `${item.Description}(${item.Address})`
- // nodeOwnData = {
- // pointType: "eq",
- // name: item.EquipmentType || item.Description,
- // systemName: node.data.name
- // }
- // ownId = this.createRandomId()
- // this.jsMind.add_node(node, ownId, text, nodeOwnData)
- // this.addNodeDefault(ownId)
- // })
- // }
- // if (!!node.data && node.data.pointType == "eq") {
- // //标识级
- // param = {
- // DataSourceId: this.datasourceId,
- // EquipmentType: node.data.name,
- // PhysicalSystem: node.data.systemName
- // }
- // ajaxFun = this.activeIndex == 0 ? platformIdentJsMind : pointPostJsMind
- // children = await this.getList(param, ajaxFun)
- // if (!children) {
- // return false
- // }
- // console.log(children)
- // children.map(item => {
- // text = this.activeIndex == 0 ? item.DataQuality + item.EquipmentMark : `${item.Description}(${item.Address}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`
- // nodeOwnData = {
- // pointType: "ident",
- // name: this.activeIndex == 0 ? item.EquipmentMark : item.Description,
- // systemName: node.data.systemName,
- // EquipmentType: node.data.name
- // }
- // console.log(text, nodeOwnData)
- // ownId = this.createRandomId()
- // this.jsMind.add_node(node, ownId, text, nodeOwnData)
- // this.addNodeDefault(ownId)
- // })
- // }
- // if (!!node.data && node.data.pointType == "ident") {
- // //信息级
- // param = {
- // DataSourceId: this.datasourceId,
- // EquipmentType: node.data.EquipmentType,
- // PhysicalSystem: node.data.systemName,
- // [this.activeIndex == 0 ? "EquipmentMark" : "Description"]: node.data.name
- // }
- // ajaxFun = this.activeIndex == 0 ? platformInfoJsMind : pointInfoJsMind
- // children = await this.getList(param, ajaxFun)
- // if (!children) {
- // return false
- // }
- // console.log(children)
- // children.map(item => {
- // ownId = this.createRandomId()
- // text = `${item.InfomationPoint}(${item.MeterFunc}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`
- // nodeOwnData = {
- // pointType: "point",
- // InfomationPoint: item.InfomationPoint,
- // EquipmentMark: node.data.name,
- // systemName: node.data.systemName,
- // EquipmentType: node.data.EquipmentType
- // }
- // this.jsMind.add_node(node, ownId, text, nodeOwnData)
- // if (this.activeIndex == 0) {
- // console.log(111)
- // this.addNodeDefault(ownId)
- // }
- // })
- // }
- // if (!!node.data && node.data.pointType == "point") {
- // //信息级
- // children = await this.getList({
- // DataSourceId: this.datasourceId,
- // EquipmentType: node.data.EquipmentType,
- // PhysicalSystem: node.data.systemName,
- // EquipmentMark: node.data.EquipmentMark,
- // InfomationPoint: node.data.InfomationPoint
- // }, platformPointJsMind)
- // if (!children) {
- // return false
- // }
- // console.log(children)
- // children.map(item => {
- // ownId = this.createRandomId()
- // this.jsMind.add_node(node, ownId, `${item.Description}(${item.Address}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`, {
- // pointType: "point",
- // InfomationPoint: item.InfomationPoint,
- // EquipmentMark: node.data.name,
- // systemName: node.data.systemName,
- // EquipmentType: node.data.EquipmentType
- // })
- // })
- // }
- // },
- //统一添加默认级数
- addNodeDefault(ownId) {
- //给下一级添加默认的级数
- this.jsMind.add_node(ownId, this.createRandomId(), "")
- //收起该节点下的子节点
- this.jsMind.collapse_node(ownId)
- },
- /**
- * 删除某个节点下所有的节点
- * @param {该节点} node
- * @param {jsmind实例} jsmind
- */
- removeNode(node, jsmind) {
- if (!!node.children) {
- node.children.map(item => {
- this.jsMind.remove_node(item)
- })
- }
- },
- //获取接口封装
- getList(param, fun) {
- return new Promise((resolve, reject) => {
- fun(
- param,
- res => {
- console.log(res)
- resolve(res.Content)
- }
- )
- })
- },
- clickTabs(val) {
- this.activeIndex = this.activeIndex
- var data = {
- id: "root",
- topic: this.dataName,
- children: []
- },
- mind = {
- /* 元数据,定义思维导图的名称、作者、版本等信息 */
- meta: {
- name: "jsMind-demo-tree",
- author: "sagacloud",
- version: "0.2"
- },
- /* 数据格式声明 */
- format: "node_tree",
- /* 数据内容 */
- data: data
- },
- id, func;
- func = this.activeIndex == 0 ? queryAllRela : queryAllPointRela
- func({
- DataSourceId: this.datasourceId
- }, res => {
- console.log(res)
- data.children = res.Content.map(item => {
- id = this.createRandomId();
- return {
- id: id,
- topic: `${item.SpecialtySystem}(${item.PointCount})`,
- expanded: false,
- pointType: "system",
- name: item.SpecialtySystem,
- // children: [{
- // id: this.createRandomId()
- // }]
- }
- })
- console.log(data, "data")
- this.$nextTick(_ => {
- if (!!this.mindArr[this.activeIndex]) {
- this.jsMind = this.mindArr[this.activeIndex]
- return false
- }
- // console.log(val.index, this.$refs.jsmind, this.$refs.jsmind1)
- if (this.activeIndex == 0) {
- data.children = this.delPlatform(res.Content)
- console.log(data.children)
- this.jsMind = this.$refs.jsmind.initData({}, mind)
- } else {
- data.children = this.delPoint(res.Content)
- console.log(data.children)
- this.jsMind = this.$refs.jsmind1.initData({}, mind)
- }
- this.mindArr[this.activeIndex] = this.jsMind
- this.setBgColor([data], this.jsMind)
- this.jsMind.options.editable = false
- })
- })
- },
- delPlatform(arr) {
- return arr.map(item => {
- if (item.hasOwnProperty('EquipmentTypeList')) {
- let obj = {
- id: this.createRandomId(),
- topic: `${item.SpecialtySystem}(${item.PointCount})`,
- expanded: false,
- DataQuality: item.DataQuality
- }
- if (item.hasOwnProperty("EquipmentTypeList")) {
- obj.children = []
- obj.children = item.EquipmentTypeList.map(child => {
- let obj1 = {
- id: this.createRandomId(),
- topic: `${child.EquipmentType}`,
- children: [],
- expanded: false,
- DataQuality: child.DataQuality
- }
- if (child.hasOwnProperty("EquipmentMarkList")) {
- child.EquipmentMarkList.map(node => {
- let obj2 = {
- id: this.createRandomId(),
- topic: `${node.EquipmentMark}`,
- expanded: false,
- children: [],
- DataQuality: node.DataQuality
- }
- if (node.hasOwnProperty("InfoList")) {
- node.InfoList.map(node1 => {
- let obj3 = {
- id: this.createRandomId(),
- expanded: false,
- topic: `${node1.InfomationPoint}(${node1.MeterFunc}):${node1.Data.Time}-${node1.Data.Data}-${node1.Data.Unit}`,
- children: [],
- DataQuality: node1.DataQuality
- }
- if (node1.hasOwnProperty("PointList")) {
- node1.PointList.map(node2 => {
- let obj4 = {
- id: this.createRandomId(),
- DataQuality: node2.DataQuality,
- topic: `${node2.Description}(${node2.Address}):${node2.Data.Time}-${node2.Data.Data}-${node2.Data.Unit}`,
- }
- obj3.children.push(obj4)
- })
- }
- obj2.children.push(obj3)
- })
- }
- obj1.children.push(obj2)
- })
- }
- return obj1
- })
- }
- return obj
- }
- if (item.hasOwnProperty("CheckTodos")) {
- let obj = {
- id: this.createRandomId(),
- topic: `${item.SpecialtySystem}(${item.PointCount})`,
- expanded: false,
- DataQuality: item.DataQuality,
- children: []
- }
- obj.children = item.CheckTodos.map(node => {
- return {
- id: this.createRandomId(),
- topic: `${node.Description}(${node.Address})`,
- DataQuality: node.DataQuality
- }
- })
- return obj
- }
- })
- },
- setBgColor(data, jm) {
- data.map(item => {
- if (item.DataQuality) {
- jm.set_node_color(item.id, "#e6a23c", "#fff")
- }
- if (item.children && item.children.length) {
- this.setBgColor(item.children, jm)
- }
- })
- },
- changeData(arr) {
- console.log(arr)
- if (arr && arr instanceof Array) {
- return arr.map(item => {
- if (item.children && item.children.length) {
- return {
- id: item.id,
- topic: item.topic,
- expanded: item.expanded,
- children: this.changeData(item.children),
- theme: item.DataQuality ? "orange" : "greensea"
- };
- } else {
- return {
- id: item.id,
- expanded: item.expanded,
- topic: item.topic,
- theme: item.DataQuality ? "orange" : "greensea"
- };
- }
- });
- } else {
- return {
- id: "root",
- topic: arr.topic,
- children: this.changeData(arr.children)
- };
- }
- },
- delPoint(arr) {
- return arr.map(item => {
- if (item.hasOwnProperty('EquipmentTypeList')) {
- let obj = {
- id: this.createRandomId(),
- topic: `${item.SpecialtySystem}(${item.PointCount})`,
- expanded: false,
- DataQuality: item.DataQuality
- }
- if (item.hasOwnProperty("EquipmentTypeList")) {
- obj.children = []
- obj.children = item.EquipmentTypeList.map(child => {
- let obj1 = {
- id: this.createRandomId(),
- topic: `${child.EquipmentType}`,
- children: [],
- expanded: false,
- DataQuality: item.DataQuality
- }
- if (child.hasOwnProperty("OriginalPointList")) {
- child.OriginalPointList.map(node => {
- let obj2 = {
- id: this.createRandomId(),
- topic: `${node.Description}(${node.Address}):${node.Data.Time}-${node.Data.Data}-${node.Data.Unit}`,
- expanded: false,
- children: [],
- DataQuality: item.DataQuality
- }
- if (node.hasOwnProperty("InfoList")) {
- node.InfoList.map(node1 => {
- let obj3 = {
- id: this.createRandomId(),
- expanded: false,
- topic: `${node1.EquipmentMark}-${node1.InfomationPoint}(${node1.MeterFunc}):${node1.Data.Time}-${node1.Data.Data}-${node1.Data.Unit}`,
- children: [],
- DataQuality: item.DataQuality
- }
- obj2.children.push(obj3)
- })
- }
- obj1.children.push(obj2)
- })
- }
- return obj1
- })
- }
- return obj
- }
- if (item.hasOwnProperty("CheckTodos")) {
- let obj = {
- id: this.createRandomId(),
- topic: `${item.SpecialtySystem}(${item.PointCount})`,
- expanded: false,
- children: [],
- DataQuality: item.DataQuality
- }
- obj.children = item.CheckTodos.map(node => {
- return {
- id: this.createRandomId(),
- topic: `${node.Description}(${node.Address})`,
- DataQuality: item.DataQuality
- }
- })
- return obj
- }
- })
- },
- createRandomId() {
- return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
- }
- },
- components: {
- jsMindComponent
- }
- }
- </script>
- <style lang="scss">
- .steps4 {
- flex: 1;
- display: flex;
- flex-flow: column;
- .btns-view {
- height: 40px;
- line-height: 40px;
- margin-bottom: 10px;
- text-align: right;
- padding: 0 10px;
- }
- .point-border {}
- .jsmind-container {
- flex: 1;
- }
- }
- </style>
|