From 86cfa43bf169a9d40075c4fdfc6d64c680914110 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyu=E2=80=9D?= <“winebunny@163.com”>
Date: Sun, 14 Jul 2024 10:14:53 +0800
Subject: [PATCH] u

---
 src/views/commonPage/tree.vue                 |   1 -
 .../pages/CapacityAdjustmentPage/index.vue    | 748 +++++++++++-------
 src/views/pages/OpticalStoragePage/index.vue  |   2 +
 3 files changed, 451 insertions(+), 300 deletions(-)

diff --git a/src/views/commonPage/tree.vue b/src/views/commonPage/tree.vue
index c74e521..6863374 100644
--- a/src/views/commonPage/tree.vue
+++ b/src/views/commonPage/tree.vue
@@ -228,7 +228,6 @@ const emits = defineEmits(["update-node-key"]); ////接收父组件的事件，
 // 处理选中target数据，最终得到由高层到底层的数组
 const handleTargetInfo = (data: TreeData,  node: any) => {
   // targetInfo.resultArr = [];
-  // handleTarget(e);
 
   console.log("zheshishaya111",node.level,data);
 
diff --git a/src/views/pages/CapacityAdjustmentPage/index.vue b/src/views/pages/CapacityAdjustmentPage/index.vue
index e6cfe4f..8300458 100644
--- a/src/views/pages/CapacityAdjustmentPage/index.vue
+++ b/src/views/pages/CapacityAdjustmentPage/index.vue
@@ -3,16 +3,27 @@
 <template>
   <div class="pvPage_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="AjusttreeContentFlag = true" v-if="!AjusttreeContentFlag"></div>
+          <div
+            class="icon_panel_left_off"
+            @click="AjusttreeContentFlag = true"
+            v-if="!AjusttreeContentFlag"
+          ></div>
         </div>
         <!-- 左展开箭头 -->
         <!-- 设备树 -->
         <div class="tree_content" v-if="AjusttreeContentFlag">
           <!-- 左收缩箭头 -->
-          <div class="icon_panel_left_on" @click="AjusttreeContentFlag = false" v-if="AjusttreeContentFlag"></div>
+          <div
+            class="icon_panel_left_on"
+            @click="AjusttreeContentFlag = false"
+            v-if="AjusttreeContentFlag"
+          ></div>
           <!-- 左收缩箭头 -->
           <div class="title_bg title">
             <div class="title_box">
@@ -26,20 +37,34 @@
       </div>
     </div>
     <div class="content_right" v-if="adjustContentFlag">
-      <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="CapAjustmentcontentFlag1 = true" v-if="!CapAjustmentcontentFlag1"></div>
+          <div
+            class="icon_panel_right_off"
+            @click="CapAjustmentcontentFlag1 = true"
+            v-if="!CapAjustmentcontentFlag1"
+          ></div>
         </div>
         <!-- 右展开箭头 -->
         <!-- 能量调节 -->
         <div class="CapAjustmentcontent" v-if="CapAjustmentcontentFlag1">
           <!-- 右收缩箭头 -->
-          <div class="icon_panel_right_on" @click="CapAjustmentcontentFlag1 = false" v-if="CapAjustmentcontentFlag1"></div>
+          <div
+            class="icon_panel_right_on"
+            @click="CapAjustmentcontentFlag1 = false"
+            v-if="CapAjustmentcontentFlag1"
+          ></div>
           <!-- 右收缩箭头 -->
           <div class="title_bg title">
             <div class="title_box">
-              <img src="@/assets/images/capAjustmentPage/ajust_logo.png" alt="" />能量调节
+              <img
+                src="@/assets/images/capAjustmentPage/ajust_logo.png"
+                alt=""
+              />能量调节
             </div>
           </div>
           <div class="capAjust_box content_bg">
@@ -71,12 +96,22 @@
               </div> -->
               <div class="source_list">
                 <div class="table_box">
-                  <el-table :data="tablepvData" style="width: 100%; height: 100%">
-                    <el-table-column label="序号" type="index" width="100" align="center">
+                  <el-table
+                    :data="tablepvData"
+                    style="width: 100%; height: 100%"
+                  >
+                    <el-table-column
+                      label="序号"
+                      type="index"
+                      width="100"
+                      align="center"
+                    >
                     </el-table-column>
                     <el-table-column label="可调资源" align="center">
                       <template #default="scope">
-                        <span style="margin-left: 10px">{{ scope.row.name }}</span>
+                        <span style="margin-left: 10px">{{
+                          scope.row.name
+                        }}</span>
                       </template>
                     </el-table-column>
                   </el-table>
@@ -98,7 +133,9 @@
                 <span>负载率预测</span>
                 <div class="btns">
                   <div class="btnbg fs35" @click="handleClickPC">策略配置</div>
-                  <div :class="`btnbg fs35 `" @click="haneleprogress">下发指令</div>
+                  <div :class="`btnbg fs35 `" @click="haneleprogress">
+                    下发指令
+                  </div>
                 </div>
               </div>
             </div>
@@ -111,27 +148,44 @@
               
             </div> -->
             <div class="info3">
-              <rateLine_will :rateDate="rateDate_cur" :keysv="key2"></rateLine_will>
+              <rateLine_will
+                :rateDate="rateDate_will"
+                :keysv="key2"
+              ></rateLine_will>
             </div>
           </div>
         </div>
       </div>
     </div>
     <div class="content_right" v-if="progressContentFlag">
-      <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="CapAjustmentcontentFlag2 = true" v-if="!CapAjustmentcontentFlag2"></div>
+          <div
+            class="icon_panel_right_off"
+            @click="CapAjustmentcontentFlag2 = true"
+            v-if="!CapAjustmentcontentFlag2"
+          ></div>
         </div>
         <!-- 右展开箭头 -->
         <!-- 调节进度 -->
         <div class="CapAjustmentcontent" v-if="CapAjustmentcontentFlag2">
           <!-- 右收缩箭头 -->
-          <div class="icon_panel_right_on" @click="CapAjustmentcontentFlag2 = false" v-if="CapAjustmentcontentFlag2"></div>
+          <div
+            class="icon_panel_right_on"
+            @click="CapAjustmentcontentFlag2 = false"
+            v-if="CapAjustmentcontentFlag2"
+          ></div>
           <!-- 右收缩箭头 -->
           <div class="title_bg title">
             <div class="title_box">
-              <img src="@/assets/images/capAjustmentPage/ajust_logo.png" alt="" />能量调节
+              <img
+                src="@/assets/images/capAjustmentPage/ajust_logo.png"
+                alt=""
+              />能量调节
             </div>
           </div>
           <div class="capAjust_box content_bg">
@@ -153,14 +207,20 @@
             <div class="infotitle"><span>已下发指令</span></div>
             <div class="progress_info2">
               <el-carousel trigger="click" arrow="never">
-                <el-carousel-item v-for="(item, index) in tableData_t_f" :key="index">
+                <el-carousel-item
+                  v-for="(item, index) in tableData_t_f"
+                  :key="index"
+                >
                   <div v-for="(ite, ind) in item" :key="ind" class="th">
                     <div>{{ ite.index }}</div>
                     <div>{{ ite.problem }}</div>
                     <div>
-                      <span :class="{
+                      <span
+                        :class="{
                           active: actionData.index === ite.index ? true : false,
-                        }" @click="handleStatusSwitch(ite)"></span>
+                        }"
+                        @click="handleStatusSwitch(ite)"
+                      ></span>
                     </div>
                     <div @click="handleLoop(ite)">查看</div>
                   </div>
@@ -192,7 +252,11 @@
         </div> -->
         <div class="content">
           <div class="table_box1">
-            <el-table :data="adjustTableData" style="width: 100%; height: 100%" @cell-click="handleCellEnter">
+            <el-table
+              :data="adjustTableData"
+              style="width: 100%; height: 100%"
+              @cell-click="handleCellEnter"
+            >
               <el-table-column label="可调资源" align="center" width="285">
                 <template #default="scope">
                   <span style="margin-left: 10px">{{ scope.row.name }}</span>
@@ -205,14 +269,29 @@
               </el-table-column>
               <el-table-column label="调节量" align="center">
                 <template #default="scope">
-                  <el-input type="text" v-model="scope.row.number" v-if="scope.row.isEdit" />
-                  <span style="margin-left: 10px" v-else>{{ scope.row.number }}</span>
+                  <el-input
+                    type="text"
+                    v-model="scope.row.number"
+                    v-if="scope.row.isEdit"
+                  />
+                  <span style="margin-left: 10px" v-else>{{
+                    scope.row.number
+                  }}</span>
                 </template>
               </el-table-column>
               <el-table-column label="开始时间" align="center">
                 <template #default="scope">
                   <div style="display: flex; align-items: center">
-                    <el-time-select popper-class="customDatePicker" v-model="scope.row.start_date" start="00:15" step="00:15" end="18:30" placeholder="开始时间" @change="getStart_time" v-if="scope.row.isEdit" />
+                    <el-time-select
+                      popper-class="customDatePicker"
+                      v-model="scope.row.start_date"
+                      start="00:15"
+                      step="00:15"
+                      end="18:30"
+                      placeholder="开始时间"
+                      @change="getStart_time"
+                      v-if="scope.row.isEdit"
+                    />
                     <span style="margin-left: 10px" v-else>{{
                       scope.row.start_date
                     }}</span>
@@ -222,15 +301,30 @@
               <el-table-column label="结束时间" align="center">
                 <template #default="scope">
                   <div style="display: flex; align-items: center">
-                    <el-time-select popper-class="customDatePicker" v-model="scope.row.end_date" start="00:15" step="00:15" end="18:30" placeholder="结束时间" @change="getend_time" v-if="scope.row.isEdit" />
-                    <span style="margin-left: 10px" v-else>{{ scope.row.end_date }}</span>
+                    <el-time-select
+                      popper-class="customDatePicker"
+                      v-model="scope.row.end_date"
+                      start="00:15"
+                      step="00:15"
+                      end="18:30"
+                      placeholder="结束时间"
+                      @change="getend_time"
+                      v-if="scope.row.isEdit"
+                    />
+                    <span style="margin-left: 10px" v-else>{{
+                      scope.row.end_date
+                    }}</span>
                   </div>
                 </template>
               </el-table-column>
             </el-table>
             <div class="btn_box">
-              <el-button class="add_bg" @click="handleSaveDate(adjustTableData)">保存</el-button>
-              <el-button class="send_bg" @click="adjustFlag = false">取消</el-button>
+              <el-button class="add_bg" @click="handleSaveDate(adjustTableData)"
+                >保存</el-button
+              >
+              <el-button class="send_bg" @click="adjustFlag = false"
+                >取消</el-button
+              >
             </div>
           </div>
         </div>
@@ -240,22 +334,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, reactive, onUnmounted, nextTick, getCurrentInstance, inject } from 'vue'
-import { ElMessage } from 'element-plus'
-import { getColorFun } from '@/hooks/getColorFun/index'
-import { app_load, api_send, api_register } from '@/ue4Player/app'
-import tree from '@/views/commonPage/tree.vue'
-import rateLine from './rateLine.vue'
-import rateLine_will from './rateLine_will.vue'
-import { useNow, useDateFormat } from '@vueuse/core'
-import { loadRateApi, treeSecond, strategyApi } from '@/api/ajust/tree.ts'
-import { number } from 'echarts'
-import rateJSONData from '@/assets/json/Ajust_rate.json'
-import ajustsource from '@/assets/json/Ajustsoure.json'
-import Ajust_strategy from '@/assets/json/Ajust_strategy.json'
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  reactive,
+  onUnmounted,
+  nextTick,
+  getCurrentInstance,
+  inject,
+} from "vue";
+import { ElMessage } from "element-plus";
+import { getColorFun } from "@/hooks/getColorFun/index";
+import { app_load, api_send, api_register } from "@/ue4Player/app";
+import tree from "@/views/commonPage/tree.vue";
+import rateLine from "./rateLine.vue";
+import rateLine_will from "./rateLine_will.vue";
+import { useNow, useDateFormat } from "@vueuse/core";
+import { loadRateApi, treeSecond, strategyApi } from "@/api/ajust/tree.ts";
+import { number } from "echarts";
+import rateJSONData from "@/assets/json/Ajust_rate.json";
+import ajustsource from "@/assets/json/Ajustsoure.json";
+import Ajust_strategy from "@/assets/json/Ajust_strategy.json";
 
-import { getSourceMapRange } from 'typescript'
-import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/defaults.mjs'
+import { getSourceMapRange } from "typescript";
+import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults.mjs";
 // onMounted(async () => {
 //   getRateDate(); //获取负载率
 
@@ -264,142 +368,148 @@ import { ITEM_RENDER_EVT } from 'element-plus/es/components/virtual-list/src/def
 
 // });
 onMounted(() => {
-  getRateDate() //获取负载率
+  getRateDate(); //获取负载率
   // getstrategyDate() //获取策略配置服务
   // let result = await loadRateApi({});
   // console.log(result, "负载率");
-})
-
+});
+let treeAreaId=ref('')//点击设备树二级服务获取的台区id去获取台区负载率
 // 设备树传来的设备树节点id treeKey是id
 const getTreeKey = (treeKey: any) => {
-  getTreeSourceList(treeKey) //可调资源 先从设备树获取到id 再调用二级服务去获取可调资源列表
-}
+  getTreeSourceList(treeKey); //可调资源 先从设备树获取到id 再调用二级服务去获取可调资源列表
+  treeAreaId=treeKey//台区的id
+};
 
 // 可调资源数量以及是否可调 功能---
-let pht = ref(0) //光伏
-let cdz = ref(0) //充电桩
-let batteryUnit = ref(0) //储能
+let pht = ref(0); //光伏
+let cdz = ref(0); //充电桩
+let batteryUnit = ref(0); //储能
 // 再次调用二级服务 去获取资源信息
 const getTreeSourceList = async (id: string) => {
   // 调用接口
   let result = await treeSecond({
-    orgID: '8af8470a47aad8e20147aad92e400335',
-    transformId: id
-  })
+    orgID: "8af8470a47aad8e20147aad92e400335",
+    transformId: id,
+  });
 
-  let res: any = JSON.parse(JSON.stringify(result))
+  let res: any = JSON.parse(JSON.stringify(result));
 
   //  可调资源的列表  结果
-  sourceAjustObj = res.data
+  sourceAjustObj = res.data;
   //----  json离线数据
   //sourceAjustObj = ajustsource.data;
   //----
 
-  sourceLArr.forEach(item => {
+  sourceLArr.forEach((item) => {
     // 将返回数据的length赋值给数组对象
-    item.number = sourceAjustObj[item.type]?.length || 0
-  })
+    item.number = sourceAjustObj[item.type]?.length || 0;
+  });
   // 将获取的数据赋值给表格 tablepvData总的表格数据
-  console.log(sourceAjustObj, 'sourceAjustObj')
+  console.log(sourceAjustObj, "sourceAjustObj");
 
-  tablepvData.value = []
+  tablepvData.value = [];
   for (let i in sourceAjustObj) {
     for (let j in sourceAjustObj[i]) {
-      sourceAjustObj[i][j].type = i
-      tablepvData.value.push(sourceAjustObj[i][j])
+      sourceAjustObj[i][j].type = i;
+      tablepvData.value.push(sourceAjustObj[i][j]);
     }
   }
-}
+};
 
 let sourceLArr = reactive([
-  { number: '0', type: 'photoVoltaicUnit', name: '光伏', img: 'img1' },
-  { number: '0', type: 'dwellerPile', name: '充电桩', img: 'img2' },
-  { number: '0', type: 'batteryUnit', name: '储能', img: 'img3' },
-  { number: '0', type: 'air_conditioner', name: '空调', img: 'img4' },
-  { number: '0', type: 'micro_grid', name: '微网', img: 'img5' }
-])
+  { number: "0", type: "photoVoltaicUnit", name: "光伏", img: "img1" },
+  { number: "0", type: "dwellerPile", name: "充电桩", img: "img2" },
+  { number: "0", type: "batteryUnit", name: "储能", img: "img3" },
+  { number: "0", type: "air_conditioner", name: "空调", img: "img4" },
+  { number: "0", type: "micro_grid", name: "微网", img: "img5" },
+]);
 
 const handelSource = (type: string) => {
   // 根据type类型获取表格数据
-  tablepvData.value = []
+  tablepvData.value = [];
   for (let i in sourceAjustObj[type]) {
-    tablepvData.value.push(sourceAjustObj[type][i])
+    tablepvData.value.push(sourceAjustObj[type][i]);
   }
-}
+};
 // 可调资源数量以及是否可调 功能---
 
 // 当前负载率------------
 interface RateDateInfo {
-  loadRate?: string
-  dataTime?: string
+  loadRate?: string;
+  dataTime?: string;
 }
-let key2 = ref<number>(2)
-let rateDate_cur = reactive<RateDateInfo[]>([]) //当前的负载率
+let key2 = ref<number>(2);
+let rateDate_cur = reactive<RateDateInfo[]>([]); //当前的负载率
+let rateDate_will = reactive<RateDateInfo[]>([]); //预测负载率
+
 const getRateDate = () => {
   // 定时15分钟获取接口数据
   // setInterval(() => {
-  let rateDate = rateJSONData as any
-  console.log(rateDate, '15分钟一次接口')
-  if (rateDate.result.length) {
-    rateDate_cur = rateDate.result
-    console.log(rateDate_cur, '父节点要传的数组')
-  } else {
-    ElMessage({
-      showClose: true,
-      message: '获取负载率失败',
-      type: 'error'
+    loadRateApi({mrid:treeAreaId}).then((res)=>{
+      if(res?.result.length){
+        // rateDate_cur=res.result
+        console.log(res, "res");
+        
+      }else{
+        ElMessage({
+          showClose: true,
+          message: "获取负载率失败",
+          type: "error",
+        });
+      }
     })
-  }
+  // let rateDate = rateJSONData as any;
+  // console.log(rateDate, "15分钟一次接口");
+  
   // }, 15*60*1000);
-}
+};
 // 当前负载率------------
-let HM = useDateFormat(useNow(), 'HH:mm') //当前时间
-const HMS = useDateFormat(useNow(), 'HH:mm:ss') //当前时间
+let HM = useDateFormat(useNow(), "HH:mm"); //当前时间
+const HMS = useDateFormat(useNow(), "HH:mm:ss"); //当前时间
 
-const YMD = useDateFormat(useNow(), 'YYYY-MM-DD') //当前日期
+const YMD = useDateFormat(useNow(), "YYYY-MM-DD"); //当前日期
 
 // 左侧设备树标识
-let AjusttreeContentFlag = ref(true)
+let AjusttreeContentFlag = ref(true);
 // 右侧能量调节标识
-let CapAjustmentcontentFlag1 = ref(true) //调节页面1
-let CapAjustmentcontentFlag2 = ref(true) //调节页面2
+let CapAjustmentcontentFlag1 = ref(true); //调节页面1
+let CapAjustmentcontentFlag2 = ref(true); //调节页面2
 
 // 设备树
-let tree_node = reactive([{}])
+let tree_node = reactive([{}]);
 // 光伏出力曲线弹窗
-let pv_station_name = ref('光伏2')
-let refreshkey = ref(0)
+let pv_station_name = ref("光伏2");
+let refreshkey = ref(0);
 // 点击设备树出现光伏实时出力实线
-let timePvLineFlag = ref(false)
+let timePvLineFlag = ref(false);
 const updatePvechart = (node: any) => {
-  tree_node = node
-  console.log('光伏中的树节点', node)
+  tree_node = node;
+  console.log("光伏中的树节点", node);
   // 当点击光伏时出现曲线
   // 判断字段中是否包含光伏来确认是否为 电站节点 进行电站弹窗曲线展示
-  if (node.data.name.indexOf('光伏') !== -1) {
-    console.log('光伏页面的光伏电站的弹窗', node.data)
-    timePvLineFlag.value = true //展示弹窗
+  if (node.data.name.indexOf("光伏") !== -1) {
+    console.log("光伏页面的光伏电站的弹窗", node.data);
+    timePvLineFlag.value = true; //展示弹窗
     // refreshkey.value++//强制刷新
-    pv_station_name = node.data.name //传值给弹窗
+    pv_station_name = node.data.name; //传值给弹窗
   }
-}
+};
 
 // 右侧 可调资源
 
-let sourceAjustObj = reactive<any>({})
+let sourceAjustObj = reactive<any>({});
 
 // 右 -能量调节
-let adjustContentFlag = ref(true)
+let adjustContentFlag = ref(true);
 // 点击下达指令 进入调节进度页面
 const haneleprogress = () => {
   // adjustContentFlag.value = false
   // progressContentFlag.value = true
-  console.log(adjustTableData, 'adjustTableData')
-  
-}
+  console.log(adjustTableData, "adjustTableData");
+};
 interface TablepvDate {
-  index?: number
-  name: string
+  index?: number;
+  name: string;
 }
 let tablepvData = ref<TablepvDate[]>([
   // {
@@ -422,191 +532,191 @@ let tablepvData = ref<TablepvDate[]>([
   //   index: 5,
   //   name: "**充电桩",
   // },
-])
+]);
 
 // 右 -能量调节
-let progressContentFlag = ref(false)
+let progressContentFlag = ref(false);
 // 调节分析
 let tableData_t_f = reactive<tableInfo[][]>([
   [
     {
-      index: '1',
-      problem: '并网逆变器'
+      index: "1",
+      problem: "并网逆变器",
     },
     {
-      index: '2',
-      problem: '联络开关'
+      index: "2",
+      problem: "联络开关",
     },
     {
-      index: '3',
-      problem: '**充电桩控制器'
+      index: "3",
+      problem: "**充电桩控制器",
     },
     {
-      index: '4',
-      problem: '并网断路器'
+      index: "4",
+      problem: "并网断路器",
     },
     {
-      index: '5',
-      problem: '并网断路器'
+      index: "5",
+      problem: "并网断路器",
     },
     {
-      index: '6',
-      problem: '联络开关'
+      index: "6",
+      problem: "联络开关",
     },
     {
-      index: '7',
-      problem: '并网断路器'
+      index: "7",
+      problem: "并网断路器",
     },
     {
-      index: '8',
-      problem: '**充电桩控制器'
-    }
+      index: "8",
+      problem: "**充电桩控制器",
+    },
   ],
   [
     {
-      index: '1',
-      problem: '并网逆变器'
+      index: "1",
+      problem: "并网逆变器",
     },
     {
-      index: '2',
-      problem: '联络开关'
+      index: "2",
+      problem: "联络开关",
     },
     {
-      index: '3',
-      problem: '**充电桩控制器'
+      index: "3",
+      problem: "**充电桩控制器",
     },
     {
-      index: '4',
-      problem: '并网断路器'
+      index: "4",
+      problem: "并网断路器",
     },
     {
-      index: '5',
-      problem: '并网断路器'
+      index: "5",
+      problem: "并网断路器",
     },
     {
-      index: '6',
-      problem: '联络开关'
+      index: "6",
+      problem: "联络开关",
     },
     {
-      index: '7',
-      problem: '并网断路器'
+      index: "7",
+      problem: "并网断路器",
     },
     {
-      index: '8',
-      problem: '**充电桩控制器'
-    }
+      index: "8",
+      problem: "**充电桩控制器",
+    },
   ],
   [
     {
-      index: '1',
-      problem: '并网逆变器'
+      index: "1",
+      problem: "并网逆变器",
     },
     {
-      index: '2',
-      problem: '联络开关'
+      index: "2",
+      problem: "联络开关",
     },
     {
-      index: '3',
-      problem: '**充电桩控制器'
+      index: "3",
+      problem: "**充电桩控制器",
     },
     {
-      index: '4',
-      problem: '并网断路器'
+      index: "4",
+      problem: "并网断路器",
     },
     {
-      index: '5',
-      problem: '并网断路器'
+      index: "5",
+      problem: "并网断路器",
     },
     {
-      index: '6',
-      problem: '联络开关'
+      index: "6",
+      problem: "联络开关",
     },
     {
-      index: '7',
-      problem: '并网断路器'
+      index: "7",
+      problem: "并网断路器",
     },
     {
-      index: '8',
-      problem: '**充电桩控制器'
-    }
-  ]
-])
-let actionData = ref<any>([])
+      index: "8",
+      problem: "**充电桩控制器",
+    },
+  ],
+]);
+let actionData = ref<any>([]);
 // 点击查看
-let handleLoop = (item: any) => {}
+let handleLoop = (item: any) => {};
 // 点击已动作的状态
 let handleStatusSwitch = (item: any) => {
-  actionData.value = item
-}
+  actionData.value = item;
+};
 // 中1
 
 // 策略配置
 // 表格
-let adjustFlag = ref(false)
-let alert_pvFlag = ref(false)
+let adjustFlag = ref(false);
+let alert_pvFlag = ref(false);
 
 // 表格
 
 interface User {
-  name: string
-  type: string
-  start_date: any
-  end_date: string
-  number: string
-  isEdit?: boolean
+  name: string;
+  type: string;
+  start_date: any;
+  end_date: string;
+  number: string;
+  isEdit?: boolean;
 }
 // 可调资源信息
 let adjustTableData = reactive<User[]>([
   {
-    name: '',
-    type: '充电桩',
-    number: '2',
-    start_date: '00:00:00',
-    end_date: '00:00:00'
-  }
-])
+    name: "",
+    type: "充电桩",
+    number: "2",
+    start_date: "00:00:00",
+    end_date: "00:00:00",
+  },
+]);
 // 点击策略配置
 let handleClickPC = () => {
-  adjustFlag.value = true
-  let newData: any = []
-  console.log(tablepvData.value, 'tablepvData')
+  adjustFlag.value = true;
+  let newData: any = [];
+  console.log(tablepvData.value, "tablepvData");
 
   tablepvData.value.forEach((item: any) => {
-    let typeStr = ''
-    if (item.type === 'photoVoltaicUnit') {
-      typeStr = '光伏'
-    } else if (item.type === 'dwellerPile') {
-      typeStr = '充电桩'
-    } else if (item.type === 'batteryUnit') {
-      typeStr = '储能'
-    } else if (item.type === 'air_conditioner') {
-      typeStr = '空调'
-    } else if (item.type === 'micro_grid') {
-      typeStr = '微网'
+    let typeStr = "";
+    if (item.type === "photoVoltaicUnit") {
+      typeStr = "光伏";
+    } else if (item.type === "dwellerPile") {
+      typeStr = "充电桩";
+    } else if (item.type === "batteryUnit") {
+      typeStr = "储能";
+    } else if (item.type === "air_conditioner") {
+      typeStr = "空调";
+    } else if (item.type === "micro_grid") {
+      typeStr = "微网";
     }
     let obj = {
       name: item.name,
       mrid: item.mrid,
       regulable: item.regulable,
-      start_date: '00:00:00',
-      end_date: '00:00:00',
+      start_date: "00:00:00",
+      end_date: "00:00:00",
       type: typeStr,
-      number: 0
-    }
-    newData.push(obj)
-  })
-  console.log(newData, 'newData')
-  adjustTableData = newData
-}
+      number: 0,
+    };
+    newData.push(obj);
+  });
+  console.log(newData, "newData");
+  adjustTableData = newData;
+};
 const getstrategyDate = () => {
   let inputdata = {
-    type: 'FEEDER',
-    mrId: '03DKX-555',
-    name: '555',
-    startTime: '2024-07-05 00:00:00',
-    endTime: '2024-07-05 00:00:10',
-    regulatedValue: '60'
-  }
+    type: "FEEDER",
+    mrId: "03DKX-555",
+    name: "555",
+    startTime: "2024-07-05 00:00:00",
+    endTime: "2024-07-05 00:00:10",
+    regulatedValue: "60",
+  };
   // strategyApi(inputdata)
   //   .then((res) => {
   //     console.log(res, "邮箱");
@@ -619,93 +729,93 @@ const getstrategyDate = () => {
   //     });
   //   });
 
-  let res = Ajust_strategy as any
-  console.log(res, 'iiiii')
-}
+  let res = Ajust_strategy as any;
+  console.log(res, "iiiii");
+};
 
 /** 鼠标移入cell */
 const handleCellEnter = (row: any, column: any, cell: any, event: any) => {
-  row.isEdit = true
-}
+  row.isEdit = true;
+};
 // 点击保存时修改成功并将结果传出去
 const handleSaveDate = (val: any) => {
-  adjustFlag.value = false
+  adjustFlag.value = false;
   val.forEach((ite: any) => {
-    ite.isEdit = false //所有的编辑状态全部为假
-  })
-}
+    ite.isEdit = false; //所有的编辑状态全部为假
+  });
+};
 // 点击
 // 开始时间
-const getStart_time = () => {}
+const getStart_time = () => {};
 // 结束时间
-const getend_time = () => {}
+const getend_time = () => {};
 
-const hideLeft = ref<boolean>(true) //默认页面显示
-const hideRight = ref<boolean>(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>
@@ -750,7 +860,7 @@ const styleVar = computed(() => {
   top: changeHeight(25);
   width: changeHeight(26.51);
   height: changeHeight(26.51);
-  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;
@@ -766,7 +876,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;
@@ -774,7 +884,11 @@ const styleVar = computed(() => {
 // 按钮
 .btnbg {
   box-sizing: border-box;
-  background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%);
+  background: linear-gradient(
+    180deg,
+    rgba(2, 45, 88, 0.8) 0%,
+    rgba(6, 178, 232, 0.8) 100%
+  );
   mix-blend-mode: normal;
   border: 1px solid #00c2ff;
   width: changeHeight(190);
@@ -783,12 +897,12 @@ const styleVar = computed(() => {
 }
 // 公共标题
 .title_bg {
-  background: url('@/assets/images/common/tree_title_bg.png') no-repeat;
+  background: url("@/assets/images/common/tree_title_bg.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%;
 }
 // 功率标志
@@ -845,7 +959,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;
@@ -870,7 +984,8 @@ const styleVar = computed(() => {
       top: 50%;
       .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);
@@ -886,7 +1001,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);
@@ -951,7 +1066,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);
@@ -962,7 +1078,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);
@@ -978,7 +1094,7 @@ const styleVar = computed(() => {
       top: 50%;
       .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);
@@ -995,7 +1111,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);
@@ -1007,7 +1124,8 @@ const styleVar = computed(() => {
       .title {
         height: changeHeight(110);
         width: 100%;
-        background: url('@/assets/images/common/common_titlebg_800.png') no-repeat;
+        background: url("@/assets/images/common/common_titlebg_800.png")
+          no-repeat;
         background-size: 100% 100%;
         display: flex;
         align-items: center;
@@ -1051,7 +1169,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%;
 
           // background-color: red;
@@ -1086,7 +1204,8 @@ const styleVar = computed(() => {
               width: 48%;
               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%;
             }
             .yuan {
@@ -1127,7 +1246,11 @@ const styleVar = computed(() => {
             .source_active {
               /* 矩形 */
               box-sizing: border-box;
-              background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%);
+              background: linear-gradient(
+                180deg,
+                rgba(2, 45, 88, 0.8) 0%,
+                rgba(6, 178, 232, 0.8) 100%
+              );
               mix-blend-mode: normal;
               border: 1px solid #00c2ff;
             }
@@ -1150,31 +1273,36 @@ const styleVar = computed(() => {
               .img1 {
                 width: changeHeight(76.5);
                 height: changeHeight(73.84);
-                background: url('@/assets/images/capAjustmentPage/pv_logo.png') no-repeat;
+                background: url("@/assets/images/capAjustmentPage/pv_logo.png")
+                  no-repeat;
                 background-size: 90% 90%;
               }
               .img2 {
                 width: changeHeight(52.7);
                 height: changeHeight(52.6);
-                background: url('@/assets/images/capAjustmentPage/cdz_logo_active.png') no-repeat;
+                background: url("@/assets/images/capAjustmentPage/cdz_logo_active.png")
+                  no-repeat;
                 background-size: 90% 90%;
               }
               .img3 {
                 width: changeHeight(35.29);
                 height: changeHeight(53.48);
-                background: url('@/assets/images/capAjustmentPage/stored_logo_active.png') no-repeat;
+                background: url("@/assets/images/capAjustmentPage/stored_logo_active.png")
+                  no-repeat;
                 background-size: 90% 90%;
               }
               .img4 {
                 width: changeHeight(43.94);
                 height: changeHeight(52.54);
-                background: url('@/assets/images/capAjustmentPage/kt_logo_active.png') no-repeat;
+                background: url("@/assets/images/capAjustmentPage/kt_logo_active.png")
+                  no-repeat;
                 background-size: 90% 90%;
               }
               .img5 {
                 width: changeHeight(55.23);
                 height: changeHeight(50.55);
-                background: url('@/assets/images/capAjustmentPage/weiwang_logo_active.png') no-repeat;
+                background: url("@/assets/images/capAjustmentPage/weiwang_logo_active.png")
+                  no-repeat;
                 background-size: 100% 100%;
               }
 
@@ -1339,7 +1467,11 @@ const styleVar = computed(() => {
           .title_a_p {
             width: 90%;
             height: changeHeight(112);
-            background: linear-gradient(90deg, rgba(82, 125, 243, 0.2) 0%, rgba(12, 9, 177, 0.2) 100%);
+            background: linear-gradient(
+              90deg,
+              rgba(82, 125, 243, 0.2) 0%,
+              rgba(12, 9, 177, 0.2) 100%
+            );
             display: flex;
             justify-content: center;
             align-items: center;
@@ -1464,7 +1596,11 @@ const styleVar = computed(() => {
               bottom: changeHeight(-15);
             }
 
-            :deep(.el-carousel__indicators .el-carousel__indicator .el-carousel__button) {
+            :deep(
+                .el-carousel__indicators
+                  .el-carousel__indicator
+                  .el-carousel__button
+              ) {
               width: changeHeight(8) !important;
               height: changeHeight(8) !important;
               background: rgba(0, 0, 0, 0.4);
@@ -1495,7 +1631,7 @@ const styleVar = computed(() => {
       box-sizing: border-box;
       width: changeHeight(1500);
       height: changeHeight(801.49);
-      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);
@@ -1521,7 +1657,8 @@ const styleVar = computed(() => {
         .titlebg {
           width: changeHeight(842.04);
           height: changeHeight(57.23);
-          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;
@@ -1577,7 +1714,11 @@ const styleVar = computed(() => {
               // background-image: url("@/assets/images/chargingPage/add_icon_bg.png");
               // background-size: 100% 100%;
               // background-repeat: no-repeat;
-              background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%) !important;
+              background: linear-gradient(
+                180deg,
+                rgba(2, 45, 88, 0.8) 0%,
+                rgba(6, 178, 232, 0.8) 100%
+              ) !important;
               mix-blend-mode: normal;
               border: 1px solid #00c2ff;
               color: #ffffff !important;
@@ -1586,7 +1727,11 @@ const styleVar = computed(() => {
               // background-image: url("@/assets/images/chargingPage/add_bg.png");
               // background-size: 100% 100%;
               // background-repeat: no-repeat;
-              background: linear-gradient(180deg, rgba(2, 45, 88, 0.8) 0%, rgba(6, 178, 232, 0.8) 100%) !important;
+              background: linear-gradient(
+                180deg,
+                rgba(2, 45, 88, 0.8) 0%,
+                rgba(6, 178, 232, 0.8) 100%
+              ) !important;
               mix-blend-mode: normal;
               border: 1px solid #00c2ff;
               color: #ffffff !important;
@@ -1714,7 +1859,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%
+            );
           }
         }
       }
@@ -1797,7 +1946,7 @@ const styleVar = computed(() => {
       width: changeHeight(1156.86);
       height: changeHeight(620.62);
       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);
@@ -1823,7 +1972,8 @@ const styleVar = computed(() => {
         .titlebg {
           width: changeHeight(842.04);
           height: changeHeight(57.23);
-          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;
@@ -1902,11 +2052,11 @@ const styleVar = computed(() => {
               width: changeHeight(100.8);
             }
             .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%;
             }
             .beforeEchart {
@@ -1930,7 +2080,7 @@ const styleVar = computed(() => {
     width: changeHeight(329.23);
     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;
diff --git a/src/views/pages/OpticalStoragePage/index.vue b/src/views/pages/OpticalStoragePage/index.vue
index 51174d4..7eb279e 100644
--- a/src/views/pages/OpticalStoragePage/index.vue
+++ b/src/views/pages/OpticalStoragePage/index.vue
@@ -687,6 +687,8 @@ let handleAnimate = async (result: any) => {
       'c0557047-c0e7-4df4-a36b-a4fe4dbdd879'
     ]
     if (arr.includes(item.sec_id)) {
+      console.log(item.sec_id,'item.sec_id');
+      
       let dom = draw.findOne('#ZQ_' + item.sec_id)
 
       if (dom) {