From f40a82317fbf5033f07bd746dfd89da9b808d9f8 Mon Sep 17 00:00:00 2001 From: zhaoqiang <2117596534@qq.com> Date: Thu, 18 Jul 2024 01:41:48 +0800 Subject: [PATCH] update --- src/assets/json/OpticalStorageSVG.js | 16 +- src/views/pages/OpticalStoragePage/index.vue | 455 ++++++++++++------- 2 files changed, 292 insertions(+), 179 deletions(-) diff --git a/src/assets/json/OpticalStorageSVG.js b/src/assets/json/OpticalStorageSVG.js index 329dc4c..cee1f70 100644 --- a/src/assets/json/OpticalStorageSVG.js +++ b/src/assets/json/OpticalStorageSVG.js @@ -121,14 +121,14 @@ export default ` - - - - - - - - + + + + + + + + diff --git a/src/views/pages/OpticalStoragePage/index.vue b/src/views/pages/OpticalStoragePage/index.vue index a227c1c..e5fac04 100644 --- a/src/views/pages/OpticalStoragePage/index.vue +++ b/src/views/pages/OpticalStoragePage/index.vue @@ -467,9 +467,6 @@ let pvArrFlag = ref(false) let userzFlag = ref(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,