diff --git a/src/hooks/handleFun.ts b/src/hooks/handleFun.ts
index 3f48e35..16e6742 100644
--- a/src/hooks/handleFun.ts
+++ b/src/hooks/handleFun.ts
@@ -16,17 +16,17 @@ export function handleUnit(data) {
// 处理echarts数据
export function handleEchartsData(data, value) {
// 间隔可以设置成动态的
- let timeArray = [];
+ let timeArray_1 = [];
for (let hour = 0; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += value) {
let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
- timeArray.push(
+ timeArray_1.push(
{ datetime: timeString, measValue: '-' }
);
}
}
- console.log(timeArray)
- timeArray.forEach(item => {
+ console.log(timeArray_1)
+ timeArray_1.forEach(item => {
data.forEach(ite => {
let iteTime = ite.datetime.split(' ')[1].split(':')[0] + ':' + ite.datetime.split(' ')[1].split(':')[1]
if (iteTime === item.datetime) {
@@ -36,4 +36,50 @@ export function handleEchartsData(data, value) {
})
return timeArray
+}
+export function handleEchartsData_datatime_measValue(data, value) {
+ // 间隔可以设置成动态的
+ let timeArray_1 = [];
+ for (let hour = 0; hour < 24; hour++) {
+ for (let minute = 0; minute < 60; minute += value) {
+ let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
+ timeArray_1.push(
+ { datetime: timeString, measValue: '-' }
+ );
+ }
+ }
+ console.log(timeArray_1)
+ timeArray_1.forEach(item => {
+ data.forEach(ite => {
+ let iteTime = ite.datetime.split(' ')[1].split(':')[0] + ':' + ite.datetime.split(' ')[1].split(':')[1]
+ if (iteTime === item.datetime) {
+ item.measValue =ite.measValue
+ }
+ })
+ })
+
+ return timeArray
+}
+export function handleEchartsData_timeStamp_p(data, value) {
+ // 间隔可以设置成动态的
+ let timeArray_1 = [];
+ for (let hour = 0; hour < 24; hour++) {
+ for (let minute = 0; minute < 60; minute += value) {
+ let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
+ timeArray_1.push(
+ { timeStamp: timeString, p: '-' }
+ );
+ }
+ }
+ console.log(timeArray_1)
+ timeArray_1.forEach(item => {
+ data.forEach(ite => {
+ let iteTime = ite.timeStamp.split(' ')[1].split(':')[0] + ':' + ite.timeStamp.split(' ')[1].split(':')[1]
+ if (iteTime === item.timeStamp) {
+ item.p =ite.p
+ }
+ })
+ })
+
+ return timeArray_1
}
\ No newline at end of file
diff --git a/src/views/pages/OpticalStoragePage/index.vue b/src/views/pages/OpticalStoragePage/index.vue
index 5fa9633..dff2f4e 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,19 +168,33 @@
</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">
@@ -175,12 +227,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 +266,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 +333,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,138 +363,171 @@
</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 "@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";
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.397109,Y=38.88534,Z=-6.317532)",
+ rotation: "Pitch=-15.947211,Yaw=-134.448302,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')
- pvArr = res.data
+ pvApi({ mrid: "03DKX-24289" }).then((res) => {
+ console.log(res, "respv");
+ console.log("1----------", res);
+
+ 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 => {
- userzArr = res.data
+ usrzApi({ mrid: "03DKX-24289" }).then((res) => {
+ // userzArr = res.data;
+ 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')
- battyArr = res.data
+ buttyApi({}).then((res) => {
+ console.log(res, "ssss");
+ // battyArr = res.data;
+ 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)
@@ -482,554 +586,632 @@ 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(0.189)
+ 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);
// 设置文字为白色
- 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.189)
+ 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')
+ 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']) * 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`)
+ .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'
+ 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']) * 1000).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 1000).toFixed(4)} kVar`)
+ .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'
+ 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);
- let data = result
+ let data = result;
// 获取所有的g
- let aclineDOM = draw.find('g')
+ let aclineDOM = draw.find("g");
// 修改之后
// 柱上设备数据
- let dataArr = ['PWOPTransformerPSR', 'PWPolesitePSR', 'PWOPBreakerPSR', 'PWOPDisconnectorPSR', 'PWOPFusePSR', 'PWOPLoadSwitchPSR', 'PWPolePSR', 'PWOPVoltageRegulatorPSR', 'PWOPArresterPSR', 'PWOPCapacitorPSR', 'PWOPRecloserPSR']
+ let dataArr = [
+ "PWOPTransformerPSR",
+ "PWPolesitePSR",
+ "PWOPBreakerPSR",
+ "PWOPDisconnectorPSR",
+ "PWOPFusePSR",
+ "PWOPLoadSwitchPSR",
+ "PWPolePSR",
+ "PWOPVoltageRegulatorPSR",
+ "PWOPArresterPSR",
+ "PWOPCapacitorPSR",
+ "PWOPRecloserPSR",
+ ];
// 给所有的柱上设备重新赋值id
- let idArr = ['BackGround_Layer', 'Other_Layer', 'Text_Layer']
- let LineTextArr = []
+ let idArr = ["BackGround_Layer", "Other_Layer", "Text_Layer"];
+ let LineTextArr = [];
// 线的流向
- result.line.forEach(item => {
+ result.line.forEach((item) => {
// console.log(item, "000，潮流计算的流向");
// if (dataArr.includes(item.Beg_station_type)) {
// // 包含-头
let arr = [
- '1355AE01-D568-434D-AF43-3C4F647B3B2B-19883',
- '6f1bf0c0-3947-4c51-9795-82b81ca2fec4',
- 'e21ea703-cd3f-4e4a-b118-828228f9a853',
- '02a46926-e456-41f7-adb3-ad0c6fb59214',
- 'bf36732a-951b-4775-aa10-1b17e56d55f2',
- 'a300cd87-4aab-4507-9b10-3346137ca5d6',
- '2B540245-ECF5-446E-AC2B-121036490163-11660',
- '7fc56aa9-3bf3-4a2b-bd03-4b6b791bc63a',
- '96f03be2-26e6-4a2d-9ee3-9a7f9681ef45',
- 'fce0cc88-385d-48db-a2a9-621b67ef6ada',
- '045cb4bc-8232-4065-8a8e-2df99d6ef5c8',
- 'ea04e6d3-587e-4ca0-ae6a-31997fd1fb35',
- 'SBID0000002E9010C80FF549C6BE1755C15C753D55'
- ]
+ "1355AE01-D568-434D-AF43-3C4F647B3B2B-19883",
+ "6f1bf0c0-3947-4c51-9795-82b81ca2fec4",
+ "e21ea703-cd3f-4e4a-b118-828228f9a853",
+ "02a46926-e456-41f7-adb3-ad0c6fb59214",
+ "bf36732a-951b-4775-aa10-1b17e56d55f2",
+ "a300cd87-4aab-4507-9b10-3346137ca5d6",
+ "2B540245-ECF5-446E-AC2B-121036490163-11660",
+ "7fc56aa9-3bf3-4a2b-bd03-4b6b791bc63a",
+ "96f03be2-26e6-4a2d-9ee3-9a7f9681ef45",
+ "fce0cc88-385d-48db-a2a9-621b67ef6ada",
+ "045cb4bc-8232-4065-8a8e-2df99d6ef5c8",
+ "ea04e6d3-587e-4ca0-ae6a-31997fd1fb35",
+ "SBID0000002E9010C80FF549C6BE1755C15C753D55",
+ ];
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',
- 'fffd4bc9-47fb-4f9f-9c4c-3ea199b88463',
- '57aa7ef4-4ac4-4084-b9d6-d9ca2e3a5754',
- 'df53ddfb-39cc-4d9f-9d97-ccb8dbc1cfc3',
- '37f5b411-8111-4502-ba99-92ca5ee03720',
- '59cdc6f8-ae46-44af-9d58-a1fb2057046f',
- 'ab03d071-54f1-4f8b-b5ae-f2cebf2c2fd9',
- 'a04e99d7-d865-4731-bb47-144ab8342894',
- '5874e552-8e19-4dbc-bbfb-d2e9c556db37',
- '670bf688-3cd4-439d-a22a-8fd46f8ff776',
- 'cda3c4ba-968c-49d9-a354-79f7a55a84d1',
- '695e37fa-fce6-4333-be42-c3dd76d9fc18',
- '16324f9a-09b0-4d7f-895b-f0b9be5361d2',
- '3398856e-15a3-49c6-9abd-f53978577bf9',
- 'e00c74ca-ae1d-435f-88db-322c7bebc9e7',
- '54e4155a-25b9-452d-ba68-1a0bfdf87fce',
- '37408fe0-1bdb-40ec-8983-ef251e5da928',
- 'a9b8b1d5-e85e-4b15-9750-9e13d8f47dd8',
- '05f8d2d5-2034-48d9-bc7b-7b85cb440bf2',
- 'f09c836f-c23e-42dc-abd6-c11b5e826497',
- 'bb9c439f-5f65-4809-a7ce-c5bfa26aced7',
- '6a83a821-3e4e-44be-8cbf-0415ea44dd29',
- 'd3a4a315-2380-4f9e-8c0e-c92a21929b17',
- '62c89386-d07e-4d4a-81c3-cde97096394d',
- '8c55725d-9c77-4e0f-a87e-92798a4d64b3',
- '0b52349b-cac5-45fd-850f-0ef9ef089898',
- '74cab07f-1321-4e16-9849-1928e48e2ea4',
- '5cff037a-6de8-4f8f-8330-2fe9f7426146',
- '1fe13296-60ed-48b6-a25c-0e2a4914cdef',
- '9e1dbf64-d327-40eb-a396-ec1a55302ce2',
- 'e732a195-88f8-4346-8791-d2bd835b1b3c',
- '983ee9c7-2f00-4059-b57c-2f98dcebdc33',
- '48676cea-78a1-42a8-87c4-5c9d1cb5adc2',
- '00bf6d8b-ad13-40f1-996e-2ddf374f2efb',
- '2fc5a18c-a20a-4bc4-9d40-8336e7b254f8',
- 'b27ef030-aae0-46cb-8374-15bda224eef9',
- 'cbfbbd3c-6f76-40bc-9ecf-66192cbea74b',
- '1c2397e6-9f84-47d3-816e-5ea6fe7ef0f1',
- '2e056dc5-fe7a-490b-a7ce-e6400c4fcd9a',
- '4ce7ec01-c5ae-4da8-880f-f156f4fe70a4',
- '1ed442f9-9b10-4a79-9599-8d80b3e9c66f',
- '02ACC5B5-6200-4775-BFEB-726A237EB6C1-41008',
- '1355AE01-D568-434D-AF43-3C4F647B3B2B-19883',
- '6f1bf0c0-3947-4c51-9795-82b81ca2fec4',
- '02a46926-e456-41f7-adb3-ad0c6fb59214',
- 'a3585e0b-054b-4edb-895b-f41fafdd30fe',
- '47136e6f-f897-4a1e-91d5-56e7e179354e',
- '02ACC5B5-6200-4775-BFEB-726A237EB6C1-40948',
- 'dfd8da48-5302-48c8-9a67-4c787a3b9392',
- '3d5b200f-6f17-4118-8659-c073e49de204',
- 'c0557047-c0e7-4df4-a36b-a4fe4dbdd879'
- ]
+ "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",
+ "fffd4bc9-47fb-4f9f-9c4c-3ea199b88463",
+ "57aa7ef4-4ac4-4084-b9d6-d9ca2e3a5754",
+ "df53ddfb-39cc-4d9f-9d97-ccb8dbc1cfc3",
+ "37f5b411-8111-4502-ba99-92ca5ee03720",
+ "59cdc6f8-ae46-44af-9d58-a1fb2057046f",
+ "ab03d071-54f1-4f8b-b5ae-f2cebf2c2fd9",
+ "a04e99d7-d865-4731-bb47-144ab8342894",
+ "5874e552-8e19-4dbc-bbfb-d2e9c556db37",
+ "670bf688-3cd4-439d-a22a-8fd46f8ff776",
+ "cda3c4ba-968c-49d9-a354-79f7a55a84d1",
+ "695e37fa-fce6-4333-be42-c3dd76d9fc18",
+ "16324f9a-09b0-4d7f-895b-f0b9be5361d2",
+ "3398856e-15a3-49c6-9abd-f53978577bf9",
+ "e00c74ca-ae1d-435f-88db-322c7bebc9e7",
+ "54e4155a-25b9-452d-ba68-1a0bfdf87fce",
+ "37408fe0-1bdb-40ec-8983-ef251e5da928",
+ "a9b8b1d5-e85e-4b15-9750-9e13d8f47dd8",
+ "05f8d2d5-2034-48d9-bc7b-7b85cb440bf2",
+ "f09c836f-c23e-42dc-abd6-c11b5e826497",
+ "bb9c439f-5f65-4809-a7ce-c5bfa26aced7",
+ "6a83a821-3e4e-44be-8cbf-0415ea44dd29",
+ "d3a4a315-2380-4f9e-8c0e-c92a21929b17",
+ "62c89386-d07e-4d4a-81c3-cde97096394d",
+ "8c55725d-9c77-4e0f-a87e-92798a4d64b3",
+ "0b52349b-cac5-45fd-850f-0ef9ef089898",
+ "74cab07f-1321-4e16-9849-1928e48e2ea4",
+ "5cff037a-6de8-4f8f-8330-2fe9f7426146",
+ "1fe13296-60ed-48b6-a25c-0e2a4914cdef",
+ "9e1dbf64-d327-40eb-a396-ec1a55302ce2",
+ "e732a195-88f8-4346-8791-d2bd835b1b3c",
+ "983ee9c7-2f00-4059-b57c-2f98dcebdc33",
+ "48676cea-78a1-42a8-87c4-5c9d1cb5adc2",
+ "00bf6d8b-ad13-40f1-996e-2ddf374f2efb",
+ "2fc5a18c-a20a-4bc4-9d40-8336e7b254f8",
+ "b27ef030-aae0-46cb-8374-15bda224eef9",
+ "cbfbbd3c-6f76-40bc-9ecf-66192cbea74b",
+ "1c2397e6-9f84-47d3-816e-5ea6fe7ef0f1",
+ "2e056dc5-fe7a-490b-a7ce-e6400c4fcd9a",
+ "4ce7ec01-c5ae-4da8-880f-f156f4fe70a4",
+ "1ed442f9-9b10-4a79-9599-8d80b3e9c66f",
+ "02ACC5B5-6200-4775-BFEB-726A237EB6C1-41008",
+ "1355AE01-D568-434D-AF43-3C4F647B3B2B-19883",
+ "6f1bf0c0-3947-4c51-9795-82b81ca2fec4",
+ "02a46926-e456-41f7-adb3-ad0c6fb59214",
+ "a3585e0b-054b-4edb-895b-f41fafdd30fe",
+ "47136e6f-f897-4a1e-91d5-56e7e179354e",
+ "02ACC5B5-6200-4775-BFEB-726A237EB6C1-40948",
+ "dfd8da48-5302-48c8-9a67-4c787a3b9392",
+ "3d5b200f-6f17-4118-8659-c073e49de204",
+ "c0557047-c0e7-4df4-a36b-a4fe4dbdd879",
+ ];
if (arr.includes(item.sec_id)) {
- let dom = draw.findOne('#ZQ_' + item.sec_id)
+ let dom = draw.findOne("#ZQ_" + item.sec_id);
if (dom) {
- 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)
+ 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);
}
- showTextArr.includes(item.sec_id) ? handleLineText2(polyineArray, item, dom) : ''
+ showTextArr.includes(item.sec_id)
+ ? handleLineText2(polyineArray, item, dom)
+ : "";
}
} else {
- let dom = draw.findOne('#ZQ_' + item.sec_id)
+ let dom = draw.findOne("#ZQ_" + item.sec_id);
if (dom) {
- 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.sec_id === 'SBID000000FFC30DB26FDC45A0A911E9D2E1BEB0BD') {
- console.log(polyineArray, 'polyine222')
+ 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.sec_id === "SBID000000FFC30DB26FDC45A0A911E9D2E1BEB0BD") {
+ console.log(polyineArray, "polyine222");
}
- if (item.Flow_Direction_Flag === '-1') {
- handlePolyineAnimate2(polyineArray, pathDate, dom, item)
+ if (item.Flow_Direction_Flag === "-1") {
+ handlePolyineAnimate2(polyineArray, pathDate, dom, item);
} else {
- handlePolyineAnimate(polyineArray, pathDate, dom, item)
+ handlePolyineAnimate(polyineArray, pathDate, dom, item);
}
- showTextArr.includes(item.sec_id) ? handleLineText2(polyineArray, item, dom) : ''
+ showTextArr.includes(item.sec_id)
+ ? handleLineText2(polyineArray, item, dom)
+ : "";
}
}
- console.log('出动画')
- })
+ console.log("出动画");
+ });
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 - 10, y + 10).attr({
- 'stroke-width': 0.1,
- id: 'left_line_' + data.psrId,
- stroke: 'green',
- 'stroke-dasharray': '3,3'
- })
+ "stroke-width": 0.1,
+ 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)} kV`)
+ .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)} kV`
+ )
.attr({
x: x - 10,
y: y + 10,
- id: 'load_text' + data.psrId,
- 'font-size': '2',
- leading: '0.9'
+ id: "load_text" + data.psrId,
+ "font-size": "2",
+ 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,
@@ -1040,131 +1222,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,-2 6,0 0,2').fill('lightgreen').stroke({ color: 'lightgreen', 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)
- 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
@@ -1183,151 +1382,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,-2 -6,0 0,2').fill('lightgreen').stroke({ color: 'lightgreen', 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)
- 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 + 20, centerY - 20)
.attr({
- 'stroke-width': 0.1,
- id: 'load_' + data.load_id,
- stroke: 'green',
- 'stroke-dasharray': '3,3'
+ "stroke-width": 0.1,
+ id: "load_" + data.load_id,
+ stroke: "green",
+ "stroke-dasharray": "3,3",
})
- .font({ size: '8' })
+ .font({ size: "8" });
// 文本
draw
- .text(`P: ${(parseFloat(data['Pload/phase']) * 1000).toFixed(4)} kW\nQ: ${(parseFloat(data['i']) * 1000).toFixed(4)} kVar`)
+ .text(
+ `P: ${(parseFloat(data["Pload/phase"]) * 1000).toFixed(4)} kW\nQ: ${(
+ parseFloat(data["i"]) * 1000
+ ).toFixed(4)} kVar`
+ )
.attr({
x: centerX + 20,
y: centerY - 20,
- id: 'load_text' + data.load_id,
- 'font-size': '4',
- leading: '0.9'
+ id: "load_text" + data.load_id,
+ "font-size": "4",
+ 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;
@@ -1337,191 +1550,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>
@@ -1578,7 +1791,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;
@@ -1656,7 +1869,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;
@@ -1680,7 +1893,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;
@@ -1689,13 +1902,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%;
}
@@ -1704,7 +1917,7 @@ 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;
@@ -1727,7 +1940,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%;
}
@@ -1808,7 +2021,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次 */
@@ -1826,7 +2039,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;
@@ -1853,7 +2066,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);
@@ -1872,7 +2086,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);
@@ -1964,7 +2178,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");
}
@@ -2029,7 +2243,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%;
}
}
@@ -2089,7 +2303,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次 */
@@ -2112,7 +2326,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);
@@ -2141,7 +2355,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);
@@ -2159,7 +2373,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);
@@ -2247,7 +2462,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;
@@ -2323,7 +2538,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);
@@ -2352,7 +2567,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;
@@ -2480,7 +2696,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%
+ );
}
}
}
@@ -2571,7 +2791,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);
@@ -2600,7 +2820,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;
@@ -2680,12 +2901,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%;
}
@@ -2719,7 +2940,7 @@ const styleVar = computed(() => {
position: absolute;
top: -3px;
left: -2px;
- content: '';
+ content: "";
width: changeHeight(20);
height: changeHeight(20);
border-top: changeHeight(3) solid #cffffc;
@@ -2730,7 +2951,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;
@@ -2749,7 +2970,7 @@ const styleVar = computed(() => {
position: absolute;
bottom: -3px;
left: -3px;
- content: '';
+ content: "";
width: changeHeight(20);
height: changeHeight(20);
border-bottom: changeHeight(3) solid #cffffc;
@@ -2760,7 +2981,7 @@ const styleVar = computed(() => {
position: absolute;
bottom: -3px;
right: -3px;
- content: '';
+ content: "";
width: changeHeight(20);
height: changeHeight(20);
border-bottom: changeHeight(3) solid #cffffc;
@@ -2778,7 +2999,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;
diff --git a/src/views/pages/carPage/index.vue b/src/views/pages/carPage/index.vue
index 69c5706..30f4420 100644
--- a/src/views/pages/carPage/index.vue
+++ b/src/views/pages/carPage/index.vue
@@ -265,7 +265,7 @@ import load_info_echart from './load_info_echart.vue'
import cdz_echart from './cdz_echart.vue'
import carTree from '@/views/commonPage/carTree.vue'
import { powerCurve_api, transformerOverloadCount_api, running_api } from '@/api/carPage/index'
-import { handleEchartsData } from '@/hooks/handleFun'
+import { handleEchartsData ,handleEchartsData_timeStamp_p} from '@/hooks/handleFun'
onMounted(() => {
// 获取右侧数据
@@ -428,7 +428,9 @@ let getPowerCurve_api = () => {
res?.data.forEach((item: any) => {
item.datetime = item.dateTime
})
+
let result = handleEchartsData(res.data, 60)
+
carRightData.echartsData = result
console.log(result, 'resresres')
})
diff --git a/src/views/pages/homePage/runListenPage.vue b/src/views/pages/homePage/runListenPage.vue
index acb1de8..16c638d 100644
--- a/src/views/pages/homePage/runListenPage.vue
+++ b/src/views/pages/homePage/runListenPage.vue
@@ -393,7 +393,7 @@
</div>
<!-- 告警消息 -->
- <div class="content_center_alert1" v-if="true">
+ <!-- <div class="content_center_alert1" v-if="true">
<div class="run_detail" v-if="true">
<div class="tip">
<img src="@/assets/images/mainPage/icon_alert_pv.png" alt="" />
@@ -416,7 +416,7 @@
</div>
</div>
</div>
- </div>
+ </div> -->
<!-- 通知消息 -->
<!-- <div class="content_center_alert" v-if="true">
<div class="run_detail" v-if="true">
diff --git a/src/views/pages/pvPage/powerLine.vue b/src/views/pages/pvPage/powerLine.vue
index adc0ebf..27ec060 100644
--- a/src/views/pages/pvPage/powerLine.vue
+++ b/src/views/pages/pvPage/powerLine.vue
@@ -101,7 +101,7 @@ const drawOneLine = (arr: any) => {
// },
},
// data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
- data: arr.map((rtime) => rtime?.timeStamp.slice(-5)),
+ data: arr.map((rtime) => rtime?.timeStamp),
},
yAxis: {
splitLine: {