From 8d10f20dbb6e4dbfca2c34b3ec0890240a7d5a8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cyu=E2=80=9D?= <“winebunny@163.com”> Date: Tue, 16 Jul 2024 17:46:29 +0800 Subject: [PATCH] 'p' --- src/views/pages/OpticalStoragePage/index.vue | 1921 ++++++++++-------- 1 file changed, 1083 insertions(+), 838 deletions(-) diff --git a/src/views/pages/OpticalStoragePage/index.vue b/src/views/pages/OpticalStoragePage/index.vue index fb81bcd..f19dcf0 100644 --- a/src/views/pages/OpticalStoragePage/index.vue +++ b/src/views/pages/OpticalStoragePage/index.vue @@ -3,19 +3,33 @@ <template> <div class="OpticalStoragePage_container" :style="styleVar"> <div class="content_left"> - <div :class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`" :style="{ opacity: hideLeft ? '1' : '0' }"> + <div + :class="`animated ${hideLeft ? 'fadeInLeftBig' : 'fadeOutLeftBig'}`" + :style="{ opacity: hideLeft ? '1' : '0' }" + > <!-- 左展开箭头 --> <div class="showPanel"> - <div class="icon_panel_left_off" @click="ospageContentFlag = true" v-if="!ospageContentFlag"></div> + <div + class="icon_panel_left_off" + @click="ospageContentFlag = true" + v-if="!ospageContentFlag" + ></div> </div> <!-- 左展开箭头 --> <div class="ospageleft" v-if="ospageContentFlag"> <!-- 左收缩箭头 --> - <div class="icon_panel_left_on" @click="ospageContentFlag = false" v-if="ospageContentFlag"></div> + <div + class="icon_panel_left_on" + @click="ospageContentFlag = false" + v-if="ospageContentFlag" + ></div> <!-- 左收缩箭头 --> <div class="title_bg title"> <div class="title_box"> - <img src="@/assets/images/osPage/os_logo.png" alt="" />光储充柔专题 + <img + src="@/assets/images/osPage/os_logo.png" + alt="" + />光储充柔专题 </div> </div> <div class="ospage_left_box content_bg"> @@ -62,14 +76,38 @@ <div class="tuopubg"></div> <div class="box"> <div class="boxbtn"> - <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="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> - <div class="btnbox8 btnpos" @click="handleShowSvg('ye31')"></div> + <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="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> + <div + class="btnbox8 btnpos" + @click="handleShowSvg('ye31')" + ></div> </div> </div> </div> @@ -130,32 +168,64 @@ </div> </div> <div class="content_right"> - <div :class="` animated ${hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'}`" :style="{ opacity: hideRight ? '1' : '0' }"> + <div + :class="` animated ${hideRight ? 'fadeInRightBig' : 'fadeOutRightBig'}`" + :style="{ opacity: hideRight ? '1' : '0' }" + > <!-- 右展开箭头 --> <div class="showPanel"> - <div class="icon_panel_right_off" @click="ospagerightFlag = true" v-if="!ospagerightFlag"></div> + <div + class="icon_panel_right_off" + @click="ospagerightFlag = true" + v-if="!ospagerightFlag" + ></div> </div> <!-- 右展开箭头 --> <div class="ospageright" v-if="ospagerightFlag"> <!-- 右收缩箭头 --> - <div class="icon_panel_right_on" @click="ospagerightFlag = false" v-if="ospagerightFlag"></div> + <div + class="icon_panel_right_on" + @click="ospagerightFlag = false" + v-if="ospagerightFlag" + ></div> <!-- 右收缩箭头 --> <div class="title_bg title"> <div class="title_box"> - <img src="@/assets/images/osPage/os2_logo.png" alt="" />光储充柔专题 + <img + src="@/assets/images/osPage/os2_logo.png" + alt="" + />光储充柔专题 </div> </div> <div class="ospage_right_box content_bg"> - <div class="infotitle"><span>光伏总功率曲线</span></div> + <div class="infotitle"> + <span>光伏总功率曲线</span> <img + src="@/assets/images/homePage/address.png" + alt="" + @click="send3d_guangfu" + /> + </div> <div class="os2info1"> <pvLine :echartArr="pvArr" v-if="pvArrFlag"></pvLine> </div> - <div class="infotitle"><span>储能总功率曲线</span></div> + <div class="infotitle"> + <span>储能总功率曲线</span> <img + src="@/assets/images/homePage/address.png" + alt="" + @click="send3d_chuneng" + /> + </div> <div class="os2info2"> - <storeLine :echartArr="battyArr" v-if="battyArrFlag"></storeLine> + <storeLine :echartArr="battyArr" v-if="battyArrFlag"> </storeLine> </div> - <div class="infotitle"><span>充电桩总功率曲线</span></div> + <div class="infotitle"> + <span>充电桩总功率曲线</span> <img + src="@/assets/images/homePage/address.png" + alt="" + @click="send3d_cdz" + /> + </div> <div class="os2info3"> <cdzLine :echartArr="userzArr" v-if="userzFlag"></cdzLine> </div> @@ -175,12 +245,15 @@ </div> <div class="content"> <div class="table_box"> - <el-table :data=" + <el-table + :data=" tableData.slice( (currentPage - 1) * pageSize, currentPage * pageSize ) - " style="width: 100%; height: 100%"> + " + style="width: 100%; height: 100%" + > <el-table-column label="ID" align="center"> <template #default="scope"> <span style="margin-left: 10px">{{ scope.row.id }}</span> @@ -211,7 +284,16 @@ </div> </div> <div class="bottom"> - <el-pagination small background layout="prev,pager,next" v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination> + <el-pagination + small + background + layout="prev,pager,next" + v-model:current-page="currentPage" + v-model:page-size="pageSize" + :total="total" + @size-change="handleSizeChange" + @current-change="handleCurrentChange" + ></el-pagination> </div> </div> <div class="area_load" v-if="areaLoadFlag"> @@ -269,7 +351,14 @@ </div> <!-- 单线图 --> <div class="lineSvgFlag"> - <el-dialog v-model="dialogVisible" width="30%" :show-close="false" :close-on-press-escape="false" :close-on-click-modal="false" custom-class="my-custom-dialog"> + <el-dialog + v-model="dialogVisible" + width="30%" + :show-close="false" + :close-on-press-escape="false" + :close-on-click-modal="false" + custom-class="my-custom-dialog" + > <!-- custom-class="customDialog_line panel" --> <div class="panel-footer"></div> <div class="closeBtn" @click="handleClose"></div> @@ -292,149 +381,199 @@ </template> <script setup lang="ts"> -import { ref, computed, watch, onMounted, reactive, onUnmounted, nextTick, getCurrentInstance, inject } from 'vue' -import { ElMessage, ElPagination, ElTable, ElDialog } from 'element-plus' -import { getColorFun } from '@/hooks/getColorFun/index' -import { app_load, api_send, api_register } from '@/ue4Player/app' -import pvLine from './pvLine.vue' -import storeLine from './storeLine.vue' -import cdzLine from './cdzLine.vue' -import beforeLine from './beforeLine.vue' -import afterLine from './afterLine.vue' -import battyJSON from '@/assets/json/osp/batty.json' -import lineSVG from '@/views/commonPage/lineSVG.vue' -import svgHtml from '@/assets/json/svg1.js' -import svgHtml2 from '@/assets/json/svg.js' -import svgHtml31 from '@/assets/json/svgying31.js' -import svgHtml41 from '@/assets/json/svgying41.js' -import svgHtml15 from '@/assets/json/svgzhan15.js' -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 { + ref, + computed, + watch, + onMounted, + reactive, + onUnmounted, + nextTick, + getCurrentInstance, + inject, +} from "vue"; +import { ElMessage, ElPagination, ElTable, ElDialog } from "element-plus"; +import { getColorFun } from "@/hooks/getColorFun/index"; +import { app_load, api_send, api_register } from "@/ue4Player/app"; +import pvLine from "./pvLine.vue"; +import storeLine from "./storeLine.vue"; +import cdzLine from "./cdzLine.vue"; +import beforeLine from "./beforeLine.vue"; +import afterLine from "./afterLine.vue"; +import battyJSON from "@/assets/json/osp/batty.json"; +import lineSVG from "@/views/commonPage/lineSVG.vue"; +import svgHtml from "@/assets/json/svg1.js"; +import svgHtml2 from "@/assets/json/svg.js"; +import svgHtml31 from "@/assets/json/svgying31.js"; +import svgHtml41 from "@/assets/json/svgying41.js"; +import svgHtml15 from "@/assets/json/svgzhan15.js"; +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' -import svgJSON from '@/assets/json/result2_copy.json' //555 -import svgJSONye23 from '@/assets/json/ye23.json' //555 -import svgJSONye31 from '@/assets/json/ye31.json' //555 -import svgJSONying31 from '@/assets/json/ying31.json' //555 -import svgJSONying41 from '@/assets/json/ying41.json' //555 -import svgJSONzhan15 from '@/assets/json/zhan15.json' //555 -import svgJSONzhan26 from '@/assets/json/zhan26.json' //555 +import svgJSON2 from "@/assets/json/nw-result1.json"; +import svgJSON from "@/assets/json/result2_copy.json"; //555 +import svgJSONye23 from "@/assets/json/ye23.json"; //555 +import svgJSONye31 from "@/assets/json/ye31.json"; //555 +import svgJSONying31 from "@/assets/json/ying31.json"; //555 +import svgJSONying41 from "@/assets/json/ying41.json"; //555 +import svgJSONzhan15 from "@/assets/json/zhan15.json"; //555 +import svgJSONzhan26 from "@/assets/json/zhan26.json"; //555 -import '@svgdotjs/svg.panzoom.js' -import 'echarts/lib/component/dataZoom' -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' -import { handleEchartsData, handleEchartsData_timeStamp_p } from '@/hooks/handleFun' -import { log } from 'console' +import "@svgdotjs/svg.panzoom.js"; +import "echarts/lib/component/dataZoom"; +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"; +import { + handleEchartsData, + handleEchartsData_timeStamp_p, +} from "@/hooks/handleFun"; +import { log } from "console"; onMounted(() => { - send3D() //发送三维 - getbatrry() //储能功率曲线 - getuser() //充电桩用户侧功率曲线 - getpv() //光伏功率曲线 -}) + send3D(); //发送三维 + getbatrry(); //储能功率曲线 + getuser(); //充电桩用户侧功率曲线 + getpv(); //光伏功率曲线 +}); 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.396,Y=38.887,Z=-105.568)", + rotation: "Pitch=-2.087,Yaw=-43.474,Roll=0.0", + }; + api_send("CameraMove", list, () => { + console.log("CameraMove西小站"); + }); +}; +const send3d_guangfu=()=>{ + // 发送西小站三维移动位置 + const list = { + location: "(X=117.396,Y=38.887,Z=-101.629)", + rotation: "Pitch=-9.473,Yaw=-178.668,Roll=0.0", + }; + api_send("CameraMove", list, () => { + console.log("CameraMove西小站——光伏"); + }); +} +const send3d_chuneng=()=>{ + // 发送西小站三维移动位置 + const list = { + location: "(X=117.396,Y=38.887,Z=-105.568)", + rotation: "Pitch=-2.087,Yaw=-43.474,Roll=0.0", + }; + api_send("CameraMove", list, () => { + console.log("CameraMove西小站——储能"); + }); +} +const send3d_cdz=()=>{ + // 发送西小站 _cdz三维移动位置 + const list = { + location: "(X=117.396,Y=38.887,Z=-105.568)", + rotation: "Pitch=-2.087,Yaw=-43.474,Roll=0.0", + }; + api_send("CameraMove", list, () => { + console.log("CameraMove西小站_充电桩"); + }); } // 左 // 左侧页面标识 -let ospageContentFlag = ref(true) +let ospageContentFlag = ref(true); //左1 // 点击执行明细按钮 -let runDetailFlage = ref(false) +let runDetailFlage = ref(false); //左2 // 图标获取echarts图时间 -let timeSelect = ref() +let timeSelect = ref(); // 点击台区负载情况 -let areaLoadFlag = ref(false) +let areaLoadFlag = ref(false); const handleRunDetail = () => { - areaLoadFlag.value = false - runDetailFlage.value = true -} + areaLoadFlag.value = false; + runDetailFlage.value = true; +}; const handleAreaLoad = () => { - runDetailFlage.value = false - areaLoadFlag.value = true -} + runDetailFlage.value = false; + areaLoadFlag.value = true; +}; // 右侧 储能 -let battyArr = reactive([]) //储能 -let pvArr = reactive([]) //光伏 -let userzArr = reactive([]) //用户侧充电桩 +let battyArr = reactive([]); //储能 +let pvArr = reactive([]); //光伏 +let userzArr = reactive([]); //用户侧充电桩 -let battyArrFlag = ref<boolean>(false) -let pvArrFlag = ref<boolean>(false) -let userzFlag = ref<boolean>(false) +let battyArrFlag = ref<boolean>(false); +let pvArrFlag = ref<boolean>(false); +let userzFlag = ref<boolean>(false); const getpv = () => { - pvApi({ mrid: '03DKX-24289' }).then(res => { - console.log(res, 'respv') - console.log('1----------', res) + pvApi({ mrid: "03DKX-24289" }).then((res) => { + console.log(res, "respv"); + console.log("1----------", res); - pvArr = handleEchartsData_timeStamp_p(res.data, 60) + pvArr = handleEchartsData_timeStamp_p(res.data, 60); // pvArr = res.data; if (pvArr.length > 0) { - pvArrFlag.value = true + pvArrFlag.value = true; } - }) -} + }); +}; const getuser = () => { - usrzApi({ mrid: '03DKX-24289' }).then(res => { + usrzApi({ mrid: "03DKX-24289" }).then((res) => { // userzArr = res.data; - userzArr = handleEchartsData_timeStamp_p(res.data, 60) + userzArr = handleEchartsData_timeStamp_p(res.data, 60); if (userzArr.length > 0) { - userzFlag.value = true + userzFlag.value = true; } - }) -} + }); +}; const getbatrry = () => { - buttyApi({}).then(res => { - console.log(res, 'ssss') + buttyApi({}).then((res) => { + console.log(res, "ssss"); // battyArr = res.data; - battyArr = handleEchartsData_timeStamp_p(res.data, 60) + battyArr = handleEchartsData_timeStamp_p(res.data, 60); if (battyArr.length > 0) { - battyArrFlag.value = true + battyArrFlag.value = true; } - }) -} + }); +}; // 单线图------------------ -let lineSvgFlag = ref(false) +let lineSvgFlag = ref(false); // 单线图弹框 -let dialogVisible = ref<boolean>(false) -let draw: any = null // svg图 -let SVGContainer = ref() // svg图DOM -let tabValue = ref<string>('有功') -let loadingFlag = ref<boolean>(false) -let timer = ref<any>('') +let dialogVisible = ref<boolean>(false); +let draw: any = null; // svg图 +let SVGContainer = ref(); // svg图DOM +let tabValue = ref<string>("有功"); +let loadingFlag = ref<boolean>(false); +let timer = ref<any>(""); // 点击弹窗关闭-------单线图 let handleClose = () => { - clearInterval(timer.value) - draw?.clear() - SVGContainer.value.innerHTML = '' + clearInterval(timer.value); + draw?.clear(); + SVGContainer.value.innerHTML = ""; // alert(1) - dialogVisible.value = false -} -let svgImage = new URL('@/assets/images/svgImage/active.jpg', import.meta.url).href + dialogVisible.value = false; +}; +let svgImage = new URL("@/assets/images/svgImage/active.jpg", import.meta.url) + .href; let handleShowSvg = async (svgIndex: string) => { - dialogVisible.value = true - loadingFlag.value = true + dialogVisible.value = true; + loadingFlag.value = true; // let setData = { id: svgIndex } // svgdApi(setData) @@ -493,535 +632,598 @@ let handleShowSvg = async (svgIndex: string) => { // ---------离线的svg 返回结果 // 更换result接口 - let svgJSONIndex = {} - if (svgIndex === '556') { - svgJSONIndex = svgJSON2.result - } else if (svgIndex === '555') { - svgJSONIndex = svgJSON.result - } else if (svgIndex === 'ying31') { - svgJSONIndex = svgJSONying31.result - } else if (svgIndex === 'ying41') { - svgJSONIndex = svgJSONying41.result - } else if (svgIndex === 'zhan15') { - svgJSONIndex = svgJSONzhan15.result - } else if (svgIndex === 'zhan26') { - svgJSONIndex = svgJSONzhan26.result - } else if (svgIndex === 'ye23') { - svgJSONIndex = svgJSONye23.result - } else if (svgIndex === 'ye31') { - svgJSONIndex = svgJSONye31.result + let svgJSONIndex = {}; + if (svgIndex === "556") { + svgJSONIndex = svgJSON2.result; + } else if (svgIndex === "555") { + svgJSONIndex = svgJSON.result; + } else if (svgIndex === "ying31") { + svgJSONIndex = svgJSONying31.result; + } else if (svgIndex === "ying41") { + svgJSONIndex = svgJSONying41.result; + } else if (svgIndex === "zhan15") { + svgJSONIndex = svgJSONzhan15.result; + } else if (svgIndex === "zhan26") { + svgJSONIndex = svgJSONzhan26.result; + } else if (svgIndex === "ye23") { + svgJSONIndex = svgJSONye23.result; + } else if (svgIndex === "ye31") { + svgJSONIndex = svgJSONye31.result; } - let result = svgJSONIndex + let result = svgJSONIndex; nextTick(() => { // 更换svg图 - let svgHtmlIndex = '' - if (svgIndex === '556') { + let svgHtmlIndex = ""; + if (svgIndex === "556") { // svgHtmlIndex = svgHtml2 - svgHtmlIndex = testSvg1 - handleCustomLine(svgHtmlIndex, result) - return - } else if (svgIndex === '555') { - svgHtmlIndex = svgHtml - } else if (svgIndex === 'ying31') { - svgHtmlIndex = svgHtml31 - } else if (svgIndex === 'ying41') { - svgHtmlIndex = svgHtml41 - } else if (svgIndex === 'zhan15') { - svgHtmlIndex = svgHtml15 - } else if (svgIndex === 'zhan26') { - svgHtmlIndex = svgHtml26 - } else if (svgIndex === 'ye23') { - svgHtmlIndex = svgHtml23 - } else if (svgIndex === 'ye31') { - svgHtmlIndex = svgHtml311 + svgHtmlIndex = testSvg1; + handleCustomLine(svgHtmlIndex, result); + return; + } else if (svgIndex === "555") { + svgHtmlIndex = svgHtml; + } else if (svgIndex === "ying31") { + svgHtmlIndex = svgHtml31; + } else if (svgIndex === "ying41") { + svgHtmlIndex = svgHtml41; + } else if (svgIndex === "zhan15") { + svgHtmlIndex = svgHtml15; + } else if (svgIndex === "zhan26") { + svgHtmlIndex = svgHtml26; + } else if (svgIndex === "ye23") { + svgHtmlIndex = svgHtml23; + } else if (svgIndex === "ye31") { + svgHtmlIndex = svgHtml311; } - fun(svgHtmlIndex) - }) + fun(svgHtmlIndex); + }); // 潮流计算 setTimeout(() => { nextTick(() => { - handleAnimate(result) - }) - }, 300) + handleAnimate(result); + }); + }, 300); // ---------离线的svg 返回结果 function fun(svgHtml: any) { - console.log('svg图渲染函数开始') + 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 }) - draw.size('100%', '100%') - draw.zoom(1) + 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(1); // 设置文字为白色 - draw.find('text').each(function () { - if (this.fill() === 'blank' || this.fill() === '#000000') { - this.fill('#FFFFFF') + draw.find("text").each(function () { + if (this.fill() === "blank" || this.fill() === "#000000") { + this.fill("#FFFFFF"); } - }) + }); - draw.find('g').each(function () { + draw.find("g").each(function () { if (this.node.children[1]) { - if (this.node.children[1].tagName === 'metadata') { + if (this.node.children[1].tagName === "metadata") { if (this.node.children[1].children[0].attributes.globeid) { - this.node.attributes[0].nodeValue = 'ZQ_' + this.node.children[1].children[0].attributes.globeid.nodeValue + this.node.attributes[0].nodeValue = + "ZQ_" + + this.node.children[1].children[0].attributes.globeid.nodeValue; } } } - }) + }); } - console.log('svg图渲染函数结束') -} + console.log("svg图渲染函数结束"); +}; // 处理自定义的图 let handleCustomLine = (svgHtml, result) => { - dialogVisible.value = true - loadingFlag.value = true - console.log('svg图渲染函数开始111') + 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.5) + 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.5); - console.log(result, 'result') - let polyline = draw.find('polyline') - const dom = draw.find('g') + console.log(result, "result"); + let polyline = draw.find("polyline"); + const dom = draw.find("g"); - result.line.forEach(item => { - polyline.forEach(lineIte => { + 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') + dom.forEach((lineG) => { + const polyineArray = lineIte.array(); + let pathDate = "M" + polyineArray.join(" L"); // 流向 - handlePolyineAnimate(polyineArray, pathDate, lineG) + handlePolyineAnimate(polyineArray, pathDate, lineG); // 文字 - handleLineText2(polyineArray, item, lineG) - }) + handleLineText2(polyineArray, item, lineG); + }); } - }) - }) + }); + }); // 正向流动 function handlePolyineAnimate(pointArray, pointsValue, lineDom) { // 拿到长度 - let length = 0 + 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]) + 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 + 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 + length = 50; + num = 20; + num1 = 0.5; + spacingDuration = 2; } else if (length >= 100 && length <= 200) { - length = 150 - num = 20 - num1 = 0.5 - spacingDuration = 4 + length = 150; + num = 20; + num1 = 0.5; + spacingDuration = 4; } else if (length >= 200 && length <= 500) { - length = 350 - num = 20 - num1 = 0.5 - spacingDuration = 8 + length = 350; + num = 20; + num1 = 0.5; + spacingDuration = 8; } else if (length >= 500 && length <= 700) { - length = 650 - num = 20 - num1 = 0.5 - spacingDuration = 10 + length = 650; + num = 20; + num1 = 0.5; + spacingDuration = 10; } else if (length >= 700 && length <= 1000) { - length = 850 - num = 20 - num1 = 0.5 - spacingDuration = 12 + length = 850; + num = 20; + num1 = 0.5; + spacingDuration = 12; } else if (length >= 1000 && length <= 1200) { - length = 1150 - num = 20 - num1 = 0.5 - spacingDuration = 16 + length = 1150; + num = 20; + num1 = 0.5; + spacingDuration = 16; } else if (length >= 1200 && length <= 1500) { - length = 1350 - num = 20 - num1 = 0.5 - spacingDuration = 20 + length = 1350; + num = 20; + num1 = 0.5; + spacingDuration = 20; } else if (length >= 1500 && length <= 1700) { - length = 1600 - num = 20 - num1 = 0.5 - spacingDuration = 24 + length = 1600; + num = 20; + num1 = 0.5; + spacingDuration = 24; } else if (length >= 1700 && length <= 2000) { - length = 1850 - num = 20 - num1 = 0.5 - spacingDuration = 28 + length = 1850; + num = 20; + num1 = 0.5; + spacingDuration = 28; } else if (length >= 2000 && length <= 2200) { - length = 2100 - num = 20 - num1 = 0.5 - spacingDuration = 32 + length = 2100; + num = 20; + num1 = 0.5; + spacingDuration = 32; } else if (length >= 2200 && length <= 2500) { - length = 2350 - num = 20 - num1 = 0.5 - spacingDuration = 34 + length = 2350; + num = 20; + num1 = 0.5; + spacingDuration = 34; } else if (length >= 2500 && length <= 2700) { - length = 2600 - num = 20 - num1 = 0.5 - spacingDuration = 38 + length = 2600; + num = 20; + num1 = 0.5; + spacingDuration = 38; } else if (length >= 2700 && length <= 3000) { - length = 2800 - num = 20 - num1 = 0.5 - spacingDuration = 40 + length = 2800; + num = 20; + num1 = 0.5; + spacingDuration = 40; } else if (length >= 3000 && length <= 3200) { - length = 3100 - num = 20 - num1 = 0.5 - spacingDuration = 44 + length = 3100; + num = 20; + num1 = 0.5; + spacingDuration = 44; } else if (length >= 3200 && length <= 3500) { - length = 3350 - num = 20 - num1 = 0.5 - spacingDuration = 48 + length = 3350; + num = 20; + num1 = 0.5; + spacingDuration = 48; } - let numTriangles = Math.ceil(length / num) - let duration = numTriangles / num1 - let middleDuration = duration / num1 + 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 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) + 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) + lineDom.add(triangle); } - let rect = draw.rect(30, 30).fill('#000').move(-5, -10) - lineDom.add(rect) + 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 + const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); + return distance; } function handleLineText2(polyineArray, Lineitem, lineDom) { - let textArr = ['0ce8fe26-ce4a-4d21-9dfa-b8084e9296091', '0ce8fe26-ce4a-4d21-9dfa-b8084e9296092', '0ce8fe26-ce4a-4d21-9dfa-b8084e9296093', '26'] - if (textArr.includes(Lineitem.sec_id)) return + let textArr = [ + "0ce8fe26-ce4a-4d21-9dfa-b8084e9296091", + "0ce8fe26-ce4a-4d21-9dfa-b8084e9296092", + "0ce8fe26-ce4a-4d21-9dfa-b8084e9296093", + "26", + ]; + if (textArr.includes(Lineitem.sec_id)) return; // 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'] + 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 + 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 + 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 + 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 + endX = x; + endY = y + 30; + endTextX = x - 30; + endTextY = y + 40; } //只要线路上有sec_id 就显示线路上的文字 p q v i 参数 - if (data['sec_id']) { + 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' - }) + "stroke-width": 2, + id: "left_line_" + data.psrId, + stroke: "green", + "stroke-dasharray": "3,3", + }); // 文本 text = draw - .text(`P: ${(parseFloat(data['Pi']) * 100).toFixed(4)} kW \nQ: ${(parseFloat(data['Qi']) * 100).toFixed(4)} kVar \nV: ${parseFloat(data['V_b']).toFixed(4)} kV \nI: ${((parseFloat(data['Pi']) * 100) / (parseFloat(data['V_b']) * 1.732)).toFixed(4)} A`) + .text( + `P: ${(parseFloat(data["Pi"]) * 100).toFixed(4)} kW \nQ: ${( + parseFloat(data["Qi"]) * 100 + ).toFixed(4)} kVar \nV: ${parseFloat(data["V_b"]).toFixed( + 4 + )} kV \nI: ${( + (parseFloat(data["Pi"]) * 100) / + (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' + id: "load_text" + data.psrId, + "font-size": "8", + leading: "0.9", }) - .fill('green') + .fill("green"); } - lineDom.add(line) - lineDom.add(text) + lineDom.add(line); + lineDom.add(text); } - let path = draw.find('path') - path.forEach(item => { + 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]) + let data = result.load.find( + (ite) => item.node.id === ite.load_id.split("&")[0] + ); if (data) { - let position = item.bbox() + let position = item.bbox(); - let centerX = position.cx - let centerY = position.cy - console.log(position, centerX, centerY) + 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' - }) + "stroke-width": 2, + id: "load_" + data.load_id, + stroke: "green", + "stroke-dasharray": "3,3", + }); // 文本 draw - .text(`P: ${(parseFloat(data['Pload/phase']) * 100).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 100).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, - id: 'load_text' + data.load_id, - 'font-size': '9', - leading: '0.9' + id: "load_text" + data.load_id, + "font-size": "9", + leading: "0.9", }) - .fill('green') + .fill("green"); } } - }) - }) -} + }); + }); +}; // 处理线的动画、文字 let handleAnimate = async (result: any) => { - console.log('进入动画', result) + console.log("进入动画", result); // 获取所有的g - let aclineDOM = draw.find('g') + let aclineDOM = draw.find("g"); // 线的流向 - result.line.forEach(item => { + result.line.forEach((item) => { // console.log(item, "000,潮流计算的流向"); let showTextArr = [ - '53865f4f-5564-42fd-94e6-697fa110dc58', - 'f9d98d48-f25a-4486-bf20-49895ec3e342', - 'a1096ad7-aae7-487b-ad05-1113a03cb4f8', - '6DDB3B85-A4AB-4595-8591-2168E8D81210-04953', - '95efda22-86a3-49b5-9de3-803738256461', - 'c47a01b3-3d42-47fd-a263-6ae11b630a36', - 'e0af5215-d781-4050-87bb-c21dafca0695', - '8bd342c8-9820-4bb8-85cf-105bcb8f1a03', - '4b00fe92-0efa-40b9-bce0-2d6598a6c357', - '1fd7d361-4ea0-487f-9a36-a7a5d222b66d', - 'c70087bd-0468-4ac7-8208-db96853550b8', - '65c2f45a-4432-4a29-9b9e-a2ac60f83f38', - 'c78a0a1d-f2b5-4a41-ba98-ba895a5701f5', - 'e5698b2c-2dff-43b7-b0b1-6135f780a052', - '1bf76898-ea7c-47bd-8f31-14d624ac3f66', - '20604b66-0efd-44fc-a712-e4a534b61ffa', - 'fe8cb836-ae9b-4ab2-8b65-a5ff405d3a9c', - 'd5336b00-5afe-4393-9014-bcb2dc0029a1', - 'AD4A0872-6474-4BD2-9646-746B0B63D24A-26520', - 'ea04e6d3-587e-4ca0-ae6a-31997fd1fb35', - '7fc56aa9-3bf3-4a2b-bd03-4b6b791bc63a', - 'c8695ee9-c277-40ac-ad1c-5c10605e4e47', - '9f77f5b2-c3e2-4141-be4f-df9043789813', - 'AD4A0872-6474-4BD2-9646-746B0B63D24A-26480', - '22205de9-f4db-4626-aad5-437b17856f6d', - '177997cd-edc3-420d-b657-0b602a473929', - '1d2f708c-f0d6-4269-bcc7-db998503d9e6', - 'ef7de3d0-8521-4f6d-81d2-c9f1705bfb9b', - 'd3cebbd8-3ffd-48af-8979-874389f9c32a', - '01f825ec-9526-4239-b0cf-f9d0d473b086', - '513e7602-d1d5-4370-a39f-af41ef2a5eef', - '23ee05dc-1e5d-4eca-8fea-07210d06a579', - '487C8FA1-ABEC-4252-A14D-7727D4E31DAD-47360', - 'AD4A0872-6474-4BD2-9646-746B0B63D24A-26525', - 'AD4A0872-6474-4BD2-9646-746B0B63D24A-26530', - 'SBID00000017083154D08541B8A57FB8B69B1B3201', - 'AD4A0872-6474-4BD2-9646-746B0B63D24A-26535', - '013255C2-7FE7-4B28-BF7C-7EB83FC07F31-06125', - 'AD4A0872-6474-4BD2-9646-746B0B63D24A-26465', - 'ce4ba346-1227-416f-84ad-b8d2cde0154c', - 'SBID0000001986642DB7C045E89813CED6BE4C13A0', - '87608bd7-15a2-4c9c-bd78-ccf9b58a31c0', - '888c9204-7897-4dc2-a247-3ab3be9a08cf', - 'c65da884-685d-4c1b-97d8-08b50328b0ba', - 'SBID0000001D2DEA1F390C4024B42B0C3F9E7F4EFE', - '90477e98-bfd8-46ab-ba4e-c58d631a1437', - '0746bb6a-b717-49b1-bc57-6073c4e2d2e9', - '5d43423c-3705-40c1-8226-db498fd35af2', - 'aeaf5dbb-e1c9-48bb-adc6-d604fa8f1028', - '31e7b036-400a-4fe3-8700-30190f7f6b82', - 'SBID000000C8642470D83E486BBB311BDA51515F35', - 'af2d4b84-bee6-4c93-b9d4-3e1c32ad17ff', - 'SBID0000006A6B053E31A648609F9743D97E12A49D', - 'b78c69b4-71de-47cf-ae83-90dbd4e9e8f2', - 'bab210a5-c289-461c-94fb-5c4afd158544', - 'c83d5650-08e1-44d6-b8c7-822de083f36e', - '6374FC19-1673-43C6-AC8D-494CFFBB4C9F-85198', - '6374FC19-1673-43C6-AC8D-494CFFBB4C9F-85193', - 'be9d83ac-8121-4f96-bb3a-c1c751f185d6', - '2ccdaa60-8958-45de-bb31-f35e7ba85a8b', - 'a2ebae33-0efb-40ee-a097-2dacec109868', - 'eb4fc970-2478-4bdc-aa25-bdd7ad4c5dae', - '644e331d-e932-4ec8-92ed-3d09e30db28f', - 'SBID000000BE1E6FF87E7244B5BC7E1346FF0860CA', - 'ce1df80b-9fd3-498b-9f24-a5ed6f416532', - '2D6FDD6A-F2D0-4EDE-8177-321A747C4D10-76308', - '00d1219b-a69c-4a43-b8fd-67f461b4c9f3', - 'DCEED74F-BD86-4AF6-AE71-15C80F872877-46071', - '2db67071-a5bd-4c03-83bb-d4250d44b995', - 'd63eae69-fe6c-4012-b6aa-8c5333f2dd27', - 'b7867bdd-4203-4f03-9d25-8f5acb3caa3b', - '8CF95CE3-7B11-15ED-E044-001A4B099F30-00001', - 'a12f5c38-3ad7-47be-b304-045733513143', - '6b046b2c-dc11-45d5-8fff-d1529fe3835a', - '30fe04fa-8610-4cb5-8bc8-ad1222690638', - '1682d60e-58f2-4716-a041-59e7ddb35ee8', - 'a2998143-bf4a-4753-8f6a-08a519a7bd11', - 'e95bd2eb-5c61-4993-90f9-625ada63ad04', - '8febc98f-8334-4de0-a163-c6c03ad0692b', - '93313035-093F-4346-96F4-84CEA3607C08-25598', - '7A414E41-2DA2-4341-91BB-250834033791-36035', - 'SBID0000002BEFD03075CF4033878FEF9249896A21', - 'cd4d4dd4-15a1-4154-995a-fe2431051acd', - '5e909114-b342-4dc1-9f32-22b268060812', - '629c0eb1-7af8-4893-87ab-d8feb70cdb1f', - 'FF801E5F-FE30-4F54-B32E-28B9A46504B7-13926', - 'DD330AD2-52B1-4581-AB75-18D80366F023-37414', - '7fb7a36d-2f2f-4e57-9ebb-bc43a8109e78', - '8f70fcb5-b59f-490a-baad-55370c5f7161', - 'dfbf6f51-edb2-440e-b703-1325fe2695fb', - '0b48767a-d287-4f57-be3b-1148305b2048', - '629c0eb1-7af8-4893-87ab-d8feb70cdb1f', - 'FF801E5F-FE30-4F54-B32E-28B9A46504B7-13926', - 'DD330AD2-52B1-4581-AB75-18D80366F023-37414', - '7fb7a36d-2f2f-4e57-9ebb-bc43a8109e78', - '8f70fcb5-b59f-490a-baad-55370c5f7161', - 'SBID000000EEED86E606694F4EACF343E96A517170', - 'e3ad70bf-4b84-4fb3-8c95-36973433b007', - 'dfbf6f51-edb2-440e-b703-1325fe2695fb', - '4e036c18-19c5-473a-a95d-481cf89c362c', - '4e231cf2-9f49-4a78-a534-c0b702296833', - '9d8e808f-5d3b-4376-97a7-58eeca042dba', - 'SBID000000AECA5D4DF7874850A8F0AA07FCC3A705', - '283e025e-994f-4125-8772-4ec88fc7e321', - 'fa4353a2-6ccb-4e12-b47a-e765b81804fa', - '0ffd90f0-37dd-4aa1-96a7-a29d2bd4e535', - '2299b109-34a7-493f-9541-c22594ba4312', - 'cb957cab-247a-4cea-b787-cd627f9e0f7a', - 'b7dc1c1f-5743-4905-b99e-cbc5617b660a', - 'fbca52e8-59ef-4bc1-be38-6f60757a3579', - 'b46aea1f-fc42-4bd4-a6b2-c5ae63c2b33b', - '16bb368c-104d-4ba7-934d-a44927f65444', - '3e43db18-8b4d-4e57-99b0-ab6521600daa', - 'SBID0000003195CD2F53454D99BD74B97F94982AF9', - '8486dc26-360e-458b-976c-93ced7c82369', - '99da9925-a1d7-49be-89ef-adb955a06f21', - '3c18d284-b067-4dca-94b4-ee178410f751', - '9de0fd07-7169-4fcb-bb0b-789ec3644ac7', - '418bb7a7-f954-4505-8762-f80b1516d773', - '4b14e5cc-91f7-484b-b970-45297c125d8d', - '9df040f3-0278-4ea8-960f-0b8c9b13c759', - '461EC281-51EC-4913-82B0-C155B2C3EC96-38266', - '6ed756cb-d68c-482d-9e37-b9d55f6ba28e', - '1190934f-fc87-4ae0-8ffd-7ad1873342b5', - '64dbe8d8-13d3-434d-be7d-0a34087c9bba', - '8efc932e-4ee9-4898-9ce9-e074a5c3e5ae', - '5398db21-a148-4ec2-9e5c-27be65e83f81', - 'eea16226-2564-41d7-b9fd-afb7fcab3086', - '7d0a1873-b6cf-4d91-9e3d-7cff52681768', - '37765eb0-b5df-4fbf-8a62-8c1af3454c9a', - '25d8733e-e117-4b6d-8a36-ce0bd1e6bdbb', - '787bf14f-e8f7-4a2c-9b35-44e1f710838d', - '7A414E41-2DA2-4341-91BB-250834033791-36070', - 'f9b30774-dcf2-4e3d-a055-3b8f3951734e', - '791b3f34-7329-4c99-8a2f-821695a539a4', - '977797dc-70b8-4b5e-b8da-59d87fd54e4c', - '96d8e5c2-fe59-420e-b2b8-dca40760d1bb', - '958c21b9-c6b6-4e39-9320-6b81958d6a89', - '6723d52b-dd5d-4a2d-bfcd-6c86c26196ff', - '195947f3-4f2d-4f04-8652-62260d83896d', - - ] + "53865f4f-5564-42fd-94e6-697fa110dc58", + "f9d98d48-f25a-4486-bf20-49895ec3e342", + "a1096ad7-aae7-487b-ad05-1113a03cb4f8", + "6DDB3B85-A4AB-4595-8591-2168E8D81210-04953", + "95efda22-86a3-49b5-9de3-803738256461", + "c47a01b3-3d42-47fd-a263-6ae11b630a36", + "e0af5215-d781-4050-87bb-c21dafca0695", + "8bd342c8-9820-4bb8-85cf-105bcb8f1a03", + "4b00fe92-0efa-40b9-bce0-2d6598a6c357", + "1fd7d361-4ea0-487f-9a36-a7a5d222b66d", + "c70087bd-0468-4ac7-8208-db96853550b8", + "65c2f45a-4432-4a29-9b9e-a2ac60f83f38", + "c78a0a1d-f2b5-4a41-ba98-ba895a5701f5", + "e5698b2c-2dff-43b7-b0b1-6135f780a052", + "1bf76898-ea7c-47bd-8f31-14d624ac3f66", + "20604b66-0efd-44fc-a712-e4a534b61ffa", + "fe8cb836-ae9b-4ab2-8b65-a5ff405d3a9c", + "d5336b00-5afe-4393-9014-bcb2dc0029a1", + "AD4A0872-6474-4BD2-9646-746B0B63D24A-26520", + "ea04e6d3-587e-4ca0-ae6a-31997fd1fb35", + "7fc56aa9-3bf3-4a2b-bd03-4b6b791bc63a", + "c8695ee9-c277-40ac-ad1c-5c10605e4e47", + "9f77f5b2-c3e2-4141-be4f-df9043789813", + "AD4A0872-6474-4BD2-9646-746B0B63D24A-26480", + "22205de9-f4db-4626-aad5-437b17856f6d", + "177997cd-edc3-420d-b657-0b602a473929", + "1d2f708c-f0d6-4269-bcc7-db998503d9e6", + "ef7de3d0-8521-4f6d-81d2-c9f1705bfb9b", + "d3cebbd8-3ffd-48af-8979-874389f9c32a", + "01f825ec-9526-4239-b0cf-f9d0d473b086", + "513e7602-d1d5-4370-a39f-af41ef2a5eef", + "23ee05dc-1e5d-4eca-8fea-07210d06a579", + "487C8FA1-ABEC-4252-A14D-7727D4E31DAD-47360", + "AD4A0872-6474-4BD2-9646-746B0B63D24A-26525", + "AD4A0872-6474-4BD2-9646-746B0B63D24A-26530", + "SBID00000017083154D08541B8A57FB8B69B1B3201", + "AD4A0872-6474-4BD2-9646-746B0B63D24A-26535", + "013255C2-7FE7-4B28-BF7C-7EB83FC07F31-06125", + "AD4A0872-6474-4BD2-9646-746B0B63D24A-26465", + "ce4ba346-1227-416f-84ad-b8d2cde0154c", + "SBID0000001986642DB7C045E89813CED6BE4C13A0", + "87608bd7-15a2-4c9c-bd78-ccf9b58a31c0", + "888c9204-7897-4dc2-a247-3ab3be9a08cf", + "c65da884-685d-4c1b-97d8-08b50328b0ba", + "SBID0000001D2DEA1F390C4024B42B0C3F9E7F4EFE", + "90477e98-bfd8-46ab-ba4e-c58d631a1437", + "0746bb6a-b717-49b1-bc57-6073c4e2d2e9", + "5d43423c-3705-40c1-8226-db498fd35af2", + "aeaf5dbb-e1c9-48bb-adc6-d604fa8f1028", + "31e7b036-400a-4fe3-8700-30190f7f6b82", + "SBID000000C8642470D83E486BBB311BDA51515F35", + "af2d4b84-bee6-4c93-b9d4-3e1c32ad17ff", + "SBID0000006A6B053E31A648609F9743D97E12A49D", + "b78c69b4-71de-47cf-ae83-90dbd4e9e8f2", + "bab210a5-c289-461c-94fb-5c4afd158544", + "c83d5650-08e1-44d6-b8c7-822de083f36e", + "6374FC19-1673-43C6-AC8D-494CFFBB4C9F-85198", + "6374FC19-1673-43C6-AC8D-494CFFBB4C9F-85193", + "be9d83ac-8121-4f96-bb3a-c1c751f185d6", + "2ccdaa60-8958-45de-bb31-f35e7ba85a8b", + "a2ebae33-0efb-40ee-a097-2dacec109868", + "eb4fc970-2478-4bdc-aa25-bdd7ad4c5dae", + "644e331d-e932-4ec8-92ed-3d09e30db28f", + "SBID000000BE1E6FF87E7244B5BC7E1346FF0860CA", + "ce1df80b-9fd3-498b-9f24-a5ed6f416532", + "2D6FDD6A-F2D0-4EDE-8177-321A747C4D10-76308", + "00d1219b-a69c-4a43-b8fd-67f461b4c9f3", + "DCEED74F-BD86-4AF6-AE71-15C80F872877-46071", + "2db67071-a5bd-4c03-83bb-d4250d44b995", + "d63eae69-fe6c-4012-b6aa-8c5333f2dd27", + "b7867bdd-4203-4f03-9d25-8f5acb3caa3b", + "8CF95CE3-7B11-15ED-E044-001A4B099F30-00001", + "a12f5c38-3ad7-47be-b304-045733513143", + "6b046b2c-dc11-45d5-8fff-d1529fe3835a", + "30fe04fa-8610-4cb5-8bc8-ad1222690638", + "1682d60e-58f2-4716-a041-59e7ddb35ee8", + "a2998143-bf4a-4753-8f6a-08a519a7bd11", + "e95bd2eb-5c61-4993-90f9-625ada63ad04", + "8febc98f-8334-4de0-a163-c6c03ad0692b", + "93313035-093F-4346-96F4-84CEA3607C08-25598", + "7A414E41-2DA2-4341-91BB-250834033791-36035", + "SBID0000002BEFD03075CF4033878FEF9249896A21", + "cd4d4dd4-15a1-4154-995a-fe2431051acd", + "5e909114-b342-4dc1-9f32-22b268060812", + "629c0eb1-7af8-4893-87ab-d8feb70cdb1f", + "FF801E5F-FE30-4F54-B32E-28B9A46504B7-13926", + "DD330AD2-52B1-4581-AB75-18D80366F023-37414", + "7fb7a36d-2f2f-4e57-9ebb-bc43a8109e78", + "8f70fcb5-b59f-490a-baad-55370c5f7161", + "dfbf6f51-edb2-440e-b703-1325fe2695fb", + "0b48767a-d287-4f57-be3b-1148305b2048", + "629c0eb1-7af8-4893-87ab-d8feb70cdb1f", + "FF801E5F-FE30-4F54-B32E-28B9A46504B7-13926", + "DD330AD2-52B1-4581-AB75-18D80366F023-37414", + "7fb7a36d-2f2f-4e57-9ebb-bc43a8109e78", + "8f70fcb5-b59f-490a-baad-55370c5f7161", + "SBID000000EEED86E606694F4EACF343E96A517170", + "e3ad70bf-4b84-4fb3-8c95-36973433b007", + "dfbf6f51-edb2-440e-b703-1325fe2695fb", + "4e036c18-19c5-473a-a95d-481cf89c362c", + "4e231cf2-9f49-4a78-a534-c0b702296833", + "9d8e808f-5d3b-4376-97a7-58eeca042dba", + "SBID000000AECA5D4DF7874850A8F0AA07FCC3A705", + "283e025e-994f-4125-8772-4ec88fc7e321", + "fa4353a2-6ccb-4e12-b47a-e765b81804fa", + "0ffd90f0-37dd-4aa1-96a7-a29d2bd4e535", + "2299b109-34a7-493f-9541-c22594ba4312", + "cb957cab-247a-4cea-b787-cd627f9e0f7a", + "b7dc1c1f-5743-4905-b99e-cbc5617b660a", + "fbca52e8-59ef-4bc1-be38-6f60757a3579", + "b46aea1f-fc42-4bd4-a6b2-c5ae63c2b33b", + "16bb368c-104d-4ba7-934d-a44927f65444", + "3e43db18-8b4d-4e57-99b0-ab6521600daa", + "SBID0000003195CD2F53454D99BD74B97F94982AF9", + "8486dc26-360e-458b-976c-93ced7c82369", + "99da9925-a1d7-49be-89ef-adb955a06f21", + "3c18d284-b067-4dca-94b4-ee178410f751", + "9de0fd07-7169-4fcb-bb0b-789ec3644ac7", + "418bb7a7-f954-4505-8762-f80b1516d773", + "4b14e5cc-91f7-484b-b970-45297c125d8d", + "9df040f3-0278-4ea8-960f-0b8c9b13c759", + "461EC281-51EC-4913-82B0-C155B2C3EC96-38266", + "6ed756cb-d68c-482d-9e37-b9d55f6ba28e", + "1190934f-fc87-4ae0-8ffd-7ad1873342b5", + "64dbe8d8-13d3-434d-be7d-0a34087c9bba", + "8efc932e-4ee9-4898-9ce9-e074a5c3e5ae", + "5398db21-a148-4ec2-9e5c-27be65e83f81", + "eea16226-2564-41d7-b9fd-afb7fcab3086", + "7d0a1873-b6cf-4d91-9e3d-7cff52681768", + "37765eb0-b5df-4fbf-8a62-8c1af3454c9a", + "25d8733e-e117-4b6d-8a36-ce0bd1e6bdbb", + "787bf14f-e8f7-4a2c-9b35-44e1f710838d", + "7A414E41-2DA2-4341-91BB-250834033791-36070", + "f9b30774-dcf2-4e3d-a055-3b8f3951734e", + "791b3f34-7329-4c99-8a2f-821695a539a4", + "977797dc-70b8-4b5e-b8da-59d87fd54e4c", + "96d8e5c2-fe59-420e-b2b8-dca40760d1bb", + "958c21b9-c6b6-4e39-9320-6b81958d6a89", + "6723d52b-dd5d-4a2d-bfcd-6c86c26196ff", + "195947f3-4f2d-4f04-8652-62260d83896d", + ]; - let dom = draw.findOne('#ZQ_' + item.sec_id) + let dom = draw.findOne("#ZQ_" + item.sec_id); if (dom) { - if (item.Flow_Direction_Flag === '0') return - const polyine = dom.findOne('polyline') - const polyineArray = polyine.array() - const width = polyine.attr('stroke-width') - let polyineArray2 = polyine.array() - let pathDate = 'M' + polyineArray2.join(' L') - if (item.Flow_Direction_Flag === '-1') { - handlePolyineAnimate2(polyineArray, pathDate, dom, item) + if (item.Flow_Direction_Flag === "0") return; + const polyine = dom.findOne("polyline"); + const polyineArray = polyine.array(); + const width = polyine.attr("stroke-width"); + let polyineArray2 = polyine.array(); + let pathDate = "M" + polyineArray2.join(" L"); + if (item.Flow_Direction_Flag === "-1") { + handlePolyineAnimate2(polyineArray, pathDate, dom, item); } else { - handlePolyineAnimate(polyineArray, pathDate, dom, item) + handlePolyineAnimate(polyineArray, pathDate, dom, item); } - console.log(item.sec_id, showTextArr.includes(item.sec_id)) - showTextArr.includes(item.sec_id) ? '' : handleLineText2(polyineArray, item, dom) + console.log(item.sec_id, showTextArr.includes(item.sec_id)); + showTextArr.includes(item.sec_id) + ? "" + : handleLineText2(polyineArray, item, dom); } - }) + }); function handleLineText2(polyineArray, Lineitem, lineDom) { // console.log(lineDom, "lineDom2"); // console.log(item, "lineitem"); // 判断line的 "Flow_Direction_Flag": "0" 满足条件显示箭头和文字 - if (Lineitem['Flow_Direction_Flag'] === '0') return + 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 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 = ""; //只要线路上有sec_id 就显示线路上的文字 p q v i 参数 - if (data['sec_id']) { + if (data["sec_id"]) { // 引出线 line = draw.line(x, y, x - 5, y + 5).attr({ - 'stroke-width': 0.1, - id: 'left_line_' + data.psrId, - stroke: 'green', - 'stroke-dasharray': '1,1' - }) + "stroke-width": 0.1, + id: "left_line_" + data.psrId, + stroke: "green", + "stroke-dasharray": "1,1", + }); // 文本 text = draw - .text(`P: ${(parseFloat(data['Pi']) * 100).toFixed(4)} kW \nQ: ${(parseFloat(data['Qi']) * 100).toFixed(4)} kVar \nV: ${parseFloat(data['V_b']).toFixed(4)} kV \nI: ${((parseFloat(data['Pi']) * 100) / (parseFloat(data['V_b']) * 1.732)).toFixed(4)} kV`) + .text( + `P: ${(parseFloat(data["Pi"]) * 100).toFixed(4)} kW \nQ: ${( + parseFloat(data["Qi"]) * 100 + ).toFixed(4)} kVar \nV: ${parseFloat(data["V_b"]).toFixed( + 4 + )} kV \nI: ${( + (parseFloat(data["Pi"]) * 100) / + (parseFloat(data["V_b"]) * 1.732) + ).toFixed(4)} kV` + ) .attr({ x: x - 10, y: y + 5, - id: 'load_text' + data.psrId, - 'font-size': '1', - leading: '0.9' + id: "load_text" + data.psrId, + "font-size": "1", + leading: "0.9", }) - .fill('green') + .fill("green"); } - lineDom.add(line) - lineDom.add(text) + lineDom.add(line); + lineDom.add(text); } // 正向流动 function handlePolyineAnimate(pointArray, pointsValue, lineDom, Lineitem) { - console.log(pointArray, pointsValue, lineDom, Lineitem) + console.log(pointArray, pointsValue, lineDom, Lineitem); // console.log( // pointArray, @@ -1032,131 +1234,148 @@ let handleAnimate = async (result: any) => { // "潮流的流动--------" // ); // 判断line的 "Flow_Direction_Flag": "0" 满足条件显示箭头和文字 - if (Lineitem['Flow_Direction_Flag'] === '0') return + if (Lineitem["Flow_Direction_Flag"] === "0") return; // 拿到长度 - let length = 0 + 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]) + 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 + 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 + length = 50; + num = 20; + num1 = 0.5; + spacingDuration = 2; } else if (length >= 100 && length <= 200) { - length = 150 - num = 20 - num1 = 0.5 - spacingDuration = 4 + length = 150; + num = 20; + num1 = 0.5; + spacingDuration = 4; } else if (length >= 200 && length <= 500) { - length = 350 - num = 20 - num1 = 0.5 - spacingDuration = 8 + length = 350; + num = 20; + num1 = 0.5; + spacingDuration = 8; } else if (length >= 500 && length <= 700) { - length = 650 - num = 20 - num1 = 0.5 - spacingDuration = 10 + length = 650; + num = 20; + num1 = 0.5; + spacingDuration = 10; } else if (length >= 700 && length <= 1000) { - length = 850 - num = 20 - num1 = 0.5 - spacingDuration = 12 + length = 850; + num = 20; + num1 = 0.5; + spacingDuration = 12; } else if (length >= 1000 && length <= 1200) { - length = 1150 - num = 20 - num1 = 0.5 - spacingDuration = 16 + length = 1150; + num = 20; + num1 = 0.5; + spacingDuration = 16; } else if (length >= 1200 && length <= 1500) { - length = 1350 - num = 20 - num1 = 0.5 - spacingDuration = 20 + length = 1350; + num = 20; + num1 = 0.5; + spacingDuration = 20; } else if (length >= 1500 && length <= 1700) { - length = 1600 - num = 20 - num1 = 0.5 - spacingDuration = 24 + length = 1600; + num = 20; + num1 = 0.5; + spacingDuration = 24; } else if (length >= 1700 && length <= 2000) { - length = 1850 - num = 20 - num1 = 0.5 - spacingDuration = 28 + length = 1850; + num = 20; + num1 = 0.5; + spacingDuration = 28; } else if (length >= 2000 && length <= 2200) { - length = 2100 - num = 20 - num1 = 0.5 - spacingDuration = 32 + length = 2100; + num = 20; + num1 = 0.5; + spacingDuration = 32; } else if (length >= 2200 && length <= 2500) { - length = 2350 - num = 20 - num1 = 0.5 - spacingDuration = 34 + length = 2350; + num = 20; + num1 = 0.5; + spacingDuration = 34; } else if (length >= 2500 && length <= 2700) { - length = 2600 - num = 20 - num1 = 0.5 - spacingDuration = 38 + length = 2600; + num = 20; + num1 = 0.5; + spacingDuration = 38; } else if (length >= 2700 && length <= 3000) { - length = 2800 - num = 20 - num1 = 0.5 - spacingDuration = 40 + length = 2800; + num = 20; + num1 = 0.5; + spacingDuration = 40; } else if (length >= 3000 && length <= 3200) { - length = 3100 - num = 20 - num1 = 0.5 - spacingDuration = 44 + length = 3100; + num = 20; + num1 = 0.5; + spacingDuration = 44; } else if (length >= 3200 && length <= 3500) { - length = 3350 - num = 20 - num1 = 0.5 - spacingDuration = 48 + length = 3350; + num = 20; + num1 = 0.5; + spacingDuration = 48; } - let numTriangles = Math.ceil(length / num) - let duration = numTriangles / num1 - let middleDuration = duration / num1 + 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,-1 4,0 0,1').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 }) + let triangle = draw + .polygon("0,-1 4,0 0,1") + .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) + 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) + lineDom.add(triangle); } - let rect = draw.rect(30, 30).fill('#000').move(-5, -10) - lineDom.add(rect) + let rect = draw.rect(30, 30).fill("#000").move(-5, -10); + lineDom.add(rect); } // 反向流动 function handlePolyineAnimate2(pointArray, pointsValue, lineDom) { // 拿到长度 - let length = 0 + 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]) + 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 + let num = 20; + let num1 = 0.5; + let spacingDuration = 10; // if (length >= 0 && length <= 100) { // num = 30 @@ -1175,151 +1394,165 @@ let handleAnimate = async (result: any) => { // spacingDuration = 10 // } if (length >= 0 && length <= 100) { - length = 50 - num = 20 - num1 = 0.5 - spacingDuration = 2 + length = 50; + num = 20; + num1 = 0.5; + spacingDuration = 2; } else if (length >= 100 && length <= 200) { - length = 150 - num = 20 - num1 = 0.5 - spacingDuration = 4 + length = 150; + num = 20; + num1 = 0.5; + spacingDuration = 4; } else if (length >= 200 && length <= 500) { - length = 350 - num = 20 - num1 = 0.5 - spacingDuration = 8 + length = 350; + num = 20; + num1 = 0.5; + spacingDuration = 8; } else if (length >= 500 && length <= 700) { - length = 650 - num = 20 - num1 = 0.5 - spacingDuration = 10 + length = 650; + num = 20; + num1 = 0.5; + spacingDuration = 10; } else if (length >= 700 && length <= 1000) { - length = 850 - num = 20 - num1 = 0.5 - spacingDuration = 12 + length = 850; + num = 20; + num1 = 0.5; + spacingDuration = 12; } else if (length >= 1000 && length <= 1200) { - length = 1150 - num = 20 - num1 = 0.5 - spacingDuration = 16 + length = 1150; + num = 20; + num1 = 0.5; + spacingDuration = 16; } else if (length >= 1200 && length <= 1500) { - length = 1350 - num = 20 - num1 = 0.5 - spacingDuration = 20 + length = 1350; + num = 20; + num1 = 0.5; + spacingDuration = 20; } else if (length >= 1500 && length <= 1700) { - length = 1600 - num = 20 - num1 = 0.5 - spacingDuration = 24 + length = 1600; + num = 20; + num1 = 0.5; + spacingDuration = 24; } else if (length >= 1700 && length <= 2000) { - length = 1850 - num = 20 - num1 = 0.5 - spacingDuration = 28 + length = 1850; + num = 20; + num1 = 0.5; + spacingDuration = 28; } else if (length >= 2000 && length <= 2200) { - length = 2100 - num = 20 - num1 = 0.5 - spacingDuration = 32 + length = 2100; + num = 20; + num1 = 0.5; + spacingDuration = 32; } else if (length >= 2200 && length <= 2500) { - length = 2350 - num = 20 - num1 = 0.5 - spacingDuration = 34 + length = 2350; + num = 20; + num1 = 0.5; + spacingDuration = 34; } else if (length >= 2500 && length <= 2700) { - length = 2600 - num = 20 - num1 = 0.5 - spacingDuration = 38 + length = 2600; + num = 20; + num1 = 0.5; + spacingDuration = 38; } else if (length >= 2700 && length <= 3000) { - length = 2800 - num = 20 - num1 = 0.5 - spacingDuration = 40 + length = 2800; + num = 20; + num1 = 0.5; + spacingDuration = 40; } else if (length >= 3000 && length <= 3200) { - length = 3100 - num = 20 - num1 = 0.5 - spacingDuration = 44 + length = 3100; + num = 20; + num1 = 0.5; + spacingDuration = 44; } else if (length >= 3200 && length <= 3500) { - length = 3350 - num = 20 - num1 = 0.5 - spacingDuration = 48 + length = 3350; + num = 20; + num1 = 0.5; + spacingDuration = 48; } - let numTriangles = Math.ceil(length / num) - let duration = numTriangles / num1 - let middleDuration = duration / num1 + 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,-1 -4,0 0,1').fill('lightgreen').stroke({ color: 'lightgreen', width: 0.2 }) + let triangle = draw + .polygon("0,-1 -4,0 0,1") + .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') - triangleanimate.setAttribute('keyPoints', '1;0') - triangleanimate.setAttribute('keyTimes', '0;1') - triangleanimate.setAttribute('calcMode', 'linear') - triangle.node.appendChild(triangleanimate) + 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"); + triangleanimate.setAttribute("keyPoints", "1;0"); + triangleanimate.setAttribute("keyTimes", "0;1"); + triangleanimate.setAttribute("calcMode", "linear"); + triangle.node.appendChild(triangleanimate); - lineDom.add(triangle) + lineDom.add(triangle); } - let rect = draw.rect(30, 30).fill('#000').move(-5, -10) - lineDom.add(rect) + 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 + const distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); + return distance; } // 变电站提示文字 - aclineDOM.forEach(item => { - let data = result.load.find(ite => item.node.attributes[0].nodeValue === 'ZQ_' + ite.load_id.split('&')[0]) + aclineDOM.forEach((item) => { + let data = result.load.find( + (ite) => + item.node.attributes[0].nodeValue === "ZQ_" + ite.load_id.split("&")[0] + ); if (data) { - let position = item.bbox() - let centerX = position.x + position.width / 2 - let centerY = position.y + position.height / 2 + let position = item.bbox(); + let centerX = position.x + position.width / 2; + let centerY = position.y + position.height / 2; // 这是变压器上的文字和线段 // 引出线 draw .line(centerX, centerY, centerX + 10, centerY - 10) .attr({ - 'stroke-width': 0.1, - id: 'load_' + data.load_id, - stroke: 'green', - 'stroke-dasharray': '1,1' + "stroke-width": 0.1, + id: "load_" + data.load_id, + stroke: "green", + "stroke-dasharray": "1,1", }) - .font({ size: '8' }) + .font({ size: "8" }); // 文本 draw - .text(`P: ${(parseFloat(data['Pload/phase']) * 100).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 100).toFixed(4)} kVar`) + .text( + `P: ${(parseFloat(data["Pload/phase"]) * 100).toFixed(4)} kW\nQ: ${( + parseFloat(data["i"]) * 100 + ).toFixed(4)} kVar` + ) .attr({ x: centerX + 10, y: centerY - 10, - id: 'load_text' + data.load_id, - 'font-size': '2', - leading: '0.9' + id: "load_text" + data.load_id, + "font-size": "2", + leading: "0.9", }) - .fill('green') + .fill("green"); } - }) + }); // 变电站母线颜色 - let busDom = draw.findOne('#BusbarSection_Layer') - let bus_g = busDom.find('g') - bus_g.forEach(item => { - const polyine = item.findOne('polyline') - polyine.attr({ stroke: '#FFFFFF' }) - }) - loadingFlag.value = false -} + let busDom = draw.findOne("#BusbarSection_Layer"); + let bus_g = busDom.find("g"); + bus_g.forEach((item) => { + const polyine = item.findOne("polyline"); + polyine.attr({ stroke: "#FFFFFF" }); + }); + loadingFlag.value = false; +}; // const handleClose = () => { // lineSvgFlag.value = false; @@ -1329,191 +1562,191 @@ let handleAnimate = async (result: any) => { // 执行明细 // 表格 interface TableDate { - id: number - run_content: string - run_time: string - run_status: number + id: number; + run_content: string; + run_time: string; + run_status: number; } let tableData = reactive<TableDate[]>([ { id: 4455671, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455672, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455673, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 0 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 0, }, { id: 4455674, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455675, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455676, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455677, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455678, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455679, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455612, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455613, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 0 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 0, }, { id: 4455614, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455615, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455616, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455617, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, }, { id: 4455618, - run_content: '***', - run_time: '2023-04-30 12:30:00', - run_status: 1 - } -]) + run_content: "***", + run_time: "2023-04-30 12:30:00", + run_status: 1, + }, +]); // 分页 -let currentPage = ref<number>(1) -let pageSize = ref<number>(6) //每页显示的个数 -let total = ref<number>(40) +let currentPage = ref<number>(1); +let pageSize = ref<number>(6); //每页显示的个数 +let total = ref<number>(40); const handleSizeChange = (size: number) => { // console.log(`${size} items per page`); - pageSize.value = size -} + pageSize.value = size; +}; const handleCurrentChange = (page: number) => { - currentPage.value = page -} + currentPage.value = page; +}; // 右侧页面标识 -let ospagerightFlag = ref(true) -const hideLeft = ref<boolean>(true) //默认页面显示 -const hideRight = ref<boolean>(true) //默认页面显示 右边 +let ospagerightFlag = ref(true); +const hideLeft = ref<boolean>(true); //默认页面显示 +const hideRight = ref<boolean>(true); //默认页面显示 右边 // 组件卸载调用 onUnmounted(() => { - hideLeft.value = false - hideRight.value = false -}) + hideLeft.value = false; + hideRight.value = false; +}); // 跳转三维 -const handleThree = val => { +const handleThree = (val) => { const list = { - location: '(X=18705617.163,Y=1826842.166,Z=4299675.505)', - rotation: 'Pitch=-89.9,Yaw=-90.542,Roll=0' - } - api_send('CameraMove', list, () => { - console.log('CameraMove') - }) + location: "(X=18705617.163,Y=1826842.166,Z=4299675.505)", + rotation: "Pitch=-89.9,Yaw=-90.542,Roll=0", + }; + api_send("CameraMove", list, () => { + console.log("CameraMove"); + }); let _list = { CityID: val, - status: '1' - } - api_send('ShowCityEdge', _list, () => { - console.log('ShowCityEdge') - }) -} + status: "1", + }; + api_send("ShowCityEdge", _list, () => { + console.log("ShowCityEdge"); + }); +}; // 根据不同的屏幕宽度换算字体大小 const transformFontSize = (fontsize: number) => { // 获取屏幕宽度 - const width = window.screen.width - const height = window.screen.height - let ratio: any = 0 + const width = window.screen.width; + const height = window.screen.height; + let ratio: any = 0; if (width > 3000) { - ratio = width / 4240 + ratio = width / 4240; } else { - ratio = width / 2220 + ratio = width / 2220; } // 取下整 - return parseInt(fontsize * ratio) -} + return parseInt(fontsize * ratio); +}; // 动态获取宽高 -let ctwh = ref() -let ctht = ref() +let ctwh = ref(); +let ctht = ref(); const updateCtw = () => { if (window.screen.width > 1900) { - ctwh.value = Number(window.screen.width) - ctht.value = Number(window.screen.height) + ctwh.value = Number(window.screen.width); + ctht.value = Number(window.screen.height); } else { - ctwh.value = Number(1920) - ctht.value = Number(1080) + ctwh.value = Number(1920); + ctht.value = Number(1080); } -} +}; // 使用watch来监听$route的变化 watch( () => window.location.pathname, - newPath => { - updateCtw() + (newPath) => { + updateCtw(); }, { immediate: true } -) +); const styleVar = computed(() => { return { - '--box-width': ctwh.value + 'px', - '--box-height': ctht.value + 'px' - } -}) + "--box-width": ctwh.value + "px", + "--box-height": ctht.value + "px", + }; +}); </script> <style lang="scss" scoped> @@ -1570,7 +1803,7 @@ const styleVar = computed(() => { .closeBtn { width: changeHeight(42.12); height: changeHeight(42.12); - background: url('@/assets/images/common/closebtn.png'); + background: url("@/assets/images/common/closebtn.png"); background-repeat: no-repeat; background-size: 100% 100%; position: absolute; @@ -1648,7 +1881,7 @@ const styleVar = computed(() => { .blueShadow { /* 精品可视化素材店 */ - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-style: normal; font-weight: 600; text-shadow: 0px 0px 10px #00f0ff; @@ -1672,7 +1905,7 @@ const styleVar = computed(() => { top: 3%; width: changeHeight(40); height: changeHeight(40); - background-image: url('@/assets/images/common/closebtn.png'); + background-image: url("@/assets/images/common/closebtn.png"); background-repeat: no-repeat; background-size: 100% 100%; z-index: 6; @@ -1681,13 +1914,13 @@ const styleVar = computed(() => { // 公共标题 .title_bg { - background: url('@/assets/images/carPage/car_titlebg.png') no-repeat; + background: url("@/assets/images/carPage/car_titlebg.png") no-repeat; background-size: 100% 100%; } // 公共背景 .content_bg { - background: url('@/assets/images/common/tree_content_bg.png') no-repeat; + background: url("@/assets/images/common/tree_content_bg.png") no-repeat; background-size: 100% 100%; } @@ -1696,12 +1929,16 @@ const styleVar = computed(() => { width: 90%; height: changeHeight(50); line-height: changeHeight(50); - background: url('@/assets/images/common/common_title.png') no-repeat; + background: url("@/assets/images/common/common_title.png") no-repeat; background-size: 100% 100%; font-size: changeHeight(45); // background-color: red; display: flex; - + img { + cursor: pointer; + width: changeHeight(44); + height: changeHeight(55); + } span { margin-left: 7%; } @@ -1719,7 +1956,7 @@ const styleVar = computed(() => { width: 60%; height: 100%; position: absolute; - background: url('@/assets/images/osPage/short_titlebg.png') no-repeat; + background: url("@/assets/images/osPage/short_titlebg.png") no-repeat; background-size: 100% 100%; } @@ -1800,7 +2037,7 @@ const styleVar = computed(() => { width: changeHeight(183.47); height: changeHeight(60); line-height: changeHeight(60); - background: url('@/assets/images/btnType/pvtipBtn.png') no-repeat; + background: url("@/assets/images/btnType/pvtipBtn.png") no-repeat; background-size: 100% 100%; /* 历史调节次数12次 */ @@ -1818,7 +2055,7 @@ const styleVar = computed(() => { margin-top: changeHeight(100); margin-top: changeHeight(17); // margin-top: 0.5%; - font-family: 'PingFang SC'; + font-family: "PingFang SC"; font-style: normal; font-weight: 400; color: #ffffff; @@ -1845,7 +2082,8 @@ const styleVar = computed(() => { .icon_panel_left_off { position: absolute; - background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat; + background: url("@/assets/images/btnType/icon_panel_right.png") + no-repeat; background-size: 100% 100%; width: changeHeight(42.28); height: changeHeight(52.02); @@ -1864,7 +2102,7 @@ const styleVar = computed(() => { .icon_panel_left_on { position: absolute; background: salmon; - background: url('@/assets/images/btnType/icon_panel_left.png') no-repeat; + background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat; background-size: 100% 100%; width: changeHeight(42.28); height: changeHeight(52.02); @@ -1956,7 +2194,7 @@ const styleVar = computed(() => { height: 100%; // border:1px solid red; // background: url("@/assets/images/osPage/xixiaozhantp.png") no-repeat; - background: url('@/assets/images/osPage/xuetp.png') no-repeat; + background: url("@/assets/images/osPage/xuetp.png") no-repeat; background-size: 100% 100%; // background-image: url(".png"); } @@ -2021,7 +2259,7 @@ const styleVar = computed(() => { // height: changeHeight(728.6); width: 100%; height: 100%; - background: url('@/assets/images/osPage/rztp.png') no-repeat; + background: url("@/assets/images/osPage/rztp.png") no-repeat; background-size: 100% 100%; } } @@ -2081,7 +2319,7 @@ const styleVar = computed(() => { height: changeHeight(60); line-height: changeHeight(60); - background: url('@/assets/images/btnType/pvtipBtn.png') no-repeat; + background: url("@/assets/images/btnType/pvtipBtn.png") no-repeat; background-size: 100% 100%; /* 历史调节次数12次 */ @@ -2104,7 +2342,7 @@ const styleVar = computed(() => { .icon_panel_right_off { position: absolute; - background: url('@/assets/images/btnType/icon_panel_left.png') no-repeat; + background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat; background-size: 100% 100%; width: changeHeight(42.28); height: changeHeight(52.02); @@ -2133,7 +2371,7 @@ const styleVar = computed(() => { .icon_panel_right_off { position: absolute; - background: url('@/assets/images/btnType/icon_panel_left.png') no-repeat; + background: url("@/assets/images/btnType/icon_panel_left.png") no-repeat; background-size: 100% 100%; width: changeHeight(42.28); height: changeHeight(52.02); @@ -2151,7 +2389,8 @@ const styleVar = computed(() => { // 右 箭头展开 .icon_panel_right_on { position: absolute; - background: url('@/assets/images/btnType/icon_panel_right.png') no-repeat; + background: url("@/assets/images/btnType/icon_panel_right.png") + no-repeat; background-size: 100% 100%; width: changeHeight(42.28); height: changeHeight(52.02); @@ -2239,7 +2478,7 @@ const styleVar = computed(() => { width: changeHeight(368.31); height: changeHeight(180.28); // padding: changeHeight(25) changeHeight(5) changeHeight(0) changeHeight(10); - background: url('@/assets/images/legend/legend_bg.png') no-repeat; + background: url("@/assets/images/legend/legend_bg.png") no-repeat; background-size: 100% 100%; display: flex; align-items: center; @@ -2315,7 +2554,7 @@ const styleVar = computed(() => { box-sizing: border-box; width: changeHeight(1338.06); height: changeHeight(1218.37); - background: url('@/assets/images/osPage/run_detail_bg.png') no-repeat; + background: url("@/assets/images/osPage/run_detail_bg.png") no-repeat; background-size: 100% 100%; padding-top: 1%; padding-left: changeHeight(27); @@ -2344,7 +2583,8 @@ const styleVar = computed(() => { .titlebg { width: 100%; height: changeHeight(82.15); - background: url('@/assets/images/osPage/run_detail_titlebg.png') no-repeat; + background: url("@/assets/images/osPage/run_detail_titlebg.png") + no-repeat; background-size: 100% 100%; display: flex; align-items: center; @@ -2472,7 +2712,11 @@ const styleVar = computed(() => { .el-table { border: transparent !important; - background: linear-gradient(180deg, #01233c 0%, rgba(8, 150, 255, 0.42) 100%); + background: linear-gradient( + 180deg, + #01233c 0%, + rgba(8, 150, 255, 0.42) 100% + ); } } } @@ -2563,7 +2807,7 @@ const styleVar = computed(() => { width: changeHeight(1747.34); height: changeHeight(937.4); box-sizing: border-box; - background: url('@/assets/images/osPage/area_load_bg.png') no-repeat; + background: url("@/assets/images/osPage/area_load_bg.png") no-repeat; background-size: 100% 100%; padding-top: 1%; padding-left: changeHeight(27); @@ -2592,7 +2836,8 @@ const styleVar = computed(() => { .titlebg { width: 100%; height: changeHeight(82); - background: url('@/assets/images/osPage/run_detail_titlebg.png') no-repeat; + background: url("@/assets/images/osPage/run_detail_titlebg.png") + no-repeat; background-size: 100% 100%; display: flex; align-items: center; @@ -2672,12 +2917,12 @@ const styleVar = computed(() => { } .bg1 { - background: url('@/assets/images/btnType/btnblue.png') no-repeat; + background: url("@/assets/images/btnType/btnblue.png") no-repeat; background-size: 100% 100%; } .bg2 { - background: url('@/assets/images/btnType/btngreen.png') no-repeat; + background: url("@/assets/images/btnType/btngreen.png") no-repeat; background-size: 100% 100%; } @@ -2711,7 +2956,7 @@ const styleVar = computed(() => { position: absolute; top: -3px; left: -2px; - content: ''; + content: ""; width: changeHeight(20); height: changeHeight(20); border-top: changeHeight(3) solid #cffffc; @@ -2722,7 +2967,7 @@ const styleVar = computed(() => { position: absolute; top: -3px; right: -1.5px; - content: ''; + content: ""; width: changeHeight(20); height: changeHeight(20); border-top: changeHeight(3) solid #cffffc; @@ -2741,7 +2986,7 @@ const styleVar = computed(() => { position: absolute; bottom: -3px; left: -3px; - content: ''; + content: ""; width: changeHeight(20); height: changeHeight(20); border-bottom: changeHeight(3) solid #cffffc; @@ -2752,7 +2997,7 @@ const styleVar = computed(() => { position: absolute; bottom: -3px; right: -3px; - content: ''; + content: ""; width: changeHeight(20); height: changeHeight(20); border-bottom: changeHeight(3) solid #cffffc; @@ -2770,7 +3015,7 @@ const styleVar = computed(() => { top: changeHeight(20); width: changeHeight(40.12); height: changeHeight(40.12); - background-image: url('../../assets/images/photovaltaicPagev3/closebtn.png'); + background-image: url("../../assets/images/photovaltaicPagev3/closebtn.png"); background-repeat: no-repeat; background-size: 100% 100%; z-index: 6;