电能质量新页面

src/assets/css/index.scss

@@ -371,4 +371,53 @@ div:focus {
         margin-bottom: 20px;
         border-radius: 0
     }
+}
+
+// 三项不平衡
+.blanceChartTit {
+    padding: 10px 14px;
+    margin-bottom: 10px;
+    border-bottom: 1px solid #f0f0f0;
+    background: #FAFAFA;
+    font-weight: bold
+}
+
+//评估报告
+.assePage .blanceChartTit {
+    margin-bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    vertical-align: middle;
+    span {
+        display: inline-block
+    }
+}
+
+.assePage {
+    .subTits {
+        margin: 25px auto;
+        text-align: center;
+        font-weight: bold
+    }
+}
+
+// tab重置样式
+.asseTabs {
+    margin-bottom: 20px;
+    border-bottom: 1px solid #E5E5E5;
+    width: calc(100% + 40px);
+    margin-left: -20px;
+}
+
+.asseTabs span {
+    line-height: 50px;
+    height: 50px;
+    font-size: 16px;
+    display: inline-block;
+    padding: 0 20px;
+}
+
+.asseTabs span.active {
+    border-bottom: 2px solid #2EAEFF
 }

src/views/powerQuality/asseReport/electricChart.vue

@@ -0,0 +1,196 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  // backgroundColor: "pink",
+  color: ["#f2e251", "#48C964", "#fe8161"],
+
+  legend: {
+    bottom: "0",
+    data: ["A相电流", "B相电流", "C相电流"],
+  },
+  // toolbox: {
+  //   show: false,
+  // },
+  tooltip: {
+    // show: true
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
+  },
+  yAxis: {
+    name: "A",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "A相电流",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
+      
+    },
+    {
+      name: "B相电流",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
+    },
+    {
+      name: "C相电流",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
+    },
+  ],
+
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "ElectricChart",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>

src/views/powerQuality/unbalanceAnalysis/curveCom.vue → src/views/powerQuality/asseReport/electricChart2.vue

@@ -1,7 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div style="padding:20px">电压不平衡度</div>
-    <div class="height300" ref="worksChartRef" />
+    <div class="height400" ref="lineChartBanlance" />
   </div>
 </template>
 <script lang="ts">
@@ -18,131 +17,109 @@ 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 { StateType as HomeStateType } from "../../home/store";
 // import { ChartDataType } from "../../data";
 
 const worksChartOption: EChartOption = {
+  color: ["#1187FF"],
+  legend: {
+    bottom: "0",
+    data: ["电流不平衡度"],
+  },
+
   tooltip: {
     trigger: "axis",
-    axisPointer: {
-      type: "shadow",
-    },
-  },
-  legend: {
-    data: ["平均值", "95%", "最大值"],
-    // align: 'right',
-    right: 60,
-    textStyle: {},
-    itemWidth: 10,
-    itemHeight: 10,
-    itemGap: 35,
+    axisPointer: { type: "cross" },
   },
   grid: {
-    left: "3%",
-    right: "4%",
-    bottom: "3%",
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
     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",
-        },
-      },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
     },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      name: "A",
-      nameTextStyle: {
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
         color: "#444",
-      },
-      axisLabel: {
-        formatter: "{value} ",
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: false,
-        lineStyle: {
-          color: "#444",
-          width: 1,
-          type: "solid",
-        },
-      },
-      splitLine: {
-        lineStyle: {
-          color: "#444",
-        },
+        width: 1, //这里是为了突出显示加上的
       },
     },
-  ],
-  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,
-        },
-      },
+    boundaryGap: false,
+    data: [
+      "0:00",
+      "2:00",
+      "4:00",
+      "6:00",
+      "8:00",
+      "10:00",
+      "12:00",
+      "14:00",
+      "16:00",
+      "18:00",
+      "20:00",
+      "22:00",
+      "24:00",
+    ],
+  },
+  yAxis: {
+    name: "%",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
     },
-    {
-      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,
-        },
-      },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
     },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
     {
-      name: "最大值",
-      type: "bar",
-      data: [70, 48, 73, 68, 53, 47, 50, 72, 96, 86],
-      barWidth: 10,
-      barGap: 1,
-      itemStyle: {
-        normal: {
-          color: "#fe8161",
-          opacity: 1,
-        },
+      name: "电流不平衡度",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [
+        10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10,
+        2, 12, 0, 5,
+      ],
+      markLine: {
+        //最大值和最小值
+        data: [
+          {
+            yAxis: 10,
+            label: {
+              position: "middle",
+              formatter: "严重三项不平衡",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#FF5D1D",
+            },
+          },
+          {
+            yAxis: 8,
+            label: {
+              position: "middle",
+              formatter: "不平衡度",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#f2e251",
+            },
+          },
+        ],
       },
     },
   ],
@@ -151,13 +128,13 @@ const worksChartOption: EChartOption = {
 interface WorksChartCardSetupData {
   t: (key: string | number) => string;
   loading: Ref<boolean>;
-  worksChartRef: Ref;
+  lineChartBanlance: Ref;
   total: ComputedRef<number>;
   num: ComputedRef<number>;
 }
 
 export default defineComponent({
-  name: "CurveCom",
+  name: "ElectricChart2",
   setup(): WorksChartCardSetupData {
     const store = useStore<{ Home: HomeStateType }>();
     const { t } = useI18n();
@@ -172,8 +149,8 @@ export default defineComponent({
     // );
 
     // echarts 图表
-    const worksChartRef = ref<HTMLDivElement>();
-    const echarts = useEcharts(worksChartRef, worksChartOption);
+    const lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, worksChartOption);
     // watch([echarts, chartData], () => {
     //   if (echarts.value) {
     //     const option: EChartOption = {
@@ -208,7 +185,7 @@ export default defineComponent({
     return {
       t,
       loading,
-      worksChartRef,
+      lineChartBanlance,
       total,
       num,
     };
@@ -234,8 +211,8 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height300 {
-    height: 300px;
+  .height400 {
+    height: 400px;
   }
 }
 </style>

src/views/powerQuality/asseReport/index.vue

@@ -1,5 +1,155 @@
 <template>
-  <div style="padding:30px;">
-   评估报告
+  <div class="app-container assePage" style="padding-top: 0">
+    <!-- tab切换 start -->
+    <div class="asseTabs">
+      <span>评分报告</span>
+      <span class="active">单回路报告</span>
+    </div>
+    <!-- tab切换 end -->
+
+    <!-- 筛选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="14">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>电压质量</span>
+            <span class="subs">标称电压：380V</span>
+          </div>
+
+          <el-row :gutter="20" style="padding: 20px">
+            <el-col :span="8"
+              ><div class="grid-content bg-purple">
+                <div class="subTits">A相电压</div>
+                <el-row :gutter="20" style="padding: 0 20px 20px">
+                  <el-col :span="12"
+                    ><div class="grid-content bg-purple">
+                      <div>0/128</div>
+                      </div
+                  ></el-col>
+                  <el-col :span="12"
+                    ><div class="grid-content bg-purple"></div
+                  ></el-col>
+                </el-row></div
+            ></el-col>
+            <el-col :span="8"
+              ><div class="grid-content bg-purple">B相电压</div></el-col
+            >
+            <el-col :span="8"
+              ><div class="grid-content bg-purple">C相电压</div></el-col
+            >
+          </el-row>
+        </div>
+      </el-col>
+      <el-col :span="5">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>频率质量</span>
+            <span class="subs">标称频率：50Hz</span>
+          </div>
+          <div>dsdsd</div>
+        </div>
+      </el-col>
+      <el-col :span="5">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">功率因数分析</div>
+          <div>ddsdssdsds</div>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
+
+<script>
+// import voltageChart from "./voltageChart";
+// import voltageChart2 from "./voltageChart2";
+// import electricChart from "./electricChart";
+// import electricChart2 from "./electricChart2";
+
+export default {
+  name: "VariableList",
+  components: {
+    // voltageChart,
+    // voltageChart2,
+    // electricChart,
+    // electricChart2,
+  },
+
+  data() {
+    return {
+      activeName: "first",
+
+      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>

src/views/powerQuality/asseReport/voltageChart.vue

@@ -0,0 +1,196 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  // backgroundColor: "pink",
+  color: ["#f2e251", "#48C964", "#fe8161"],
+
+  legend: {
+    bottom: "0",
+    data: ["A相电压", "B相电压", "C相电压"],
+  },
+  // toolbox: {
+  //   show: false,
+  // },
+  tooltip: {
+    // show: true
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
+  },
+  yAxis: {
+    name: "V",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "A相电压",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
+      
+    },
+    {
+      name: "B相电压",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
+    },
+    {
+      name: "C相电压",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
+    },
+  ],
+
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "VoltageChart",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>

src/views/powerQuality/asseReport/voltageChart2.vue

@@ -0,0 +1,219 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  color: ["#1187FF"],
+  legend: {
+    bottom: "0",
+    data: ["电压不平衡度"],
+  },
+
+  tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: [
+      "0:00",
+      "2:00",
+      "4:00",
+      "6:00",
+      "8:00",
+      "10:00",
+      "12:00",
+      "14:00",
+      "16:00",
+      "18:00",
+      "20:00",
+      "22:00",
+      "24:00",
+    ],
+  },
+  yAxis: {
+    name: "%",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "电压不平衡度",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [
+        10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10,
+        2, 12, 0, 5,
+      ],
+      markLine: {
+        //最大值和最小值
+        data: [
+          {
+            yAxis: 10,
+            label: {
+              position: "middle",
+              formatter: "严重三项不平衡",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#FF5D1D",
+            },
+          },
+          {
+            yAxis: 8,
+            label: {
+              position: "middle",
+              formatter: "不平衡度",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#f2e251",
+            },
+          },
+        ],
+      },
+    },
+  ],
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "VoltageChart2",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>

src/views/powerQuality/harmonicReport/curveCom.vue

@@ -18,7 +18,7 @@ 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 { StateType as HomeStateType } from "../../home/store";
 // import { ChartDataType } from "../../data";
 
 const worksChartOption: EChartOption = {

src/views/powerQuality/unbalanceAnalysis/electricChart.vue

@@ -0,0 +1,196 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  // backgroundColor: "pink",
+  color: ["#f2e251", "#48C964", "#fe8161"],
+
+  legend: {
+    bottom: "0",
+    data: ["A相电流", "B相电流", "C相电流"],
+  },
+  // toolbox: {
+  //   show: false,
+  // },
+  tooltip: {
+    // show: true
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
+  },
+  yAxis: {
+    name: "A",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "A相电流",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
+      
+    },
+    {
+      name: "B相电流",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
+    },
+    {
+      name: "C相电流",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
+    },
+  ],
+
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "ElectricChart",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>

src/views/powerQuality/unbalanceAnalysis/electricChart2.vue

@@ -0,0 +1,218 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  color: ["#1187FF"],
+  legend: {
+    bottom: "0",
+    data: ["电流不平衡度"],
+  },
+
+  tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: [
+      "0:00",
+      "2:00",
+      "4:00",
+      "6:00",
+      "8:00",
+      "10:00",
+      "12:00",
+      "14:00",
+      "16:00",
+      "18:00",
+      "20:00",
+      "22:00",
+      "24:00",
+    ],
+  },
+  yAxis: {
+    name: "%",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "电流不平衡度",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [
+        10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10,
+        2, 12, 0, 5,
+      ],
+      markLine: {
+        //最大值和最小值
+        data: [
+          {
+            yAxis: 10,
+            label: {
+              position: "middle",
+              formatter: "严重三项不平衡",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#FF5D1D",
+            },
+          },
+          {
+            yAxis: 8,
+            label: {
+              position: "middle",
+              formatter: "不平衡度",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#f2e251",
+            },
+          },
+        ],
+      },
+    },
+  ],
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "ElectricChart2",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>

src/views/powerQuality/unbalanceAnalysis/index.vue

@@ -16,7 +16,6 @@
             </el-select>
           </div>
 
-         
           <div class="filter-item">
             日期：
             <el-date-picker
@@ -33,24 +32,40 @@
       </div>
     </div>
     <!-- 筛选end -->
-    <el-row :gutter="20" class="mt-20" >
+    <el-row :gutter="20" class="mt-20">
       <el-col :span="12">
         <div class="grid-content bg-purple">
-          <curve-com ></curve-com>
+          <div class="blanceChartTit">电压不平衡度</div>
+          <voltage-chart></voltage-chart>
+          <el-divider></el-divider>
+          <voltage-chart2></voltage-chart2>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="grid-content bg-purple">
+           <div class="blanceChartTit">电流不平衡度</div>
+          <electric-chart></electric-chart>
+          <el-divider></el-divider>
+          <electric-chart2></electric-chart2>
         </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";
+import voltageChart from "./voltageChart";
+import voltageChart2 from "./voltageChart2";
+import electricChart from "./electricChart";
+import electricChart2 from "./electricChart2";
 
 export default {
   name: "VariableList",
-   components: {
-   curveCom,
+  components: {
+    voltageChart,
+    voltageChart2,
+    electricChart,
+    electricChart2,
   },
 
   data() {
@@ -66,14 +81,11 @@ export default {
       region: "",
     };
   },
-  methods: {
-   
-  },
+  methods: {},
 };
 </script>
 
 <style lang="scss" scoped>
-
 .el-row {
   margin-bottom: 20px;
   &:last-child {
@@ -84,13 +96,13 @@ export default {
   border-radius: 4px;
 }
 .bg-purple-dark {
-  border:1px solid  #99a9bf;
+  border: 1px solid #99a9bf;
 }
 .bg-purple {
-  border:1px solid  #d3dce6;
+  border: 1px solid #d3dce6;
 }
 .bg-purple-light {
-  border:1px solid  #e5e9f2;
+  border: 1px solid #e5e9f2;
 }
 .grid-content {
   border-radius: 4px;
@@ -98,6 +110,6 @@ export default {
 }
 .row-bg {
   padding: 10px 0;
-  border:1px solid  #f9fafc;
+  border: 1px solid #f9fafc;
 }
 </style>

src/views/powerQuality/unbalanceAnalysis/voltageChart.vue

@@ -0,0 +1,196 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  // backgroundColor: "pink",
+  color: ["#f2e251", "#48C964", "#fe8161"],
+
+  legend: {
+    bottom: "0",
+    data: ["A相电压", "B相电压", "C相电压"],
+  },
+  // toolbox: {
+  //   show: false,
+  // },
+  tooltip: {
+    // show: true
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
+  },
+  yAxis: {
+    name: "V",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "A相电压",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
+      
+    },
+    {
+      name: "B相电压",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
+    },
+    {
+      name: "C相电压",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
+    },
+  ],
+
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "VoltageChart",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>

src/views/powerQuality/unbalanceAnalysis/voltageChart2.vue

@@ -0,0 +1,219 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height400" ref="lineChartBanlance" />
+  </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 "../../home/store";
+// import { ChartDataType } from "../../data";
+
+const worksChartOption: EChartOption = {
+  color: ["#1187FF"],
+  legend: {
+    bottom: "0",
+    data: ["电压不平衡度"],
+  },
+
+  tooltip: {
+    trigger: "axis",
+    axisPointer: { type: "cross" },
+  },
+  grid: {
+    left: "20",
+    right: "40",
+    top: "40",
+    bottom: "30",
+    containLabel: true,
+  },
+  xAxis: {
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+    /*改变xy轴颜色*/
+    axisLine: {
+      lineStyle: {
+        color: "#444",
+        width: 1, //这里是为了突出显示加上的
+      },
+    },
+    boundaryGap: false,
+    data: [
+      "0:00",
+      "2:00",
+      "4:00",
+      "6:00",
+      "8:00",
+      "10:00",
+      "12:00",
+      "14:00",
+      "16:00",
+      "18:00",
+      "20:00",
+      "22:00",
+      "24:00",
+    ],
+  },
+  yAxis: {
+    name: "%",
+    nameTextStyle: {
+      color: "#707070",
+      fontSize: 14,
+    },
+    axisLabel: {
+      textStyle: { color: "#444", fontSize: 14 },
+    },
+
+    axisLine: {
+      symbolOffset: [0, 4],
+      lineStyle: { color: "#444" },
+    },
+    splitArea: {
+      show: false,
+    },
+  },
+
+  series: [
+    {
+      name: "电压不平衡度",
+      type: "line",
+      symbolSize: 7,
+      smooth: false,
+      data: [
+        10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10,
+        2, 12, 0, 5,
+      ],
+      markLine: {
+        //最大值和最小值
+        data: [
+          {
+            yAxis: 10,
+            label: {
+              position: "middle",
+              formatter: "严重三项不平衡",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#FF5D1D",
+            },
+          },
+          {
+            yAxis: 8,
+            label: {
+              position: "middle",
+              formatter: "不平衡度",
+            },
+            lineStyle: {
+              width: 2,
+              color: "#f2e251",
+            },
+          },
+        ],
+      },
+    },
+  ],
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  lineChartBanlance: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "VoltageChart2",
+  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 lineChartBanlance = ref<HTMLDivElement>();
+    const echarts = useEcharts(lineChartBanlance, 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,
+      lineChartBanlance,
+      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;
+  }
+  .height400 {
+    height: 400px;
+  }
+}
+</style>