Skip to content

V
vue-gojs
Commit 1736b783 by 吴斌
Options

update

parent d2ec894d
Showing with 31 additions and 31 deletions
src/App.vue
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="w-[400px] h-full border-1 border-black rounded border-solid"> <div class="w-[400px] h-full border-1 border-black rounded border-solid">
<el-collapse> <el-collapse>
<el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name> <el-collapse-item class="m-2" v-for="category in categoryList" :title=category.name>
<SourceCollapse class="w-full h-[240px] m-4" :category="category.key"></SourceCollapse> <SourceCollapse class="w-full h-[240px] m-4" :picture_category="category.key"></SourceCollapse>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
</div> </div>
...@@ -236,16 +236,16 @@ function importData() { ...@@ -236,16 +236,16 @@ function importData() {
myDiagram.model = go.Model.fromJson( myDiagram.model = go.Model.fromJson(
{ "class": "GraphLinksModel", { "class": "GraphLinksModel",
"nodeDataArray": [ "nodeDataArray": [
{"name":"压缩机","category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50"}, {"name":"压缩机","picture_category":"ammonia","img":"src/assets/models/ammonia/压缩机.svg","key":-7,"loc":"-460 120","angle":90,"img_size":"50 50"},
{"name":"冷却器-2","category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-320 120","img_size":"50 50","angle":180}, {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-320 120","img_size":"50 50","angle":180},
{"name":"换热器","category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"50 50"}, {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-3,"loc":"-170 130","img_size":"50 50"},
{"name":"换热器","category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 230","img_size":"50 50"}, {"name":"换热器","picture_category":"ammonia","img":"src/assets/models/ammonia/换热器.svg","key":-4,"loc":"-170 230","img_size":"50 50"},
{"name":"氨分离罐","category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 340","angle":180,"img_size":"70 70"}, {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 340","angle":180,"img_size":"70 70"},
{"name":"冷却器-2","category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270}, {"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270},
{"name":"冷却器","category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-310 -50","img_size":"50 60"}, {"name":"冷却器","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器.svg","key":-5,"loc":"-310 -50","img_size":"50 60"},
{"name":"氨分离罐","category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90"}, {"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-9,"loc":"-460 -50","angle":270,"img_size":"90 90"},
{"name":"合成塔","category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240"}, {"name":"合成塔","picture_category":"ammonia","img":"src/assets/models/ammonia/合成塔.svg","key":-2,"loc":"-20 20","img_size":"240 240"},
{"name":"开工炉","category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20"} {"name":"开工炉","picture_category":"ammonia","img":"src/assets/models/ammonia/开工炉.svg","key":-10,"loc":"200 20"}
], ],
"linkDataArray": [ "linkDataArray": [
{"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":""}, {"from":-7,"to":-6,"points":[-435,120,-425,120,-390,120,-390,120,-355,120,-345,120],"from_text":"","to_text":"","middle_text":""},
......
src/components/source-panel/source-collapse.vue
<template> <template>
<div :id="category"></div> <div :id="picture_category"></div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
...@@ -12,7 +12,7 @@ import {picModel} from '../../kit/ModelData.ts' ...@@ -12,7 +12,7 @@ import {picModel} from '../../kit/ModelData.ts'
const props = defineProps({ const props = defineProps({
category: { picture_category: {
type: String, type: String,
default: 'valve' default: 'valve'
} }
...@@ -22,13 +22,13 @@ var sourcePalette: any = ref(null) ...@@ -22,13 +22,13 @@ var sourcePalette: any = ref(null)
var sourceModel:any = ref(null) var sourceModel:any = ref(null)
function init(){ function init(){
sourcePalette = GO(go.Palette, props.category, { sourcePalette = GO(go.Palette, props.picture_category, {
layout: GO(go.GridLayout, { alignment: go.GridLayout.Location }), layout: GO(go.GridLayout, { alignment: go.GridLayout.Location }),
nodeTemplate: SourcePictureNodeTemplate, nodeTemplate: SourcePictureNodeTemplate,
allowZoom: false allowZoom: false
}) })
sourceModel.value = picModel.filter((item:any) => { sourceModel.value = picModel.filter((item:any) => {
return item.category === props.category return item.picture_category === props.picture_category
}) })
sourcePalette.model = new go.GraphLinksModel(sourceModel.value) sourcePalette.model = new go.GraphLinksModel(sourceModel.value)
} }
......
src/kit/ModelData.ts
...@@ -7,20 +7,20 @@ export const picCategory = [ ...@@ -7,20 +7,20 @@ export const picCategory = [
] ]
export const picModel = [ export const picModel = [
{ name: "computer1", category: "computer", img: "src/assets/models/computer/电脑.svg"}, { name: "computer1", picture_category: "computer", img: "src/assets/models/computer/电脑.svg"},
{ name: "valve2", category: "valve", img: "src/assets/models/valve/阀-2.svg"}, { name: "valve2", picture_category: "valve", img: "src/assets/models/valve/阀-2.svg"},
{ name: "valve3", category: "valve", img: "src/assets/models/valve/阀.svg"}, { name: "valve3", picture_category: "valve", img: "src/assets/models/valve/阀.svg"},
{ name: "valve4", category: "valve", img: "src/assets/models/valve/阀门-01.svg"}, { name: "valve4", picture_category: "valve", img: "src/assets/models/valve/阀门-01.svg"},
{ name: "valve5", category: "valve", img: "src/assets/models/valve/阀门2-01.svg"}, { name: "valve5", picture_category: "valve", img: "src/assets/models/valve/阀门2-01.svg"},
{name: "pump1", category: "pump", img: "src/assets/models/pump/立式泵.svg"}, {name: "pump1", picture_category: "pump", img: "src/assets/models/pump/立式泵.svg"},
{name: "pump2", category: "pump", img: "src/assets/models/pump/卧式泵.svg"}, {name: "pump2", picture_category: "pump", img: "src/assets/models/pump/卧式泵.svg"},
{name: "pump3", category: "pump", img: "src/assets/models/pump/旋转泵.svg"}, {name: "pump3", picture_category: "pump", img: "src/assets/models/pump/旋转泵.svg"},
{name: "pump4", category: "pump", img: "src/assets/models/pump/油池泵.svg"}, {name: "pump4", picture_category: "pump", img: "src/assets/models/pump/油池泵.svg"},
{name:"氨分离罐", category:"ammonia", img:"src/assets/models/ammonia/氨分离罐.svg"}, {name:"氨分离罐", picture_category:"ammonia", img:"src/assets/models/ammonia/氨分离罐.svg"},
{name:"合成塔", category:"ammonia", img:"src/assets/models/ammonia/合成塔.svg"}, {name:"合成塔", picture_category:"ammonia", img:"src/assets/models/ammonia/合成塔.svg"},
{name:"换热器", category:"ammonia", img:"src/assets/models/ammonia/换热器.svg"}, {name:"换热器", picture_category:"ammonia", img:"src/assets/models/ammonia/换热器.svg"},
{name:"开工炉", category:"ammonia", img:"src/assets/models/ammonia/开工炉.svg"}, {name:"开工炉", picture_category:"ammonia", img:"src/assets/models/ammonia/开工炉.svg"},
{name:"冷却器", category:"ammonia", img:"src/assets/models/ammonia/冷却器.svg"}, {name:"冷却器", picture_category:"ammonia", img:"src/assets/models/ammonia/冷却器.svg"},
{name:"冷却器-2", category:"ammonia", img:"src/assets/models/ammonia/冷却器-2.svg"}, {name:"冷却器-2", picture_category:"ammonia", img:"src/assets/models/ammonia/冷却器-2.svg"},
{name:"压缩机", category:"ammonia", img:"src/assets/models/ammonia/压缩机.svg"}, {name:"压缩机", picture_category:"ammonia", img:"src/assets/models/ammonia/压缩机.svg"},
] ]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment