update

2024-07-14 22:35:44 +08:00 · 2024-07-14 22:35:44 +08:00 · 90f745f6e0
parent 43f7c19691
commit 90f745f6e0
7 changed files with 7360 additions and 209 deletions
--- a/src/api/carPage/index.ts
+++ b/src/api/carPage/index.ts
@ -1,5 +1,7 @@
 import request from "@/utils/http/request";

+
+// 曲线
 export function powerCurve_api(data: any) {
  return request({
    url: "/api/wwpm/biz/v1/pipe/power_curve",
@ -8,5 +10,24 @@ export function powerCurve_api(data: any) {
  });
 }

+// 台区 重过载
+export function transformerOverloadCount_api(data: any) {
+  return request({
+    url: "/api/wwpm/biz/v1/transformer_overload_count",
+    method: "POST",
+    data,
+  });
+}
+
+// 充电桩列表 运行状态
+export function running_api(data: any) {
+  return request({
+    url: "/api/wwpm/biz/v1/pipe/running",
+    method: "POST",
+    data,
+  });
+}
+
+


--- a/src/assets/json/result2_copy.json
+++ b/src/assets/json/result2_copy.json
--- a/src/assets/json/线路二.js
+++ b/src/assets/json/线路二.js
--- a/src/hooks/handleFun.ts
+++ b/src/hooks/handleFun.ts
@ -14,18 +14,18 @@ export function handleUnit(data) {


 // 处理echarts数据
-export function handleEchartsData(data) {
+export function handleEchartsData(data, value) {
    // 间隔可以设置成动态的
    let timeArray = [];
    for (let hour = 0; hour < 24; hour++) {
-        for (let minute = 0; minute < 60; minute += 5) {
+        for (let minute = 0; minute < 60; minute += value) {
            let timeString = (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute);
            timeArray.push(
                { datetime: timeString, measValue: '-' }
            );
        }
    }
-
+    console.log(timeArray)
    timeArray.forEach(item => {
        data.forEach(ite => {
            let iteTime = ite.datetime.split(' ')[1].split(':')[0] + ':' + ite.datetime.split(' ')[1].split(':')[1]
--- a/src/views/pages/OpticalStoragePage/index.vue
+++ b/src/views/pages/OpticalStoragePage/index.vue
@ -311,10 +311,11 @@ 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 svgJSON from "@/assets/json/result1.json";
 import svgJSON2 from '@/assets/json/nw-result1.json'
-import svgJSON from '@/assets/json/result2.json' //555
+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
--- a/src/views/pages/carPage/index.vue
+++ b/src/views/pages/carPage/index.vue
@ -64,7 +64,7 @@
                      <div class="bottom">
                        <span class="fs35">重过载</span>
                        <div class="val fs40">
-                          <div class="blueShadow">2</div>
+                          <div class="blueShadow">{{transformerOverloadCount}}</div>
                          <!-- <span class="blue">个</span> -->
                        </div>
                      </div>
@ -72,7 +72,7 @@
                  </div>
                </div>
                <div class="load_manage_echart">
-                  <load_echart :eName="eName1"></load_echart>
+                  <load_echart v-if="carRightData.echartsData.length>0" :paramsData="carRightData.echartsData"></load_echart>
                </div>
              </div>

@ -82,7 +82,7 @@
                  <div class="box_d">
                    <div class="yuand"></div>
                    <span>充电桩数量：</span>
-                    <div class="number c-blue">{{ chargingList.length }}</div>
+                    <div class="number c-blue">{{ carRightData.chargingList.length }}</div>
                  </div>
                  <div class="box_d">
                    <div class="yuand"></div>
@ -101,40 +101,40 @@
                  </div> -->
                </div>
                <div class="list_content">
-                  <div class="c_info" v-for="item in chargingList">
+                  <div class="c_info" v-for="(item,index) in carRightData.chargingList" :key="index">
                    <img src="@/assets/images/device/chongdainzhaung.png" alt="" />
                    <div class="r_info">
                      <div class="t_info">
-                        <span class="c-blue">{{ item.c_name }}</span>
+                        <span class="c-blue">{{ item.name }}</span>
                        <div class="tval">
                          <div :class="[
-                              item.c_status === '充电中'
+                              item.status === '1'
                                ? 'b-green'
-                                : item.c_status === '未使用'
+                                : item.status === '0'
                                ? 'b-gary'
                                : 'b-yellow',
                              'yuand',
                            ]"></div>
                          <div :class="[
-                              item.c_status === '充电中'
+                              item.status === '1'
                                ? 'c-green'
-                                : item.c_status === '未使用'
+                                : item.status === '0'
                                ? 'c-gary'
                                : 'c-yellow',
                            ]">
-                            {{ item.c_status }}
+                            {{ item.status === '1' ? '充电中' : '未充电'}}
                          </div>
                        </div>
                      </div>
                      <div class="b_info">
                        <div class="load">
                          负荷：
-                          <span>{{ item.c_load }}kW</span>
+                          <span>{{ item.rated_power }}kW</span>
                        </div>
-                        <div class="total">
+                        <!-- <div class="total">
                          总充电量：
                          <span>{{ item.c_total }}kWh</span>
-                        </div>
+                        </div> -->
                      </div>
                    </div>
                  </div>
@ -265,10 +265,16 @@ import load_c_echart from './load_c_echart.vue'
 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 } from '@/api/carPage/index'
+import { powerCurve_api, transformerOverloadCount_api, running_api } from '@/api/carPage/index'
+import { handleEchartsData } from '@/hooks/handleFun'
+
 onMounted(() => {
  // 获取右侧数据
  getPowerCurve_api()
+  // 获取台区 重过载
+  getTransformerOverloadCount_api()
+  // 获取充电桩列表
+  getRunning_api()
 })

 // 车网互动专题切换栏
@ -409,23 +415,6 @@ const handleCurrentChange = (page: number) => {
 const hideLeft = ref<boolean>(true) //默认页面显示
 const hideRight = ref<boolean>(true) //默认页面显示  右边

-interface ChargingList {
-  c_name: string
-  c_status: string
-  c_load: string
-  c_total: string
-}
-// 右侧充电桩运行状态
-let chargingList = reactive<ChargingList[]>([
-  { c_name: '充电桩1号', c_status: '充电中', c_load: '30', c_total: '1475' },
-  { c_name: '充电桩4号', c_status: '充电中', c_load: '45', c_total: '235' },
-  { c_name: '充电桩2号', c_status: '充电中', c_load: '50', c_total: '675' },
-  { c_name: '充电桩7号', c_status: '未充电', c_load: '32', c_total: '244' },
-  { c_name: '充电桩12号', c_status: '未充电', c_load: '48', c_total: '368' },
-  { c_name: '充电桩3号', c_status: '未充电', c_load: '56', c_total: '123' },
-
-  { c_name: '充电桩3号', c_status: '未充电', c_load: '23', c_total: '566' }
-])
 // 组件卸载调用
 onUnmounted(() => {
  hideLeft.value = false
@ -453,12 +442,45 @@ const handleThree = val => {
 //
 //
 //
+interface ChargingList {
+  c_name: string
+  c_status: string
+  c_load: string
+  c_total: string
+}
+let carRightData = reactive({
+  echartsData: [],
+  chargingList: [] // 右侧充电桩运行状态
+})
+let transformerOverloadCount = ref<number>(0)
+
+// 获取曲线
 let getPowerCurve_api = () => {
  powerCurve_api({
    mrid: '1242690000004712'
  }).then((res: any) => {
-    console.log(res,'resresres');
-    
+    res?.data.forEach((item: any) => {
+      item.datetime = item.dateTime
+    })
+    let result = handleEchartsData(res.data, 60)
+    carRightData.echartsData = result
+    console.log(result, 'resresres')
+  })
+}
+// 获取台区 重过载
+let getTransformerOverloadCount_api = () => {
+  transformerOverloadCount_api({
+    orgID: '8af8470a47aad8e20147aad92e400335'
+  }).then((res: any) => {
+    transformerOverloadCount.value = res.data
+  })
+}
+// 获取充电桩列表
+let getRunning_api = () => {
+  running_api({
+    orgID: '8af8470a47aad8e20147aad92e400335'
+  }).then((res: any) => {
+    carRightData.chargingList = res.data
  })
 }
 //
@ -1021,7 +1043,7 @@ const styleVar = computed(() => {
          }
        }
        .load_runstatus_box {
-          height: 100%;
+          height: 60%;
          width: 95%;

          .yuand {
@ -1072,7 +1094,7 @@ const styleVar = computed(() => {
            margin-top: 2%;

            // height: changeHeight(370);
-            height: 64%;
+            height: 85%;

            padding-left: changeHeight(44);
            overflow: auto;
--- a/src/views/pages/carPage/load_echart.vue
+++ b/src/views/pages/carPage/load_echart.vue
@ -1,180 +1,175 @@
 <template>
-    <div class="OneLine" ref="OneLine"></div>
-  </template>
+  <div class="OneLine" ref="OneLine"></div>
+</template>
  
  <script setup lang="ts">
-  import {
-    ref,
-    inject,
-    onBeforeUnmount,
-    getCurrentInstance,
-    onMounted,
-    watchEffect,
-  } from "vue";
-  import transformFontSize from "@/hooks/transFormSize.ts";
-  import "echarts/lib/component/dataZoom";
-  onMounted(() => {
-    drawOneLine();
-  });
-  interface Echart_props {
-    eName?: string;
-  }
-  // const props = withDefaults(defineProps<Echart_props>(), {
-  //   eName: "负载率",
-  // });
+import { ref, inject, onBeforeUnmount, getCurrentInstance, onMounted, watchEffect } from 'vue'
+import transformFontSize from '@/hooks/transFormSize.ts'
+import 'echarts/lib/component/dataZoom'

+const props = defineProps<{
+  paramsData: any
+}>()

+onMounted(() => {
+  drawOneLine()
+})
+interface Echart_props {
+  eName?: string
+}
+// const props = withDefaults(defineProps<Echart_props>(), {
+//   eName: "负载率",
+// });

+// 获取echart挂载的DOM节点
+const OneLine: any = ref()

+// 获取当前组件实例
+const { proxy }: any = getCurrentInstance()

-  // 获取echart挂载的DOM节点
-  const OneLine: any = ref();
+const drawOneLine = () => {
+  let xData:any = []
+  let yData:any = []
+  props.paramsData.forEach(item => {
+    xData.push(item.datetime)
+    yData.push(item.measValue)
+  })

-  // 获取当前组件实例
-  const { proxy }: any = getCurrentInstance();
+  let myChart = proxy.$echarts.init(OneLine.value)

-  const drawOneLine = () => {
-    let myChart = proxy.$echarts.init(OneLine.value);
+  myChart.clear()
+  const option = {
+    tooltip: {
+      trigger: 'axis',
+      // axisPointer: { type: 'cross' }
+      textStyle: {
+        color: '#FFFFFF'
+      },
+      // padding: transformFontSize(15),
+      backgroundColor: 'rgba(10,202,64,.9)', //设置自定义背景
+      borderColor: 'rgba(10,202,64,.9)',
+      borderRadius: 5,

-    myChart.clear();
-    const option = {
-      tooltip: {
-        trigger: "axis",
-        // axisPointer: { type: 'cross' }
-        textStyle: {
-          color: "#FFFFFF",
-        },
-        // padding: transformFontSize(15),
-        backgroundColor: "rgba(10,202,64,.9)", //设置自定义背景
-        borderColor: "rgba(10,202,64,.9)",
-        borderRadius: 5,
-  
-        formatter: function (param: any) {
-          let str = `
+      formatter: function (param: any) {
+        let str = `
          <div style="width:100%:height:100%">
-            <div style="display:flex;justify-content:space-between;"> ${
-              param[0].name.split(" ")[0]
-            }</div>
+            <div style="display:flex;justify-content:space-between;"> ${param[0].name.split(' ')[0]}</div>
            ${getDom(param)}
-          </div>`;
-          function getDom(param: any) {
-            let newStr = "";
-            param.forEach((item: any) => {
-              newStr += `<div style="display:flex;"><div>${
-                item.seriesName
-              }：</div><div>${
-                item.value === undefined ? "0" : item.value
-              }%</div></div>`;
-            });
-            return newStr;
+          </div>`
+        function getDom(param: any) {
+          let newStr = ''
+          param.forEach((item: any) => {
+            newStr += `<div style="display:flex;"><div>${item.seriesName}：</div><div>${item.value === undefined ? '0' : item.value}%</div></div>`
+          })
+          return newStr
+        }
+        return str
+      }
+    },
+    legend: {
+      top: '5%',
+      right: '8%',
+      orient: 'vertical',
+      data: ['功率'],
+      itemWidth: transformFontSize(40),
+      itemHeight: transformFontSize(20),
+      itemGap: transformFontSize(8),
+      textStyle: {
+        fontSize: transformFontSize(35),
+        color: '#FFFFFF'
+      }
+    },
+    grid: {
+      top: '25%',
+      left: '8%',
+      right: '12%',
+      bottom: '13%'
+    },
+    xAxis: {
+      type: 'category',
+      axisTick: {
+        show: false,
+        alignWithLabel: true
+      },
+      boundaryGap: false,
+      axisLabel: {
+        color: '#fff',
+        fontSize: transformFontSize(35),
+        padding: [0, 0, 0, 30]
+        // formatter: function (param: any) {
+        //   return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
+        // },
+      },
+      data: xData
+    },
+    yAxis: {
+      splitLine: {
+        show: false
+      },
+      axisLine: {
+        show: true //y轴轴线
+      },
+      type: 'value',
+      name: 'kW',
+      //   min: 0,
+      //   max: 100,
+      nameTextStyle: {
+        //y轴name的颜色
+        color: '#fff',
+        fontSize: transformFontSize(35),
+        padding: [0, 40, 0, 0]
+      },
+      position: 'left',
+      axisLabel: {
+        //刻度标签文字的颜色大小
+        color: '#fff',
+        fontSize: transformFontSize(35),
+        formatter: '{value}'
+      }
+    },
+    series: [
+      {
+        name: '功率',
+        type: 'line',
+        barWidth: 2, // 柱子宽度核心代码
+        smooth: true,
+        showSymbol: false,
+        itemStyle: {
+          color: 'rgba(107, 255, 130, 1)'
+        },
+        areaStyle: {
+          normal: {
+            color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(107, 255, 130, 0.4)'
+              },
+
+              {
+                offset: 1,
+
+                color: 'rgba(107, 255, 130, 0.01)'
+              }
+            ])
          }
-          return str;
        },
-      },
-      legend: {
-        top: "3%",
-        right: "8%",
-        orient: "vertical",
-        data: ["当前负载率"],
-        itemWidth: transformFontSize(40),
-        itemHeight: transformFontSize(20),
-        itemGap: transformFontSize(8),
-        textStyle: {
-          fontSize: transformFontSize(35),
-          color: "#FFFFFF",
-        },
-      },
-      grid: {
-        top: "25%",
-        left: "8%",
-        right: "12%",
-        bottom: "13%",
-      },
-      xAxis: {
-        type: "category",
-        axisTick: {
-          show: false,
-          alignWithLabel: true,
-        },
-        boundaryGap: false,
-        axisLabel: {
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          padding: [0, 0, 0, 30],
-          // formatter: function (param: any) {
-          //   return param.split(' ')[1].split(':')[0] + ':' + param.split(' ')[1].split(':')[1]
-          // },
-        },
-        data: ["03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "24:00"],
-      },
-      yAxis: {
-        splitLine: {
-          show: false,
-        },
-        axisLine: {
-          show: true, //y轴轴线
-        },
-        type: "value",
-        name: "%",
-        //   min: 0,
-        //   max: 100,
-        nameTextStyle: {
-          //y轴name的颜色
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          padding: [0, 40, 0, 0],
-        },
-        position: "left",
-        axisLabel: {
-          //刻度标签文字的颜色大小
-          color: "#fff",
-          fontSize: transformFontSize(35),
-          formatter: "{value}",
-        },
-      },
-      series: [
-        {
-          name: "当前负载率",
-          type: "line",
-          barWidth: 2, // 柱子宽度核心代码
-          smooth: true,
-          showSymbol: false,
-          itemStyle: {
-            color: "rgba(107, 255, 130, 1)",
-          },
-          areaStyle: {
-            normal: {
-              color: new proxy.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {
-                  offset: 0,
-                  color: "rgba(107, 255, 130, 0.4)",
-                },
+        data: yData
+      }
+    ]
+  }
+  myChart.setOption(option)

-                {
-                  offset: 1,
-  
-                  color: "rgba(107, 255, 130, 0.01)",
-                },
-              ]),
-            },
-          },
-          data: [20, 42, 41, 24, 40, 30, 10],
-        },
-      ],
-    };
-    myChart.setOption(option);
-  
-    // 根据页面大小自动响应图表大小
-    window.addEventListener("resize", function () {
-      myChart.resize();
-    });
-  };
-  </script>
+  // 根据页面大小自动响应图表大小
+  window.addEventListener('resize', function () {
+    myChart.resize()
+  })
+}
+</script>
  
  <style scoped>
-  .OneLine {
-    height: 100%;
-    width: 100%;
-  }
-  </style>
+.OneLine {
+  height: 100%;
+  width: 100%;
+}
+</style>