更新202110190939

src/icons/svgIcon/modification.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
+<path d="M7.9,104.1c0,8.6,7,15.6,15.6,15.6c2.8,0,5.5-0.8,7.8-2.1c0.6-0.2,1.1-0.5,1.5-1l0.2-0.2c1-0.8,2-1.7,2.8-2.8l31.1-31
+	c4.3,1.7,9,2.6,13.9,2.6c21.3,0,38.6-17.3,38.6-38.6c0-5.7-1.3-11.2-3.5-16.1c-0.1-0.6-0.4-1.1-0.8-1.6c-0.2-0.5-0.5-1-0.8-1.4
+	l-0.4,0.4c-1.6-0.9-3.6-0.7-4.9,0.7L90.9,47L80.4,36.4l18.2-18.3c1.3-1.3,1.5-3.1,0.8-4.7l0.5-0.5c-0.4-0.3-0.9-0.5-1.3-0.7
+	c-0.6-0.6-1.4-0.9-2.2-1.1c-4.7-2.1-10-3.2-15.5-3.2c-21.3,0-38.6,17.3-38.6,38.6c0,0.6,0,1.2,0,1.8l0,0.3c0,0.3,0,0.6,0.1,0.9
+	c0.3,3.9,1.2,7.7,2.6,11.2L10.8,94.6c-0.6,0.6-1,1.3-1.1,2.1C8.5,98.9,7.9,101.4,7.9,104.1z M15.9,104.1c0-1.7,0.5-3.2,1.5-4.5
+	l1.7-1.7c0.2-0.1,0.4-0.3,0.6-0.4l8.3-8.5c0,0,0,0,0,0l1.6-1.6l3.6-3.6l0,0l19.4-19.4c1.6-1.6,1.6-4.2,0-5.8
+	c-0.2-0.2-0.4-0.4-0.6-0.5l0.5-0.4c-1.2-2.9-1.9-6-2.1-9.3l0-0.3c0-0.3,0-0.6-0.1-0.8c0-0.3,0-0.6,0-0.9c0-16.9,13.7-30.7,30.7-30.7
+	c2.6,0,5.1,0.3,7.5,0.9l-15.9,16c-0.2,0.2-0.3,0.4-0.5,0.6c-0.1,0.1-0.2,0.2-0.3,0.3c-1.6,1.6-1.6,4.2,0,5.8L88,55.6
+	c1.6,1.6,4.2,1.6,5.8,0c0.2-0.2,0.4-0.4,0.5-0.6c0.1-0.1,0.2-0.2,0.3-0.3l16-16.1c0.7,2.5,1,5.1,1,7.8c0,16.9-13.7,30.7-30.7,30.7
+	c-5.7,0-11.1-1.6-15.7-4.3l-5.9,5.9c0,0,0,0,0,0L38.5,99.6c0-0.1,0-0.1-0.1-0.2l-8.1,8.1c-0.1,0.2-0.2,0.3-0.3,0.5l-2.6,2.6
+	c-1.1,0.7-2.5,1.1-3.9,1.1C19.3,111.7,15.9,108.3,15.9,104.1z"/>
+</svg>

src/layout/vab-content/index.vue

@@ -42,14 +42,14 @@ export default {
 
 .vab-content {
   overflow-y: auto;
-  min-height: calc(
-    100vh - @vab-header-height - @vab-padding - @vab-padding - @vab-padding -
-      @vab-padding
-  ) !important;
-  max-height: calc(
-    100vh - @vab-header-height - @vab-padding - @vab-padding - @vab-padding -
-      @vab-padding
-  ) !important;
+  // min-height: calc(
+  //   100vh - @vab-header-height - @vab-padding - @vab-padding - @vab-padding -
+  //     @vab-padding
+  // ) !important;
+  // max-height: calc(
+  //   100vh - @vab-header-height - @vab-padding - @vab-padding - @vab-padding -
+  //     @vab-padding
+  // ) !important;
   // padding: @vab-padding;
   margin: @vab-margin;
   // background: #fff;
@@ -60,7 +60,7 @@ export default {
     ) !important;
   }
 }
-.vab-content::-webkit-scrollbar {
-  display: none;
-}
+// .vab-content::-webkit-scrollbar {
+//   overflow-y: hidden;
+// }
 </style>

src/router/index.js

@@ -147,7 +147,7 @@ export const asyncRoutes = [
     redirect: '/deviceManage/powerEquip',
     children: [
       {
-        meta: { icon: 'deviceManage', title: '设备管理', },
+        meta: { icon: 'powerEquip', title: '设备管理', },
         path: 'powerEquip',
         component: () => import('@/views/deviceManage/powerEquip/index.vue'),
       },
@@ -167,7 +167,7 @@ export const asyncRoutes = [
       //   component: () => import('@/views/deviceManage/channelList/index.vue'),
       // },
       {
-        meta: { icon: 'deviceManage', title: '属性模板', },
+        meta: { icon: 'attribTemplate', title: '属性模板', },
         path: 'attribTemplate',
         component: () => import('@/views/deviceManage/attribTemplate/index.vue'),
       }
@@ -271,16 +271,20 @@ export const asyncRoutes = [
   {
     path: '/monthReport',
     redirect: '/monthReport',
-    meta: {
-      title: '月度报告',
-      icon: 'monthReport',
-    },
+    meta: { title: '月度报告', icon: 'monthReport', },
     component: Layout,
     children: [
       {
+        meta: { title: '月度报告', icon: 'monthReport', },
         path: '/monthReport',
         component: () => import('@/views/monthReport/index'),
         hidden: true
+      },
+      {
+        meta: { title: '月报模板', icon: 'reportModel', },
+        path: '/reportModel',
+        component: () => import('@/views/monthReport/reportModel'),
+        hidden: true
       }
     ]
   },
@@ -289,13 +293,11 @@ export const asyncRoutes = [
   {
     path: '/planOutage',
     redirect: '/planOutage',
-    meta: {
-      title: '计划停电',
-      icon: 'planOutage',
-    },
+    meta: { title: '计划停电', icon: 'planOutage', },
     component: Layout,
     children: [
       {
+        meta: { title: '计划停电', icon: 'planOutage', },
         path: '/planOutage',
         component: () => import('@/views/planOutage/index'),
         hidden: true

src/views/dataManage/chainAnalysis/ehcarts/index.vue

@@ -0,0 +1,216 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height300" ref="chainChartRef" />
+  </div>
+</template>
+<script>
+import { computed, defineComponent, onMounted, ref } from 'vue'
+import { useStore } from 'vuex'
+import * as echarts from 'echarts'
+
+const data = [
+  {
+    name: '本期',
+    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    listDate: [
+      '00:00:00',
+      '02:00:00',
+      '04:00:00',
+      '06:00:00',
+      '08:00:00',
+      '10:00:00',
+      '12:00:00',
+      '14:00:00',
+      '16:00:00',
+      '18:00:00',
+      '20:00:00',
+      '22:00:00',
+    ],
+  },
+  {
+    name: '上期',
+    list: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    listDate: [
+      '00:00:00',
+      '02:00:00',
+      '04:00:00',
+      '06:00:00',
+      '08:00:00',
+      '10:00:00',
+      '12:00:00',
+      '14:00:00',
+      '16:00:00',
+      '18:00:00',
+      '20:00:00',
+      '22:00:00',
+    ],
+  },
+]
+
+const dataAll = [
+  {
+    name: '本期',
+    type: 'line',
+    smooth: false,
+    data: [0, 0.1, 0, 0, 0, 0, 0, 0, 0, 0.7, 0, 0],
+    symbolSize: 6,
+    markPoint: {
+      data: [
+        { type: 'max', name: 'Max' },
+        { type: 'min', name: 'Min' },
+      ],
+    },
+  },
+  {
+    name: '上期',
+    type: 'line',
+    smooth: false,
+    data: [0, 0, 0.2, 0, 0, 0, 0, 0.8, 0, 0, 0, 0],
+    symbolSize: 6,
+    markPoint: {
+      data: [
+        { type: 'max', name: 'Max' },
+        { type: 'min', name: 'Min' },
+      ],
+    },
+  },
+]
+
+export default defineComponent({
+  name: 'CurveCom',
+  setup() {
+    const store = useStore()
+    const chainChartRef = ref(null)
+
+    // 总数
+    const total = computed(() => store.state.Home.worksChartData.total)
+    // num
+    const num = computed(() => store.state.Home.worksChartData.num)
+
+    // 读取数据 func
+    const loading = ref(true)
+    const getData = async () => {
+      // loading.value = true
+      // await store.dispatch('Home/queryWorksChartData')
+      loading.value = false
+    }
+
+    onMounted(() => {
+      getData()
+      let myChart = echarts.init(chainChartRef.value)
+      // 绘制图表
+      myChart.setOption({
+        color: ['#FEB70D', '#50F335', '#0DC8FE'],
+        title: {
+          text: '同比分析',
+          left: '2.5%',
+          textStyle: {
+            color: '#9d9d9d',
+            fontSize: 14,
+            fontWeight: 600,
+          },
+        },
+        tooltip: {
+          trigger: 'axis',
+        },
+        // 图列组件
+        legend: {
+          itemHeight: 10, //改变圆圈大小
+          itemWidth: 26, //改变圆圈大小
+          itemGap: 30,
+          textStyle: {
+            color: 'black',
+          },
+
+          left: 'center',
+          // bottom: '0',
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '5%',
+          containLabel: true,
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: true,
+          data: data[0].listDate.map((val) => {
+            return val.split(':')[0] + ':' + val.split(':')[1]
+          }),
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: 'black', // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+        },
+        yAxis: {
+          nameTextStyle: {
+            color: 'black',
+            fontSize: 10,
+          },
+          type: 'value',
+          axisTick: {
+            show: true, //去除刻度线
+          },
+          axisLabel: {
+            color: 'black', // 文本颜色
+          },
+          axisLine: {
+            show: true, // 去除轴线
+            lineStyle: {
+              color: 'black',
+            },
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: '#9d9d9d',
+            },
+          },
+        },
+        series: dataAll,
+      })
+      window.onresize = function () {
+        // 自适应大小
+        myChart.resize()
+      }
+    })
+
+    return {
+      chainChartRef,
+      loading,
+      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: 15rem;
+  }
+}
+</style>

src/views/dataManage/chainAnalysis/index.vue

@@ -1,5 +1,197 @@
 <template>
-  <div style="padding:30px;">
-   环比分析报表
+  <div class="chainAnalysis">
+    <div class="chainContent1">
+      <div style="display: flex">
+        <el-select v-model="value" placeholder="选择站点">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          ></el-option>
+        </el-select>
+      </div>
+
+      <div class="chainSwitch">
+        <el-tree
+          :data="data"
+          show-checkbox
+          node-key="id"
+          :default-expanded-keys="[2, 3]"
+          :props="defaultProps"
+        />
+      </div>
+    </div>
+    <div class="chainContent2">
+      <div class="chainDivOne">
+        <div class="chainDivTwo">
+          <div class="block">
+            <span class="demonstration">选择时间范围：</span>
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="➥"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+            ></el-date-picker>
+          </div>
+        </div>
+        <el-radio-group
+          v-model="listTabPosition"
+          @change="listTabsChange(listTabPosition)"
+          style="display: flex"
+        >
+          <el-radio-button label="allValue">所有值</el-radio-button>
+          <el-radio-button label="dailyValue">每日值</el-radio-button>
+          <el-radio-button label="monthValue">每月值</el-radio-button>
+
+          <div style="margin-left: 10px">
+            <el-button
+              icon="el-icon-search"
+              type="primary"
+              style="padding: 7px 12px"
+            >
+              查询
+            </el-button>
+          </div>
+        </el-radio-group>
+      </div>
+      <div class="chainEcharts">
+        <echarts v-for="op in options" :key="op" ></echarts>
+      </div>
+    </div>
   </div>
 </template>
+<script>
+import { defineComponent, ref, reactive, toRefs } from 'vue'
+import echarts from './ehcarts/index.vue'
+
+export default defineComponent({
+  name: 'chainAnalysis',
+  components: { echarts },
+  props: {},
+  setup() {
+    const listTabsChange = (value) => {
+      console.log(value)
+    }
+
+    const state = reactive({
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+    })
+
+    return {
+      ...toRefs(state),
+      listTabPosition: ref('allValue'),
+      data: [
+        {
+          id: 1,
+          label: '设备1',
+          children: [
+            {
+              id: 4,
+              label: '母线停电次数',
+            },
+            {
+              id: 4,
+              label: '功率因数',
+            },
+            {
+              id: 4,
+              label: 'A相功率因数',
+            },
+          ],
+        },
+      ],
+      value: ref(''),
+      options: ref([
+        {
+          value: 'Option1',
+          label: 'Option1',
+        },
+        {
+          value: 'Option2',
+          label: 'Option2',
+        },
+        {
+          value: 'Option3',
+          label: 'Option3',
+        },
+        {
+          value: 'Option4',
+          label: 'Option4',
+        },
+        {
+          value: 'Option5',
+          label: 'Option5',
+        },
+      ]),
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+      },
+      listTabsChange,
+
+    }
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.chainAnalysis {
+  display: flex;
+  height: calc(100vh - 130px);
+  // padding: 30px;
+  // margin-top: 50px;
+  .chainContent1 {
+    background-color: #fff;
+    width: 15%;
+    height: 100%;
+    margin-right: 25px;
+    padding: 20px;
+    min-width: 200px;
+    .chainSwitch {
+      margin-top: 20px;
+      width: 100%;
+      height: 20px;
+      cursor: pointer;
+      .chainSwitchOne {
+        display: flex;
+        border: 0.5px solid silver;
+        padding: 8px;
+        font-size: 13px;
+        div:nth-child(1) {
+          width: 100%;
+        }
+      }
+      .chainSwitchOne:hover {
+        background-color: #409eff;
+      }
+      .chainSwitchOne:focus {
+        background-color: #409eff;
+      }
+    }
+  }
+  .chainContent2 {
+    background-color: #fff;
+    width: 85%;
+    min-width: 845px;
+    height: 100%;
+    .chainEcharts {
+      height: calc(100vh - 192px);
+      overflow-y: auto;
+    }
+    .chainDivOne {
+      display: flex;
+      margin: 15px 0px 15px 15px;
+      .chainDivTwo {
+        font-weight: 600;
+        color: #9d9d9d;
+        margin-right: 20px;
+      }
+    }
+  }
+}
+.chainEcharts::-webkit-scrollbar {
+  display: none;
+}
+</style>

src/views/dataManage/energyReport/index.vue

@@ -24,7 +24,7 @@
     </div>
     <div class="energContent2">
       <div class="energDivOne">
-        <div style="width: 70%; display: flex">
+        <div class="energHaeder">
           <el-radio-group
             v-model="listTabPosition"
             @change="listTabsChange(listTabPosition)"
@@ -95,7 +95,7 @@ import tables from './tables/index.vue'
 
 export default defineComponent({
   name: 'energyReport',
-  components: { echarts ,tables},
+  components: { echarts, tables },
   props: {},
   setup() {
     let dateType = ref('date')
@@ -232,11 +232,18 @@ export default defineComponent({
     .energDivOne {
       display: flex;
       margin: 15px 0px 15px 15px;
-      .energDivTwo {
-        font-weight: 600;
-        color: #9d9d9d;
-        width: 195px;
-        margin-left: 20px;
+      .energHaeder {
+        width: 70%;
+        display: flex;
+        .energDivTwo {
+          font-weight: 600;
+          color: #9d9d9d;
+          width: 195px;
+          margin-left: 20px;
+          .block {
+            white-space: nowrap;
+          }
+        }
       }
     }
   }

src/views/dataManage/handOpera/index.vue

@@ -24,7 +24,7 @@
     </div>
     <div class="energContent2">
       <div class="energDivOne">
-        <div style="width: 55%;">
+        <div style="width: 60%">
           <div class="energDivTwo">
             <div class="block">
               <span>日期：</span>
@@ -76,13 +76,33 @@
           </div>
         </div>
 
-        <div style="width: 30%">
+        <div style="width: 40%">
           <div style="display: flex; float: right; margin-right: 15px">
-            <el-checkbox
-              v-model="checked"
-              label="显示抄表"
-              style="margin-right: 20px"
-            ></el-checkbox>
+            <el-button style="padding: 7px 12px">
+              <svg-icon iconClass="modification"></svg-icon>
+              一键纠正
+            </el-button>
+            <el-button
+              icon="el-icon-download"
+              type="primary"
+              style="padding: 7px 12px"
+            >
+              导入
+            </el-button>
+            <el-button
+              icon="el-icon-upload2"
+              type="primary"
+              style="padding: 7px 12px"
+            >
+              导出
+            </el-button>
+            <el-button
+              icon="el-icon-s-order"
+              type="primary"
+              style="padding: 7px 12px"
+            >
+              保存
+            </el-button>
           </div>
         </div>
       </div>
@@ -95,11 +115,11 @@
 <script>
 import { defineComponent, ref, reactive, toRefs } from 'vue'
 // import echarts from './ehcarts/index.vue'
-// import tables from './tables/index.vue'
+import tables from './tables/index.vue'
 
 export default defineComponent({
   name: 'energyReport',
-  // components: { echarts ,tables},
+  components: { tables },
   props: {},
   setup() {
     const state = reactive({
@@ -247,7 +267,7 @@ export default defineComponent({
         display: flex;
         font-weight: 600;
         color: #9d9d9d;
-        margin-left: 20px;
+        // margin-left: 20px;
         width: 100%;
         .block {
           display: flex;

src/views/dataManage/handOpera/tables/index.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <div style="margin: 0 15px">
+      <el-table
+        :data="tableData"
+        border
+        stripe
+        :header-cell-style="headClass"
+        height="41rem"
+      >
+        <el-table-column
+          prop="numCode"
+          label="变量编码"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="numName"
+          label="变量名称"
+          width=""
+        ></el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template #default="scope">
+            <el-button
+              type="text"
+              size="small"
+              style="color: #409eff"
+              @click.prevent="Update(scope.row)"
+            >
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-for="row in tablesRow"
+          :key="row"
+          :prop="row.prop"
+          :label="row.label"
+          width=""
+        ></el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+// import { useStore } from "vuex";
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'consumConfig',
+  components: {},
+  props: {},
+  setup() {
+    const Update = (row) => {
+      console.log('', row)
+    }
+
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA !important;color: black;'
+    }
+
+    return {
+      headClass,
+      Update, //修改偏差配置事件
+      tableData: [
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+          time: '0',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+        {
+          numCode: '05-01',
+          numName: 'Tom',
+        },
+      ],
+      tablesRow: [
+        {
+          prop: 'time',
+          label: '00.00',
+        },
+      ],
+    }
+  },
+})
+</script>

src/views/dataManage/sameAnalysis/ehcarts/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height300" id="sumeChartRef" ref="sumeChartRef" />
+    <div class="height300" ref="sumeChartRef" />
   </div>
 </template>
 <script>
@@ -168,6 +168,7 @@ export default defineComponent({
   name: 'CurveCom',
   setup() {
     const store = useStore()
+    const sumeChartRef = ref(null)
 
     // 总数
     const total = computed(() => store.state.Home.worksChartData.total)
@@ -184,7 +185,7 @@ export default defineComponent({
 
     onMounted(() => {
       getData()
-      let myChart = echarts.init(document.getElementById('sumeChartRef'))
+      let myChart = echarts.init(sumeChartRef.value)
       // 绘制图表
       myChart.setOption({
         color: ['#FEB70D', '#50F335', '#0DC8FE'],
@@ -209,7 +210,7 @@ export default defineComponent({
             color: 'black',
           },
 
-          left: '30%',
+          left: 'center',
           bottom: '0',
         },
         grid: {
@@ -270,6 +271,7 @@ export default defineComponent({
     })
 
     return {
+      sumeChartRef,
       loading,
       total,
       num,

src/views/dataManage/sameAnalysis/index.vue

@@ -46,7 +46,13 @@
           <el-radio-button label="monthValue">每月值</el-radio-button>
 
           <div style="margin-left: 10px">
-            <el-button icon="el-icon-search" type="primary">查询</el-button>
+            <el-button
+              icon="el-icon-search"
+              type="primary"
+              style="padding: 7px 12px"
+            >
+              查询
+            </el-button>
           </div>
         </el-radio-group>
       </div>

src/views/monthReport/index.vue

@@ -1,90 +1,153 @@
 <template>
-  <div class="dashboard-container">
-    <div class="dashboard-text">月度报告</div>
-
-    <el-tree default-expand-all :data="data">
-      <template #default="{ node, data }">
-        <span
-          class="custom-tree-node"
-          style="width: 100%"
-          @mouseenter="mouseenter(data)"
-          @mouseleave="mouseleave(data)"
+  <div class="monthReport">
+    <div class="monthContent1">
+      <div style="display: flex">
+        <el-input
+          placeholder="输入站点名称或关键字"
+          v-model="filterText"
+          class="attContentInput"
         >
-          <span>{{ node.label }}</span>
-          <el-link
-            v-show="data.show"
-            size="mini"
-            style="margin-left: 5px"
-            type="primary"
-            icon="el-icon-plus"
-          ></el-link>
-          <el-link
-            v-show="data.show"
-            size="mini"
-            style="margin-left: 5px"
-            type="primary"
-            icon="el-icon-delete"
-          ></el-link>
-        </span>
-      </template>
-    </el-tree>
+          <template #suffix>
+            <i class="el-icon-search el-input__icon"></i>
+          </template>
+        </el-input>
+      </div>
+
+      <div class="monthSwitch">
+        <el-tree
+          :data="data"
+          show-checkbox
+          node-key="id"
+          :default-expanded-keys="[2, 3]"
+          :props="defaultProps"
+        />
+      </div>
+    </div>
+    <div class="monthContent2">
+      <el-tabs
+        v-model="activeName"
+        type="card"
+        @tab-click="handleClick"
+        style="background-color: #fff; height: 100%"
+        class="tabsSizeColor"
+      >
+        <el-tab-pane label="月报列表" name="monthList">
+          <baseic-Table></baseic-Table>
+        </el-tab-pane>
+        <el-tab-pane label="月报模板" name="monthModel">
+          <deviation-Table></deviation-Table>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
   </div>
 </template>
-
 <script>
-import { mapGetters } from "vuex";
+import { useStore } from 'vuex'
+import { defineComponent, ref } from 'vue'
+import baseicTable from "./tables/basicTable.vue";
+import deviationTable from "./tables/deviationTable.vue";
+
+export default defineComponent({
+  name: 'monthReport',
+  components: { baseicTable, deviationTable },
+  props: {},
+  setup() {
+    const store = useStore()
+    store
+
+    const handleClick = (tab, event) => {
+      console.log(tab, event)
+    }
+
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA !important;color: black;'
+    }
 
-export default {
-  name: "Dashboard",
-  computed: {
-    ...mapGetters(["name"]),
-  },
-  data() {
     return {
+      headClass,
+      filterText:ref(""),
+      activeName: ref('monthList'),
+      handleClick, //tabs切换事件
       data: [
         {
-          id: 0,
-          label: "水果",
-          show: false,
+          id: 1,
+          label: '所有站点',
           children: [
             {
-              id: 1,
-              label: "苹果",
-              show: false,
+              id: 4,
+              label: '分组1',
+            },
+            {
+              id: 4,
+              label: '分组2',
             },
             {
-              id: 2,
-              label: "芒果",
-              show: false,
+              id: 4,
+              label: '分组3',
             },
           ],
         },
       ],
-    };
+      defaultProps: {
+        children: 'children',
+        label: 'label',
+      },
+    }
   },
-  methods: {
-    mouseenter(data) {
-      alert(1);
-      console.log(data);
-      data.show = true;
-    },
-
-    mouseleave(data) {
-      console.log(data);
-      data.show = false;
-    },
-  },
-};
+})
 </script>
 
-<style lang="scss" scoped>
-.dashboard {
-  &-container {
-    margin: 30px;
+<style lang="scss">
+.monthReport {
+  display: flex;
+  height: calc(100vh - 130px);
+  // padding: 30px;
+  // margin-top: 50px;
+  .monthContent1 {
+    background-color: #fff;
+    width: 15%;
+    height: 100%;
+    margin-right: 25px;
+    padding: 20px;
+    min-width: 200px;
+    .monthSwitch {
+      margin-top: 20px;
+      width: 100%;
+      height: 20px;
+      cursor: pointer;
+    }
   }
-  &-text {
-    font-size: 30px;
-    line-height: 46px;
+  .monthContent2 {
+    background-color: #fff;
+    width: 85%;
+    min-width: 845px;
+    height: 100%;
+    .basicHeader {
+      margin-left: 15px;
+      margin-top: 15px;
+      margin-bottom: 15px;
+      overflow: hidden;
+    }
   }
 }
-</style>
+
+// tab重置样式
+.tabsSizeColor > .el-tabs__header .el-tabs__item {
+  line-height: 50px;
+  height: 50px;
+  font-size: 16px;
+}
+
+.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
+  border-bottom: 2px solid #409eff;
+  color: #409eff;
+}
+.el-tabs__header {
+  margin-bottom: 0;
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none;
+}
+</style>

src/views/monthReport/tables/basicTable.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <div class="basicHeader">
+      <span class="demonstration">选择时间:</span>
+      <el-date-picker
+        v-model="timeValue"
+        type="month"
+        placeholder="请选择时间"
+        style="margin:0 15px"
+      ></el-date-picker>
+      <el-button
+        class="search-button"
+        icon="el-icon-plus"
+        type="success"
+        @click="Touch()"
+      >
+        生成
+      </el-button>
+    </div>
+    <div style="margin: 0 15px">
+      <el-table
+        :data="tableData"
+        border
+        stripe
+        :header-cell-style="headClass"
+        height="42rem"
+      >
+        <el-table-column
+          prop="reportName"
+          label="报告名称"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="reportDate"
+          label="报告统计时间"
+          width=""
+        ></el-table-column>
+        <el-table-column label="操作" width="140">
+          <template #default="scope">
+            <el-button
+              type="text"
+              size="small"
+              style="color: #409eff"
+              @click.prevent="preview(scope.row)"
+            >
+              预览
+            </el-button>
+            <el-button
+              @click="download(scope.$index, scope.row)"
+              type="text"
+              size="small"
+              style="color: #409eff"
+            >
+              下载
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+// import { useStore } from "vuex";
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  name: 'basicTable',
+  components: {},
+  props: {},
+  setup() {
+    const Touch = () => {
+      console.log('')
+    }
+
+    const download = () => {
+      console.log('')
+    }
+
+    const preview = () => {
+      console.log('')
+    }
+
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA !important;color: black;'
+    }
+
+    return {
+      timeValue:ref(''),
+      headClass,
+      Touch, //生成事件
+      download, //下载时间
+      preview, //预览
+      tableData: [
+        {
+          reportName: '钦江路333号月度用电报告_2021年6月',
+          reportDate: '2021-06-01 00:00:00-2021-06-30 24:00:00',
+        },
+        {
+          reportName: '钦江路333号月度用电报告_2021年6月',
+          reportDate: '2021-06-01 00:00:00-2021-06-30 24:00:00',
+        },
+      ],
+    }
+  },
+})
+</script>

src/views/monthReport/tables/deviationTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <div class="basicHeader">
+      <el-button icon="el-icon-download" type="primary">新建模板</el-button>
+    </div>
+    <div style="margin: 0 15px">
+      <el-table
+        :data="tableData"
+        border
+        stripe
+        :header-cell-style="headClass"
+        height="42rem"
+      >
+        <el-table-column
+          prop="reportName"
+          label="报告名称"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="reportDate"
+          label="报告生成日期"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="proposal"
+          label="是否人工填写优化建议"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="mailbox"
+          label="是否自动发送邮件"
+          width=""
+        ></el-table-column>
+        <el-table-column
+          prop="state"
+          label="当前状态"
+          width=""
+        ></el-table-column>
+        <el-table-column  label="操作" width="100">
+          <template #default="scope">
+            <el-button
+              type="text"
+              size="small"
+              style="color: #409eff"
+              @click.prevent="Update(scope.row)"
+            >
+              编辑
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+<script>
+// import { useStore } from "vuex";
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'deviationTable',
+  components: {},
+  props: {},
+  setup() {
+    const Update = (row) => {
+      console.log('', row)
+    }
+
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA !important;color: black;'
+    }
+
+    return {
+      headClass,
+      Update, //修改偏差配置事件
+      tableData: [
+        {
+          reportName: '05-01',
+          reportDate: 'Tom',
+          proposal: '',
+          mailbox: '',
+          state: '',
+        },
+      ],
+    }
+  },
+})
+</script>