xq commit:"修改了逆变器历史详情"

.env.development

@@ -5,7 +5,7 @@ VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.168:8080'
+VITE_APP_BASE_API = 'http://192.168.110.168:8008'
 
 # 应用访问路径 例如使用前缀 /admin/
 VITE_APP_CONTEXT_PATH = '/'

.env.production

@@ -5,7 +5,7 @@ VITE_APP_TITLE = RuoYi-Vue-Plus多租户管理系统
 VITE_APP_ENV = 'production'
 
 # 应用访问路径 例如使用前缀 /admin/
-VITE_APP_CONTEXT_PATH = '/'
+VITE_APP_CONTEXT_PATH = 'http://192.168.110.2:8008'
 
 # 监控地址
 VITE_APP_MONITOR_ADMIN = '/admin/applications'

package.json

@@ -35,6 +35,7 @@
     "image-conversion": "2.1.1",
     "js-cookie": "3.0.5",
     "jsencrypt": "3.3.2",
+    "moment": "^2.30.1",
     "nprogress": "0.2.0",
     "pinia": "3.0.2",
     "screenfull": "6.0.2",

src/assets/styles/customDialog.scss

@@ -41,5 +41,30 @@
     }
   }
 }
+.bg-fill{
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.flex-c{
+  display: flex;
+  flex-direction: column;
+}
+.flex{
+  display: flex;
+}
+.flex-a{
+  display: flex;
+  align-items: center;
+}
+.flex-c-a{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.flex-a-cc{
+  @extend .flex-a;
+  justify-content: center;
+}
 
 

src/router/index.ts

@@ -34,6 +34,11 @@ export const constantRoutes: RouteRecordRaw[] = [
       {
         path: '/redirect/:path(.*)',
         component: () => import('@/views/redirect/index.vue')
+      },
+      {
+        path: '/historyDetail',
+        name: 'historyDetail',
+        component: () => import('@/views/historyDetail/historyDetail.vue')
       }
     ]
   },
@@ -92,9 +97,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 ];
 
 // 动态路由，基于用户权限动态去加载
-export const dynamicRoutes: RouteRecordRaw[] = [
+export const dynamicRoutes: RouteRecordRaw[] = [];
-
-];
 
 /**
  * 创建路由

src/views/business/inverter/index.vue

@@ -1724,6 +1724,7 @@ function initChart(a: any, b: any, c: any, d: any, e?: any, f?: any) {
   chart1 && chart1.setOption(option);
 }
 
+const router = useRouter();
 const chart1Value = ref([]);
 const chart1Index = ref([]);
 const chart2Value = ref([]);
@@ -1740,7 +1741,6 @@ const handleCheckDetail = async (row?: InverterVO) => {
   reset2();
   const _id = row?.id || ids.value[0];
   const res = await getInverterOther(_id);
-  console.info(res.data);
   const data = res.data;
   for (const key in data) {
     if (key.includes('iPv') && !key.includes('Str')) {
@@ -1786,16 +1786,37 @@ const handleCheckDetail = async (row?: InverterVO) => {
     batteryFailureInformation02: res.data.batteryFailureInformation02 === '0' ? '正常' : '异常'
   };
   Object.assign(form2.value, res.data);
-  dialog2.visible = true;
+  // dialog2.visible = true;
-  dialog2.title = '逆变器历史数据';
+  // dialog2.title = '逆变器历史数据';
-  await nextTick(() => {
+  const detail = {
-    initChart(chart1Value.value, chart1Index.value, myChart1.value, '直流电流参数', 25, 'A');
+    ...res.data,
-    initChart(chart2Value.value, chart2Index.value, myChart2.value, '直流电压参数', 25, 'V');
+    chart1Value: chart1Value.value,
-    initChart(chart3Value.value, chart3Index.value, myChart3.value, '直流功率参数', 25, 'kwh');
+    chart1Index: chart1Index.value,
-    initChart(chart4Value.value, chart4Index.value, myChart4.value, 'mppt电流参数', 25, 'A');
+    chart2Value: chart2Value.value,
-    initChart(chart5Value.value, chart5Index.value, myChart5.value, 'mppt电压参数', 25, 'V');
+    chart2Index: chart2Index.value,
-    initChart(chart6Value.value, chart6Index.value, myChart6.value, 'mppt功率参数', 25, 'kwh');
+    chart3Value: chart3Value.value,
+    chart3Index: chart3Index.value,
+    chart4Value: chart4Value.value,
+    chart4Index: chart4Index.value,
+    chart5Value: chart5Value.value,
+    chart5Index: chart5Index.value,
+    chart6Value: chart6Value.value,
+    chart6Index: chart6Index.value
+  };
+  router.push({
+    path: '/historyDetail',
+    query: {
+      detail: JSON.stringify(detail)
+    }
   });
+  // await nextTick(() => {
+  //   initChart(chart1Value.value, chart1Index.value, myChart1.value, '直流电流参数', 25, 'A');
+  //   initChart(chart2Value.value, chart2Index.value, myChart2.value, '直流电压参数', 25, 'V');
+  //   initChart(chart3Value.value, chart3Index.value, myChart3.value, '直流功率参数', 25, 'kwh');
+  //   initChart(chart4Value.value, chart4Index.value, myChart4.value, 'mppt电流参数', 25, 'A');
+  //   initChart(chart5Value.value, chart5Index.value, myChart5.value, 'mppt电压参数', 25, 'V');
+  //   initChart(chart6Value.value, chart6Index.value, myChart6.value, 'mppt功率参数', 25, 'kwh');
+  // });
 };
 
 /** 提交按钮 */

src/views/historyDetail/historyDetail.vue

@@ -0,0 +1,439 @@
+<script setup lang="ts">
+import moment from 'moment';
+import * as echarts from 'echarts';
+import { ref } from 'vue';
+
+const route = useRoute();
+const router = useRouter();
+const detail = ref();
+const activeName = ref();
+const myChart1 = ref(null);
+const myChart2 = ref(null);
+const myChart3 = ref(null);
+const myChart4 = ref(null);
+const myChart5 = ref(null);
+const myChart6 = ref(null);
+
+function dealData() {
+  console.info(detail.value);
+  detail.value = {
+    ...detail.value,
+    dataTimestamp: moment(Number(detail.value.dataTimestamp)).format('YYYY-MM-DD HH:mm:ss'),
+    stateChinese: detail.value.state === 1 ? '在线' : detail.value.state === 2 ? '离线' : '报警',
+    warningInfoData: detail.value.warningInfoData === 0 ? '无' : detail.value.state === 1 ? '异常' : '报警',
+    updateShelfEndTime: moment(Number(detail.value.updateShelfEndTime)).format('YYYY-MM-DD HH:mm:ss')
+  };
+}
+function initChart(a: any, b: any, c: any, d: any, e?: any, f?: any) {
+  const instance = echarts.getInstanceByDom(c);
+  if (instance) {
+    echarts.dispose(instance);
+  }
+  const chart1 = echarts.init(c);
+  const option = {
+    tooltip: {
+      trigger: 'axis'
+    },
+    dataZoom: [
+      {
+        type: 'slider', // 滑动条
+        show: true,
+        xAxisIndex: [0], // 控制哪个x轴
+        start: 0, // 初始显示范围的起始百分比
+        end: 100, // 初始显示范围的结束百分比
+        handleIcon:
+          'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
+        handleSize: '80%',
+        handleStyle: {
+          color: '#fff',
+          shadowBlur: 3,
+          shadowColor: 'rgba(0, 0, 0, 0.6)',
+          shadowOffsetX: 2,
+          shadowOffsetY: 2,
+          height: 10
+        },
+        labelFormatter: function (value) {
+          return value;
+        },
+        // 阻止事件冒泡
+        handleMove: function (params) {
+          if (params.event.event) {
+            params.event.event.stopPropagation();
+          }
+        },
+        bottom: '8%',
+        height: 10
+      },
+      {
+        type: 'inside', // 内置型dataZoom组件，允许用户通过鼠标滚轮或触控缩放
+        xAxisIndex: [0],
+        start: 0,
+        end: 100
+      }
+    ],
+    grid: {
+      left: '7%',
+      right: '10%',
+      bottom: '-100%',
+      top: '5%',
+      height: '82%'
+    },
+    xAxis: {
+      type: 'category',
+      data: b,
+      boundaryGap: true, // 坐标轴两边留白策略
+      axisTick: {
+        show: false
+      }
+    },
+    yAxis: {
+      type: 'value',
+      name: d + '(单位' + f + ')',
+      nameTextStyle: {
+        padding: [0, 0, e, 0],
+        verticalAlign: 'bottom'
+      },
+      nameLocation: 'center'
+    },
+    series: [
+      {
+        data: a,
+        type: 'bar',
+        itemStyle: {
+          color: {
+            type: 'linear',
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              { offset: 0, color: '#ff7f50' }, // 0% 处的颜色
+              { offset: 1, color: '#87cefa' } // 100% 处的颜色
+            ],
+            global: false // 缺省为 false
+          }
+        }
+      }
+    ]
+  };
+  chart1 && chart1.setOption(option);
+}
+function handleClick(a) {
+  const nv = a.props.name;
+  if (nv === 'first') {
+    setTimeout(() => {
+      initChart(detail.value.chart1Value, detail.value.chart1Index, myChart1.value, '直流电流参数', 25, 'A');
+    }, 500);
+  } else if (nv === 'second') {
+    setTimeout(() => {
+      initChart(detail.value.chart2Value, detail.value.chart2Index, myChart2.value, '直流电压参数', 25, 'V');
+    }, 500);
+  } else if (nv === 'third') {
+    setTimeout(() => {
+      initChart(detail.value.chart3Value, detail.value.chart3Index, myChart3.value, '直流功率参数', 25, 'kwh');
+    }, 500);
+  } else if (nv === 'fourth') {
+    setTimeout(() => {
+      initChart(detail.value.chart4Value, detail.value.chart4Index, myChart4.value, 'mppt电流参数', 25, 'A');
+    }, 500);
+  } else if (nv === 'fifth') {
+    setTimeout(() => {
+      initChart(detail.value.chart5Value, detail.value.chart5Index, myChart5.value, 'mppt电压参数', 25, 'V');
+    }, 500);
+  } else if (nv === 'sixth') {
+    setTimeout(() => {
+      initChart(detail.value.chart6Value, detail.value.chart6Index, myChart6.value, 'mppt功率参数', 25, 'kwh');
+    }, 500);
+  }
+}
+
+watch(
+  activeName,
+  (nv) => {
+    if (nv === 'first') {
+      setTimeout(() => {
+        initChart(detail.value.chart1Value, detail.value.chart1Index, myChart1.value, '直流电流参数', 25, 'A');
+      }, 500);
+    }
+  },
+  { immediate: false }
+);
+
+onBeforeMount(() => {
+  localStorage.setItem('detail', route.query.detail);
+  detail.value = JSON.parse(localStorage.getItem('detail'));
+  dealData();
+  activeName.value = 'first';
+});
+onBeforeUnmount(() => {
+  localStorage.removeItem('detail');
+});
+</script>
+
+<template>
+  <div class="container">
+    <div class="head flex-c">
+      <div class="row1 flex-a">
+        <div class="nbqName">{{ detail.name }}</div>
+        <div class="stationId">电站ID：{{ detail.stationId }}</div>
+        <el-button icon="RefreshRight"></el-button>
+      </div>
+      <div class="row2">数据上报时间:{{ detail.dataTimestamp }}</div>
+    </div>
+    <el-card class="base-info">
+      <div class="title">基本信息</div>
+      <el-form style="margin-left: 20px">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="名称：" prop="name">
+              <div>{{ detail.name }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="SN：" prop="sn">
+              <div>{{ detail.sn }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="状态：" prop="stateChinese">
+              <div class="dot dot-g" v-if="detail.stateChinese === '在线'"></div>
+              <div class="dot dot-r" v-if="detail.stateChinese === '报警'"></div>
+              <div class="dot dot-o" v-if="detail.stateChinese === '离线'"></div>
+              <div>{{ detail.stateChinese }}</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :prop="detail.model" label="型号：">
+              <div>{{ detail.model }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :prop="detail.stationName" label="所属电站：">
+              <div>{{ detail.stationName }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :prop="detail.updateShelfEndTime" label="质保结束时间：">
+              <div>{{ detail.updateShelfEndTime }}</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="8">
+            <el-form-item :prop="detail.type" label="逆变器类型：">
+              <div>{{ detail.type || '暂无' }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :prop="detail.nationalStandardstr" label="国家标准：">
+              <div>{{ detail.nationalStandardstr }}</div>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item :prop="detail.collectorId" label="所属采集器：">
+              <div>{{ detail.collectorId }}</div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+    <div class="block-2 flex">
+      <el-card class="in-time">
+        <div class="title">实时数据</div>
+        <el-form label-position="top" class="intime-form">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="实时功率" prop="pac">
+                <div>{{ detail.pac }}{{ detail.pacStr }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="当日能量" prop="eToday">
+                <div>{{ detail.eToday }}{{ detail.eTodayStr }}</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="满发小时数" prop="fullHour">
+                <div>{{ detail.fullHour }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="当月能量" prop="eMonth">
+                <div>{{ detail.eMonth }}{{ detail.eMonthStr }}</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="报警信息" prop="warningInfoData">
+                <div>{{ detail.warningInfoData }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="当年能量" prop="eYear">
+                <div>{{ detail.eYear }}{{ detail.eYearStr }}</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="逆变器温度" prop="inverterTemperature">
+                <div>{{ detail.inverterTemperature }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="总能量" prop="eTotal">
+                <div>{{ detail.eTotal }}{{ detail.eTotalStr }}</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+      <el-card class="in-time">
+        <div class="title">功率数据</div>
+        <el-form label-position="top" class="intime-form">
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="逆变器无功功率" prop="reactivePower">
+                <div>{{ detail.reactivePower }}{{ detail.reactivePowerStr }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="逆变器视在功率" prop="apparentPower">
+                <div>{{ detail.apparentPower }}{{ detail.apparentPowerStr }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="逆变器总直流输入功率" prop="dcPac">
+                <div>{{ detail.dcPac }}{{ detail.dcPacStr }}</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="8">
+              <el-form-item label="电网总有功功率" prop="pSum">
+                <div>{{ detail.psum }}{{ detail.psumStr }}</div>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item label="功率百分比" prop="pacPec">
+                <div>{{ detail.pacPec }}%</div>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-card>
+    </div>
+    <el-card class="chart-block">
+      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+        <el-tab-pane label="直流电流参数" name="first">
+          <div class="chartDom" ref="myChart1"></div>
+        </el-tab-pane>
+        <el-tab-pane label="直流电压参数" name="second">
+          <div class="chartDom" ref="myChart2"></div>
+        </el-tab-pane>
+        <el-tab-pane label="直流功率参数" name="third">
+          <div class="chartDom" ref="myChart3"></div>
+        </el-tab-pane>
+        <el-tab-pane label="mppt电流参数" name="fourth">
+          <div class="chartDom" ref="myChart4"></div>
+        </el-tab-pane>
+        <el-tab-pane label="mppt电压参数" name="fifth">
+          <div class="chartDom" ref="myChart5"></div>
+        </el-tab-pane>
+        <el-tab-pane label="mppt功率参数" name="sixth">
+          <div class="chartDom" ref="myChart6"></div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  .head {
+    margin-top: 10px;
+    margin-left: 40px;
+    font-size: 16px;
+    .row1 {
+      .stationId {
+        margin-left: 10px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.5);
+      }
+      .el-button {
+        width: 30px;
+        height: 30px;
+        margin-left: 10px;
+      }
+    }
+  }
+  .base-info {
+    width: 100%;
+    min-height: 100px;
+    margin-left: 40px;
+    margin-top: 10px;
+    .title {
+      margin-bottom: 10px;
+    }
+    .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 100%;
+      margin-right: 5px;
+      &-g {
+        background-color: #1ab394;
+      }
+
+      &-r {
+        background-color: red;
+      }
+
+      &-o {
+        background-color: gray;
+      }
+    }
+  }
+  .block-2 {
+    width: 100%;
+    height: 280px;
+    margin-left: 40px;
+    margin-top: 10px;
+    justify-content: space-between;
+    .el-card {
+      width: 49.7%;
+      height: 100%;
+    }
+    .in-time {
+      .title {
+        margin-bottom: 15px;
+      }
+      :deep(.intime-form) {
+        margin-left: 20px;
+        .el-form-item {
+          .el-form-item__label {
+            margin-bottom: 0;
+          }
+          .el-form-item__content {
+            height: 12px;
+          }
+        }
+      }
+    }
+  }
+  .chart-block {
+    width: 50%;
+    height: 280px;
+    margin-left: 40px;
+    margin-top: 10px;
+    .chartDom {
+      width: 800px;
+      height: 200px;
+    }
+  }
+}
+</style>