一. 应用效果
两个实例代码 放在最下面
1. 实例一
2. 实例二
官方文档： Production Process Viewer
中文文档： GoJS 图形组件简介 | GoJS
二. 基础用法
1. 安装依赖
如果想去掉 左上角水印 可以下载 2.1.48版本 网上去除这个版本水印的方法比较多
javascript
npm i gojs -S2. 引入
javascript
import go from 'gojs' //在export default前3. 创建画布
他类似于 echarts 需要一个盒子装载
html
<div class="inCharts" id="myDiagramDiv">
</div>4. 挂载
javascript
var myDiagram = $(go.Diagram, "myDiagramDiv",//为DIV.HTML元素创建一个画布
{
//设置画布配置
initialAutoScale: go.Diagram.Uniform, // 缩放以显示所有内容
maxSelectionCount: 1, // 不要让用户一次选择多于一个的东西
isReadOnly: true, // 只读 不可拖动
contentAlignment: go.Spot.Center, // 位置在中间
// layout: $(go.TreeLayout,
// { angle: 90, layerSpacing: 35 })
});5. 修改连线样式
比方做成官网这种动态线
javascript
myDiagram.linkTemplate =
$(go.Link,
{
layerName: "Background",
routing: go.Link.Orthogonal,
corner: 15,
reshapable: true,
resegmentable: true,
},
$(go.Shape, new go.Binding("stroke", "color"), { isPanelMain: true, strokeWidth: 10 }),
$(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40] })
);
javascript
var opacity = 1;
var down = true;
function loop() {
var diagram = myDiagram;
setTimeout(() => {
var oldskips = diagram.skipsUndoManager;
diagram.skipsUndoManager = true;
diagram.links.each(link => {
var shape = link.findObject("PIPE");
var off = shape.strokeDashOffset - 3;
// animate (move) the stroke dash
shape.strokeDashOffset = (off <= 0) ? 60 : off;
// animte (strobe) the opacity:
if (down) opacity = opacity - 0.01;
else opacity = opacity + 0.003;
if (opacity <= 0) { down = !down; opacity = 0; }
if (opacity > 1) { down = !down; opacity = 1; }
shape.opacity = opacity;
});
diagram.skipsUndoManager = oldskips;
loop();
}, 60);
}
loop()6. 添加节点
javascript
myDiagram.nodeTemplate = $(go.Node, "auto",)
javascript
$(go.Panel,) // 相当于一个div
$(go.Picture,) // 图片
$(go.TextBlock) // 文本
$("Button") // 按钮7. 插槽
每个节点下方的内容会不同 这个时候就出现了节点这个概念
javascript
var itemtemplates = new go.Map()
// 如果状态为pic 则新增一个图片
itemtemplates.add("pic",
$(go.Panel,
$(go.Picture,
{ margin: 10, width: 30, height: 30, background: 'transparent' },
new go.Binding("source")))
);
// 如果状态为text 则新增一个文本
itemtemplates.add("text",
$(go.Panel,
$(go.TextBlock,
new go.Binding("text"))
));数据
javascript
diagram.model = new go.GraphLinksModel( [
{ key: "Alpha",
info: [
{ type: "text", text: "some text" },
{ type: "button", text: "Click me!", handler: "alert"}
]
},
{ key: "Beta",
info: [
{ type: "text", text: "first line" },
{ type: "button", text: "First Button", handler: "alert"},
{ type: "text", text: "second line" },
{ type: "button", text: "Second Button", handler: "alert" }
]
}
],[
{ from: "Alpha", to: "Beta" }
]);8. 组
javascript
diagram.model.nodeDataArray = [
{ key: "Alpha", isGroup: true },
{ key: "Beta", group: "Alpha" },
{ key: "Gamma", group: "Alpha", isGroup: true },
{ key: "Delta", group: "Gamma" },
{ key: "Epsilon", group: "Gamma" },
{ key: "Zeta", group: "Alpha" },
{ key: "Eta", group: "Alpha", isGroup: true},
{ key: "Theta", group: "Eta" }
];组样式 当在数据中 这行数据设置了isGroup: true则他使用的样式为下方
javascript
diagram.groupTemplate =
$(go.Group, "Vertical",
$(go.Panel, "Auto",
$(go.Shape, "RoundedRectangle", // 围绕着占位符Placeholder
{ parameter1: 14,
fill: "rgba(128,128,128,0.33)" }),
$(go.Placeholder, //占位符,表示所有构件的面积，
{ padding: 5}) // 添加内边距
),
$(go.TextBlock, // group title
{ alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" },
new go.Binding("text", "key"))
);三. 实例代码
1.实例一
html
<template>
<div class="charts" id="charts">
<div class="inCharts" id="myDiagramDiv">
</div>
<el-dialog v-model="isShow" width="500" draggable :modal="false">
<div style="margin-bottom: 20px;">
<el-radio-group v-model="nowChoow">
<el-radio-button v-for="(item, index) in allData" :label="item.lineDescribe" :key="index"
@click="changeData(item)" />
</el-radio-group>
</div>
<table style="width: 100%;" border="1" cellspacing="1">
<thead>
<tr>
<th colspan="2" id="lineTd">
<span style="float:left;margin-top:6px;">名称</span>
<span style="float:right;margin-top:-4px;">相</span>
</th>
<th>
A
</th>
<th>
B
</th>
<th>
C
</th>
<th>
总
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
电流(A)
</td>
<td class="orange">
{{ tableData.ycIa }}
</td>
<td class="green">
{{ tableData.ycIb }}
</td>
<td class="red">
{{ tableData.ycIc }}
</td>
<td>
-
</td>
</tr>
<tr>
<td colspan="2">
电压(V)
</td>
<td class="orange">
{{ tableData.ycUa }}
</td>
<td class="green">
{{ tableData.ycUb }}
</td>
<td class="red">
{{ tableData.ycUc }}
</td>
<td>
-
</td>
</tr>
<tr>
<td colspan="2">
<div>
电压(V)
</div>
<div>
AB/BC/CA
</div>
</td>
<td class="orange">
{{ tableData.ycUab }}
</td>
<td class="green">
{{ tableData.ycUbc }}
</td>
<td class="red">
{{ tableData.ycUca }}
</td>
<td>
-
</td>
</tr>
<tr>
<td colspan="2">
有功功率(kW)
</td>
<td class="orange">
{{ tableData.ycPa }}
</td>
<td class="green">
{{ tableData.ycPb }}
</td>
<td class="red">
{{ tableData.ycPc }}
</td>
<td class="fff">
{{ (tableData.ycPa + tableData.ycPb + tableData.ycPc).toFixed(2) }}
</td>
</tr>
<tr>
<td colspan="2">
无功功率(kVar)
</td>
<td class="orange">
{{ tableData.ycQa }}
</td>
<td class="green">
{{ tableData.ycQb }}
</td>
<td class="red">
{{ tableData.ycQc }}
</td>
<td class="fff">
{{ (tableData.ycQa + tableData.ycQb + tableData.ycQc).toFixed(2) }}
</td>
</tr>
<!-- <tr>
<td colspan="2">
视在功率(kVA)
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td rowspan="2">
总谐波
</td>
<td>
电流(%)
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td>
电压(%)
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td colspan="2">
功率因数
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td colspan="2">
本月电度(kwh)
</td>
<td class="fff" colspan="4">
</td>
</tr>
<tr>
<td colspan="2">
有功总电度(kWh)
</td>
<td class="fff" colspan="4">
</td>
</tr>
<tr>
<td colspan="2">
频率(Hz)
</td>
<td class="fff" colspan="4">
</td>
</tr> -->
</tbody>
</table>
</el-dialog>
<el-dialog v-model="showDetail" :title="title" width="500" draggable :modal="false" :show-close="false">
<el-form :model="form" label-width="120px">
<el-form-item label="用电量">
<span v-if="form.thisYearTotal">{{ form.thisYearTotal }}</span>
</el-form-item>
<el-form-item label="用电损耗">
<span v-if="form.thisYearLoss">{{ form.thisYearLoss }}</span>
</el-form-item>
<el-form-item label="温度">
<span v-if="form.temperature">{{ form.temperature }}</span>
</el-form-item>
<el-form-item label="湿度">
<span v-if="form.humidity">{{ form.humidity }}</span>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script setup>
// 引入 ref
import { ref, onMounted } from 'vue'
import { getDataYCRealTime, getEnergyLossTemperature } from "@/api/index"
import go from 'gojs' //在export default前
import { useRouter } from "vue-router";
const router = useRouter();
const nowChoow = ref("")
const allData = ref([])
const $ = go.GraphObject.make;
const width = ref('840px')
const height = ref("180px")
const isShow = ref(false)
const showDetail = ref(false)
const tableData = ref({})
const timeOut = ref('')
const form = ref({})
const title = ref("")
const mapPicSrc = ref(new URL(`@/assets/charts/bdf.png`, import.meta.url).href)
const DetailSrc = ref(new URL(`@/assets/charts/detail.png`, import.meta.url).href)
const data = ref([
{ key: "0", name: "国家电网", source: '', loc: '100 -100', width: 0, height: 0 },
{
key: "19", parent: "0", name: "能源中心10KV(总配电室)", source: mapPicSrc.value, loc: '0 0', color: '#36DB55', width: 300, height: 60
},
{
key: "1", parent: "19", name: "1#变电所(公共教学楼)", source: mapPicSrc.value, loc: '600 -400', color: '#36DB55', lineCode: "A01,B01", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "2", parent: "19", name: "2#变电所(科教楼二)", source: mapPicSrc.value, loc: '600 -300', color: '#36DB55', lineCode: "A02,B02", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "3", parent: "19", name: "3#变电所(科教楼三)", source: mapPicSrc.value, loc: '600 -200', color: '#F54D4D', lineCode: "B03,A03", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "4", parent: "19", name: "4#变电所(教学服务中心)", source: mapPicSrc.value, loc: '600 -100', color: '#36DB55', lineCode: "B04,A04", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "5", parent: "19", name: "5#变电所(科教楼)", source: mapPicSrc.value, loc: '600 0', color: '#36DB55', lineCode: "B05,A05", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "6", parent: "19", name: "6#变电所(科教楼八)", source: mapPicSrc.value, loc: '-600 -400', color: '#36DB55', lineCode: "A06,B06", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "7", parent: "19", name: "7#变电所(冷冻机房)", source: mapPicSrc.value, loc: '-600 -300', color: '#36DB55', lineCode: "B07,A07", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "8", parent: "19", name: "8#变电所(科教楼五)", source: mapPicSrc.value, loc: '-600 -200', color: '#F54D4D', lineCode: "B08,A08", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "9", parent: "19", name: "9#变电所(科教楼四)", source: mapPicSrc.value, loc: '-600 -100', color: '#D6CB52', lineCode: "B09,A09", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "10", parent: "19", name: "10#变电所(科教楼六)", source: mapPicSrc.value, loc: '-600 0', color: '#36DB55', lineCode: "B10,A10", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "18", parent: "19", name: "2#高压分配电室(图书馆)", source: mapPicSrc.value, loc: '0 160', color: '#F54D4D', lineCode: "A20,B20", width: 300, height: 60
},
{
key: "12", parent: "18", name: "12#变电所(学生一食堂)", source: mapPicSrc.value, loc: '600 100', color: '#36DB55', lineCode: "A12,B12", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "13", parent: "18", name: "13#变电所(学生二食堂)", source: mapPicSrc.value, loc: '600 200', color: '#36DB55', lineCode: "A13,B13", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "14", parent: "18", name: "14#变电所(教职工食堂)", source: mapPicSrc.value, loc: '600 300', color: '#D6CB52', lineCode: "A14,B14", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "15", parent: "18", name: "15#变电所(体育馆)", source: mapPicSrc.value, loc: '-600 100', color: '#36DB55', lineCode: "B15,A15", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "16", parent: "18", name: "16#变电所(图书馆)", source: mapPicSrc.value, loc: '-600 200', color: '#36DB55', lineCode: "B16,A16", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
},
{
key: "17", parent: "18", name: "17#变电所(活动中心)", source: mapPicSrc.value, loc: '-600 300', color: '#D6CB52', lineCode: "B17,A17", width: 300, height: 60, info: [
{ type: "button", source: DetailSrc.value }
]
}
])
const changeData = (data) => {
tableData.value = data
}
const inTk = (e, obj) => {
// 阻止单机事件
clearTimeout(timeOut.value)
title.value = obj.part.data.name
// console.log(obj.part.data);
getEnergyLossTemperature(obj.part.data.key).then(({ data }) => {
if (data) {
form.value = data
} else {
form.value = {}
}
showDetail.value = true
})
}
const init = () => {
var myDiagram = $(go.Diagram, "myDiagramDiv",//为DIV.HTML元素创建一个画布
{
//设置画布配置
initialAutoScale: go.Diagram.Uniform, // 缩放以显示所有内容
maxSelectionCount: 1, // 不要让用户一次选择多于一个的东西
isReadOnly: true,
contentAlignment: go.Spot.Center,
// layout: $(go.TreeLayout,
// { angle: 90, layerSpacing: 35 })
});
// Horizontal
var itemtemplates = new go.Map()
itemtemplates.add("text",
$(go.Panel,
$(go.TextBlock,
new go.Binding("text"))
));
// the template when type == "button"
itemtemplates.add("button",
$("Button",
{
margin: 2,
'ButtonBorder.strokeWidth': 0,
'ButtonBorder.fill': '#fff',
click: inTk,
},
$(go.Picture, new go.Binding("source"), { margin: 1, width: 20, height: 20, background: 'transparent' },)),);
myDiagram.nodeTemplate =
$(go.Node, "auto",
$(go.Shape,
new go.Binding("width"),
new go.Binding("height"),
{
figure: "Rectangle", margin: 0, fill: 'transparent', stroke: "#C4C6C4", strokeWidth: 1,
}),
new go.Binding("location", "loc", go.Point.parse),
$(go.Panel, 'Horizontal',
{ background: "transparent", },
$(go.Picture,
{ margin: 10, background: 'transparent' },
new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 6, stroke: "#000", font: "bold 16px sans-serif" },
new go.Binding("text", "name")),
$(go.Panel, "Vertical",
{
margin: 3,
defaultAlignment: go.Spot.Left,
itemCategoryProperty: "type", // this property controls the template used
itemTemplateMap: itemtemplates // map was defined above
},
new go.Binding("itemArray", "info"))
// $("Button",
// {
// margin: 2,
// click: inTk
// },
// $(go.Picture, new go.Binding("source"), { margin: 1, width: 12, height: 12, background: 'transparent' },)),
),
// $("TreeExpanderButton",
// { alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top },
// { visible: true })
);
var opacity = 1;
var down = true;
function loop() {
var diagram = myDiagram;
setTimeout(() => {
var oldskips = diagram.skipsUndoManager;
diagram.skipsUndoManager = true;
diagram.links.each(link => {
var shape = link.findObject("PIPE");
var off = shape.strokeDashOffset - 3;
// animate (move) the stroke dash
shape.strokeDashOffset = (off <= 0) ? 60 : off;
// animte (strobe) the opacity:
if (down) opacity = opacity - 0.01;
else opacity = opacity + 0.003;
if (opacity <= 0) { down = !down; opacity = 0; }
if (opacity > 1) { down = !down; opacity = 1; }
shape.opacity = opacity;
});
diagram.skipsUndoManager = oldskips;
loop();
}, 60);
}
myDiagram.linkTemplate =
$(go.Link,
{
layerName: "Background",
routing: go.Link.Orthogonal,
corner: 15,
reshapable: true,
resegmentable: true,
},
$(go.Shape, new go.Binding("stroke", "color"), { isPanelMain: true, strokeWidth: 10 }),
$(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40] })
);
var model = $(go.TreeModel);
model.nodeDataArray = data.value
// 单击事件
myDiagram.addDiagramListener("ObjectSingleClicked",
(e) => {
timeOut.value = setTimeout(() => {
var part = e.subject.part;
if (!(part instanceof go.Link)) {
console.log(part.data.key);
if (part.data.name == '1#变电所(公共教学楼)') {
router.push("oneCharts");
}
} else {
if (part.data.key != 19) {
let arr = e.subject.part.data.lineCode.split(",")
getDataYCRealTime(arr).then(({ data }) => {
if (data.length) {
allData.value = data
nowChoow.value = data[0].lineDescribe
tableData.value = data[0]
}
setTimeout(() => {
isShow.value = true
})
})
}
}
}, 300);
});
myDiagram.model = model
loop()
// setTimeout(() => {
// data.value[1].color = 'red'
// myDiagram.div = null;
// init()
// }, 3000)
}
onMounted(() => {
init()
})
</script>
<style scoped lang="scss">
.fff {
color: #000;
font-weight: 600;
}
.orange {
color: #E6A72E;
font-weight: 600;
}
.green {
color: #2ED31B;
font-weight: 600;
}
.red {
color: #D52524;
font-weight: 600;
}
table {
border-collapse: collapse; //合并为一个单一的边框
border-color: #dfe6ec; //边框颜色按实际自定义即可
text-align: center;
}
thead tr th {
background-color: #f8f8f9; //设置表格标题背景色
padding: 12px;
text-align: center;
}
tbody tr td {
padding: 6px;
text-align: center;
height: 34px; //设置单元格最小高度
}
.charts {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.inCharts {
height: 100%;
width: 100%;
}
.info {
position: absolute;
width: v-bind(width);
height: v-bind(height);
z-index: 1000;
padding: 4px;
background: url('@/assets/charts/bg.png');
background-size: 100% 100%;
}
#lineTd {
background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}
</style>2. 实例二
javascript
<template>
<div class="charts">
<div class="inCharts" id="myDiagramDiv">
</div>
<el-dialog v-model="isShow" :title="title" width="500" draggable :modal="false" :show-close="false">
<table style="width: 100%;" border="1" cellspacing="1">
<thead>
<tr>
<th colspan="2" id="lineTd">
<span style="float:left;margin-top:6px;">名称</span>
<span style="float:right;margin-top:-4px;">相</span>
</th>
<th>
A
</th>
<th>
B
</th>
<th>
C
</th>
<th>
总
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
电流(A)
</td>
<td class="orange">
{{ form.yc_ia }}
</td>
<td class="green">
{{ form.yc_ib }}
</td>
<td class="red">
{{ form.yc_ic }}
</td>
<td>
-
</td>
</tr>
<tr>
<td colspan="2">
电压(V)
</td>
<td class="orange">
{{ form.yc_ua }}
</td>
<td class="green">
{{ form.yc_ub }}
</td>
<td class="red">
{{ form.yc_uc }}
</td>
<td>
-
</td>
</tr>
<tr>
<td colspan="2">
<div>
电压(V)
</div>
<div>
AB/BC/CA
</div>
</td>
<td class="orange">
{{ form.yc_uab }}
</td>
<td class="green">
{{ form.yc_ubc }}
</td>
<td class="red">
{{ form.yc_uca }}
</td>
<td>
-
</td>
</tr>
<tr>
<td colspan="2">
有功功率(kW)
</td>
<td class="orange">
{{ form.yc_pa }}
</td>
<td class="green">
{{ form.yc_pb }}
</td>
<td class="red">
{{ form.yc_pc }}
</td>
<td class="fff">
{{ (form.yc_pa + form.yc_pb + form.yc_pc).toFixed(2) }}
</td>
</tr>
<tr>
<td colspan="2">
无功功率(kVar)
</td>
<td class="orange">
{{ form.yc_qa }}
</td>
<td class="green">
{{ form.yc_qb }}
</td>
<td class="red">
{{ form.yc_qc }}
</td>
<td class="fff">
{{ (form.yc_qa + form.yc_qb + form.yc_qc).toFixed(2) }}
</td>
</tr>
<!-- <tr>
<td colspan="2">
视在功率(kVA)
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td rowspan="2">
总谐波
</td>
<td>
电流(%)
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td>
电压(%)
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td colspan="2">
功率因数
</td>
<td class="orange">
</td>
<td class="green">
</td>
<td class="red">
</td>
<td class="fff">
</td>
</tr>
<tr>
<td colspan="2">
本月电度(kwh)
</td>
<td class="fff" colspan="4">
</td>
</tr>
<tr>
<td colspan="2">
有功总电度(kWh)
</td>
<td class="fff" colspan="4">
</td>
</tr>
<tr>
<td colspan="2">
频率(Hz)
</td>
<td class="fff" colspan="4">
</td>
</tr> -->
</tbody>
</table>
</el-dialog>
<el-dialog v-model="showNormol" width="500" draggable :modal="false" :show-close="false">
</el-dialog>
</div>
</template>
<script setup>
import { getDataYxRealtimeYxon, getDataYcRealtimeABC } from "@/api"
// 引入 ref
import { ref, onMounted } from 'vue'
import go from 'gojs' //在export default前
import { useRouter } from "vue-router";
const title = ref("")
const router = useRouter();
const $ = go.GraphObject.make;
const width = ref('300px')
const height = ref("100px")
const isShow = ref(false)
const showNormol = ref(false)
const form = ref({})
const gyg = ref(new URL(`@/assets/charts/gyg.png`, import.meta.url).href)
const blg = ref(new URL(`@/assets/charts/blg.png`, import.meta.url).href)
const gycxg = ref(new URL(`@/assets/charts/gycxg.png`, import.meta.url).href)
const bdqg = ref(new URL(`@/assets/charts/bdqg.png`, import.meta.url).href)
const jxg = ref(new URL(`@/assets/charts/jxg.png`, import.meta.url).href)
const llg = ref(new URL(`@/assets/charts/llg.png`, import.meta.url).href)
const drqg = ref(new URL(`@/assets/charts/drqg.png`, import.meta.url).href)
const kdx = ref(new URL(`@/assets/charts/kdg.png`, import.meta.url).href)
const normol = ref(new URL(`@/assets/charts/normol.png`, import.meta.url).href)
const mol = ref(new URL(`@/assets/charts/mol.png`, import.meta.url).href)
const timeOut = ref("")
const datas = ref([
{ key: "0", name: "A", source: '', loc: '-540 -200', width: 0, height: 0 },
{
key: "1", name: "高压进线柜", source: gyg.value, loc: '-540 -100', color: '#36DB55', width: 154, height: 50, deviceCode: "100"
},
{
key: "2", name: "避雷柜", source: blg.value, loc: '-386 -100', color: '#36DB55', width: 154, height: 50, deviceCodes: "101"
},
{
key: "3", name: "高压出线柜", source: gycxg.value, loc: '-232 -100', color: '#F54D4D', width: 154, height: 50, deviceCode: "102"
},
{
key: "4", name: "变电器柜", source: bdqg.value, loc: '-78 -100', width: 154, height: 50, deviceCode: "103", color: '#36DB55'
},
{
key: "5", name: "低压进线柜", source: jxg.value, loc: '76 -100', color: '#36DB55', width: 154, height: 50, deviceCode: "104"
},
{
key: "6", name: "联络柜", source: llg.value, loc: '230 -100', color: '#36DB55', width: 154, height: 50, deviceCode: "105"
},
{
key: "7", name: "电容器柜", source: drqg.value, loc: '384 -100', color: '#F54D4D', width: 154, height: 50, deviceCode: "106"
},
{ key: "8", name: "LA3馈电箱", source: kdx.value, loc: '-540 0', color: '#36DB55', width: 180, height: 300 },
{ key: "9", name: "LA4馈电箱", source: kdx.value, loc: '-360 0', color: '#36DB55', width: 180, height: 300 },
{ key: "10", name: "LA5馈电箱", source: kdx.value, loc: '-180 0', color: '#36DB55', width: 180, height: 300 },
{ key: "11", name: "LA6馈电箱", source: kdx.value, loc: '0 0', color: '#36DB55', width: 180, height: 300 },
{ key: "12", name: "LA7馈电箱", source: kdx.value, loc: '180 0', color: '#F54D4D', width: 180, height: 300 },
{
key: "13", name: "LA8馈电箱", source: kdx.value, loc: '360 0', color: '#F54D4D', width: 180, height: 300, info: [
{ type: "text", text: "some text" },
{ type: "pic", source: gyg.value }
]
},
{ key: "14", name: "LB8馈电箱", source: kdx.value, loc: '560 0', color: '#F54D4D', width: 180, height: 300 },
{ key: "15", name: "LB7馈电箱", source: kdx.value, loc: '740 0', color: '#F54D4D', width: 180, height: 300 },
{ key: "16", name: "LB6馈电箱", source: kdx.value, loc: '920 0', color: '#F54D4D', width: 180, height: 300 },
{ key: "17", name: "LB5馈电箱", source: kdx.value, loc: '1100 0', color: '#F54D4D', width: 180, height: 300 },
{ key: "18", name: "LB4馈电箱", source: kdx.value, loc: '1280 0', color: '#F54D4D', width: 180, height: 300 },
{ key: "19", name: "LB3馈电箱", source: kdx.value, loc: '1460 0', color: '#F54D4D', width: 180, height: 300 },
{
key: "20", name: "电容器柜", source: drqg.value, loc: '560 -100', color: '#F54D4D', width: 180, height: 50, deviceCode: "157"
},
{
key: "21", name: "低压进线柜", source: jxg.value, loc: '740 -100', color: '#F54D4D', width: 180, height: 50, deviceCode: "156"
},
{
key: "22", name: "变电器柜", source: bdqg.value, loc: '920 -100', color: '#F54D4D', width: 180, height: 50, deviceCode: "155"
},
{
key: "23", name: "高压出线柜", source: gycxg.value, loc: '1100 -100', color: '#F54D4D', width: 180, height: 50, deviceCode: "154"
},
{
key: "24", name: "避雷柜", source: blg.value, loc: '1280 -100', color: '#F54D4D', width: 180, height: 50, deviceCodes: "153"
},
{
key: "25", name: "高压进线柜", source: gyg.value, loc: '1460 -100', color: '#F54D4D', width: 180, height: 50, deviceCode: "152"
},
{ key: "26", name: "B", source: '', loc: '1460 -200', width: 0, height: 0 },
])
const link = ref([
{ from: "0", to: "1", color: '#36DB55' },
{ from: "26", to: "25", color: '#36DB55' },
// { from: "1", to: "2", color: '#36DB55'},
// { from: "3", to: "2", color: '#36DB55'},
// { from: "4", to: "3", color: '#36DB55'},
// { from: "2", to: "5", color: '#36DB55'},
// { from: "2", to: "6", color: '#36DB55'},
// { from: "2", to: "7", color: '#36DB55'},
// { from: "2", to: "8", color: '#36DB55'},
// { from: "2", to: "9", color: '#36DB55'},
])
const inTk = (e, obj) => {
// 阻止单机事件
clearTimeout(timeOut.value)
showNormol.value = true
}
const init = () => {
var myDiagram = $(go.Diagram, "myDiagramDiv",//为DIV.HTML元素创建一个画布
{
//设置画布配置
initialAutoScale: go.Diagram.Uniform, // 缩放以显示所有内容
maxSelectionCount: 1, // 不要让用户一次选择多于一个的东西
isReadOnly: true,
contentAlignment: go.Spot.Center,
});
var itemtemplates = new go.Map()
var templates = new go.Map()
itemtemplates.add("pic",
$(go.Panel,
$(go.Picture,
{ margin: 10, width: 30, height: 30, background: 'transparent' },
new go.Binding("source")))
);
itemtemplates.add("text",
$(go.Panel,
$(go.TextBlock,
new go.Binding("text"))
));
templates.add("pic",
$("Button",
{
margin: 2,
'ButtonBorder.strokeWidth': 0,
'ButtonBorder.fill': '#fff',
click: inTk,
},
$(go.Picture, new go.Binding("source"), { margin: 1, width: 20, height: 20, background: 'transparent' },))
);
myDiagram.nodeTemplate =
$(go.Node, "auto",
$(go.Shape,
new go.Binding("width", "width"),
new go.Binding("height", "height"),
{
figure: "Rectangle", margin: 0, fill: 'transparent', stroke: "#C4C6C4", strokeWidth: 1
}),
new go.Binding("location", "loc", go.Point.parse),
$(go.Panel, "Vertical",
$(go.Panel, 'Horizontal',
{ background: "transparent", },
$(go.Picture,
{ margin: 10, width: 24, height: 24, background: 'transparent' },
new go.Binding("source")),
$(go.TextBlock, "Default Text",
{ margin: 6, stroke: "#000", font: "bold 12px sans-serif" },
new go.Binding("text", "name")),
$(go.Panel, "Vertical",
{
margin: 3,
defaultAlignment: go.Spot.Left,
itemCategoryProperty: "type", // this property controls the template used
itemTemplateMap: templates // map was defined above
},
new go.Binding("itemArray", "src"))
),
$(go.Panel, "Vertical",
{
margin: 3,
defaultAlignment: go.Spot.Left,
itemCategoryProperty: "type", // this property controls the template used
itemTemplateMap: itemtemplates // map was defined above
},
new go.Binding("itemArray", "info"))
),
);
var opacity = 1;
var down = true;
function loop() {
var diagram = myDiagram;
setTimeout(() => {
var oldskips = diagram.skipsUndoManager;
diagram.skipsUndoManager = true;
diagram.links.each(link => {
var shape = link.findObject("PIPE");
var off = shape.strokeDashOffset - 3;
// animate (move) the stroke dash
shape.strokeDashOffset = (off <= 0) ? 60 : off;
// animte (strobe) the opacity:
if (down) opacity = opacity - 0.01;
else opacity = opacity + 0.003;
if (opacity <= 0) { down = !down; opacity = 0; }
if (opacity > 1) { down = !down; opacity = 1; }
shape.opacity = opacity;
});
diagram.skipsUndoManager = oldskips;
loop();
}, 60);
}
myDiagram.linkTemplate =
$(go.Link,
{
layerName: "Background",
routing: go.Link.Orthogonal,
corner: 15,
reshapable: true,
resegmentable: true,
},
$(go.Shape, new go.Binding("stroke", "color"), { isPanelMain: true, strokeWidth: 10 }),
$(go.Shape, { isPanelMain: true, stroke: "white", strokeWidth: 3, name: "PIPE", strokeDashArray: [20, 40] })
);
var model = $(go.GraphLinksModel);
model.linkDataArray = link.value
model.nodeDataArray = datas.value
// 单击事件
myDiagram.addDiagramListener("ObjectSingleClicked",
(e) => {
timeOut.value = setTimeout(() => {
var part = e.subject.part;
if (!(part instanceof go.Link)) {
if (part.data.name.search("馈电箱") == -1) {
getDataYcRealtimeABC(part.data.deviceCode).then(({ data }) => {
console.log(data);
if (data && data.length) {
form.value = data[0]
}
title.value = part.data.name
isShow.value = true
})
} else {
if (part.data.name == 'LA3馈电箱') {
router.push("oneLA3");
}
}
} else {
console.log(e.subject.part.data);
}
}, 300)
});
myDiagram.model = model
loop()
// setTimeout(() => {
// data.value[1].color = 'red'
// myDiagram.div = null;
// init()
// }, 3000)
}
onMounted(() => {
getDataYxRealtimeYxon(1).then(({ data }) => {
datas.value.forEach((item, index) => {
data.forEach((l, i) => {
if (item.deviceCode == l.deviceCode) {
if (l.yxOn == 1) {
datas.value[index].src = [
{ type: "pic", source: normol.value }
]
} else {
datas.value[index].src = [
{ type: "pic", source: mol.value }
]
}
}
})
});
init()
})
// document.getElementById('charts').addEventListener("mousedown", (e) => {
// isShow.value = false
// x.value = e.x
// y.value = e.y
// })
})
</script>
<style scoped lang="scss">
.charts {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.inCharts {
height: 100%;
width: 100%;
}
.info {
position: absolute;
width: v-bind(width);
height: v-bind(height);
background: red;
z-index: 1000;
padding: 10px;
}
.title {
position: absolute;
top: 0;
left: 0;
z-index: 999;
height: 60px;
width: 260px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: 600;
}
#lineTd {
background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjEwMCUiIHkyPSIxMDAlIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEiLz48L3N2Zz4=) no-repeat 100% center;
}
.fff {
color: #000;
font-weight: 600;
}
.orange {
color: #E6A72E;
font-weight: 600;
}
.green {
color: #2ED31B;
font-weight: 600;
}
.red {
color: #D52524;
font-weight: 600;
}
table {
border-collapse: collapse; //合并为一个单一的边框
border-color: #dfe6ec; //边框颜色按实际自定义即可
text-align: center;
}
thead tr th {
background-color: #f8f8f9; //设置表格标题背景色
padding: 12px;
text-align: center;
}
tbody tr td {
padding: 6px;
text-align: center;
height: 34px; //设置单元格最小高度
}
</style>