+
+
@@ -312,6 +312,7 @@ import svgHtml26 from '@/assets/json/svgzhan26.js'
import svgHtml23 from '@/assets/json/svgye23.js'
import svgHtml311 from '@/assets/json/svgye31.js'
import testSvg from '@/assets/json/线路二.js'
+import testSvg1 from '@/assets/json/线路556.js'
// import svgJSON from "@/assets/json/result1.json";
import svgJSON2 from '@/assets/json/nw-result1.json'
@@ -329,23 +330,21 @@ import loadingPage from '@/views/commonPage/loading.vue'
import { buttyApi, svgdApi, pvApi, usrzApi } from '@/api/Osp/svgApi'
import { SVG, extend as SVGextend, Element as SVGElement, Box, Matrix } from '@svgdotjs/svg.js'
-
onMounted(() => {
- send3D()//发送三维
+ send3D() //发送三维
getbatrry() //储能功率曲线
getuser() //充电桩用户侧功率曲线
getpv() //光伏功率曲线
-
})
-const send3D=()=>{
+const send3D = () => {
// 发送西小站三维移动位置
const list = {
- location: "(X=117.397109,Y=38.88534,Z=-6.317532)",
- rotation: "Pitch=-15.947211,Yaw=-134.448302,Roll=0.0",
- };
- api_send("CameraMove", list, () => {
- console.log("CameraMove西小站");
- });
+ location: '(X=117.397109,Y=38.88534,Z=-6.317532)',
+ rotation: 'Pitch=-15.947211,Yaw=-134.448302,Roll=0.0'
+ }
+ api_send('CameraMove', list, () => {
+ console.log('CameraMove西小站')
+ })
}
// 左
// 左侧页面标识
@@ -506,7 +505,10 @@ let handleShowSvg = async (svgIndex: string) => {
// 更换svg图
let svgHtmlIndex = ''
if (svgIndex === '556') {
- svgHtmlIndex = svgHtml2
+ // svgHtmlIndex = svgHtml2
+ svgHtmlIndex = testSvg1
+ handleCustomLine(svgHtmlIndex, result)
+ return
} else if (svgIndex === '555') {
svgHtmlIndex = svgHtml
} else if (svgIndex === 'ying31') {
@@ -558,13 +560,241 @@ let handleShowSvg = async (svgIndex: string) => {
}
})
}
-
- let arr = Object.keys(svgJSON)
- let num = 1
console.log('svg图渲染函数结束')
}
+// 处理自定义的图
+let handleCustomLine = (svgHtml, result) => {
+ dialogVisible.value = true
+ loadingFlag.value = true
+ console.log('svg图渲染函数开始111')
-// 处理线的动画、文字
+ nextTick(() => {
+ SVGContainer.value.innerHTML = svgHtml as any
+ draw = SVG(SVGContainer.value.getElementsByTagName('svg')[0])
+ let s = draw.panZoom({ zoomMin: 0.1, zoomMax: 30, zoomFactor: 0.5 })
+ draw.size('100%', '100%')
+ draw.zoom(0.189)
+
+ console.log(result, 'result')
+ let polyline = draw.find('polyline')
+ const dom = draw.find('g')
+
+ result.line.forEach(item => {
+ polyline.forEach(lineIte => {
+ if (item.sec_id === lineIte.node.id) {
+ dom.forEach(lineG => {
+ const polyineArray = lineIte.array()
+ let pathDate = 'M' + polyineArray.join(' L')
+ // 流向
+ handlePolyineAnimate(polyineArray, pathDate, lineG)
+ // 文字
+ handleLineText2(polyineArray, item, lineG)
+ })
+ }
+ })
+ })
+
+ // 正向流动
+ function handlePolyineAnimate(pointArray, pointsValue, lineDom) {
+ // 拿到长度
+ let length = 0
+ for (let i = 0; i < pointArray.length; i++) {
+ if (pointArray[i] && pointArray[i + 1]) {
+ length += pointDistance(pointArray[i][0], pointArray[i][1], pointArray[i + 1][0], pointArray[i + 1][1])
+ }
+ }
+ let num = 20
+ let num1 = 0.5
+ let spacingDuration = 10
+ // console.log(length, 'length');
+
+ if (length >= 0 && length <= 100) {
+ length = 50
+ num = 20
+ num1 = 0.5
+ spacingDuration = 2
+ } else if (length >= 100 && length <= 200) {
+ length = 150
+ num = 20
+ num1 = 0.5
+ spacingDuration = 4
+ } else if (length >= 200 && length <= 500) {
+ length = 350
+ num = 20
+ num1 = 0.5
+ spacingDuration = 8
+ } else if (length >= 500 && length <= 700) {
+ length = 650
+ num = 20
+ num1 = 0.5
+ spacingDuration = 10
+ } else if (length >= 700 && length <= 1000) {
+ length = 850
+ num = 20
+ num1 = 0.5
+ spacingDuration = 12
+ } else if (length >= 1000 && length <= 1200) {
+ length = 1150
+ num = 20
+ num1 = 0.5
+ spacingDuration = 16
+ } else if (length >= 1200 && length <= 1500) {
+ length = 1350
+ num = 20
+ num1 = 0.5
+ spacingDuration = 20
+ } else if (length >= 1500 && length <= 1700) {
+ length = 1600
+ num = 20
+ num1 = 0.5
+ spacingDuration = 24
+ } else if (length >= 1700 && length <= 2000) {
+ length = 1850
+ num = 20
+ num1 = 0.5
+ spacingDuration = 28
+ } else if (length >= 2000 && length <= 2200) {
+ length = 2100
+ num = 20
+ num1 = 0.5
+ spacingDuration = 32
+ } else if (length >= 2200 && length <= 2500) {
+ length = 2350
+ num = 20
+ num1 = 0.5
+ spacingDuration = 34
+ } else if (length >= 2500 && length <= 2700) {
+ length = 2600
+ num = 20
+ num1 = 0.5
+ spacingDuration = 38
+ } else if (length >= 2700 && length <= 3000) {
+ length = 2800
+ num = 20
+ num1 = 0.5
+ spacingDuration = 40
+ } else if (length >= 3000 && length <= 3200) {
+ length = 3100
+ num = 20
+ num1 = 0.5
+ spacingDuration = 44
+ } else if (length >= 3200 && length <= 3500) {
+ length = 3350
+ num = 20
+ num1 = 0.5
+ spacingDuration = 48
+ }
+
+ let numTriangles = Math.ceil(length / num)
+ let duration = numTriangles / num1
+ let middleDuration = duration / num1
+
+ for (let i = 0; i < numTriangles; i++) {
+ let triangle = draw.polygon('0,-5 20,0 0,5').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 })
+
+ let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
+ triangleanimate.setAttribute('path', pointsValue)
+ triangleanimate.setAttribute('dur', `${spacingDuration}s`)
+ let startTime = middleDuration - (duration / numTriangles) * i - i * spacingDuration
+ triangleanimate.setAttribute('begin', `${startTime}s`)
+ triangleanimate.setAttribute('fill', 'remove')
+ triangleanimate.setAttribute('rotate', 'auto')
+ triangleanimate.setAttribute('repeatCount', 'indefinite')
+ triangle.node.appendChild(triangleanimate)
+
+ lineDom.add(triangle)
+ }
+ let rect = draw.rect(30, 30).fill('#000').move(-5, -10)
+ lineDom.add(rect)
+ }
+ function pointDistance(x1, y1, x2, y2) {
+ const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+ return distance
+ }
+ function handleLineText2(polyineArray, Lineitem, lineDom) {
+ // console.log(item, "lineitem");
+ let idArr = ['896EE332-AFB3-5C1C-E044-001A4B099F30-00001', '0ce8fe26-ce4a-4d21-9dfa-b8084e929609', 'C9425152-181A-481C-A0E7-E6227E425596-14781', '02ACC5B5-6200-4775-BFEB-726A237EB6C1-410133', '896EE332-AFB5-5C1C-E044-001A4B099F30-00001', 'SBID0000008FDCEBEC3EEE4304902CF0EFD3A8B0A5']
+ // 判断line的 "Flow_Direction_Flag": "0" 满足条件显示箭头和文字
+ if (Lineitem['Flow_Direction_Flag'] === '0') return
+
+ let data = Lineitem
+ let x = (Number(polyineArray[polyineArray.length - 1][0]) + Number(polyineArray[0][0])) / 2
+ let y = (Number(polyineArray[polyineArray.length - 1][1]) + Number(polyineArray[0][1])) / 2
+ let line = ''
+ let text = ''
+ let endX = 0
+ let endY = 0
+ let endTextX = 0
+ let endTextY = 0
+ if (idArr.includes(Lineitem.sec_id)) {
+ endX = x - 30
+ endY = y + 40
+ endTextX = x - 80
+ endTextY = y + 50
+ } else {
+ // 起点y 终点y相等
+ endX = x
+ endY = y + 30
+ endTextX = x - 30
+ endTextY = y + 40
+ }
+ //只要线路上有sec_id 就显示线路上的文字 p q v i 参数
+ if (data['sec_id']) {
+ // 引出线
+ line = draw.line(x, y, endX, endY).attr({
+ 'stroke-width': 2,
+ id: 'left_line_' + data.psrId,
+ stroke: 'green',
+ 'stroke-dasharray': '3,3'
+ })
+ // 文本
+ text = draw
+ .text(`P: ${(parseFloat(data['Pi']) * 1000).toFixed(4)} kW \nQ: ${(parseFloat(data['Qi']) * 1000).toFixed(4)} kVar \nV: ${parseFloat(data['V_b']).toFixed(4)} kV \nI: ${((parseFloat(data['Pi']) * 1000) / (parseFloat(data['V_b']) * 1.732)).toFixed(4)} A`)
+ .attr({
+ x: endTextX,
+ y: endTextY,
+ id: 'load_text' + data.psrId,
+ 'font-size': '8',
+ leading: '0.9'
+ })
+ .fill('green')
+ }
+
+ lineDom.add(line)
+ lineDom.add(text)
+ }
+ let path = draw.find('path')
+ path.forEach(item => {
+ if (item.node.id) {
+ let data = result.load.find(ite => item.node.id === ite.load_id.split('&')[0])
+ if (data) {
+ let position = item.bbox()
+
+ let centerX = position.cx
+ let centerY = position.cy
+ console.log(position, centerX, centerY)
+ draw.line(centerX, centerY, centerX - 50, centerY + 70).attr({
+ 'stroke-width': 2,
+ id: 'load_' + data.load_id,
+ stroke: 'green',
+ 'stroke-dasharray': '3,3'
+ })
+ // 文本
+ draw
+ .text(`P: ${(parseFloat(data['Pload/phase']) * 1000).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 1000).toFixed(4)} kVar`)
+ .attr({
+ x: centerX - 100,
+ y: centerY + 80,
+ id: 'load_text' + data.load_id,
+ 'font-size': '9',
+ leading: '0.9'
+ })
+ .fill('green')
+ }
+ }
+ })
+ })
+}
// 处理线的动画、文字
let handleAnimate = async (result: any) => {
console.log('进入动画', result)
@@ -775,7 +1005,7 @@ let handleAnimate = async (result: any) => {
line = draw.line(x, y, x - 10, y + 10).attr({
'stroke-width': 0.1,
id: 'left_line_' + data.psrId,
- stroke: 'orange',
+ stroke: 'green',
'stroke-dasharray': '3,3'
})
// 文本
@@ -788,7 +1018,7 @@ let handleAnimate = async (result: any) => {
'font-size': '2',
leading: '0.9'
})
- .fill('orange')
+ .fill('green')
}
lineDom.add(line)
@@ -904,7 +1134,7 @@ let handleAnimate = async (result: any) => {
let middleDuration = duration / num1
for (let i = 0; i < numTriangles; i++) {
- let triangle = draw.polygon('0,-2 6,0 0,2').fill('aqua').stroke({ color: 'aqua', width: 0.2 })
+ let triangle = draw.polygon('0,-2 6,0 0,2').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 })
let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
triangleanimate.setAttribute('path', pointsValue)
@@ -918,6 +1148,8 @@ let handleAnimate = async (result: any) => {
lineDom.add(triangle)
}
+ let rect = draw.rect(30, 30).fill('#000').move(-5, -10)
+ lineDom.add(rect)
}
// 反向流动
function handlePolyineAnimate2(pointArray, pointsValue, lineDom) {
@@ -1029,7 +1261,7 @@ let handleAnimate = async (result: any) => {
let duration = numTriangles / num1
let middleDuration = duration / num1
for (let i = 0; i < numTriangles; i++) {
- let triangle = draw.polygon('0,-2 -6,0 0,2').fill('aqua').stroke({ color: 'aqua', width: 0.2 })
+ let triangle = draw.polygon('0,-2 -6,0 0,2').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 })
let triangleanimate = document.createElementNS('http://www.w3.org/2000/svg', 'animateMotion')
triangleanimate.setAttribute('path', pointsValue)
@@ -1046,6 +1278,8 @@ let handleAnimate = async (result: any) => {
lineDom.add(triangle)
}
+ let rect = draw.rect(30, 30).fill('#000').move(-5, -10)
+ lineDom.add(rect)
}
function pointDistance(x1, y1, x2, y2) {
const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
@@ -1065,7 +1299,7 @@ let handleAnimate = async (result: any) => {
.attr({
'stroke-width': 0.1,
id: 'load_' + data.load_id,
- stroke: 'orange',
+ stroke: 'green',
'stroke-dasharray': '3,3'
})
.font({ size: '8' })
@@ -1079,7 +1313,7 @@ let handleAnimate = async (result: any) => {
'font-size': '4',
leading: '0.9'
})
- .fill('orange')
+ .fill('green')
}
})
@@ -1092,7 +1326,6 @@ let handleAnimate = async (result: any) => {
})
loadingFlag.value = false
}
-// 处理线的动画、文字
// const handleClose = () => {
// lineSvgFlag.value = false;
@@ -1471,7 +1704,7 @@ const styleVar = computed(() => {
line-height: changeHeight(50);
background: url('@/assets/images/common/common_title.png') no-repeat;
background-size: 100% 100%;
- font-size: changeHeight(40);
+ font-size: changeHeight(45);
// background-color: red;
display: flex;
@@ -1505,7 +1738,7 @@ const styleVar = computed(() => {
// background-color: red;
span {
margin-left: 9%;
- font-size: changeHeight(40);
+ font-size: changeHeight(45);
}
.line {
@@ -1723,6 +1956,7 @@ const styleVar = computed(() => {
display: flex;
justify-content: center;
align-items: center;
+ margin-top: changeHeight(80);
.tuopubg {
width: 100%;
height: 100%;
@@ -1786,6 +2020,7 @@ const styleVar = computed(() => {
display: flex;
justify-content: center;
align-items: center;
+ margin-top: changeHeight(70);
.linepic {
// width: changeHeight(768.6);
diff --git a/src/views/pages/carPage/index.vue b/src/views/pages/carPage/index.vue
index 4f8dc2e..69c5706 100644
--- a/src/views/pages/carPage/index.vue
+++ b/src/views/pages/carPage/index.vue
@@ -410,16 +410,17 @@ let transformerOverloadCount = ref
(0)
// 获取曲线
let getPowerCurve_api = () => {
- let setData: any = {}
+ let setData: any = {
+ orgID: '8af8470a47aad8e20147aad92e400335'
+ }
if (currentData.type === '') {
// 空的 请求全部
- setData.orgID = '1200330077182'
} else if (currentData.type === 'station') {
// 站
- setData.stationId = '1200330077182'
+ setData.stationId = currentData.id
} else if (currentData.type === 'pipe') {
// 桩
- setData.mrid = '1200330077182'
+ setData.mrid = currentData.id
}
console.log(currentData.type, setData, 'currentType.value')
@@ -442,16 +443,17 @@ let getTransformerOverloadCount_api = () => {
}
// 获取充电桩列表
let getRunning_api = () => {
- let setData: any = {}
+ let setData: any = {
+ orgID: '8af8470a47aad8e20147aad92e400335'
+ }
if (currentData.type === '') {
// 空的 请求全部
- setData.orgID = '1200330077182'
} else if (currentData.type === 'station') {
// 站
- setData.stationId = '1200330077182'
+ setData.stationId = currentData.id
} else if (currentData.type === 'pipe') {
// 桩
- setData.mrid = '1200330077182'
+ setData.mrid = currentData.id
}
running_api(setData).then((res: any) => {
carRightData.chargingList = res.data.data