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 @@
<div class="w-[400px] h-full border-1 border-black rounded border-solid">
<el-collapse>
<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>
</div>
......@@ -236,16 +236,16 @@ function importData() {
myDiagram.model = go.Model.fromJson(
{ "class": "GraphLinksModel",
"nodeDataArray": [
{"name":"压缩机","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":"换热器","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":"氨分离罐","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":"冷却器","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":"合成塔","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":-7,"loc":"-460 120","angle":90,"img_size":"50 50"},
{"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-6,"loc":"-320 120","img_size":"50 50","angle":180},
{"name":"换热器","picture_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":-4,"loc":"-170 230","img_size":"50 50"},
{"name":"氨分离罐","picture_category":"ammonia","img":"src/assets/models/ammonia/氨分离罐.svg","key":-1,"loc":"-170 340","angle":180,"img_size":"70 70"},
{"name":"冷却器-2","picture_category":"ammonia","img":"src/assets/models/ammonia/冷却器-2.svg","key":-8,"loc":"-170 0","img_size":"50 50","angle":270},
{"name":"冷却器","picture_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":-9,"loc":"-460 -50","angle":270,"img_size":"90 90"},
{"name":"合成塔","picture_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":-10,"loc":"200 20"}
],
"linkDataArray": [
{"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>
<div :id="category"></div>
<div :id="picture_category"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
......@@ -12,7 +12,7 @@ import {picModel} from '../../kit/ModelData.ts'
const props = defineProps({
category: {
picture_category: {
type: String,
default: 'valve'
}
......@@ -22,13 +22,13 @@ var sourcePalette: any = ref(null)
var sourceModel:any = ref(null)
function init(){
sourcePalette = GO(go.Palette, props.category, {
sourcePalette = GO(go.Palette, props.picture_category, {
layout: GO(go.GridLayout, { alignment: go.GridLayout.Location }),
nodeTemplate: SourcePictureNodeTemplate,
allowZoom: false
})
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)
}
......
src/kit/ModelData.ts
......@@ -7,20 +7,20 @@ export const picCategory = [
]
export const picModel = [
{ name: "computer1", category: "computer", img: "src/assets/models/computer/电脑.svg"},
{ name: "valve2", category: "valve", img: "src/assets/models/valve/阀-2.svg"},
{ name: "valve3", category: "valve", img: "src/assets/models/valve/阀.svg"},
{ name: "valve4", category: "valve", img: "src/assets/models/valve/阀门-01.svg"},
{ name: "valve5", category: "valve", img: "src/assets/models/valve/阀门2-01.svg"},
{name: "pump1", category: "pump", img: "src/assets/models/pump/立式泵.svg"},
{name: "pump2", category: "pump", img: "src/assets/models/pump/卧式泵.svg"},
{name: "pump3", category: "pump", img: "src/assets/models/pump/旋转泵.svg"},
{name: "pump4", category: "pump", img: "src/assets/models/pump/油池泵.svg"},
{name:"氨分离罐", category:"ammonia", img:"src/assets/models/ammonia/氨分离罐.svg"},
{name:"合成塔", category:"ammonia", img:"src/assets/models/ammonia/合成塔.svg"},
{name:"换热器", category:"ammonia", img:"src/assets/models/ammonia/换热器.svg"},
{name:"开工炉", category:"ammonia", img:"src/assets/models/ammonia/开工炉.svg"},
{name:"冷却器", category:"ammonia", img:"src/assets/models/ammonia/冷却器.svg"},
{name:"冷却器-2", category:"ammonia", img:"src/assets/models/ammonia/冷却器-2.svg"},
{name:"压缩机", category:"ammonia", img:"src/assets/models/ammonia/压缩机.svg"},
{ name: "computer1", picture_category: "computer", img: "src/assets/models/computer/电脑.svg"},
{ name: "valve2", picture_category: "valve", img: "src/assets/models/valve/阀-2.svg"},
{ name: "valve3", picture_category: "valve", img: "src/assets/models/valve/阀.svg"},
{ name: "valve4", picture_category: "valve", img: "src/assets/models/valve/阀门-01.svg"},
{ name: "valve5", picture_category: "valve", img: "src/assets/models/valve/阀门2-01.svg"},
{name: "pump1", picture_category: "pump", img: "src/assets/models/pump/立式泵.svg"},
{name: "pump2", picture_category: "pump", img: "src/assets/models/pump/卧式泵.svg"},
{name: "pump3", picture_category: "pump", img: "src/assets/models/pump/旋转泵.svg"},
{name: "pump4", picture_category: "pump", img: "src/assets/models/pump/油池泵.svg"},
{name:"氨分离罐", picture_category:"ammonia", img:"src/assets/models/ammonia/氨分离罐.svg"},
{name:"合成塔", picture_category:"ammonia", img:"src/assets/models/ammonia/合成塔.svg"},
{name:"换热器", picture_category:"ammonia", img:"src/assets/models/ammonia/换热器.svg"},
{name:"开工炉", picture_category:"ammonia", img:"src/assets/models/ammonia/开工炉.svg"},
{name:"冷却器", picture_category:"ammonia", img:"src/assets/models/ammonia/冷却器.svg"},
{name:"冷却器-2", picture_category:"ammonia", img:"src/assets/models/ammonia/冷却器-2.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