zhaoqiang
/
v3tianjin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

master
zhaoqiang 2024-07-18 01:41:48 +08:00
parent cea26c6d09
commit f40a82317f
2 changed files with 292 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/assets/json/OpticalStorageSVG.js
View File

@ -121,14 +121,14 @@ export default `<svg width="1877" height="1800" viewBox="0 0 1877 1800" fill="no
<rect x="0.0433503" y="-2.12088" width="27.7787" height="79.0766" transform="matrix(0.721409 -0.692509 -0.692509 -0.721409 1487.69 403.836)" fill="#000" stroke="#6FFBF7" stroke-width="3"/>
<rect x="433.799" y="1480.41" width="27.7787" height="79.0766" transform="rotate(133.829 433.799 1480.41)" stroke="#6FFBF7" stroke-width="3"/>
<rect x="2.12088" y="0.0433505" width="27.7787" height="79.0766" transform="matrix(0.692509 0.721409 0.721409 -0.692509 1443.78 1461.94)" fill="#6FFBF7" stroke="#6FFBF7" stroke-width="3"/>
<circle cx="750.386" cy="456.387" r="23.6135" transform="rotate(90 750.386 456.387)" fill="#6FFBF7"/>
<circle cx="469.228" cy="725.926" r="23.6135" transform="rotate(90 469.228 725.926)" fill="#6FFBF7"/>
<circle cx="473.066" cy="1104.82" r="23.6135" transform="rotate(90 473.066 1104.82)" fill="#6FFBF7"/>
<circle cx="762.126" cy="1377.47" r="23.6135" transform="rotate(90 762.126 1377.47)" fill="#6FFBF7"/>
<circle cx="1140.68" cy="1377.47" r="23.6135" transform="rotate(90 1140.68 1377.47)" fill="#6FFBF7"/>
<circle cx="1117.73" cy="456.387" r="23.6135" transform="rotate(90 1117.73 456.387)" fill="#6FFBF7"/>
<rect x="1372.62" y="698.746" width="40.1707" height="40.1707" fill="#6FFBF7"/>
<rect x="1372.62" y="1069.28" width="40.1707" height="40.1707" fill="#6FFBF7"/>
<circle id="ying31_circle" cx="750.386" cy="456.387" r="23.6135" transform="rotate(90 750.386 456.387)" fill="#6FFBF7"/>
<circle id="556_circle" cx="469.228" cy="725.926" r="23.6135" transform="rotate(90 469.228 725.926)" fill="#6FFBF7"/>
<circle id="555_circle" cx="473.066" cy="1104.82" r="23.6135" transform="rotate(90 473.066 1104.82)" fill="#6FFBF7"/>
<circle id="ye23_circle" cx="762.126" cy="1377.47" r="23.6135" transform="rotate(90 762.126 1377.47)" fill="#6FFBF7"/>
<circle id="ye13_circle" cx="1140.68" cy="1377.47" r="23.6135" transform="rotate(90 1140.68 1377.47)" fill="#6FFBF7"/>
<circle id="ying41_circle" cx="1117.73" cy="456.387" r="23.6135" transform="rotate(90 1117.73 456.387)" fill="#6FFBF7"/>
<rect id="zhan26_circle" x="1372.62" y="698.746" width="40.1707" height="40.1707" fill="#6FFBF7"/>
<rect id="zhan16_circle" x="1372.62" y="1069.28" width="40.1707" height="40.1707" fill="#6FFBF7"/>
<rect x="765.479" y="875.215" width="26.5169" height="75.7118" stroke="#6FFBF7" stroke-width="3"/>
<rect x="921.493" y="759.566" width="42" height="42" stroke="#6FFBF7" stroke-width="3"/>
<rect x="364.287" y="367.384" width="42" height="42" transform="rotate(-46.383 364.287 367.384)" stroke="#6FFBF7" stroke-width="3"/>

455
src/views/pages/OpticalStoragePage/index.vue
View File

@ -467,9 +467,6 @@ let pvArrFlag = ref<boolean>(false)
let userzFlag = ref<boolean>(false)
const getpv = () => {
pv_55606Api({}).then(res => {
console.log(res, 'respv')
console.log('1----------', res)
pvArr = handleEchartsData_timeStamp_p(res.data, 15)
// pvArr = res.data;
@ -491,7 +488,6 @@ const getuser = () => {
}
const getbatrry = () => {
batty_unit_55606Api({}).then(res => {
console.log(res, 'ssss')
// battyArr = res.data;
battyArr = handleEchartsData_timeStamp_p_u_i(res.data, 15)
@ -556,170 +552,170 @@ let handleEnter = (typeValue: string) => {
{
id: '555_1',
flag: '-1',
Pi: '190.4101',
Qi: '5.9663',
V_b: '10.4993',
I: '10.4709'
Pi: '320.91',
Qi: '8.13',
V_b: '10.49',
I: '17.64'
},
{
id: '555_2',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '49.99',
Qi: '0.57',
V_b: '10.49',
I: '2.74'
},
{
id: '555_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '270.92',
Qi: '7.56',
V_b: '10.149',
I: '14.90'
},
{
id: '556_1',
flag: '-1',
Pi: '249.3605',
Qi: '32.3110',
Pi: '199.68',
Qi: '8.02',
V_b: '10.4989',
I: '13.7123'
I: '10.98'
},
{
id: '556_2',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '40.73',
Qi: '0.26',
V_b: '10.49',
I: '2.24'
},
{
id: '556_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '158.95',
Qi: '7.75',
V_b: '10.49',
I: '8.74'
},
{
id: 'ying_31_1',
flag: '-1',
Pi: '324.9620',
Qi: '14.3602',
Pi: '384.48',
Qi: '13.51',
V_b: '10.4990',
I: '17.8706'
I: '21.19'
},
{
id: 'ying_31_2',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '112.38',
Qi: '5.01',
V_b: '10.4990',
I: '21.14'
},
{
id: 'ying_31_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '272.12',
Qi: '8.49',
V_b: '10.4990',
I: '14.96'
},
{
id: 'ying_41_2',
flag: '1',
Pi: '110.7202',
Qi: '6.6579',
V_b: '10.4997',
I: '6.0088'
Pi: '17',
Qi: '0.18',
V_b: '10.49',
I: '9.97'
},
{
id: 'ying_41_1',
flag: '-1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '181.35',
Qi: '4.77',
V_b: '10.49',
I: '9.97'
},
{
id: 'ying_41_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '164.34',
Qi: '4.58',
V_b: '10.49',
I: '9.03'
},
{
id: 'zhan_26_1',
flag: '-1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '128.78',
Qi: '7.822',
V_b: '10.49',
I: '6.98'
},
{
id: 'zhan_26_2',
flag: '1',
Pi: '152.8102',
Qi: '6.6579',
V_b: '10.4998',
I: '8.4072'
Pi: '85.45',
Qi: '6.23',
V_b: '10.49',
I: '4.88'
},
{
id: 'zhan_26_3',
flag: '1',
Pi: '152.8102',
Qi: '6.6579',
V_b: '10.4998',
I: '8.4072'
Pi: '43.23',
Qi: '3.26',
V_b: '10.49',
I: '2.83'
},
{
id: 'zhan_16_1',
flag: '-1',
Pi: '97.5900',
Qi: '1.2095',
Pi: '617.9',
Qi: '38.68',
V_b: '10.4993',
I: '5.3655'
I: '33.97'
},
{
id: 'zhan_16_2',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '515.47',
Qi: '23.02',
V_b: '10.49',
I: '28.34'
},
{
id: 'zhan_16_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '102.43',
Qi: '7.66',
V_b: '10.49',
I: '5.63'
},
{
id: 'ye_13_1',
flag: '-1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '113.58',
Qi: '5.42',
V_b: '10.49',
I: '6.12'
},
{
id: 'ye_13_2',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '378.89',
Qi: '15.38',
V_b: '10.49',
I: '18.53'
},
{
id: 'ye_13_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '136.58',
Qi: '8.83',
V_b: '10.49',
I: '7.31'
},
{
id: 'ye_13_4',
@ -732,26 +728,26 @@ let handleEnter = (typeValue: string) => {
{
id: 'ye_23_1',
flag: '-1',
Pi: '429.7437',
Qi: '10.6202',
Pi: '273.76',
Qi: '15.34',
V_b: '10.4991',
I: '23.7348'
I: '12.582'
},
{
id: 'ye_23_2',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '200.83',
Qi: '13.43',
V_b: '10.4991',
I: '10.32'
},
{
id: 'ye_23_3',
flag: '1',
Pi: '1',
Qi: '2',
V_b: '3',
I: '1'
Pi: '72.52',
Qi: '3.58',
V_b: '10.4991',
I: '4.18'
}
]
@ -769,13 +765,12 @@ let handleEnter = (typeValue: string) => {
// 流向
const dom = draw.find('g')
const polyline = draw.find('polyline')
let circle = draw.find('circle')
let rect = draw.find('rect')
dom.forEach(item => {
polyline.forEach(lineIte => {
if (item.node.id === lineIte.node.id) {
console.log(item.node.id, lineIte.node.id, 'polylinepolylinepolyline')
let newData = data.find(ite => lineIte.node.id === ite.id)
console.log(newData)
const polyineArray = lineIte.array()
let pathDate = 'M' + polyineArray.join(' L')
if (newData.flag === '1') {
@ -803,7 +798,6 @@ let handleEnter = (typeValue: string) => {
let num = 20
let num1 = 0.5
let spacingDuration = 10
// console.log(length, 'length');
if (length >= 0 && length <= 100) {
length = 50
@ -1023,13 +1017,13 @@ let handleEnter = (typeValue: string) => {
return distance
}
function handleLineText2(polyineArray, Lineitem, lineDom) {
console.log(polyineArray, Lineitem, lineDom, 'polyineArray, Lineitem, lineDom')
let arrData = ['555_2', '555_3', '556_2', '556_3', 'ying_31_3', 'ying_31_2', 'ying_41_1', 'ying_41_3', 'zhan_26_1', 'zhan_26_3', 'zhan_16_2', 'zhan_16_3', 'ye_13_2', 'ye_13_1', 'ye_13_3', 'ye_23_2', 'ye_23_3']
// let arrData = ['555_2', '555_3', '556_2', '556_3', 'ying_31_3', 'ying_31_2', 'ying_41_1', 'ying_41_3', 'zhan_26_1', 'zhan_26_3', 'zhan_16_2', 'zhan_16_3', 'ye_13_2', 'ye_13_1', 'ye_13_3', 'ye_23_2', 'ye_23_3']
let arrData = ['ye_13_4']
if (arrData.includes(Lineitem.id)) return
let data = Lineitem
let x = polyineArray[polyineArray.length - 1][0]
let y = polyineArray[polyineArray.length - 1][1]
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 = x
@ -1037,62 +1031,53 @@ let handleEnter = (typeValue: string) => {
let endTextX = x - 30
let endTextY = y + 50
if (data.id === '556_1') {
x = polyineArray[0][0] - 50
y = polyineArray[1][1] - 50
endX = x + 50
endY = y - 130
endTextX = x - 50
endTextY = y + 10
} else if (data.id === 'zhan_26_2' || data.id === 'zhan_16_1') {
x = polyineArray[0][0]
y = polyineArray[0][1]
endX = x
endY = y + 60
endTextX = x - 110
endTextY = y + 65
} else if (data.id === 'ying_31_1') {
x = polyineArray[0][0]
y = polyineArray[0][1]
endX = x - 30
endY = y + 50
if (data.id === '556_3') {
endTextY = y + 30
} else if (data.id === '556_2') {
endTextX = x - 100
endTextY = y + 60
} else if (data.id === 'ying_41_2') {
x = polyineArray[0][0]
y = polyineArray[0][1]
endX = x - 60
endY = y + 40
endTextX = x - 160
endTextY = y + 50
} else if (data.id === 'ye_13_4') {
x = polyineArray[0][0]
y = polyineArray[0][1]
endX = x - 60
endY = y + 40
endTextX = x - 180
endTextY = y + 50
} else if (data.id === 'zhan_26_1') {
x = polyineArray[0][0]
y = polyineArray[0][1]
endX = x - 60
endY = y + 40
endTextX = x - 120
endTextY = y + 50
} else if (data.id === 'ye_23_1') {
x = polyineArray[0][0]
y = polyineArray[0][1]
endX = x - 20
endY = y + 40
endTextX = x - 110
endTextY = y + 70
} else if (data.id === '555_1') {
x = polyineArray[0][0]
y = polyineArray[0][1]
} else if (data.id === 'ying_31_2') {
endX = x
endY = y + 80
endY = y
endTextY = y - 70
} else if (data.id === 'ying_31_1') {
endTextX = x
endTextY = y + 50
} else if (data.id === 'ying_31_3') {
endTextX = x - 80
} else if (data.id === 'ying_41_1') {
endTextX = x - 80
} else if (data.id === 'ying_41_2') {
endX = x
endY = y
endTextY = y - 70
} else if (data.id === 'ying_41_3') {
endTextX = x
} else if (data.id === 'zhan_26_2') {
endTextX = x
} else if (data.id === 'zhan_26_3') {
endTextY = y + 20
} else if (data.id === 'zhan_16_1') {
endX = x
endY = y
endTextX = x - 60
endTextY = y - 70
} else if (data.id === 'zhan_16_2') {
endTextX = x - 90
} else if (data.id === 'ye_13_1') {
endX = x + 40
endY = y + 60
endTextX = x + 65
} else if (data.id === 'ye_13_2') {
endTextX = x - 160
} else if (data.id === 'ye_13_3') {
endTextX = x - 70
} else if (data.id === 'ye_23_1') {
endTextX = x - 90
endTextY = y + 70
} else if (data.id === '555_2') {
endTextX = x
} else if (data.id === '555_1') {
endTextX = x - 120
endTextY = y + 10
}
//只要线路上有sec_id 就显示线路上的文字 p q v i 参数
@ -1106,7 +1091,7 @@ let handleEnter = (typeValue: string) => {
})
// 文本
text = draw
.text(`P: ${parseFloat(data['Pi']).toFixed(4)} kW \nQ: ${parseFloat(data['Qi']).toFixed(4)} kVar \nU: ${parseFloat(data['V_b']).toFixed(4)} kV \nI: ${parseFloat(data['I'])} A`)
.text(`P: ${parseFloat(data['Pi']).toFixed(2)} kW \nQ: ${parseFloat(data['Qi']).toFixed(2)} kVar \nU: ${parseFloat(data['V_b']).toFixed(2)} kV \nI: ${parseFloat(data['I'])} A`)
.attr({
x: endTextX,
y: endTextY,
@ -1119,12 +1104,151 @@ let handleEnter = (typeValue: string) => {
lineDom.add(line)
lineDom.add(text)
}
// let circleArr = [
// {
// id: '555_circle',
// Pi: '190.4101',
// Qi: '5.9663',
// V_b: '10.4993',
// I: '10.4709'
// },
// {
// id: '556_circle',
// Pi: '249.3605',
// Qi: '32.3110',
// V_b: '10.4989',
// I: '13.7123'
// },
// {
// id: 'ying31_circle',
// Pi: '324.9620',
// Qi: '14.3602',
// V_b: '10.4990',
// I: '17.8706'
// },
// {
// id: 'ying41_circle',
// Pi: '110.7202',
// Qi: '6.6579',
// V_b: '10.4997',
// I: '6.0088'
// },
// {
// id: 'ye23_circle',
// Pi: '429.7437',
// Qi: '10.6202',
// V_b: '10.4991',
// I: '23.7348'
// },
// {
// id: 'ye13_circle',
// Pi: '263.1002',
// Qi: '8.6865',
// V_b: '10.4995',
// I: '14.1577'
// }
// ]
// // 点上的文字框
// circle.forEach(item => {
// if (item.node.id) {
// let data = circleArr.find(ite => item.node.id === ite.id)
// let x = item.cx()
// let y = item.cy()
// let line = ''
// let text = ''
// let endX = x
// let endY = y + 40
// let endTextX = x - 30
// let endTextY = y + 50
// if (item.node.id === '555_circle') {
// endTextX = x
// } else if (item.node.id === '556_circle') {
// endTextX = x - 50
// } else if (item.node.id === 'ying31_circle') {
// endTextX = x - 90
// } else if (item.node.id === 'ying41_circle') {
// endTextX = x - 10
// } else if (item.node.id === 'ye23_circle') {
// endTextX = x - 90
// }
// // 引出线
// line = draw.line(x, y, endX, endY).attr({
// 'stroke-width': 2,
// stroke: 'green',
// 'stroke-dasharray': '3,3'
// })
// // 文本
// text = draw
// .text(`P: ${parseFloat(data['Pi']).toFixed(2)} kW \nQ: ${parseFloat(data['Qi']).toFixed(2)} kVar \nU: ${parseFloat(data['V_b']).toFixed(2)} kV \nI: ${parseFloat(data['I'])} A`)
// .attr({
// x: endTextX,
// y: endTextY,
// 'font-size': '20',
// leading: '0.9'
// })
// .fill('green')
// draw.add(line)
// draw.add(text)
// }
// })
// let textArr = [
// {
// id: 'zhan26_circle',
// Pi: '152.8102',
// Qi: '6.6579',
// V_b: '10.4998',
// I: '8.4072'
// },
// {
// id: 'zhan16_circle',
// Pi: '97.5900',
// Qi: '1.2095',
// V_b: '10.4993',
// I: '5.3655'
// }
// ]
// // 点上的文字框
// rect.forEach(item => {
// if (item.node.id) {
// let data = textArr.find(ite => item.node.id === ite.id)
// let x = item.cx()
// let y = item.cy()
// let line = ''
// let text = ''
// let endX = x
// let endY = y + 40
// let endTextX = x - 30
// let endTextY = y + 50
// if (item.node.id === 'zhan26_circle') {
// endTextY = y + 60
// } else if (item.node.id === 'zhan16_circle') {
// endTextX = x - 90
// }
// // 引出线
// line = draw.line(x, y, endX, endY).attr({
// 'stroke-width': 2,
// stroke: 'green',
// 'stroke-dasharray': '3,3'
// })
// // 文本
// text = draw
// .text(`P: ${parseFloat(data['Pi']).toFixed(2)} kW \nQ: ${parseFloat(data['Qi']).toFixed(2)} kVar \nU: ${parseFloat(data['V_b']).toFixed(2)} kV \nI: ${parseFloat(data['I'])} A`)
// .attr({
// x: endTextX,
// y: endTextY,
// 'font-size': '20',
// leading: '0.9'
// })
// .fill('green')
// draw.add(line)
// draw.add(text)
// }
// })
// 点击框
let backgroundRectArr: any = []
let clickDom = draw.find('path')
clickDom.forEach((item: any) => {
if (item.node.id) {
console.log(item, 'item')
// 增加透明选择框
var backgroundRectYing31 = draw.rect(120, 60).attr({ x: 750, y: 245, id: 'ying31' }).fill('transparent').css('cursor', 'pointer')
backgroundRectArr.push(backgroundRectYing31)
@ -1283,7 +1407,6 @@ let handleEnter2 = () => {
}
})
})
console.log(data, 'datadata')
data.forEach(item => {
// 引出线
@ -1428,8 +1551,6 @@ let handleShowSvg = async (svgIndex: string) => {
// ---------离线的svg 返回结果
function fun(svgHtml: any) {
console.log('svg图渲染函数开始')
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 })
@ -1453,7 +1574,6 @@ let handleShowSvg = async (svgIndex: string) => {
}
})
}
console.log('svg图渲染函数结束')
}
// 处理自定义的图
let handleCustomLine = (svgHtml, result) => {
@ -1469,7 +1589,6 @@ let handleCustomLine = (svgHtml, result) => {
setTimeout(() => {
loadingFlag.value = false
console.log(result, 'result')
let polyline = draw.find('polyline')
const dom = draw.find('g')
@ -1478,7 +1597,6 @@ let handleCustomLine = (svgHtml, result) => {
if (item.sec_id === lineIte.node.id) {
dom.forEach(lineG => {
const polyineArray = lineIte.array()
console.log(polyineArray, 'polyineArray')
let pathDate = 'M' + polyineArray.join(' L')
// 流向
@ -1670,7 +1788,6 @@ let handleCustomLine = (svgHtml, result) => {
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,
@ -1679,7 +1796,7 @@ let handleCustomLine = (svgHtml, result) => {
})
// 文本
draw
.text(`P: ${(parseFloat(data['Pload/phase']) * 8).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 8).toFixed(4)} kVar`)
.text(`P: ${(parseFloat(data['Pload/phase']) * 100).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 100).toFixed(4)} kVar`)
.attr({
x: centerX - 100,
y: centerY + 80,
@ -1698,7 +1815,6 @@ let handleCustomLine = (svgHtml, result) => {
let handleAnimate = async (result: any) => {
loadingFlag.value = false
console.log(result, 'resultresultresultresultresult')
// 获取所有的g
let aclineDOM = draw.find('g')
// 线的流向
@ -1976,7 +2092,6 @@ let handleAnimate = async (result: any) => {
} else {
handlePolyineAnimate(polyineArray, pathDate, dom, item)
}
console.log(item.sec_id, showTextArr.includes(item.sec_id))
showTextArr.includes(item.sec_id) ? '' : handleLineText2(polyineArray, item, dom)
}
})
@ -2023,8 +2138,6 @@ let handleAnimate = async (result: any) => {
// 正向流动
function handlePolyineAnimate(pointArray, pointsValue, lineDom, Lineitem) {
console.log(pointArray, pointsValue, lineDom, Lineitem)
// console.log(
// pointArray,
// pointsValue,