电能质量模块

src/views/alarmManage/index.vue

@@ -193,4 +193,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
 </style>

src/views/powerQuality/harmonicReport/curveCom.vue

@@ -1,148 +1,219 @@
 <template>
-   
-      <el-card shadow="never" class="cus-card homeBoxCard" v-loading="loading">
-          <template #header>
-            <span>{{t('page.home.workschartcard.card-title')}}</span>
-            <el-tag type="success" class="float-right">{{t('page.home.text-week')}}</el-tag>
-          </template>            
-          <div class="num">{{num.toLocaleString()}}</div>
-          <div class="height40" ref="worksChartRef" />
-          <el-divider />
-          <el-row>
-            <el-col :span="12">{{t('page.home.text-total')}}</el-col>
-            <el-col class="text-align-right" :span="12">
-              {{total.toLocaleString()}}
-            </el-col>
-          </el-row>
-      </el-card>
-   
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div style="text-align:center">A相电流（A）</div>
+    <div class="height300" ref="worksChartRef" />
+  </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, onMounted, Ref, ref, watch, ComputedRef } from "vue";
-import { useStore } from 'vuex';
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  Ref,
+  ref,
+  watch,
+  ComputedRef,
+} from "vue";
+import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import { EChartOption } from 'echarts';
-import useEcharts from '@/composables/useEcharts';
+import { EChartOption } from "echarts";
+import useEcharts from "@/composables/useEcharts";
 import { StateType as HomeStateType } from "../../store";
-import { ChartDataType } from '../../data';
+// import { ChartDataType } from "../../data";
 
 const worksChartOption: EChartOption = {
   tooltip: {
-    trigger: 'axis',
-  },
-  grid: {
-    left: '0',
-    right: '0',
-    top: '0',
-    bottom: '0',
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
   },
-  xAxis: {
-    show: false,
-    boundaryGap: false,
-    data: [
-      //'03-01','03-02','03-03','03-04','03-05','03-06','03-07'
-    ],
+  legend: {
+    data: ["平均值", "95%", "最大值"],
+    // align: 'right',
+    right: 60,
+    textStyle: {},
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 35,
   },
-  yAxis: {
-    show: false,
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
   },
-  series: [
+  xAxis: [
     {
-      name: '新增',
-      type: 'line',
+      type: "category",
       data: [
-        //23,60,20,36,23,85,23
+        "1次",
+        "3次",
+        "5次",
+        "7次",
+        "9次",
+        "11次",
+        "13次",
+        "15次",
+        "17次",
+        "19次 ",
       ],
-      areaStyle: {
-        color: {
-          colorStops: [
-            {
-              offset: 0,
-              color: '#A9F387', // 0% 处的颜色
-            },
-            {
-              offset: 1,
-              color: '#48D8BF', // 100% 处的颜色
-            },
-          ],
-          globalCoord: false, // 缺省为 false
-        } as any,
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#444",
+          width: 1,
+          type: "solid",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#444",
+        },
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      name: "A",
+      nameTextStyle: {
+        color: "#444",
+      },
+      axisLabel: {
+        formatter: "{value} ",
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#444",
+          width: 1,
+          type: "solid",
+        },
       },
-      lineStyle: {
-        width: 0,
+      splitLine: {
+        lineStyle: {
+          color: "#444",
+        },
       },
+    },
+  ],
+  series: [
+    {
+      name: "平均值",
+      type: "bar",
+      data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+      barWidth: 10, //柱子宽度
+      barGap: 1, //柱子之间间距
       itemStyle: {
-        borderWidth: 2,
+        normal: {
+          color: "#5b82ee",
+          opacity: 1,
+        },
+      },
+    },
+    {
+      name: "95%",
+      type: "bar",
+      data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+      barWidth: 10,
+      barGap: 1,
+      itemStyle: {
+        normal: {
+          color: "#f2e251",
+          opacity: 1,
+        },
+      },
+    },
+    {
+      name: "最大值",
+      type: "bar",
+      data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+      barWidth: 10,
+      barGap: 1,
+      itemStyle: {
+        normal: {
+          color: "#fe8161",
+          opacity: 1,
+        },
       },
     },
   ],
 };
 
 interface WorksChartCardSetupData {
-    t: (key: string | number) => string;
-    loading: Ref<boolean>;
-    worksChartRef: Ref;
-    total: ComputedRef<number>;
-    num: ComputedRef<number>;
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  worksChartRef: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
 }
 
 export default defineComponent({
-    name: 'CurveCom',
-    setup(): WorksChartCardSetupData {
-        const store = useStore<{ Home: HomeStateType}>();
-        const { t } = useI18n();
+  name: "CurveCom",
+  setup(): WorksChartCardSetupData {
+    const store = useStore<{ Home: HomeStateType }>();
+    const { t } = useI18n();
 
-        // 总数
-        const total = computed<number>(() => store.state.Home.worksChartData.total);
-        // num
-        const num = computed<number>(() => store.state.Home.worksChartData.num);
-        // chart Data
-        const chartData = computed<ChartDataType>(()=> store.state.Home.worksChartData.chart);
+    // 总数
+    const total = computed<number>(() => store.state.Home.worksChartData.total);
+    // num
+    const num = computed<number>(() => store.state.Home.worksChartData.num);
+    // chart Data
+    // const chartData = computed<ChartDataType>(
+    //   () => store.state.Home.worksChartData.chart
+    // );
 
-        // echarts 图表
-        const worksChartRef = ref<HTMLDivElement>();
-        const echarts = useEcharts(worksChartRef, worksChartOption);      
-        watch([echarts, chartData],()=> {
-          if(echarts.value) {
-              const option: EChartOption = {
-                xAxis: {
-                  // data: ["03-01", "03-01", "03-01", "03-01", "03-01", "03-01", "03-01"]
-                  data: chartData.value.day,
-                },
-                series: [
-                  {
-                    name: '新增',
-                    // data: [3, 1, 1, 2, 2, 2, 2]
-                    data: chartData.value.num,
-                  },
-                ],
-              };
-              echarts.value.setOption(option);
-          }
-        }); 
-        
-        // 读取数据 func
-        const loading = ref<boolean>(true);
-        const getData = async () => {
-            loading.value = true;
-            await store.dispatch('Home/queryWorksChartData');
-            loading.value = false;
-        };
+    // echarts 图表
+    const worksChartRef = ref<HTMLDivElement>();
+    const echarts = useEcharts(worksChartRef, worksChartOption);
+    // watch([echarts, chartData], () => {
+    //   if (echarts.value) {
+    //     const option: EChartOption = {
+    //       xAxis: {
+    //         // data: ["03-01", "03-01", "03-01", "03-01", "03-01", "03-01", "03-01"]
+    //         data: chartData.value.day,
+    //       },
+    //       series: [
+    //         {
+    //           name: "新增",
+    //           // data: [3, 1, 1, 2, 2, 2, 2]
+    //           data: chartData.value.num,
+    //         },
+    //       ],
+    //     };
+    //     echarts.value.setOption(option);
+    //   }
+    // });
 
-        onMounted(()=> {
-           getData();
-        });
+    // 读取数据 func
+    const loading = ref<boolean>(true);
+    const getData = async () => {
+      loading.value = true;
+      await store.dispatch("Home/queryWorksChartData");
+      loading.value = false;
+    };
 
+    onMounted(() => {
+      getData();
+    });
 
-        return {
-            t,
-            loading,
-            worksChartRef,
-            total,
-            num,
-        }
-    }
-})
+    return {
+      t,
+      loading,
+      worksChartRef,
+      total,
+      num,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .homeBoxCard {
@@ -163,8 +234,8 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height40 {
-    height: 40px;
+  .height300 {
+    height: 300px;
   }
 }
 </style>

src/views/powerQuality/harmonicReport/tableCom.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!-- 表格start -->
-    <el-table :data="tableData" style="width: 100%">
+    <el-table :data="tableData" style="width: 100%" :header-cell-style="headCellStyle">
       <el-table-column prop="date" label="描述(单位A)" width=""> </el-table-column>
 
       <el-table-column label="A相">
@@ -114,6 +114,16 @@ export default {
     };
   },
   methods: {
+
+       // 表头行的 style 的回调方法
+        headCellStyle({ row, column, rowIndex, columnIndex }) {
+            if (columnIndex !== 0 && rowIndex === 0) {
+                return `text-align:center;`;
+            } else {
+                return ''
+            }
+        },
+
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },

src/views/powerQuality/unbalanceAnalysis/curveCom.vue

@@ -0,0 +1,241 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div style="padding:20px">电压不平衡度</div>
+    <div class="height300" ref="worksChartRef" />
+  </div>
+</template>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  Ref,
+  ref,
+  watch,
+  ComputedRef,
+} from "vue";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import { EChartOption } from "echarts";
+import useEcharts from "@/composables/useEcharts";
+import { StateType as HomeStateType } from "../../store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      type: "shadow",
+    },
+  },
+  legend: {
+    data: ["平均值", "95%", "最大值"],
+    // align: 'right',
+    right: 60,
+    textStyle: {},
+    itemWidth: 10,
+    itemHeight: 10,
+    itemGap: 35,
+  },
+  grid: {
+    left: "3%",
+    right: "4%",
+    bottom: "3%",
+    containLabel: true,
+  },
+  xAxis: [
+    {
+      type: "category",
+      data: [
+        "1次",
+        "3次",
+        "5次",
+        "7次",
+        "9次",
+        "11次",
+        "13次",
+        "15次",
+        "17次",
+        "19次 ",
+      ],
+      axisLine: {
+        show: true,
+        lineStyle: {
+          color: "#444",
+          width: 1,
+          type: "solid",
+        },
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLabel: {
+        show: true,
+        textStyle: {
+          color: "#444",
+        },
+      },
+    },
+  ],
+  yAxis: [
+    {
+      type: "value",
+      name: "A",
+      nameTextStyle: {
+        color: "#444",
+      },
+      axisLabel: {
+        formatter: "{value} ",
+      },
+      axisTick: {
+        show: false,
+      },
+      axisLine: {
+        show: false,
+        lineStyle: {
+          color: "#444",
+          width: 1,
+          type: "solid",
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          color: "#444",
+        },
+      },
+    },
+  ],
+  series: [
+    {
+      name: "平均值",
+      type: "bar",
+      data: [20, 50, 80, 58, 83, 68, 57, 80, 42, 66],
+      barWidth: 10, //柱子宽度
+      barGap: 1, //柱子之间间距
+      itemStyle: {
+        normal: {
+          color: "#5b82ee",
+          opacity: 1,
+        },
+      },
+    },
+    {
+      name: "95%",
+      type: "bar",
+      data: [50, 70, 60, 61, 75, 87, 60, 62, 86, 46],
+      barWidth: 10,
+      barGap: 1,
+      itemStyle: {
+        normal: {
+          color: "#f2e251",
+          opacity: 1,
+        },
+      },
+    },
+    {
+      name: "最大值",
+      type: "bar",
+      data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
+      barWidth: 10,
+      barGap: 1,
+      itemStyle: {
+        normal: {
+          color: "#fe8161",
+          opacity: 1,
+        },
+      },
+    },
+  ],
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  worksChartRef: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "CurveCom",
+  setup(): WorksChartCardSetupData {
+    const store = useStore<{ Home: HomeStateType }>();
+    const { t } = useI18n();
+
+    // 总数
+    const total = computed<number>(() => store.state.Home.worksChartData.total);
+    // num
+    const num = computed<number>(() => store.state.Home.worksChartData.num);
+    // chart Data
+    // const chartData = computed<ChartDataType>(
+    //   () => store.state.Home.worksChartData.chart
+    // );
+
+    // echarts 图表
+    const worksChartRef = ref<HTMLDivElement>();
+    const echarts = useEcharts(worksChartRef, worksChartOption);
+    // watch([echarts, chartData], () => {
+    //   if (echarts.value) {
+    //     const option: EChartOption = {
+    //       xAxis: {
+    //         // data: ["03-01", "03-01", "03-01", "03-01", "03-01", "03-01", "03-01"]
+    //         data: chartData.value.day,
+    //       },
+    //       series: [
+    //         {
+    //           name: "新增",
+    //           // data: [3, 1, 1, 2, 2, 2, 2]
+    //           data: chartData.value.num,
+    //         },
+    //       ],
+    //     };
+    //     echarts.value.setOption(option);
+    //   }
+    // });
+
+    // 读取数据 func
+    const loading = ref<boolean>(true);
+    const getData = async () => {
+      loading.value = true;
+      await store.dispatch("Home/queryWorksChartData");
+      loading.value = false;
+    };
+
+    onMounted(() => {
+      getData();
+    });
+
+    return {
+      t,
+      loading,
+      worksChartRef,
+      total,
+      num,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+  margin-bottom: 24px;
+  ::v-deep(.el-card__header) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  ::v-deep(.el-card__body) {
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+  ::v-deep(.el-divider) {
+    margin: 8px 0;
+  }
+  .num {
+    font-size: 30px;
+    color: #515a6e;
+  }
+  .height300 {
+    height: 300px;
+  }
+}
+</style>

src/views/powerQuality/unbalanceAnalysis/index.vue

@@ -1,5 +1,103 @@
 <template>
-  <div style="padding:30px;">
-    三相不平衡分析
+  <div class="app-container harmonicReport">
+    <!-- 筛选start -->
+    <div class="filter-container">
+      <div class="left">
+        <div>
+          <div class="filter-item">
+            设备:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="设备一" value="1"></el-option>
+              <el-option label="设备二" value="2"></el-option>
+            </el-select>
+          </div>
+
+         
+          <div class="filter-item">
+            日期：
+            <el-date-picker
+              v-model="value4"
+              type="dates"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+            </el-date-picker>
+          </div>
+
+          <el-button type="primary" class="search-button">搜索</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 筛选end -->
+    <el-row :gutter="20" class="mt-20" >
+      <el-col :span="12">
+        <div class="grid-content bg-purple">
+          <curve-com ></curve-com>
+        </div>
+      </el-col>
+      <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
+    </el-row>
   </div>
 </template>
+
+<script>
+import curveCom from "./curveCom";
+
+export default {
+  name: "VariableList",
+   components: {
+   curveCom,
+  },
+
+  data() {
+    return {
+      value4: "请选择",
+      number: 1,
+      measurType: 1,
+      select: 1,
+      currentPage4: 4,
+      showDialog: false,
+      tabPosition: "one",
+      input: "",
+      region: "",
+    };
+  },
+  methods: {
+   
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  border:1px solid  #99a9bf;
+}
+.bg-purple {
+  border:1px solid  #d3dce6;
+}
+.bg-purple-light {
+  border:1px solid  #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  border:1px solid  #f9fafc;
+}
+</style>