!68 三相不平衡分析 Merge pull request !68 from Alioo/develop_alioo

letsgocoding

2025-02-13 6643c17a50203ac8a85478e4e7e6fe586b30a197

!68 三相不平衡分析
Merge pull request !68 from Alioo/develop_alioo

 zhitan-vue/src/api/powerquality/electric-power-factor/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import request from "@/utils/request"
// èŽ·å–用能单元下的某个电表的功率因数数据
export function powerFactorAnalysisDetail(params) {
  return request({
    url: "/powerFactorAnalysis/detail",
    method: "get",
    params,
  })
}

 zhitan-vue/src/api/powerquality/electricThreePhase/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from "@/utils/request"

// èŽ·å–三相不平衡分析数据
export function threePhaseUnbalanceAnalysisDetail(params) {
  return request({
    url: "/threePhaseUnbalanceAnalysis/detail",
    method: "get",
    params,
  })
}

 zhitan-vue/src/api/powerquality/load-analysis/api.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
import request from "@/utils/request"

// èŽ·å–用能单元下的电表列表
export function listElectricityMeter(params) {
  return request({
    url: "/meter/listElectricityMeter",
    method: "get",
    params,
  })
}

// èŽ·å–用能单元下的某个电表的负荷分析数据
export function loadAnalysisDetail(params) {
  return request({
    url: "/loadAnalysis/detail",
    method: "get",
    params,
  })
}

// èŽ·å–用能单元下的电表列表-实体表
export function listElectricityDeviceMeter(params) {
  return request({
    url: "/loadAnalysis/listElectricMeter",
    method: "get",
    params,
  })
}

 zhitan-vue/src/assets/styles/ruoyi.scss

@@ -569,6 +569,19 @@
  .el-tabs__item.is-active {
    color: #409EFF;
  }

  .el-descriptions__cell {
    background: transparent;
    color: #fff !important;
  }
  .el-descriptions__body {
    background-color: transparent;
    color: #fff;
  }
  .el-descriptions__label {
    color: #fff !important;
    background-color: #1a235d !important;
  }
}



 zhitan-vue/src/components/Echarts/LineChart.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,176 @@
<template>
  <div class="chart-item">
    <div id="ChartDom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts"
const { proxy } = getCurrentInstance()
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
const emit = defineEmits()
const props = defineProps({
  chartData: {
    type: Object,
    default: () => {},
  },
  chartType: {
    type: String,
    default: "line", // bar
  },
})

watch(
  () => props.chartData,
  (val) => {
    console.log("watch", val)
    initChart()
  }
)
watch(
  () => settingsStore.sideTheme,
  (val) => {
    initChart()
  }
)

onMounted(() => {
  initChart()
})

function initChart(value) {
  console.log("initChart", props.chartData)
  if (!props.chartData.xAxis) {
    return
  }
  const chartDom = document.getElementById("ChartDom")
  if (echarts.getInstanceByDom(chartDom)) {
    echarts.dispose(chartDom)
  }
  const myChart = echarts.init(chartDom)
  // å¤„理多系列数据
  const series = props.chartData.series.map((item) => ({
    name: item.name,
    type: props.chartType, // æ ¹æ®ä¼ å…¥ç±»åž‹æ¸²æŸ“
    data: item.data,
    barWidth: "16",
    itemStyle: {
      borderRadius: [15, 15, 0, 0],
    },
    smooth: true, // å¯ç”¨å¹³æ»‘曲线
  }))
  let option = {
    title: {
      // text: props.chartData.title,
      left: "40",
      textStyle: {
        color: "#2979ff",
      },
    },
    color: ["#2979ff", "#19be6b", "#ff9900", "#fa3534"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: props.chartData.series.map((item) => item.name), // å›¾ä¾‹æ•°æ®
      icon: "rect",
      right: 40,
      itemWidth: 14,
      itemHeight: 10,
      textStyle: {
        color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
      },
    },
    grid: {
      top: "40",
      left: "40",
      right: "40",
      bottom: "20",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisPointer: {
        type: "shadow",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
        },
      },
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
        fontSize: 14,
        padding: [5, 0, 0, 0],
        //   formatter: '{value} ml'
      },
      data: props.chartData.xAxis,
    },
    yAxis: [
      {
        type: "value",
        nameTextStyle: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          fontSize: 14,
          padding: [0, 0, 5, 0],
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          color: settingsStore.sideTheme == "theme-dark" ? "#FFFFFF" : "#222222",
          fontSize: 14,
        },
      },
    ],
    series: series,
  }
  setTimeout(() => {
    myChart.setOption(option)
  }, 200)

  window.addEventListener(
    "resize",
    () => {
      myChart.resize()
    },
    { passive: true }
  )
}
</script>

<style lang="scss" scoped>
.chart-item {
  width: 100%;
  height: 360px !important;
  margin-top: 0px;
  padding-top: 20px;
}
</style>

 zhitan-vue/src/views/comprehensive/comps/LineChart.vue

@@ -31,6 +31,10 @@
  }
)

onMounted(() => {
  initChart()
})

function initChart(value) {
  const chartDom = document.getElementById("ChartDom")
  if (echarts.getInstanceByDom(chartDom)) {

 zhitan-vue/src/views/index.vue

@@ -20,10 +20,11 @@
              <div class="top-right">
                <div class="right-name">
                  {{ item.energyName }}
                  <span v-if="item.energyUnit" class="unit">({{ item.energyUnit }})</span>
                </div>
                <div class="right-value">
                  <span> {{ item.count }}</span>
                  <span class="unit">{{ item.energyUnit }}</span>
                  <!-- <span class="unit">{{ item.energyUnit }}</span> -->
                </div>
              </div>
            </div>
@@ -889,18 +890,23 @@
          display: flex;

          .top-icon {
            width: 69px;
            height: 69px;
            width: 50px;
            height: 50px;
            background-size: 100% 100%;
          }

          .top-right {
            margin-left: 16px;
            margin-left: 12px;

            .right-name {
              font-weight: bold;
              font-size: 16px;
              font-family: OPPOSans-Bold;
              .unit {
                margin-left: 2px;
                font-size: 16px;
                font-weight: normal;
              }
            }

            .right-value {

 zhitan-vue/src/views/powerquality/load/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,402 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div
          style="height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-负荷分析'">
            <div class="form-card">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="期间" prop="timeType">
                  <el-select
                    v-model="queryParams.timeType"
                    placeholder="期间"
                    clearable
                    style="width: 120px"
                    @change="handleTimeType"
                  >
                    <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间" prop="dataTime">
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                    :format="
                      queryParams.timeType == 'YEAR'
                        ? 'YYYY'
                        : queryParams.timeType == 'MONTH'
                        ? 'YYYY-MM'
                        : 'YYYY-MM-DD'
                    "
                    value-format="YYYY-MM-DD"
                    placeholder="时间"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select v-model="queryParams.meterId" placeholder="选择电表" clearable style="width: 200px">
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
                </el-form-item>
                <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item> -->
              </el-form>
            </div>
            <div class="display-buttons">
              <div class="display-btn" @click="activeKey = 1" :class="{ 'active-display-btn': activeKey === 1 }">
                å›¾å½¢
              </div>
              <div class="display-btn" @click="activeKey = 2" :class="{ 'active-display-btn': activeKey === 2 }">
                æ•°æ®
              </div>
            </div>
            <div class="chart-box" v-loading="loading" v-show="activeKey === 1">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <div style="padding: 16px">
                <el-descriptions title="" size="large" border :column="2">
                  <el-descriptions-item label="最大负荷">
                    {{ detailData.max || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="发生时间">
                    {{ detailData.maxTime || "" }}
                  </el-descriptions-item>

                  <el-descriptions-item label="最小负荷">
                    {{ detailData.min || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="发生时间">
                    {{ detailData.minTime || "--" }}
                  </el-descriptions-item>

                  <el-descriptions-item label="平均负荷">
                    {{ detailData.avg || "--" }}
                  </el-descriptions-item>
                  <el-descriptions-item label="负荷率">
                    {{ detailData.rate || "" }}
                  </el-descriptions-item>
                </el-descriptions>
              </div>
            </div>
            <div style="margin-top: 16px" v-show="activeKey === 2">
              <div class="" style="padding: 0 16px">
                <el-table :data="tableData" v-loading="loading" height="calc(100vh - 400px)">
                  <el-table-column label="时间" prop="timeCode" align="center" />
                  <el-table-column label="电表名称" prop="name" align="center" />
                  <el-table-column v-if="queryParams.timeType == 'DAY'" label="负荷" prop="value" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="最大负荷" prop="max" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="最小负荷" prop="min" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="平均负荷" prop="avg" align="center" />
                  <el-table-column v-if="queryParams.timeType != 'DAY'" label="负荷率(%)" prop="rate" align="center" />
                </el-table>
              </div>
            </div>
          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { loadAnalysisDetail, listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const activeKey = ref(1)
const loading = ref(false)
const tableData = ref([])
const detailData = ref({})
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: null,
    dataTime: null,
    meterId: "",
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  setTimeout(() => {
    handleTimeType(period.value[0].value)
  }, 200)
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}
const LineChartRef = ref()
function getList() {
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  loadAnalysisDetail(params)
    .then((res) => {
      if (res.code == 200) {
        loading.value = false
        tableData.value = res.data.itemList
        detailData.value = res.data.detail
        let itemList = res.data.itemList
        if (queryParams.value.timeType == "DAY") {
          lineChartData.value = {
            title: "负荷分析",
            xAxis: itemList.map((item) => {
              return item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时"
            }),
            series: [
              {
                name: "负荷值",
                data: itemList.map((item) => {
                  return item.value
                }),
              },
            ],
          }
        } else {
          lineChartData.value = {
            title: "负荷分析",
            xAxis: itemList.map((item) => {
              return item.timeCodeChart
            }),
            series: [
              {
                name: "平均负荷",
                data: itemList.map((item) => {
                  return item.avg
                }),
              },
              {
                name: "最大负荷",
                data: itemList.map((item) => {
                  return item.max
                }),
              },
              {
                name: "最小负荷",
                data: itemList.map((item) => {
                  return item.min
                }),
              },
            ],
          }
        }
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>

 zhitan-vue/src/views/powerquality/power/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,331 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div
          style="height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-功率因数分析'">
            <div class="form-card">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="时间" prop="dataTime">
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                    :format="
                      queryParams.timeType == 'YEAR'
                        ? 'YYYY'
                        : queryParams.timeType == 'MONTH'
                        ? 'YYYY-MM'
                        : 'YYYY-MM-DD'
                    "
                    value-format="YYYY-MM-DD"
                    placeholder="时间"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select v-model="queryParams.meterId" placeholder="选择电表" clearable style="width: 200px">
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
                </el-form-item>
                <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item> -->
              </el-form>
            </div>

            <div class="chart-box" v-loading="loading">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <div style="padding: 16px">
                <el-table :data="tableData" v-loading="loading">
                  <el-table-column label="功率因数" prop="title" align="center" />
                  <el-table-column label="最大值" prop="max" align="center" />
                  <el-table-column label="最小值" prop="min" align="center" />
                  <el-table-column label="平均值" prop="avg" align="center" />
                </el-table>
              </div>
            </div>
          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { powerFactorAnalysisDetail } from "@/api/powerquality/electric-power-factor/api.js"
import { listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const loading = ref(false)
const tableData = ref([])
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: "DAY",
    dataTime: proxy.dayjs(new Date()).format("YYYY-MM-DD"),
    meterId: "",
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}

const LineChartRef = ref()
function getList() {
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  powerFactorAnalysisDetail(params)
    .then((res) => {
      if (res.code == 200) {
        loading.value = false
        let detailData = res.data.detail
        tableData.value = [
          {
            title: "发生值",
            max: detailData.max,
            min: detailData.min,
            avg: detailData.avg,
          },
          {
            title: "发生时间",
            max: detailData.maxTime,
            min: detailData.minTime,
            avg: "--",
          },
        ]
        detailData.value = res.data.detail
        let itemList = res.data.itemList
        lineChartData.value = {
          title: "功率因数分析",
          xAxis: itemList.map((item) => {
            return item.timeCode.slice(0, 2) + "时"
          }),
          series: [
            {
              name: "功率因数",
              data: itemList.map((item) => {
                return item.value
              }),
            },
          ],
        }
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  margin-right: 16px;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>

 zhitan-vue/src/views/powerquality/threephase/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,504 @@
<template>
  <div class="page">
    <div class="page-container">
      <div class="page-container-left">
        <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
      </div>
      <div class="page-container-right">
        <div
          style="height: calc(100vh - 150px) !important; max-height: calc(100vh - 150px) !important; overflow-y: auto"
        >
          <BaseCard :title="queryParams.nodeName + '-三相不平衡分析'">
            <div class="form-card">
              <el-form :model="queryParams" ref="queryRef" :inline="true">
                <el-form-item label="期间" prop="timeType">
                  <el-select
                    v-model="queryParams.timeType"
                    placeholder="期间"
                    clearable
                    style="width: 120px"
                    @change="handleTimeType"
                  >
                    <el-option v-for="dict in period" :key="dict.value" :label="dict.label" :value="dict.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="时间">
                  <el-date-picker
                    v-model="queryParams.dataTime"
                    :type="queryParams.timeType == 'YEAR' ? 'year' : queryParams.timeType == 'MONTH' ? 'month' : 'date'"
                    :format="
                      queryParams.timeType == 'YEAR'
                        ? 'YYYY'
                        : queryParams.timeType == 'MONTH'
                        ? 'YYYY-MM'
                        : 'YYYY-MM-DD'
                    "
                    value-format="YYYY-MM-DD"
                    placeholder="时间"
                    style="width: 100%"
                  />
                </el-form-item>
                <el-form-item label="选择电表" prop="meterId">
                  <el-select
                    v-model="queryParams.meterId"
                    placeholder="选择电表"
                    clearable
                    style="width: 200px"
                    @change="handleTimeType"
                  >
                    <el-option
                      v-for="dict in electricityMeter"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon="Search" @click="handleQuery"> æœç´¢ </el-button>
                </el-form-item>
                <!-- <el-form-item>
              <el-button type="primary" icon="Download" @click="handleExport"> å¯¼å‡º </el-button>
            </el-form-item> -->
              </el-form>
            </div>

            <div style="padding: 0 16px">
              <el-tabs v-model="activeTabKey" type="card">
                <el-tab-pane label="电压不平衡" name="1"> </el-tab-pane>
                <el-tab-pane label="电流不平衡" name="2"> </el-tab-pane>
              </el-tabs>
              <div class="display-buttons">
                <div class="display-btn" @click="switchBtnType(1)" :class="{ 'active-display-btn': activeKey === 1 }">
                  å›¾å½¢
                </div>
                <div class="display-btn" @click="switchBtnType(2)" :class="{ 'active-display-btn': activeKey === 2 }">
                  æ•°æ®
                </div>
              </div>
            </div>

            <div class="chart-box" v-loading="loading" v-show="activeKey === 1">
              <LineChart ref="LineChartRef" :chartData="lineChartData" />
              <el-table :data="tableData1" v-loading="loading">
                <el-table-column label="类型" prop="type" align="center" />
                <el-table-column label="三项不平衡极值" prop="value" align="center" />
                <el-table-column label="发生时间" prop="time" align="center" />
                <el-table-column v-if="activeTabKey == 1" label="A项电压(V)" prop="valueA" align="center" />
                <el-table-column v-if="activeTabKey == 1" label="B项电压(V)" prop="valueB" align="center" />
                <el-table-column v-if="activeTabKey == 1" label="C项电压(V)" prop="valueC" align="center" />
                <el-table-column v-if="activeTabKey == 2" label="A项电流(A)" prop="valueA" align="center" />
                <el-table-column v-if="activeTabKey == 2" label="B项电流(A)" prop="valueB" align="center" />
                <el-table-column v-if="activeTabKey == 2" label="C项电流(A)" prop="valueC" align="center" />
              </el-table>
            </div>
            <div style="margin-top: 16px" v-show="activeKey === 2">
              <div class="" style="padding: 0 16px">
                <el-table :data="tableData2" v-loading="loading" height="calc(100vh - 400px)">
                  <el-table-column label="时间" prop="timeCode" align="center" />
                  <el-table-column label="电表名称" prop="name" align="center" />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType == 'DAY'"
                    label="A项电压(V)"
                    prop="valueA"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType == 'DAY'"
                    label="B项电压(V)"
                    prop="valueB"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType == 'DAY'"
                    label="C项电压(V)"
                    prop="valueC"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType == 'DAY'"
                    label="A项电流(A)"
                    prop="valueA"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType == 'DAY'"
                    label="B项电流(A)"
                    prop="valueB"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType == 'DAY'"
                    label="C项电流(A)"
                    prop="valueC"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType !== 'DAY'"
                    label="最大值(V)"
                    prop="max"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 1 && queryParams.timeType !== 'DAY'"
                    label="最小值(V)"
                    prop="min"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType !== 'DAY'"
                    label="最大值(A)"
                    prop="max"
                    align="center"
                  />
                  <el-table-column
                    v-if="activeTabKey == 2 && queryParams.timeType !== 'DAY'"
                    label="最小值(A)"
                    prop="min"
                    align="center"
                  />
                </el-table>
              </div>
            </div>
          </BaseCard>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup name="loadAnalysis">
import { threePhaseUnbalanceAnalysisDetail } from "@/api/powerquality/electricThreePhase/api.js"
import { listElectricityDeviceMeter } from "@/api/powerquality/load-analysis/api.js"
import LineChart from "@/components/Echarts/LineChart.vue"
const { proxy } = getCurrentInstance()
import { useRoute } from "vue-router"
const { period } = proxy.useDict("period")
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
watch(
  () => settingsStore.sideTheme,
  (val) => {
    getList()
  }
)
const activeTabKey = ref("1")
const activeKey = ref(1)
const activeKeyA = ref(1)
const loading = ref(false)
const tableData1 = ref([])
const tableData2 = ref([])
const detailData = ref({})
const lineChartData = ref({})
const electricityMeter = ref([])
const data = reactive({
  queryParams: {
    nodeId: null,
    nodeName: null,
    timeType: null,
    dataTime: null,
    meterId: "",
  },
  query: { ...useRoute().query },
})
const { queryParams, query } = toRefs(data)
function getElectricityMeter(params) {
  listElectricityDeviceMeter(params).then((res) => {
    if (res.code === 200) {
      electricityMeter.value = res.data.map((item) => {
        return {
          ...item,
          value: item.code,
        }
      })
      queryParams.value.meterId = res.data.length > 0 ? res.data[0].code : ""
      getList()
    }
  })
}
/** èŠ‚点单击事件 */
function handleNodeClick(data) {
  queryParams.value.nodeId = data.id
  queryParams.value.nodeName = data.label
  handleTimeType(period.value[0].value)
  getElectricityMeter({ nodeId: queryParams.value.nodeId })
}
function handleTimeType(e) {
  queryParams.value.timeType = e
  queryParams.value.dataTime = proxy.dayjs(new Date()).format("YYYY-MM-DD")
}

function switchBtnType(e) {
  activeKey.value = e
  if (e === 1) {
    getList()
  }
}
// åˆ—表
function getList() {
  loading.value = true
  let params = {
    nodeId: queryParams.value.nodeId,
    timeType: queryParams.value.timeType,
    timeCode: queryParams.value.dataTime,
    meterId: queryParams.value.meterId,
    requestType: activeTabKey.value == 1 ? 0 : 1,
  }
  if (queryParams.value.timeType == "DAY") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM-DD")
  } else if (queryParams.value.timeType == "MONTH") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY-MM")
  } else if (queryParams.value.timeType == "YEAR") {
    params.timeCode = proxy.dayjs(new Date(queryParams.value.dataTime)).format("YYYY")
  }
  threePhaseUnbalanceAnalysisDetail(params)
    .then((res) => {
      if (!!res.code && res.code == 200) {
        // detailData.value = res.data.detail
        loading.value = false
        let itemList = res.data.itemList || []
        let detail = res.data.detail || {}
        if (detail) {
          tableData1.value = [
            {
              type: "最大值",
              value: detail.max || "--",
              time: detail.maxTime,
              valueA: detail.valueMaxA,
              valueB: detail.valueMaxB,
              valueC: detail.valueMaxC,
            },
            {
              type: "最小值",
              value: detail.min,
              time: detail.minTime,
              valueA: detail.valueMinA,
              valueB: detail.valueMinB,
              valueC: detail.valueMinC,
            },
          ]
        }

        let tableDataWithMeterList = itemList
        tableData2.value =
          tableDataWithMeterList.map((item) => {
            // item.timeCode = this.formatTime(item.timeCode)
            return item
          }) || []

        // chart
        let chartData = {}
        chartData.title = "三相不平衡分析"
        if (queryParams.value.timeType !== "DAY") {
          chartData = {
            title: "三相不平衡分析",
            xAxis: itemList.map((item) => {
              return item.timeCodeChart
            }),
            series: [
              {
                name: "最小值",
                data: itemList.map((item) => {
                  return item.min === "--" || !item.min ? null : Number(item.min)
                }),
              },
              {
                name: "最大值",
                data: itemList.map((item) => {
                  return item.max === "--" || !item.max ? null : Number(item.max)
                }),
              },
            ],
          }
        } else {
          chartData = {
            title: "三相不平衡分析",
            xAxis: itemList.map((item) => {
              return item.timeCode.slice(item.timeCode.length - 2, item.timeCode.length) + "时"
            }),
            series: [
              {
                name: "A相" + (activeTabKey.value == 1 ? "电压" : "电流"),
                data: itemList.map((item) => {
                  return item.valueA === "--" || !item.valueA ? null : Number(item.valueA)
                }),
              },
              {
                name: "B相" + (activeTabKey.value == 1 ? "电压" : "电流"),
                data: itemList.map((item) => {
                  return item.valueB === "--" || !item.valueB ? null : Number(item.valueB)
                }),
              },
              {
                name: "C相" + (activeTabKey.value == 1 ? "电压" : "电流"),
                data: itemList.map((item) => {
                  return item.valueC === "--" || !item.valueC ? null : Number(item.valueC)
                }),
              },
            ],
          }
        }
        lineChartData.value = chartData
      }
    })
    .catch(() => {
      loading.value = false
    })
}
// ç¢³æŽ’放管理-碳排放量核算-搜索
function handleQuery() {
  getList()
}
// ç¢³æŽ’放管理-碳排放量核算-重置
function resetQuery() {
  proxy.resetForm("queryRef")
  queryParams.value.timeType = null
  queryParams.value.dataTime = null
  handleTimeType(period.value[0].value)
  handleQuery()
}
// ç¢³æŽ’放管理-碳排放量核算-导出
function handleExport() {
  proxy.download(
    "carbonEmission/export",
    {
      emissionType: "allType",
      ...queryParams.value,
      ...query.value,
    },
    `${queryParams.value.nodeName}-碳排放量核算_${new Date().getTime()}.xlsx`
  )
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/page.scss";

.themeDark {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;
    color: #fff;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #223386;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #4868b7;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.themeLight {
  .card-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 18px;

    .card-list-item {
      width: 19%;
      margin-right: 1%;
      height: 157px;
      background: #fff;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #e8e8e8;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 25px 18px 12px 16px;

      .item-top {
        display: flex;
        align-items: center;

        .top-icon {
          width: 40px;
          height: 40px;
          background-size: 100% 100%;
        }

        .top-right {
          margin-left: 16px;
          font-weight: bold;
          font-size: 16px;
          color: #000;
          font-family: OPPOSans-Bold;
        }
      }

      .item-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 18px;
        font-family: OPPOSans, OPPOSans;
        font-weight: bold;
        font-size: 14px;
      }
    }
  }
}

.chart-box {
  width: 100%;
  height: 100% !important;
}
.display-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  .display-btn,
  .active-display-btn {
    width: 78px;
    height: 34px;
    background: #fff;
    color: #409eff;
    border: 2px solid #409eff;
    border-radius: 4px;
    margin-left: 10px;
    text-align: center;
    line-height: 31px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .active-display-btn {
    background: #409eff;
    color: #fff;
  }
}
</style>