update
zhaoqiang
parent
cc39495425
commit
a2c1c817fc
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -29,7 +29,7 @@
|
|||
</div> -->
|
||||
|
||||
<div class="os_info1">
|
||||
<div class="top_box">
|
||||
<!-- <div class="top_box">
|
||||
<div class="content_box">
|
||||
<div class="ratebox">
|
||||
<div class="rate">
|
||||
|
|
@ -57,7 +57,7 @@
|
|||
<div class="content_btn">
|
||||
<div class="Btn" @click="handleRunDetail">执行明细</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="pic_box">
|
||||
<div class="tuopubg"></div>
|
||||
<div class="box">
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<div class="btnbox1 btnpos" @click="handleShowSvg('ying31')"></div>
|
||||
<div class="btnbox2 btnpos" @click="handleShowSvg('ying41')"></div>
|
||||
<div class="btnbox3 btnpos" @click="handleShowSvg('555')"></div>
|
||||
<div class="btnbox4 btnpos" @click="handleShowSvg('556')"></div>
|
||||
<div class="btnbox4 btnpos" @click="handleCustomLine(testSvg1, svgJSON2.result)"></div>
|
||||
<div class="btnbox5 btnpos" @click="handleShowSvg('zhan15')"></div>
|
||||
<div class="btnbox6 btnpos" @click="handleShowSvg('zhan26')"></div>
|
||||
<div class="btnbox7 btnpos" @click="handleShowSvg('ye23')"></div>
|
||||
|
|
@ -89,13 +89,13 @@
|
|||
class="line"
|
||||
/> -->
|
||||
</div>
|
||||
<div class="pvtipBtn" @click="handleAreaLoad">台区负载情况</div>
|
||||
<!-- <div class="pvtipBtn" @click="handleAreaLoad">台区负载情况</div> -->
|
||||
</div>
|
||||
<div class="os_info2">
|
||||
<div class="datatimer_box">
|
||||
<!-- <div class="datatimer_box">
|
||||
<el-date-picker class="elDatePicker" v-model="timeSelect" type="date" placeholder="2024/07/03" />
|
||||
</div>
|
||||
<div class="top_box">
|
||||
</div> -->
|
||||
<!-- <div class="top_box">
|
||||
<div class="content_box">
|
||||
<div class="ratebox">
|
||||
<div class="rate">
|
||||
|
|
@ -120,7 +120,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="info2_content">
|
||||
<div class="linepic"></div>
|
||||
</div>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -410,16 +410,17 @@ let transformerOverloadCount = ref<number>(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
|
||||
|
|
|
|||
Loading…
Reference in New Issue