删除icon定位加class

src/assets/css/element-variables.scss

@@ -31,9 +31,9 @@ $menu-dark-highlight-color: #fff;
         line-height: 40px;
         color: $menu-dark-color;
         .icon {
-            margin-right: 5px;
+            margin-right: 10px;
             vertical-align: middle;
-            width: 24px;
+            // width: 24px;
             text-align: center;
             color: $menu-dark-color;
         }
@@ -91,7 +91,7 @@ $menu-dark-highlight-color: #fff;
         .icon {
             margin-right: 5px;
             vertical-align: middle;
-            width: 24px;
+            // width: 24px;
             text-align: center;
             color: $menu-dark-color;
         }

src/assets/css/index.scss

@@ -283,7 +283,7 @@ div:focus {
         margin-left: 20px !important;
     }
     .el-input {
-        margin: 0 20px;
+        margin: 0 20px 0 0;
     }
 }
 
@@ -292,7 +292,7 @@ div:focus {
     position: relative
 }
 
-.el-icon-delete {
+.siteTree .el-icon-delete {
     color: #409EFF;
     position: absolute;
     right: 6px;
@@ -360,4 +360,15 @@ div:focus {
 .underline:last-child:after {
     //可以这样用
     height: 0;
+}
+
+// 谐波分析
+.harmonicReport {
+    .filter-container .filter-item {
+        // margin-right: 10px
+    }
+    .timeTab.el-button {
+        margin-bottom: 20px;
+        border-radius: 0
+    }
 }

src/layouts/IndexLayout/locales/zh-CN.ts

@@ -28,10 +28,10 @@ export default {
 
 
   'index-layout.menu.powerQuality': '电能质量',
-  'index-layout.menu.powerQuality.sameAnalysis': '谐波报表',
-  'index-layout.menu.powerQuality.chainAnalysis': '实时监测',
-  'index-layout.menu.powerQuality.handOpera': '评估报告',
-  'index-layout.menu.powerQuality.energyReport': '三相不平衡分析',
+  'index-layout.menu.powerQuality.harmonicReport': '谐波报表',
+  'index-layout.menu.powerQuality.realTimeMonitoring': '实时监测',
+  'index-layout.menu.powerQuality.asseReport': '评估报告',
+  'index-layout.menu.powerQuality.unbalanceAnalysis': '三相不平衡分析',
 
   'index-layout.menu.monthReport': '月度报告',
 

src/views/alarmManage/index.vue

@@ -47,7 +47,7 @@
     >
       <el-table-column prop="siteName" label="站点名称" width="">
          <template #default="scope">
-           <div @click='handleClick(scope.row)' >  {{ scope.row.totalNum }}</div>
+           <div @click='handleClick(scope.row)' >  {{ scope.row.siteName }}</div>
           
         </template>
       </el-table-column>

src/views/planOutage/dialogComponent.vue

@@ -18,38 +18,55 @@
         <el-form-item label="站点名称：" prop="watchName" label-width="150px">
           <el-input v-model="formInfo.watchName"></el-input>
         </el-form-item>
-        <el-form-item label="开始停电时间：" prop="watchCode" label-width="150px">
-          <el-input v-model="formInfo.watchCode"></el-input >
+        <el-form-item
+          label="开始停电时间："
+          prop="watchCode"
+          label-width="150px"
+        >
+          <!-- <el-input v-model="formInfo.watchCode"></el-input > -->
+
+          <el-date-picker
+            v-model="beginTime"
+          
+            type="datetime"
+            placeholder="选择日期时间"
+            :picker-options="pickerBeginDate"
+            clearable
+          ></el-date-picker>
         </el-form-item>
-        <el-form-item label="结束停电时间:" prop="routeAddress" label-width="150px">
-          <el-select
-            v-model="formInfo.routeAddress"
-            multiple
-            filterable
-            collapse-tags
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+        <el-form-item
+          label="结束停电时间:"
+          prop="routeAddress"
+          label-width="150px"
+        >
+          <el-date-picker
+            v-model="endTime"
+            type="datetime"
+            placeholder="选择日期时间"
+            :picker-options="pickerEndDate"
+            clearable
+          ></el-date-picker>
+         
         </el-form-item>
 
-        <el-form-item label="提交时间：" prop="ratedVoltage" label-width="150px">
+        <el-form-item
+          label="提交时间："
+          prop="ratedVoltage"
+          label-width="150px"
+        >
           <el-input v-model="formInfo.ratedVoltage"></el-input>
         </el-form-item>
-        <el-form-item label="提交人：" prop="stationAddress" label-width="150px">
+        <el-form-item
+          label="提交人："
+          prop="stationAddress"
+          label-width="150px"
+        >
           <el-input v-model="formInfo.ratedCurrent"></el-input>
         </el-form-item>
         <el-form-item label="状态：" prop="fzlMx" label-width="150px">
           <el-input v-model="formInfo.fzlMx"></el-input>
         </el-form-item>
- 
-        
+
         <br />
         <br />
         <br />
@@ -65,10 +82,6 @@
 </template>
 
 <script>
-
-
-
-
 export default {
   name: "DialogComponent",
   props: {
@@ -84,8 +97,32 @@ export default {
     },
   },
   data() {
+    //限制不能选之后的日期
+    this.pickerBeginDate = {
+      
+      disabledDate: (time) => {
+        alert(2);
+        let endTime = this.endTime;
+        if (endTime) {
+          return time.getTime() > new Date(endTime).getTime();
+        }
+      },
+    };
+    // /限制不能选之前的时间
+    this.pickerEndDate = {
+      disabledDate: (time) => {
+        let beginTime = this.beginTime;
+        if (beginTime) {
+          return time.getTime() < new Date(beginTime).getTime();
+        }
+      },
+    };
+
     return {
-       checked: true,
+      beginTime: "",
+      endTime: "",
+
+      checked: true,
       showDialog: false,
       formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
       options: [
@@ -133,11 +170,9 @@ export default {
         ],
         routeAddress: [
           { required: true, message: "请选则结束停电时间", trigger: "change" },
-         
         ],
         ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
+          { required: true, message: "请选择站点列表", trigger: "change" },
         ],
         ratedCurrent: [
           { required: true, message: "请输入已选站点个数", trigger: "blur" },
@@ -191,15 +226,15 @@ export default {
  
 <style scoped lang="scss">
 .el-input,
-.el-select {
+.el-select,.el-date-editor.el-input, .el-date-editor.el-input__inner {
   width: 240px;
 }
 
 // label样式
 .el-form-item__label {
-    width: 150px
+  width: 150px;
 }
 .el-form-item__content {
-    margin-left: 150px
+  margin-left: 150px;
 }
 </style>

src/views/powerQuality/harmonicReport/curveCom.vue

@@ -0,0 +1,170 @@
+<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>
+   
+</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',
+  },
+  grid: {
+    left: '0',
+    right: '0',
+    top: '0',
+    bottom: '0',
+  },
+  xAxis: {
+    show: false,
+    boundaryGap: false,
+    data: [
+      //'03-01','03-02','03-03','03-04','03-05','03-06','03-07'
+    ],
+  },
+  yAxis: {
+    show: false,
+  },
+  series: [
+    {
+      name: '新增',
+      type: 'line',
+      data: [
+        //23,60,20,36,23,85,23
+      ],
+      areaStyle: {
+        color: {
+          colorStops: [
+            {
+              offset: 0,
+              color: '#A9F387', // 0% 处的颜色
+            },
+            {
+              offset: 1,
+              color: '#48D8BF', // 100% 处的颜色
+            },
+          ],
+          globalCoord: false, // 缺省为 false
+        } as any,
+      },
+      lineStyle: {
+        width: 0,
+      },
+      itemStyle: {
+        borderWidth: 2,
+      },
+    },
+  ],
+};
+
+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;
+  }
+  .height40 {
+    height: 40px;
+  }
+}
+</style>

src/views/powerQuality/harmonicReport/index.vue

@@ -1,5 +1,136 @@
 <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: 150px"
+            >
+              <el-option label="站点一" value="1"></el-option>
+              <el-option label="站点二" value="2"></el-option>
+            </el-select>
+          </div>
+
+          <div class="filter-item">
+            回路:
+            <el-select
+              v-model="circuit"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+              <el-option label="回路1" value="1"></el-option>
+              <el-option label="回路2" value="2"></el-option>
+            </el-select>
+          </div>
+
+          <div class="filter-item">
+            测量类型:
+            <el-select
+              v-model="measurType"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+              <el-option label="类型1" value="1"></el-option>
+              <el-option label="类型2" value="2"></el-option>
+            </el-select>
+          </div>
+
+          <div class="filter-item">
+            谐波次数:
+            <el-select
+              v-model="number"
+              placeholder="请选择"
+              style="width: 150px"
+            >
+              <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: 150px"
+            >
+            </el-date-picker>
+            <el-button
+              class="search-button timeTab"
+              @click="num = 0"
+              :type="num == 0 ? 'primary' : ''"
+              >按日</el-button
+            >
+            <el-button
+              class="search-button timeTab"
+              @click="num = 1"
+              :type="num == 1 ? 'primary' : ''"
+              style="margin-left: 0 !important"
+              >按月</el-button
+            >
+          </div>
+
+          <el-button type="primary" class="search-button">搜索</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <el-button
+      class="search-button timeTab"
+      @click="num2 = 0"
+      :type="num2 == 0 ? 'primary' : ''"
+      >曲线</el-button
+    >
+    <el-button
+      class="search-button timeTab"
+      @click="num2 = 1"
+      :type="num2 == 1 ? 'primary' : ''"
+      style="margin-left: 0 !important"
+      >表格</el-button
+    >
+    <curve-com v-if="num2 == 0"></curve-com>
+    <table-com  v-if="num2 == 1"></table-com>
   </div>
 </template>
+
+<script>
+import curveCom from "./curveCom";
+import tableCom from "./tableCom";
+
+export default {
+  name: "VariableList",
+   components: {
+   curveCom,
+   tableCom
+  },
+
+  data() {
+    return {
+      num: 0,
+      num2: 0,
+      value4: "请选择",
+      number: 1,
+      measurType: 1,
+      select: 1,
+      currentPage4: 4,
+      showDialog: false,
+      tabPosition: "one",
+      input: "",
+      region: "",
+    };
+  },
+  methods: {
+   
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/views/powerQuality/harmonicReport/tableCom.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <!-- 表格start -->
+    <el-table :data="tableData" style="width: 100%">
+      <el-table-column prop="date" label="描述(单位A)" width=""> </el-table-column>
+
+      <el-table-column label="A相">
+          <el-table-column prop="name" label="最小值" width="">
+          </el-table-column>
+          <el-table-column prop="province" label="平均值"> </el-table-column>
+          <el-table-column prop="city" label="最大值"> </el-table-column>
+          <el-table-column prop="address" label="95%"> </el-table-column>
+      </el-table-column> 
+
+       <el-table-column label="B相">
+          <el-table-column prop="name" label="最小值" width="">
+          </el-table-column>
+          <el-table-column prop="province" label="平均值"> </el-table-column>
+          <el-table-column prop="city" label="最大值"> </el-table-column>
+          <el-table-column prop="address" label="95%"> </el-table-column>
+      </el-table-column> 
+      <el-table-column label="C相">
+          <el-table-column prop="name" label="最小值" width="">
+          </el-table-column>
+          <el-table-column prop="province" label="平均值"> </el-table-column>
+          <el-table-column prop="city" label="最大值"> </el-table-column>
+          <el-table-column prop="address" label="95%"> </el-table-column>
+      </el-table-column> 
+
+      <!-- <el-table-column  label="B" width=""> </el-table-column> -->
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+  </div>
+</template>
+<script>
+export default {
+  name: "tableCom",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-08",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-06",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+        {
+          date: "2016-05-07",
+          name: "王小虎",
+          province: "上海",
+          city: "普陀区",
+          address: "上海市普陀区金沙江路 1518 弄",
+          zip: 200333,
+        },
+      ],
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+  },
+};
+</script>

src/views/siteManage/index.vue

@@ -25,7 +25,7 @@
       </el-input>
 
       <el-tree
-        class="filter-tree"
+        class="filter-tree siteTree"
         :data="data"
         node-key="id"
         :props="defaultProps"

src/views/stationManage/index.vue

@@ -16,6 +16,7 @@
       <el-button type="primary" icon="el-icon-search" class="search-button"
         >搜索</el-button
       >
+    
       <el-button icon="el-icon-plus" type="success" @click="addItem()"
         >新增</el-button
       >