update

src/views/pages/OpticalStoragePage/index.vue

@@ -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> -->
-              <div class="top_box">
+              <!-- <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)",
+    location: '(X=117.397109,Y=38.88534,Z=-6.317532)',
-      rotation: "Pitch=-15.947211,Yaw=-134.448302,Roll=0.0",
+    rotation: 'Pitch=-15.947211,Yaw=-134.448302,Roll=0.0'
-    };
+  }
-    api_send("CameraMove", list, () => {
+  api_send('CameraMove', list, () => {
-      console.log("CameraMove西小站");
+    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);

src/views/pages/carPage/index.vue

@@ -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