组件样式优化/数据管理,设备管理,登录,计划停电功能模块优化

src/assets/css/element.scss

@@ -0,0 +1,45 @@
+// 按钮样式
+.el-button {
+    padding: 10px 12px;
+}
+
+// 表格样式
+.el-table {
+    &--small {
+        font-size: 14px !important
+    }
+
+    td,
+    th {
+        padding: 10px 0
+    }
+}
+
+// 弹框样式
+.el-dialog {
+    padding: 0px !important;
+
+    .el-dialog__body {
+        padding: var(--el-dialog-padding-primary);
+    }
+
+    .el-dialog__header {
+        background: #f8f8f8;
+        padding: 16px 20px 16px;
+
+        .el-dialog__headerbtn {
+            top: 4px;
+        }
+    }
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 90%;
+    max-width: 400px;
+    margin: 0 auto 20px;
+}
+
+
+.el-tabs__new-tab {
+    margin: 10px 10px 10px 10px
+}

src/assets/css/index.scss

@@ -97,80 +97,6 @@ div:focus {
     line-height: 1.5;
 }
 
-@for $i from 0 through 100 {
-
-    // margin
-    .m-#{$i} {
-        margin: #{$i}px !important;
-    }
-
-    .mt-#{$i} {
-        margin-top: #{$i}px !important;
-    }
-
-    .mr-#{$i} {
-        margin-right: #{$i}px !important;
-    }
-
-    .mb-#{$i} {
-        margin-bottom: #{$i}px !important;
-    }
-
-    .ml-#{$i} {
-        margin-left: #{$i}px !important;
-    }
-
-    .mlr-#{$i} {
-        margin-left: #{$i}px !important;
-        margin-right: #{$i}px !important;
-    }
-
-    .mtb-#{$i} {
-        margin-top: #{$i}px !important;
-        margin-bottom: #{$i}px !important;
-    }
-
-    // padding
-    .p#{$i} {
-        padding: #{$i}px !important;
-    }
-
-    .pt#{$i} {
-        padding-top: #{$i}px !important;
-    }
-
-    .pr#{$i} {
-        padding-right: #{$i}px !important;
-    }
-
-    .pb#{$i} {
-        padding-bottom: #{$i}px !important;
-    }
-
-    .pl#{$i} {
-        padding-left: #{$i}px !important;
-    }
-
-    .plr#{$i} {
-        padding-left: #{$i}px !important;
-        padding-right: #{$i}px !important;
-    }
-
-    .ptb#{$i} {
-        padding-top: #{$i}px !important;
-        padding-bottom: #{$i}px !important;
-    }
-}
-
-/* 文本
-------------------------------- */
-@for $i from 10 through 500 {
-    .font-#{$i} {
-        font-size: #{$i}px !important;
-    }
-}
-
-
 .app-container {
     padding: $vab-padding;
     width: calc(100%);
@@ -217,47 +143,6 @@ div:focus {
     line-height: $vab-header-height !important;
 }
 
-
-
-.el-button {
-    padding: 10px 12px;
-}
-
-.el-table--small {
-    font-size: 14px !important
-}
-
-.el-table td,
-.el-table th {
-    padding: 10px 0
-}
-
-// 弹框样式start
-.el-dialog {
-    padding: 0px !important;
-
-    .el-dialog__body {
-        padding: var(--el-dialog-padding-primary);
-    }
-
-    .el-dialog__header {
-        background: #f8f8f8;
-        padding: 16px 20px 16px;
-
-        .el-dialog__headerbtn {
-            top: 4px;
-        }
-    }
-}
-
-
-.el-form-item:not(.user-layout .el-form-item) {
-    width: 90%;
-    max-width: 400px;
-    margin: 0 auto 20px;
-}
-
-// 弹框样式end
 // 台区列表
 .siteTitle {
     font-size: 16px;

src/assets/css/variables.module.scss

@@ -1,3 +1,76 @@
+@for $i from 0 through 100 {
+
+    // margin
+    .m-#{$i} {
+        margin: #{$i}px !important;
+    }
+
+    .mt-#{$i} {
+        margin-top: #{$i}px !important;
+    }
+
+    .mr-#{$i} {
+        margin-right: #{$i}px !important;
+    }
+
+    .mb-#{$i} {
+        margin-bottom: #{$i}px !important;
+    }
+
+    .ml-#{$i} {
+        margin-left: #{$i}px !important;
+    }
+
+    .mlr-#{$i} {
+        margin-left: #{$i}px !important;
+        margin-right: #{$i}px !important;
+    }
+
+    .mtb-#{$i} {
+        margin-top: #{$i}px !important;
+        margin-bottom: #{$i}px !important;
+    }
+
+    // padding
+    .p#{$i} {
+        padding: #{$i}px !important;
+    }
+
+    .pt#{$i} {
+        padding-top: #{$i}px !important;
+    }
+
+    .pr#{$i} {
+        padding-right: #{$i}px !important;
+    }
+
+    .pb#{$i} {
+        padding-bottom: #{$i}px !important;
+    }
+
+    .pl#{$i} {
+        padding-left: #{$i}px !important;
+    }
+
+    .plr#{$i} {
+        padding-left: #{$i}px !important;
+        padding-right: #{$i}px !important;
+    }
+
+    .ptb#{$i} {
+        padding-top: #{$i}px !important;
+        padding-bottom: #{$i}px !important;
+    }
+}
+
+/* 文本
+------------------------------- */
+@for $i from 10 through 500 {
+    .font-#{$i} {
+        font-size: #{$i}px !important;
+    }
+}
+
 $vab-color-blue: #1890ff;
 
 $vab-margin: 20px;

src/views/dataManage/handOpera/index.vue

@@ -3,23 +3,12 @@
     <div class="energContent1">
       <div style="display: flex">
         <el-select v-model="siteValue" placeholder="选择站点">
-          <el-option
-            v-for="item in siteOptions"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
+          <el-option v-for="item in siteOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
       </div>
 
       <div class="energSwitch">
-        <el-tree
-          :data="data"
-          show-checkbox
-          node-key="id"
-          :default-expanded-keys="[2, 3]"
-          :props="defaultProps"
-        />
+        <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :props="defaultProps" />
       </div>
     </div>
     <div class="energContent2">
@@ -28,48 +17,21 @@
           <div class="energDivTwo">
             <div class="block">
               <span>日期：</span>
-              <el-date-picker
-                style="width: 150px"
-                v-model="dateValue"
-                type="date"
-              ></el-date-picker>
+              <el-date-picker style="width: 150px" v-model="dateValue" type="date"></el-date-picker>
             </div>
             <div class="pointOfTime">
               <span>时间点：</span>
-              <el-select
-                v-model="timeValue"
-                multiple
-                collapse-tags
-                placeholder="请选择时间点"
-                class="pointSelect"
-              >
-                <el-option
-                  v-for="item in timeOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
+              <el-select v-model="timeValue" multiple collapse-tags placeholder="请选择时间点" class="pointSelect">
+                <el-option v-for="item in timeOptions" :key="item.value" :label="item.label"
+                  :value="item.value"></el-option>
               </el-select>
 
-              <el-select
-                v-model="clickValue"
-                clearable
-                placeholder="一键选择"
-                class="clickSelect"
-              >
-                <el-option
-                  v-for="item in clickOptions"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                ></el-option>
+              <el-select v-model="clickValue" clearable placeholder="一键选择" class="clickSelect">
+                <el-option v-for="item in clickOptions" :key="item.value" :label="item.label"
+                  :value="item.value"></el-option>
               </el-select>
 
-              <el-button
-                icon="el-icon-search"
-                type="primary"
-                style="padding: 7px 12px"
-              >
+              <el-button icon="Search" type="primary" style="padding: 7px 12px">
                 查询
               </el-button>
             </div>
@@ -82,25 +44,13 @@
               <svg-icon iconClass="modification"></svg-icon>
               一键纠正
             </el-button>
-            <el-button
-              icon="el-icon-download"
-              type="primary"
-              style="padding: 7px 12px"
-            >
+            <el-button icon="Download" type="primary" style="padding: 7px 12px">
               导入
             </el-button>
-            <el-button
-              icon="el-icon-upload2"
-              type="primary"
-              style="padding: 7px 12px"
-            >
+            <el-button icon="Upload" type="primary" style="padding: 7px 12px">
               导出
             </el-button>
-            <el-button
-              icon="el-icon-s-order"
-              type="primary"
-              style="padding: 7px 12px"
-            >
+            <el-button icon="" type="primary" style="padding: 7px 12px">
               保存
             </el-button>
           </div>
@@ -112,124 +62,77 @@
     </div>
   </div>
 </template>
-<script>
-import { defineComponent, ref, reactive, toRefs } from 'vue'
-// import echarts from './ehcarts/index.vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
 import tables from './tables/index.vue'
-
-export default defineComponent({
-  name: 'energyReport',
-  components: { tables },
-  props: {},
-  setup() {
-    const state = reactive({
-      dateValue: '2021-10-16',
-    })
-
-    const Height = ref()
-    Height.value = window.innerHeight - 205 + 'px'
-    window.onresize = function () {
-      Height.value = window.innerHeight - 205 + 'px'
-    }
-    return {
-      Height,
-      ...toRefs(state),
-      siteValue: ref(''), //站点下拉列表v-model
-      checked: ref(false),
-      data: [
-        {
-          id: 1,
-          label: '设备1',
-          children: [
-            {
-              id: 4,
-              label: '母线停电次数',
-            },
-            {
-              id: 4,
-              label: '功率因数',
-            },
-            {
-              id: 4,
-              label: 'A相功率因数',
-            },
-          ],
-        },
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  dateValue: '2021-10-16',
+  siteValue: "", //站点下拉列表v-model
+  checked: false,
+  data: [
+    {
+      id: 1,
+      label: '设备1',
+      children: [
+        { id: 4, label: '母线停电次数', },
+        { id: 4, label: '功率因数', },
+        { id: 4, label: 'A相功率因数', },
       ],
-      siteOptions: 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',
-      },
-      timeOptions: ref([
-        {
-          value: 1,
-          label: '00:00',
-        },
-        {
-          value: 2,
-          label: '00:05',
-        },
-        {
-          value: 3,
-          label: '00:10',
-        },
-        {
-          value: 4,
-          label: '00:15',
-        },
-        {
-          value: 5,
-          label: '00:20',
-        },
-      ]),
-      timeValue: ref([]),
-
-      clickOptions: ref([
-        {
-          value: 1,
-          label: '所有整点',
-        },
-        {
-          value: 2,
-          label: '所有点',
-        },
-        {
-          value: 3,
-          label: '清除时间点',
-        },
-      ]),
-      clickValue: ref([]),
-    }
+    },
+  ],
+  siteOptions: [
+    { 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',
   },
+  timeOptions: [
+    { value: 1, label: '00:00', },
+    { value: 2, label: '00:05', },
+    { value: 3, label: '00:10', },
+    { value: 4, label: '00:15', },
+    { value: 5, label: '00:20', },
+  ],
+  timeValue: [],
+
+  clickOptions: [
+    { value: 1, label: '所有整点', },
+    { value: 2, label: '所有点', },
+    { value: 3, label: '清除时间点', },
+  ],
+  clickValue: [],
 })
+const { dateValue, siteValue, checked, data, siteOptions, defaultProps, timeOptions, timeValue, clickOptions, clickValue } = toRefs(state)
+
+
+const Height = ref()
+Height.value = window.innerHeight - 205 + 'px'
+window.onresize = function () {
+  Height.value = window.innerHeight - 205 + 'px'
+}
 </script>
 
 <style lang="scss" scoped>
 .energyReport {
   display: flex;
   height: calc(100vh - 130px);
+
   // padding: 30px;
   // margin-top: 50px;
   .energContent1 {
@@ -239,62 +142,76 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+
     .energSwitch {
       margin-top: 20px;
       width: 100%;
       height: 20px;
       cursor: pointer;
+
       .energSwitchOne {
         display: flex;
         border: 0.5px solid silver;
         padding: 8px;
         font-size: 13px;
+
         div:nth-child(1) {
           width: 100%;
         }
       }
+
       .energSwitchOne:hover {
         background-color: #409eff;
       }
+
       .energSwitchOne:focus {
         background-color: #409eff;
       }
     }
   }
+
   .energContent2 {
     background-color: #fff;
     width: 85%;
     min-width: 845px;
     height: 100%;
+
     .energDivOne {
       display: flex;
       margin: 15px 0px 15px 15px;
+
       .energDivTwo {
         display: flex;
         font-weight: 600;
         color: #9d9d9d;
         // margin-left: 20px;
         width: 100%;
+
         .block {
           display: flex;
           width: 25%;
+
           span {
             line-height: 30px;
             white-space: nowrap;
           }
         }
+
         .pointOfTime {
           display: flex;
           margin: 0 15px;
           width: 75%;
+
           span {
             white-space: nowrap;
             line-height: 30px;
           }
+
           .pointSelect {
             width: 15rem;
             margin-right: 15px;
           }
+
           .clickSelect {
             width: 10rem;
             margin-right: 15px;
@@ -306,21 +223,23 @@ export default defineComponent({
 }
 
 // tab重置样式
-.tabsSizeColor > .el-tabs__header .el-tabs__item {
+.tabsSizeColor>.el-tabs__header .el-tabs__item {
   line-height: 50px;
   height: 50px;
   font-size: 16px;
 }
 
-.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
+.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 {
+
+.el-tabs--card>.el-tabs__header .el-tabs__item,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
   border: none;
 }
 </style>

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

@@ -1,111 +1,48 @@
 <template>
   <div>
     <div style="margin: 0 15px">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        :header-cell-style="headClass"
-        :height="Height"
-      >
-        <el-table-column
-          prop="numCode"
-          label="变量编码"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="numName"
-          label="变量名称"
-          width=""
-        ></el-table-column>
+      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
+        :height="Height">
+        <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 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-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: {
-    Height: String,
-  },
-  setup() {
-    const Update = (row) => {
-      console.log('', row)
-    }
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  Height: String,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [
+    { numCode: '05-01', numName: 'Tom', time: '0', },
+    { numCode: '05-01', numName: 'Tom', },
+  ],
+  tablesRow: [
+    { prop: 'time', label: '00.00', },
+  ],
+})
+const { tableData, tablesRow } = toRefs(state)
 
-    // 表头样式设置
-    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/deviceManage/attribTemplate/index.vue

@@ -2,41 +2,25 @@
   <div class="attribTemplate">
     <div class="attribContent1">
       <div style="display: flex">
-        <el-input
-          placeholder="设备类型"
-          v-model="filterText"
-          class="attContentInput"
-          style="width: 90%"
-        >
+        <el-input placeholder="设备类型" v-model="filterText" class="attContentInput" style="width: 90%">
           <template #suffix>
-            <i class="el-icon-search el-input__icon"></i>
+            <Search el-input__icon />
           </template>
         </el-input>
         <el-button type="success" @click="addItem()">新增</el-button>
       </div>
 
       <div class="attSwitch">
-        <div
-          class="attSwitchOne"
-          :style="data.length - 1 > data.length ? 'border-bottom: 0' : ''"
-          v-for="(data, ind) in attSwitchData"
-          :key="ind"
-          @click="attSwitchOne(ind)"
-        >
+        <div class="attSwitchOne" :style="data.length - 1 > data.length ? 'border-bottom: 0' : ''"
+          v-for="(data, ind) in attSwitchData" :key="ind" @click="attSwitchOne(ind)">
           <div>{{ data.lable }}</div>
           <div>{{ data.value }}</div>
         </div>
       </div>
     </div>
     <div class="attribContent2">
-      <el-tabs
-        v-model="activeName"
-        type="card"
-        @tab-click="handleClick"
-        style="background-color: #fff; height: 100%"
-        class="tabsSizeColor"
-        v-if="activeBool"
-      >
+      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="background-color: #fff; height: 100%"
+        class="tabsSizeColor" v-if="activeBool">
         <el-tab-pane label="模板1" name="first"></el-tab-pane>
         <!-- <el-tab-pane label="视频监测设备" name="second"> </el-tab-pane>
         <el-tab-pane label="通信设备" name="third"> </el-tab-pane>
@@ -45,72 +29,61 @@
     </div>
   </div>
 </template>
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  name: 'attribTemplate',
-  components: {},
-  props: {},
-  data() {
-    return {}
-  },
-  setup() {
-    const attSwitchData = [
-      {
-        id: 'powerEquip',
-        lable: '电力监测设备',
-        value: 1,
-      },
-      {
-        id: 'videoEquip',
-        lable: '视频监测设备',
-        value: 0,
-      },
-      {
-        id: 'communicateEquip',
-        lable: '通信设备',
-        value: 0,
-      },
-      {
-        id: 'channelList',
-        lable: '通道列表',
-        value: 0,
-      },
-    ]
-    return {
-      filterText: ref(''),
-      attSwitchData,
-      activeName:ref('first'),
-      activeBool: ref(true),
-    }
-  },
-  methods: {
-    attSwitchOne(id) {
-      var dom = document.getElementsByClassName('attSwitchOne')
-      var cont = dom[id].getAttribute('style')
-      if (cont != null && cont != '') {
-        dom[id].setAttribute('style', '')
-      } else {
-        this.attSwitchData.map((val, ind) => {
-          val
-          dom[ind].setAttribute('style', '')
-        })
-        dom[id].setAttribute('style', 'background-color: #409eff')
-      }
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  attSwitchData: [
+    {
+      id: 'powerEquip',
+      lable: '电力监测设备',
+      value: 1,
     },
+  ],
+  filterText: '',
 
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
-  },
+  activeName: 'first',
+  activeBool: true,
 })
+const { attSwitchData, filterText, activeName, activeBool } = toRefs(state)
+
+
+function attSwitchOne(id) {
+  var dom = document.getElementsByClassName('attSwitchOne')
+  var cont = dom[id].getAttribute('style')
+  if (cont != null && cont != '') {
+    dom[id].setAttribute('style', '')
+  } else {
+    this.attSwitchData.map((val, ind) => {
+      val
+      dom[ind].setAttribute('style', '')
+    })
+    dom[id].setAttribute('style', 'background-color: #409eff')
+  }
+}
+
+function handleClick(tab, event) {
+  console.log(tab, event)
+}
 </script>
 
 <style lang="scss">
 .attribTemplate {
   display: flex;
   height: calc(100vh - 130px);
+
   // padding: 30px;
   // margin-top: 50px;
   .attribContent1 {
@@ -119,32 +92,39 @@ export default defineComponent({
     height: 100%;
     margin-right: 25px;
     padding: 20px;
+
     .attContentInput {
       width: 9rem;
       margin-right: 15px;
     }
+
     .attSwitch {
       margin-top: 20px;
       width: 100%;
       height: 20px;
       cursor: pointer;
+
       .attSwitchOne {
         display: flex;
         border: 0.5px solid silver;
         padding: 8px;
         font-size: 13px;
+
         div:nth-child(1) {
           width: 100%;
         }
       }
+
       .attSwitchOne:hover {
         background-color: #409eff;
       }
+
       .attSwitchOne:focus {
         background-color: #409eff;
       }
     }
   }
+
   .attribContent2 {
     background-color: #fff;
     width: 80%;
@@ -153,21 +133,23 @@ export default defineComponent({
 }
 
 // tab重置样式
-.tabsSizeColor > .el-tabs__header .el-tabs__item {
+.tabsSizeColor>.el-tabs__header .el-tabs__item {
   line-height: 50px;
   height: 50px;
   font-size: 16px;
 }
 
-.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
+.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 {
+
+.el-tabs--card>.el-tabs__header .el-tabs__item,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
   border: none;
 }
 </style>

src/views/deviceManage/powerEquip/channelList/index.vue

@@ -2,241 +2,174 @@
   <div class="channelList">
     <div class="channelTop">
       <div class="channelTopLeft">
-        <el-input
-          placeholder="搜索通道名称或注册码"
-          v-model="filterText"
-          class="channelTopLeftInput"
-        >
+        <el-input placeholder="搜索通道名称或注册码" v-model="filterText" class="channelTopLeftInput">
           <template #suffix>
-            <i class="el-icon-search el-input__icon"></i>
+            <Search class="el-input__icon" />
           </template>
         </el-input>
-        <el-button
-          class="search-button"
-          icon="el-icon-plus"
-          type="success"
-          @click="Insert()"
-        >
+        <el-button class="search-button" icon="Plus" type="success" @click="Insert()">
           添加通道
         </el-button>
       </div>
     </div>
 
     <div class="channelContent">
-      <el-table
-        :data="
-          tableData.filter(
-            (data) =>
-              !filterText ||
-              data.channelName
-                .toLowerCase()
-                .includes(filterText.toLowerCase()) ||
-              data.regCode.toLowerCase().includes(filterText.toLowerCase())
-          )
-        "
-        border
-        stripe
-        :header-cell-style="headClass"
-        :height="Height"
-      >
-        <el-table-column
-          prop="stationStatus"
-          align="center"
-          label="状态"
-          width="50"
-        >
+      <el-table :data="tableData.filter(
+        (data) =>
+          !filterText ||
+          data.channelName
+            .toLowerCase()
+            .includes(filterText.toLowerCase()) ||
+          data.regCode.toLowerCase().includes(filterText.toLowerCase())
+      )
+        " border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" :height="Height">
+        <el-table-column prop="stationStatus" align="center" label="状态" width="50">
           <template #default="scope">
-            <el-avatar
-              class="status"
-              :style="
-                scope.row.stationStatus == 0
-                  ? 'background-color:red'
-                  : 'background-color:#04F21C'
-              "
-            ></el-avatar>
+            <el-avatar class="status" :style="scope.row.stationStatus == 0
+              ? 'background-color:red'
+              : 'background-color:#04F21C'
+              "></el-avatar>
           </template>
         </el-table-column>
 
-        <el-table-column
-          prop="channelName"
-          label="通信名称"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="netNumber"
-          label="网络卡号"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="netDeadline"
-          label="网络截止时间"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="accessMode"
-          label="接入方式"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="channelIP"
-          label="通道IP:端口号"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="regCode"
-          label="注册码"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="reportingAdd"
-          label="上报地址:端口"
-          align="center"
-          width=""
-        ></el-table-column>
+        <el-table-column prop="channelName" label="通信名称" align="center" width=""></el-table-column>
+        <el-table-column prop="netNumber" label="网络卡号" align="center" width=""></el-table-column>
+        <el-table-column prop="netDeadline" label="网络截止时间" align="center" width=""></el-table-column>
+        <el-table-column prop="accessMode" label="接入方式" align="center" width=""></el-table-column>
+        <el-table-column prop="channelIP" label="通道IP:端口号" align="center" width=""></el-table-column>
+        <el-table-column prop="regCode" label="注册码" align="center" width=""></el-table-column>
+        <el-table-column prop="reportingAdd" label="上报地址:端口" align="center" width=""></el-table-column>
         <el-table-column label="操作" align="center" width="150">
           <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="Details(scope.row)"
-            >
+            <el-button type="text" size="small" style="color: #409eff" @click.prevent="Details(scope.row)">
               详情
             </el-button>
-            <el-button
-              @click="Delete(scope.$index, scope.row)"
-              type="text"
-              size="small"
-              style="color: red"
-            >
+            <el-button @click="Delete(scope.$index, scope.row)" type="text" size="small" style="color: red">
               删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="listPagination">
-        <el-pagination
-          v-model:currentPage="currentPage"
-          :page-sizes="[15, 20, 25, 30]"
-          :page-size="15"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="tableData.length"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          background
-        ></el-pagination>
+        <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="15"
+          layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" background></el-pagination>
       </div>
     </div>
     <div></div>
   </div>
 </template>
-<script>
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-  name: 'powerEquip',
-  components: {},
-  props: {
-    Height: String,
-  },
-  data() {
-    return {
-      deviceNumData: [],
-
-      tableData: [
-        {
-          stationStatus: 0,
-          channelName: '上海美争企业发展有限公司',
-          netNumber: '89860426102070967305',
-          netDeadline: '',
-          accessMode: '拨号',
-          channelIP: '',
-          regCode: 'DA00023997',
-          reportingAdd: '139.196.33.250:2404',
-        },
-        {
-          stationStatus: 1,
-          channelName: '上海美争企业发展有限公司',
-          netNumber: '89860426102070967305',
-          netDeadline: '',
-          accessMode: '拨号',
-          channelIP: '',
-          regCode: 'DA00023997',
-          reportingAdd: '139.196.33.250:2404',
-        },
-      ],
-      activeName: 'powerEquip',
-      filterText: '',
-      currentPage: ref(15),
-    }
-  },
-  methods: {
-    //新增
-    Insert() {
-      console.log('')
-    },
-    // 表头样式设置
-    headClass() {
-      return 'background:#FAFAFA !important;color: black;'
-    },
-    //详情
-    Details(row) {
-      console.log(row)
-    },
-    //删除
-    Delete(ind, row) {
-      console.log(ind, row)
-    },
-    handleSizeChange(val) {
-      console.log(`${val} items per page`)
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  Height: String,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  deviceNumData: [],
+
+  tableData: [
+    {
+      stationStatus: 0,
+      channelName: '上海美争企业发展有限公司',
+      netNumber: '89860426102070967305',
+      netDeadline: '',
+      accessMode: '拨号',
+      channelIP: '',
+      regCode: 'DA00023997',
+      reportingAdd: '139.196.33.250:2404',
     },
-    handleCurrentChange(val) {
-      console.log(`current page: ${val}`)
+    {
+      stationStatus: 1,
+      channelName: '上海美争企业发展有限公司',
+      netNumber: '89860426102070967305',
+      netDeadline: '',
+      accessMode: '拨号',
+      channelIP: '',
+      regCode: 'DA00023997',
+      reportingAdd: '139.196.33.250:2404',
     },
-  },
+  ],
+  activeName: 'powerEquip',
+  filterText: '',
+  currentPage: 15,
 })
+const { deviceNumData, tableData, activeName, filterText, currentPage } = toRefs(state)
+
+
+//新增
+function Insert() {
+  console.log('')
+}
+//详情
+function Details(row) {
+  console.log(row)
+}
+//删除
+function Delete(ind, row) {
+  console.log(ind, row)
+}
+function handleSizeChange(val) {
+  console.log(`${val} items per page`)
+}
+function handleCurrentChange(val) {
+  console.log(`current page: ${val}`)
+}
 </script>
 
 <style lang="scss" scoped>
 .channelList {
   margin: 15px;
+
   //顶部左侧样式
   .channelTop {
     display: flex;
     height: 32px;
     line-height: 32px;
+
     .channelTopLeft {
       width: 70%;
+
       .goBack {
         margin-right: 15px;
       }
+
       .channelTopLeftTitle {
         font-size: 14px;
         margin-right: 10px;
       }
+
       .channelTopLeftInput {
         width: 15rem;
       }
+
       .el-input__icon {
         color: #409eff;
       }
+
       .el-input__inner:hover {
         border-color: #409eff;
       }
+
       .el-input__inner:focus {
         border-color: #409eff;
       }
+
       .search-button {
         margin-left: 1rem;
       }
     }
   }
+
   .channelContent {
     margin-top: 15px;
   }

src/views/deviceManage/powerEquip/communicateEquip/index.vue

@@ -8,9 +8,6 @@
         </el-select> -->
         <el-input placeholder="搜索设备名" v-model="filterText" class="comTopLeftInput" style="width: 150px"
           :disabled="store.state.authorities.indexOf('查询') == -1">
-          <!-- <template #suffix>
-            <i class="el-icon-search el-input__icon"></i>
-          </template> -->
         </el-input>
 
         <el-button type="primary" icon="Search" class="search-button" @click="Select()"
@@ -60,8 +57,8 @@
               :disabled="store.state.authorities.indexOf('修改') == -1" link>
               编辑
             </el-button>
-            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red"
-              title="确定删除?" @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
+            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="InfoFilled" icon-color="red" title="确定删除?"
+              @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
               <template #reference>
                 <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
                   删除

src/views/deviceManage/powerEquip/monitoring/listDialog.vue

@@ -8,7 +8,7 @@
         <el-radio-button label="state" :disabled="store.state.authorities.indexOf('查询') == -1">状态量</el-radio-button>
         <el-radio-button label="parameter" :disabled="store.state.authorities.indexOf('查询') == -1">参数量</el-radio-button>
         <!-- <div style="margin-left: 10px">
-          <el-button icon="el-icon-plus" type="success">新增</el-button>
+          <el-button icon="Plus" type="success">新增</el-button>
         </div> -->
       </el-radio-group>
 

src/views/login/JcRange.vue

@@ -1,90 +1,90 @@
 <template>
-  <div class="jc-component__range">
-    <div class="jc-range" :class="rangeStatus?'success':''">
-      <i @mousedown="rangeMove" :class="rangeStatus?successIcon:startIcon"></i>
-      {{rangeStatus?successText:startText}}
-    </div>
-  </div>
+	<div class="jc-component__range">
+		<div class="jc-range" :class="rangeStatus ? 'success' : ''">
+			<i @mousedown="rangeMove" :class="rangeStatus ? successIcon : startIcon"></i>
+			{{ rangeStatus ? successText : startText }}
+		</div>
+	</div>
 </template>
 <script>
 export default {
-  props: {
-    // 成功之后的函数
-    // successFun: {
-    //   type: Function
-    // },
-    //成功图标
-    successIcon: {
-      type: String,
-      default: "el-icon-success"
-    },
-    //成功文字
-    successText: {
-      type: String,
-      default: "验证成功"
-    },
-    //开始的图标
-    startIcon: {
-      type: String,
-      default: "el-icon-d-arrow-right"
-    },
-    //开始的文字
-    startText: {
-      type: String,
-      default: "拖动滑块到最右边"
-    },
-    //失败之后的函数
-    // errorFun: {
-    //   type: Function
-    // },
-    //或者用值来进行监听
-    status: {
-      type: String
-    }
-  },
-  name: "Silder",
-  data() {
-    return {
-        rangeStatus:'',
-        
-    };
-  },
-  methods: {
-    rangeMove(e){
+	props: {
+		// 成功之后的函数
+		// successFun: {
+		//   type: Function
+		// },
+		//成功图标
+		successIcon: {
+			type: String,
+			default: "el-icon-success"
+		},
+		//成功文字
+		successText: {
+			type: String,
+			default: "验证成功"
+		},
+		//开始的图标
+		startIcon: {
+			type: String,
+			default: "el-icon-d-arrow-right"
+		},
+		//开始的文字
+		startText: {
+			type: String,
+			default: "拖动滑块到最右边"
+		},
+		//失败之后的函数
+		// errorFun: {
+		//   type: Function
+		// },
+		//或者用值来进行监听
+		status: {
+			type: String
+		}
+	},
+	name: "Silder",
+	data() {
+		return {
+			rangeStatus: '',
+
+		};
+	},
+	methods: {
+		rangeMove(e) {
 			let ele = e.target;
 			let startX = e.clientX;
 			let eleWidth = ele.offsetWidth;
-			let parentWidth =  ele.parentElement.offsetWidth;
+			let parentWidth = ele.parentElement.offsetWidth;
 			let MaxX = parentWidth - eleWidth;
-			if(this.rangeStatus){//不运行
+			if (this.rangeStatus) {//不运行
 				return false;
 			}
 			document.onmousemove = (e) => {
 				let endX = e.clientX;
 				this.disX = endX - startX;
-				if(this.disX<=0){
+				if (this.disX <= 0) {
 					this.disX = 0;
 				}
-				if(this.disX>=MaxX-eleWidth){//减去滑块的宽度,体验效果更好
+				if (this.disX >= MaxX - eleWidth) {//减去滑块的宽度,体验效果更好
 					this.disX = MaxX;
 				}
 				ele.style.transition = '.1s all';
-				ele.style.transform = 'translateX('+this.disX+'px)';
+				ele.style.transform = 'translateX(' + this.disX + 'px)';
 				e.preventDefault();
 			}
-			document.onmouseup = ()=> {
-				
-				if(this.disX !== MaxX){
+			document.onmouseup = () => {
+
+				if (this.disX !== MaxX) {
 					ele.style.transition = '.5s all';
 					ele.style.transform = 'translateX(0)';
 					this.rangeStatus = false;
 					//执行失败的函数
 
-					 this.$emit('errorFun')
+					this.$emit('errorFun')
 					// this.errorFun && this.errorFun();
-				}else{
+				} else {
 					this.rangeStatus = true;
-					if(this.status){
+					if (this.status) {
 						this.$parent[this.status] = true;
 					}
 					//执行成功的函数
@@ -95,12 +95,12 @@ export default {
 				document.onmouseup = null;
 			}
 		}
-  
-  }
+
+	}
 };
 </script>
 <style scoped>
-    .jc-range{
+.jc-range {
 	background-color: #CCC;
 	position: relative;
 	transition: 1s all;
@@ -109,12 +109,15 @@ export default {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	height: 45px; /*no*/
+	height: 45px;
+	/*no*/
 }
-.jc-range i{
+
+.jc-range i {
 	position: absolute;
 	left: 0;
-	width: 60px;/*no*/
+	width: 60px;
+	/*no*/
 	height: 100%;
 	color: #919191;
 	background-color: #fff;
@@ -124,11 +127,12 @@ export default {
 	justify-content: center;
 	align-items: center;
 }
-.jc-range.success{
+
+.jc-range.success {
 	background-color: #7AC23C;
 	color: #fff;
 }
-.jc-range.success i{
+
+.jc-range.success i {
 	color: #7AC23C;
-}
-</style>
+}</style>

src/views/login/index.vue

@@ -16,11 +16,7 @@
               </a-input>
             </a-form-item>
             <a-form-item>
-              <a-input
-                v-model:value="form.password"
-                type="password"
-                placeholder="Password"
-              >
+              <a-input v-model:value="form.password" type="password" placeholder="Password">
                 <template v-slot:prefix>
                   <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
                 </template>
@@ -28,12 +24,8 @@
             </a-form-item>
 
             <a-form-item>
-              <a-button
-                type="primary"
-                html-type="submit"
-                :loading="loading"
-                :disabled="form.username === '' || form.password === ''"
-              >
+              <a-button type="primary" html-type="submit" :loading="loading"
+                :disabled="form.username === '' || form.password === ''">
                 登录
               </a-button>
             </a-form-item>
@@ -44,107 +36,118 @@
   </div>
 </template>
 <script>
-  import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
-  import { message } from 'ant-design-vue'
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
 
-  export default {
-    name: 'Login',
-    components: { UserOutlined, LockOutlined },
-    data() {
-      return {
-        form: {
-          username: '',
-          password: '',
-        },
-        loading: false,
-        redirect: undefined,
-      }
-    },
-    computed: {},
-    watch: {
-      $route: {
-        handler(route) {
-          this.redirect = (route.query && route.query.redirect) || '/'
-        },
-        immediate: true,
+export default {
+  name: 'Login',
+  components: { UserOutlined, LockOutlined },
+  data() {
+    return {
+      form: {
+        username: '',
+        password: '',
       },
+      loading: false,
+      redirect: undefined,
+    }
+  },
+  computed: {},
+  watch: {
+    $route: {
+      handler(route) {
+        this.redirect = (route.query && route.query.redirect) || '/'
+      },
+      immediate: true,
     },
-    mounted() {
-      this.form.username = '' //admin
-      this.form.password = '' //admin123
+  },
+  mounted() {
+    this.form.username = '' //admin
+    this.form.password = '' //admin123
 
-      if (this.$route.query.userName === 'admin') {
-        this.form.username = 'admin'
-        this.handleSubmit()
-      }
+    if (this.$route.query.userName === 'admin') {
+      this.form.username = 'admin'
+      this.handleSubmit()
+    }
+  },
+  methods: {
+    handleRoute() {
+      const validRoutes = ['/', '/404', '/403'] // 根据您的路由配置调整
+      return validRoutes.includes(this.redirect) ? this.redirect : '/'
     },
-    methods: {
-      handleRoute() {
-        const validRoutes = ['/', '/404', '/403'] // 根据您的路由配置调整
-        return validRoutes.includes(this.redirect) ? this.redirect : '/'
-      },
-      async handleSubmit() {
-        try {
-          this.loading = true
-          await this.$store.dispatch('user/login', this.form) // 登录请求
-          await this.$router.push(this.handleRoute()) // 登录成功，跳转到目标页面
-          this.loading = false
-        } catch (error) {
-          message.error(error.message || '登录失败，请检查用户名和密码')
-          this.loading = false
-        }
-      },
+    async handleSubmit() {
+      try {
+        this.loading = true
+        await this.$store.dispatch('user/login', this.form) // 登录请求
+        await this.$router.push(this.handleRoute()) // 登录成功，跳转到目标页面
+        this.loading = false
+      } catch (error) {
+        message.error(error.message || '登录失败，请检查用户名和密码')
+        this.loading = false
+      }
     },
-  }
+  },
+}
 </script>
 <style lang="scss">
-  .login-container {
+.login-container {
+  width: 100%;
+  height: 100vh;
+  background: url('@/assets/login_images/login_background.png');
+  background-size: cover;
+
+  &-form {
+    width: calc(100% - 40px);
+    min-width: 360px;
+    height: 440px;
+    padding: 4vh;
+    margin-top: calc((100vh - 380px) / 2);
+    margin-right: 20px;
+    margin-left: 20px;
+    background: url('@/assets/login_images/login_form.png');
+    background-size: 100% 100%;
+    border-radius: 10px;
+    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
+  }
+
+  &-hello {
+    font-size: 32px;
+    color: #fff;
+  }
+
+  &-title {
+    margin-bottom: 30px;
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &-tips {
+    position: fixed;
+    bottom: $vab-margin;
     width: 100%;
-    height: 100vh;
-    background: url('@/assets/login_images/login_background.png');
-    background-size: cover;
-    &-form {
-      width: calc(100% - 40px);
-      min-width: 360px;
-      height: 440px;
-      padding: 4vh;
-      margin-top: calc((100vh - 380px) / 2);
-      margin-right: 20px;
-      margin-left: 20px;
-      background: url('@/assets/login_images/login_form.png');
-      background-size: 100% 100%;
-      border-radius: 10px;
-      box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
-    }
-    &-hello {
-      font-size: 32px;
-      color: #fff;
-    }
-    &-title {
-      margin-bottom: 30px;
-      font-size: 20px;
-      color: #fff;
-    }
-    &-tips {
-      position: fixed;
-      bottom: $vab-margin;
-      width: 100%;
-      height: 40px;
-      color: rgba(255, 255, 255, 0.856);
-      text-align: center;
-    }
-    .ant-col {
-      width: 100%;
-      padding: 0 10px 0 10px;
-    }
-    .ant-input {
-      height: 35px;
-    }
-    .ant-btn {
-      width: 100%;
-      height: 45px;
-      border-radius: 99px;
-    }
+    height: 40px;
+    color: rgba(255, 255, 255, 0.856);
+    text-align: center;
+  }
+
+  .ant-col {
+    width: 100%;
+    padding: 0 10px 0 10px;
+  }
+
+  .ant-input {
+    height: 35px;
+  }
+
+  .ant-btn {
+    width: 100%;
+    height: 45px;
+    border-radius: 99px;
+  }
+
+  .ant-btn-primary:disabled {
+    color: #d9d9d9;
   }
+}
 </style>
 l

src/views/monthReport/index.vue

@@ -2,37 +2,20 @@
   <div class="monthReport">
     <div class="monthContent1" v-if="modleBool">
       <div style="display: flex">
-        <el-input
-          placeholder="输入站点名称或关键字"
-          v-model="filterText"
-          class="attContentInput"
-          clearable
-        >
+        <el-input placeholder="输入站点名称或关键字" v-model="filterText" class="attContentInput" clearable>
           <template #suffix>
-            <i class="el-icon-search el-input__icon"></i>
+            <Search class="el-input__icon" />
           </template>
         </el-input>
       </div>
 
       <div class="monthSwitch">
-        <el-tree
-          class="monthTree"
-          ref="tree"
-          :data="store.state.siteList"
-          show-checkbox
-          node-key="id"
-          :props="defaultProps"
-          :filter-node-method="filterNode"
-        >
-          <template #default="{ node }">
+        <el-tree class="monthTree" ref="tree" :data="store.state.siteList" show-checkbox node-key="id"
+          :props="defaultProps" :filter-node-method="filterNode">
+          <template #default="scope">
             <span class="custom-tree-node">
-              <el-tooltip
-                class="item"
-                effect="dark"
-                :content="node.label"
-                placement="top"
-              >
-                <span>{{ node.label }}</span>
+              <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
+                <span>{{ scope.row.label }}</span>
               </el-tooltip>
             </span>
           </template>
@@ -40,13 +23,8 @@
       </div>
     </div>
     <div class="monthContent2" v-if="modleBool">
-      <el-tabs
-        v-model="activeName"
-        type="card"
-        @tab-click="handleClick"
-        style="background-color: #fff; height: 100%"
-        class="tabsSizeColor"
-      >
+      <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>
@@ -56,112 +34,80 @@
       </el-tabs>
     </div>
 
-    <report-Model
-      v-if="!modleBool"
-      style="width: 100%"
-      @modle="modleAll"
-    ></report-Model>
+    <report-Model v-if="!modleBool" style="width: 100%" @modle="modleAll"></report-Model>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watch } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
 import baseicTable from './tables/basicTable.vue'
 import deviationTable from './tables/deviationTable.vue'
 import reportModel from './reportModel.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tree: null,
+  filterText: "",
+  modleBool: true,
+  activeName: 'monthList',
+  defaultProps: {
+    children: 'children',
+    id: 'id',
+    label: 'siteName',
+  },
+})
+const { tree, filterText, modleBool, activeName, defaultProps } = toRefs(state)
 
-export default defineComponent({
-  name: 'monthReport',
-  components: { baseicTable, deviationTable, reportModel },
-  props: {},
-  setup() {
-    const store = useStore()
-    const tree = ref(null)
-    const filterText = ref('')
-
-    const handleClick = (tab, event) => {
-      console.log(tab, event)
-    }
+function handleClick(tab, event) {
+  console.log(tab, event)
+}
 
-    const modleBool = ref(true)
-    const modleAll = (value) => {
-      modleBool.value = value.modleBool
-    }
+function modleAll(value) {
+  modleBool.value = value.modleBool
+}
 
-    //tree 树形控件处理方法
-    const filterNode = (value, data) => {
-      if (!value) return true
-      return data.siteName.indexOf(value) !== -1
-    }
-    // 异步任务 用于给tree传值
-    const writeValue = (val) => {
-       val
-       console.log('tree.value')
-      console.log(tree.value)
-      return tree.value.filter(val)
-    }
-    // 定义 watch 监听
-    watch(
-      filterText,
-      (newCount, old, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        let id = writeValue(newCount, old)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
-      },
-      // watch 刚被创建的时候不执行
-      { lazy: true }
-    )
-    
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
-    return {
-      filterNode,
-      headClass,
-      modleAll,
-      handleClick, //tabs切换事件
-
-      modleBool,
-      store,
-      tree,
-      filterText,
-      activeName: ref('monthList'),
-      data: [
-        {
-          id: 1,
-          label: '所有站点',
-          children: [
-            {
-              id: 4,
-              label: '分组1',
-            },
-            {
-              id: 4,
-              label: '分组2',
-            },
-            {
-              id: 4,
-              label: '分组3',
-            },
-          ],
-        },
-      ],
-      defaultProps: {
-        children: 'children',
-        id: 'id',
-        label: 'siteName',
-      },
-    }
+//tree 树形控件处理方法
+function filterNode(value, data) {
+  if (!value) return true
+  return data.siteName.indexOf(value) !== -1
+}
+// 异步任务 用于给tree传值
+const writeValue = (val) => {
+  val
+  console.log('tree.value')
+  console.log(tree.value)
+  return tree.value.filter(val)
+}
+// 定义 watch 监听
+watch(
+  filterText,
+  (newCount, old, clear) => {
+    // 执行异步任务，并得到关闭异步任务的 id
+    let id = writeValue(newCount, old)
+    // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+    clear(() => clearTimeout(id))
   },
-})
+  // watch 刚被创建的时候不执行
+  { lazy: true }
+)
+
 </script>
 
 <style lang="scss">
 .monthReport {
   display: flex;
   height: calc(100vh - 130px);
+
   // padding: 30px;
   // margin-top: 50px;
   .monthContent1 {
@@ -171,6 +117,7 @@ export default defineComponent({
     margin-right: 25px;
     padding: 20px;
     min-width: 200px;
+
     .monthSwitch {
       margin-top: 20px;
       width: 100%;
@@ -178,11 +125,13 @@ export default defineComponent({
       cursor: pointer;
     }
   }
+
   .monthContent2 {
     background-color: #fff;
     width: 85%;
     min-width: 845px;
     height: 100%;
+
     .basicHeader {
       margin-left: 15px;
       margin-top: 15px;
@@ -193,21 +142,23 @@ export default defineComponent({
 }
 
 // tab重置样式
-.tabsSizeColor > .el-tabs__header .el-tabs__item {
+.tabsSizeColor>.el-tabs__header .el-tabs__item {
   line-height: 50px;
   height: 50px;
   font-size: 16px;
 }
 
-.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
+.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 {
+
+.el-tabs--card>.el-tabs__header .el-tabs__item,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
   border: none;
 }
 </style>
@@ -218,6 +169,7 @@ export default defineComponent({
   height: 76vh;
   overflow-y: auto;
 }
+
 .monthTree::-webkit-scrollbar {
   display: none;
 }

src/views/monthReport/tables/basicTable.vue

@@ -2,55 +2,22 @@
   <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-date-picker v-model="timeValue" type="month" placeholder="请选择时间" style="margin:0 15px"></el-date-picker>
+      <el-button class="search-button" 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 :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
+        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 type="primary" size="small" @click.prevent="preview(scope.row)" link>
               预览
             </el-button>
-            <el-button
-              @click="download(scope.$index, scope.row)"
-              type="text"
-              size="small"
-              style="color: #409eff"
-            >
+            <el-button type="primary" size="small" @click="download(scope.$index, scope.row)" link>
               下载
             </el-button>
           </template>
@@ -59,49 +26,47 @@
     </div>
   </div>
 </template>
-<script>
-// import { useStore } from "vuex";
-import { defineComponent, ref } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  timeValue: '',
+  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',
+    },
+  ],
+})
+const { timeValue, tableData } = toRefs(state)
 
-export default defineComponent({
-  name: 'basicTable',
-  components: {},
-  props: {},
-  setup() {
-    const Touch = () => {
-      console.log('')
-    }
+const Touch = () => {
+  console.log('')
+}
 
-    const download = () => {
-      console.log('')
-    }
+const download = () => {
+  console.log('')
+}
 
-    const preview = () => {
-      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/planOutage/dialogComponent.vue

@@ -1,44 +1,17 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="showDialog"
-    width="640px"
-    @open="open()"
-    @close="closeDialog(0)"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline"
-      label-width="150px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="640px" @close="closeDialog(0)">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
       <el-form-item label="站点:" prop="siteId">
-        <el-select
-          v-model="form.siteId"
-          placeholder="请选择"
-          style="width: 240px"
-          :disabled="dialogTitle === '编辑'"
-        >
-          <el-option
-            v-for="item in store.state.siteList"
-            :key="item.id"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="form.siteId" placeholder="请选择" style="width: 240px" :disabled="dialogTitle === '编辑'">
+          <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+            :value="item.id"></el-option>
         </el-select>
       </el-form-item>
 
       <el-form-item label="开始/结束停电时间:" prop="time">
-        <el-date-picker
-          style="width: 330px"
-          v-model="form.time"
-          type="datetimerange"
-          :disabledDate="pickerEndDate"
-          start-placeholder="Start Date"
-          end-placeholder="End Date"
-          :disabled="form.type === 2 || form.type === 3"
-        ></el-date-picker>
+        <el-date-picker style="width: 330px" v-model="form.time" type="datetimerange" :disabledDate="pickerEndDate"
+          start-placeholder="Start Date" end-placeholder="End Date"
+          :disabled="form.type === 2 || form.type === 3"></el-date-picker>
       </el-form-item>
 
       <el-form-item label="联系方式:" prop="phone">
@@ -48,236 +21,134 @@
         <el-input v-model="form.contacts"></el-input>
       </el-form-item>
       <el-form-item label="类型:" prop="planType">
-        <el-select
-          v-model="form.planType"
-          placeholder="请选择"
-          style="width: 240px"
-        >
+        <el-select v-model="form.planType" placeholder="请选择" style="width: 240px">
           <el-option label="计划检修停电" :value="1"></el-option>
           <el-option label="计划施工停电" :value="2"></el-option>
           <el-option label="客户申请停电" :value="3"></el-option>
         </el-select>
       </el-form-item>
 
-      <br />
-      <br />
-      <br />
-      <div style="text-align: right">
+      <div style="margin-top:30px;text-align: right">
         <el-button @click="closeDialog(0)">取消</el-button>
         <el-button type="primary" @click="submitForm()">保存</el-button>
       </div>
     </el-form>
   </el-dialog>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
+import { parseTime, validatorPhone } from '@/utils'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/planOutage/index'
-import { ElMessage } from 'element-plus'
-import { validatorPhone } from '@/utils'
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    show_Dialog: Boolean,
-    dialogTitle: String,
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    siteId: [
+      { required: true, message: '请选择站点', trigger: 'blur' },
+    ],
+    time: [
+      { required: true, message: '请选择起始停电时间', trigger: 'change' },
+    ],
+    phone: [
+      { required: true, message: '请输入电话号码', trigger: 'blur', },
+      { validator: validatorPhone, message: '输入的电话号码不正确', trigger: 'blur', },
+    ],
+    contacts: [
+      { required: true, message: '请输入联系人', trigger: 'blur' },
+      { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur', },
+    ],
+    planType: [
+      { required: true, message: '请选择计划类型', trigger: 'blur' },
+    ],
   },
-  setup(props, { emit }) {
-    const store = useStore()
-    const beginTime = ref('')
-    const showDialog = ref(false)
-    const form = ref([])
-    const formInfo = ref(null)
+})
+const { form, rules } = toRefs(state)
+
+// 保存操作
+const submitForm = () => {
+  formInfo.value.validate((valid) => {
+    if (!valid) {
+      console.log('error submit!!')
+      return false
+    }
 
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
+    var timeType = typeof form.value.time[0]
+    if (timeType == 'object') {
+      store.commit('TimeAll_function', form.value.time)
+      const time = store.state.Time_Data
+      form.value.startTime = time[0]
+      form.value.endTime = time[1]
+    } else {
+      form.value.startTime = form.value.time[0]
+      form.value.startTime = form.value.time[1]
     }
 
-    // 保存操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          var timeType = typeof form.value.time[0]
-          if (timeType == 'object') {
-            store.commit('TimeAll_function', form.value.time)
-            const time = store.state.Time_Data
-            form.value.startTime = time[0]
-            form.value.endTime = time[1]
-          } else {
-            form.value.startTime = form.value.time[0]
-            form.value.startTime = form.value.time[1]
-          }
-          if (props.dialogTitle === '新增') {
-            api.plannedOutageAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          } else {
-            api.plannedOutageUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          }
+    if (dialogTitle.value === '新增') {
+      api.plannedOutageAdd(form.value).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '新增成功',
+            type: 'success',
+          })
+          closeDialog()
         } else {
-          console.log('error submit!!')
-          return false
+          ElMessage.error(requset.msg)
+        }
+      })
+    } else {
+      api.plannedOutageUpdate(form.value).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '修改成功',
+            type: 'success',
+          })
+          closeDialog()
+        } else {
+          ElMessage.error(requset.msg)
         }
       })
     }
+  })
+}
 
-    const open = () => {
-      form.value = props.itemInfo
-    }
-
-    // 关闭弹框
-    const closeDialog = (flag) => {
-      resetForm()
-      showDialog.value = false
-      emit('closeDialog', flag)
-    }
-
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      showDialog.value = props.show_Dialog
-    })
-
-    //禁止选择以前的时间
-    const pickerEndDate = (time) => {
-      const timeRange = 1 * 24 * 60 * 60 * 1000
-
-      return time.getTime() <= Date.now() - timeRange * 1
-    }
-    /**
-     * 手机号校验
-     */
-    // var validatorPhone = function (rule, value, callback) {
-    //   if (value === '') {
-    //     callback(new Error('手机号不能为空'))
-    //   } else if (!/^1\d{10}$/.test(value)) {
-    //     callback(new Error('手机号格式错误'))
-    //   } else {
-    //     callback()
-    //   }
-    // }
-    return {
-      pickerEndDate,
-      roleValid,
-      submitForm,
-      closeDialog,
-      open,
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  form.value = event.tableItem
+  dialogVisible.value = true
+}
 
-      store,
-      beginTime,
-      showDialog,
+// 关闭弹框
+function closeDialog(flag) {
+  formInfo.value.resetFields()
+  form.value = {}
+  dialogVisible.value = false
+}
 
-      checked: true,
-      form,
-      formInfo,
-      options: [
-        {
-          value: '选项1',
-          label: '站点一',
-        },
-        {
-          value: '选项2',
-          label: '站点二',
-        },
-        {
-          value: '选项3',
-          label: '站点三',
-        },
-        {
-          value: '选项4',
-          label: '站点四',
-        },
-        {
-          value: '选项5',
-          label: '站点五',
-        },
-      ],
+//禁止选择以前的时间
+const pickerEndDate = (time) => {
+  const timeRange = 1 * 24 * 60 * 60 * 1000
+  return time.getTime() <= Date.now() - timeRange * 1
+}
 
-      rules: {
-        siteId: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请选择站点', trigger: 'blur' },
-        ],
-        time: [
-          { required: true, message: '请选择起始停电时间', trigger: 'change' },
-        ],
-        // startTime: [
-        //   { required: true, message: '请选择开始停电时间', trigger: 'blur' },
-        // ],
-        // endTime: [
-        //   { required: true, message: '请选择结束停电时间', trigger: 'change' },
-        // ],
-        // phone: [
-        //   {
-        //     required: true,
-        //     message: '请输入电话号码',
-        //     trigger: 'blur',
-        //   },
-        //   {
-        //     validator: validatorPhone,
-        //     message: '输入的电话号码不正确',
-        //   },
-        // ],
-        phone: [
-          {
-            required: true,
-            message: '请输入电话号码',
-            trigger: 'blur',
-          },
-          {
-            validator: validatorPhone,
-            message: '输入的电话号码不正确',
-            trigger: 'blur',
-          },
-        ],
-        contacts: [
-          { required: true, message: '请输入联系人', trigger: 'blur' },
-           {
-            min: 1,
-            max: 10,
-            message: '长度在 1 到 10 个字符',
-            trigger: 'blur',
-          },
-        ],
-        planType: [
-          { required: true, message: '请选择计划类型', trigger: 'blur' },
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">
@@ -292,13 +163,13 @@ export default defineComponent({
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 100px;
 }
+
 .demo-form-inline .el-form-item:not(.user-layout .el-form-item) {
   margin: 0 auto 20px 55px;
 }
 </style>
-<style>
-
-</style>
+<style></style>

src/views/planOutage/index.vue

@@ -2,107 +2,68 @@
   <div class="app-container">
     <!-- 筛选start -->
     <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <a class="" style="margin-right: 30px">计划停电列表</a>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()" :disabled="store.state.authorities.indexOf('新增')==-1">
-            新增
-          </el-button>
-        </div>
-
-        <div style="margin-top: 20px">
-          <div class="filter-item planOutage">
-            选择时间范围：
-            <el-date-picker
-              v-model="dateTime"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: auto"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
-          </div>
-          <div class="filter-item">
-            状态:
-            <el-select
-              v-model="region"
-              placeholder="请选择"
-              style="width: 200px"
-              clearable
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option label="未执行" :value="1"></el-option>
-              <el-option label="执行中" :value="2"></el-option>
-              <el-option label="已执行" :value="3"></el-option>
-            </el-select>
-          </div>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            @click="Select()"
-            class="search-button"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
-            搜索
-          </el-button>
-        </div>
+      <div class="filter-item">
+        <span class="title" style="margin-right: 30px">计划停电列表</span>
+        <el-button icon="Plus" type="success" @click="addItem()" :disabled="store.state.authorities.indexOf('新增') == -1">
+          新增
+        </el-button>
       </div>
 
       <div class="right">
-        <el-button type="primary"  @click="DataReportExport()" :disabled="store.state.authorities.indexOf('导出')==-1">导出</el-button>
+        <el-button type="primary" @click="DataReportExport()"
+          :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
+      </div>
+    </div>
+
+    <div class="filter-container mb-10" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item">
+        <span class="title">选择时间范围：</span>
+        <el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+          end-placeholder="结束日期" style="width: auto"
+          :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
+      </div>
+
+      <div class="filter-item">
+        <span class="title">状态：</span>
+        <el-select v-model="region" placeholder="请选择" style="width: 200px" clearable
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option label="未执行" :value="1"></el-option>
+          <el-option label="执行中" :value="2"></el-option>
+          <el-option label="已执行" :value="3"></el-option>
+        </el-select>
       </div>
+
+      <el-button type="primary" icon="Search" @click="Select()" class="search-button"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
     </div>
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
+    <el-table :data="tableData" border stripe>
       <el-table-column type="index" label="序号" width="50px"></el-table-column>
-      <el-table-column
-        prop="siteName"
-        label="站点名称"
-          min-width="160px"
-      ></el-table-column>
-      <el-table-column
-        prop="startTime"
-        label="开始停电时间"
-        min-width="155px"
-      ></el-table-column>
-      <el-table-column
-        prop="endTime"
-        label="结束停电时间"
-        min-width="155px"
-      ></el-table-column>
-      <el-table-column
-        prop="createTime"
-        label="提交时间"
-        min-width="155px"
-      ></el-table-column>
-      <el-table-column prop="creator" label="提交人"  min-width="110px"></el-table-column>
-      <el-table-column prop="contacts" label="联系人"  min-width="110px"></el-table-column>
-      <el-table-column prop="phone" label="联系方式"  min-width="110px"></el-table-column>
+      <el-table-column prop="siteName" label="站点名称" min-width="160px"></el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" min-width="155px"></el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" min-width="155px"></el-table-column>
+      <el-table-column prop="createTime" label="提交时间" min-width="155px"></el-table-column>
+      <el-table-column prop="creator" label="提交人" min-width="110px"></el-table-column>
+      <el-table-column prop="contacts" label="联系人" min-width="110px"></el-table-column>
+      <el-table-column prop="phone" label="联系方式" min-width="110px"></el-table-column>
       <el-table-column prop="type" label="状态" width="">
         <template #default="scope">
-          <span
-            :style="{
-              color:
-                scope.row.type == 3
-                  ? '#8DCF6E'
-                  : scope.row.type === 1
+          <span :style="{
+            color:
+              scope.row.type == 3
+                ? '#8DCF6E'
+                : scope.row.type === 1
                   ? '#FF747B'
                   : '#5c88fa',
-            }"
-          >
+          }">
             {{
               scope.row.type === 1
-                ? '未执行'
-                : scope.row.type === 2
+              ? '未执行'
+              : scope.row.type === 2
                 ? '执行中'
                 : '已执行'
             }}
@@ -111,25 +72,14 @@
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-            :disabled="store.state.authorities.indexOf('修改')==-1"
-          >
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1" link>
             编辑
           </el-button>
-          <el-popconfirm
-            confirm-button-text="是"
-            cancel-button-text="否"
-            icon="el-icon-info"
-            icon-color="red"
-            title="确定删除?"
-            @confirm="handleDelete(scope.row)"
-            @cancel="cancelEvent"
-          >
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="info" icon-color="red" title="确定删除?"
+            @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
             <template #reference>
-              <el-button type="text" size="small" class="delete-text" :disabled="store.state.authorities.indexOf('删除')==-1">
+              <el-button type="danger" size="small" :disabled="store.state.authorities.indexOf('删除') == -1" link>
                 删除
               </el-button>
             </template>
@@ -141,254 +91,167 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-          v-model:currentPage="currentPage"
-          :page-sizes="[15, 20, 25, 30]"
-          :page-size="pageSize"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="total"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          background
-        ></el-pagination>
+      <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" background></el-pagination>
     </div>
 
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-      :show_Dialog="showDialog"
-    ></dialog-component>
+    <dialog-component ref="dialogComponentRef" @handleSelect="Select()"></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref } from 'vue'
-import DialogComponent from './dialogComponent'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/planOutage/index'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'VariableList',
-
-  components: { DialogComponent },
-  setup() {
-    const store = useStore()
-
-    const tableItem = ref()
-    const dialogTitle = ref('')
-    const showDialog = ref(false)
-
-    const tableData = ref()
-    const currentPage = ref(1)
-    const pageSize = ref(15)
-    const total = ref(0)
-
-    // const dateTime = ref([
-    //   new Date(2021, 8, 10, 10, 10),
-    //   new Date(2021, 10, 11, 10, 10),
-    // ])
-     const dateTime = ref('')
-    const select = ref(1)
-
-    const tabPosition = ref('one')
-    const input = ref('')
-    const region = ref()
+/*----------------------------------组件引入-----------------------------------*/
+import DialogComponent from './dialogComponent'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [],
+  total: 0,
+  pageSize: 15,
+  currentPage: 1,
+  dateTime: [],
+  region: "",
+})
+const { tableData, total, pageSize, currentPage, dateTime, region } = toRefs(state)
 
-    // 添加操作
-    const addItem = () => {
-      tableItem.value = {
-        siteId: '',
-        time: ['', ''],
-        startTime: '',
-        endTime: '',
-        phone: '',
-        contacts: '',
-        planType: '',
-        type: '',
-      }
-      dialogTitle.value = '新增'
-      showDialog.value = true
-    }
-    // 编辑操作
-    const editRow = (row) => {
-      console.log(row)
-      tableItem.value = {
-        id: row.id,
-        siteId: row.siteId,
-        time: [row.startTime, row.endTime],
-        startTime: row.startTime,
-        endTime: row.endTime,
-        phone: row.phone,
-        contacts: row.contacts,
-        planType: row.planType,
-        type: row.type,
-      }
-      dialogTitle.value = '编辑'
-      showDialog.value = true
+// 添加操作
+function addItem() {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '新增',
+    tableItem: {
+      siteId: '',
+      time: ['', ''],
+      startTime: '',
+      endTime: '',
+      phone: '',
+      contacts: '',
+      planType: '',
+      type: '',
     }
+  })
+}
 
-    // 关闭操作
-    const closeDialog = (flag) => {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData()
-      }
-      showDialog.value = false
-      Select()
+// 编辑操作
+function editRow(row) {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '编辑',
+    tableItem: {
+      id: row.id,
+      siteId: row.siteId,
+      time: [row.startTime, row.endTime],
+      startTime: row.startTime,
+      endTime: row.endTime,
+      phone: row.phone,
+      contacts: row.contacts,
+      planType: row.planType,
+      type: row.type,
     }
+  })
+}
 
-    //删除 是否删除  ---- 是
-    const handleDelete = (row) => {
-      api.plannedOutageDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          Select()
-        } else {
-          ElMessage.error(requset.msg)
-        }
+//删除 是否删除  ---- 是
+function handleDelete(row) {
+  api.plannedOutageDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      ElMessage.success({
+        message: '删除成功',
+        type: 'success',
       })
+      Select()
+    } else {
+      ElMessage.error(requset.msg)
     }
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
+  })
+}
 
-    //查询设备列表
-    function Select() {
-      store.commit('TimeAll_function', dateTime.value)
-      const time = store.state.Time_Data
-      api
-        .plannedOutageList({
-          size: pageSize.value,
-          current: currentPage.value,
-          type: region.value,
-          startTime: time[0]?time[0]:'',
-          endTime: time[1]?time[1]:'',
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records.map((val) => {
-              store.commit('getTimestampAll', val.startTime)
-              val.startTime = store.state.timeProcessing
-              store.commit('getTimestampAll', val.endTime)
-              val.endTime = store.state.timeProcessing
-              store.commit('getTimestampAll', val.createTime)
-              val.createTime = store.state.timeProcessing
-            })
-            tableData.value = requset.data.records
-            total.value = requset.data.total
-     
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+//是否删除  ---- 否
+function cancelEvent() {
+  console.log('cancel!')
+}
 
-    onMounted(() => {
-      Select()
+//查询设备列表
+function Select() {
+  store.commit('TimeAll_function', dateTime.value)
+  const time = store.state.Time_Data
+  api
+    .plannedOutageList({
+      size: pageSize.value,
+      current: currentPage.value,
+      type: region.value,
+      startTime: time[0] ? time[0] : '',
+      endTime: time[1] ? time[1] : '',
     })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        tableData.value = requset.data.records.map((val) => {
+          store.commit('getTimestampAll', val.startTime)
+          val.startTime = store.state.timeProcessing
+          store.commit('getTimestampAll', val.endTime)
+          val.endTime = store.state.timeProcessing
+          store.commit('getTimestampAll', val.createTime)
+          val.createTime = store.state.timeProcessing
+        })
+        tableData.value = requset.data.records
+        total.value = requset.data.total
 
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      Select()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      Select()
-    }
-    // 表头样式设置
-    const goVariableList = () => {
-      // 跳转至订单列表页面传参
-      this.$router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-      // this.$router.push({ name:'variableList'})
-    }
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    //处理状态状态值变色
-  
-
-     const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex
-      // console.log(row, column, rowIndex)
-    
-      if (columnIndex) {
-        // return `text-align:left;cursor:pointer;`
       } else {
-        return ''
+        ElMessage.error(requset.msg)
       }
-    }
-
-     //导出
-    const DataReportExport = () => {
-      store.commit('TimeAll_function', dateTime.value)
-      const time = store.state.Time_Data
-      api
-        .outagePlanListExport({
-           type: region.value,
-          startTime: time[0]?time[0]:'',
-          endTime: time[1]?time[1]:'',
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
-            ElMessage.success({
-              message: '导出成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-    return {
-      cellStyle,
-      headClass,
-      goVariableList,
-     
-      handleDelete,
-      cancelEvent,
-      closeDialog,
-      editRow,
-      addItem,
-      Select,
-
-      store,
-
-      total,
-      pageSize,
-      currentPage,
-       handleSizeChange,
-      handleCurrentChange,
-
+    })
+}
 
-      tableData,
+onMounted(() => {
+  Select()
+})
 
-      showDialog,
-      tabPosition,
-      select,
-      dateTime,
-      tableItem,
-      dialogTitle,
-      input,
-      region,
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  Select()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  Select()
+}
 
-      DataReportExport
-    }
-  },
-})
+//导出
+const DataReportExport = () => {
+  store.commit('TimeAll_function', dateTime.value)
+  const time = store.state.Time_Data
+  api
+    .outagePlanListExport({
+      type: region.value,
+      startTime: time[0] ? time[0] : '',
+      endTime: time[1] ? time[1] : '',
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
+        ElMessage.success({
+          message: '导出成功',
+          type: 'success',
+        })
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/systemManage/userManage/dialogComponent.vue

@@ -100,9 +100,6 @@ const state = reactive({
 const { isDisable, form, rules, roleSelectData } = toRefs(state)
 
 
-
-
-
 // 弹窗打开
 function openDialog(event) {
   dialogTitle.value = event.dialogTitle