src/assets/css/element.scss

@@ -43,16 +43,104 @@
 .el-tabs {
     --el-tabs-header-height: 50px;
 
+    &__header {
+        .el-tabs__item.is-active:hover {
+            color: #409eff !important;
+        }
+    }
+
     &__content {
         padding: 15px !important;
     }
 
     &__new-tab {
-        margin: 10px 10
+        margin: 10px 10;
+    }
+
+    &__header:hover,
+    &__item:hover {
+        color: #409eff !important;
     }
 }
 
 
+// 上传组件样式
 .el-upload-list {
     margin: 0px !important
+}
+
+// table表格样式
+.el-table {
+    th.el-table__cell {
+        background: #FAFAFA !important;
+        color: black
+    }
+}
+
+// input输入框样式
+.el-input {
+    height: var(--el-input-height);
+
+
+    &__icon {
+        color: #409eff;
+    }
+
+    &__inner {
+        height: 36px;
+        line-height: 36px;
+
+        &:hover {
+            border-color: #409eff;
+        }
+
+        &:focus {
+            border-color: #409eff;
+        }
+    }
+}
+
+// form表单样式
+.el-form-item__content {
+    width: 250px;
+}
+
+// select下拉框样式
+.el-select {
+    width: 100%
+}
+
+// radio单选框样式
+.el-radio {
+    margin-right: 24px;
+
+    &__input.is-checked .el-radio__inner {
+        border-color: #409eff;
+        background: #409eff;
+    }
+
+    &__input.is-checked+.el-radio__label {
+        color: #409eff;
+    }
+}
+
+// tree树组件样式
+.el-tree-node__content {
+    position: relative;
+    font-size: 16px;
+}
+
+//公共复选样式
+.el-checkbox__input.is-checked .el-checkbox__inner {
+    background-color: #409eff;
+    border-color: #409eff;
+}
+
+.el-checkbox__input.is-checked+.el-checkbox__label {
+    color: #409eff;
+}
+
+.el-pagination .btn-prev .el-icon,
+.el-pagination .btn-next .el-icon {
+    padding-left: 10px;
 }

src/assets/css/global.scss

@@ -16,113 +16,166 @@ a {
     outline: none;
     cursor: pointer;
     transition: color 0.3s;
-}
 
-a:active,
-a:hover {
-    text-decoration: none;
-    outline: 0;
-}
+    &:active {
+        color: #096dd9;
+    }
 
-a:active {
-    color: #096dd9;
-}
+    &:hover {
+        color: #40a9ff;
+    }
 
-a:hover {
-    color: #40a9ff;
+    &:active,
+    &:hover {
+        text-decoration: none;
+        outline: 0;
+    }
 }
 
 .border-solid-transparent {
     border: solid 1px transparent;
 }
 
-.text-align-right {
-    text-align: right;
+.text {
+    &-right {
+        text-align: right;
+    }
+
+    &-center {
+        text-align: center
+    }
 }
 
 .float-right {
     float: right;
 }
 
-.padding-t10 {
-    padding-top: 10px;
-}
-
 .cursor-pointer {
     cursor: pointer;
 }
 
-//公共tabs样式
-// .el-tabs__header .el-tabs__item.is-active {
-//     border-bottom: 2px solid #409eff;
-//     color: #409eff;
-// }
-.el-tabs__header .el-tabs__item.is-active:hover {
-    color: #409eff !important;
-}
-
-.el-tabs__header:hover,
-.el-tabs__item:hover {
-    color: #409eff !important;
-}
-
-//公共input样式
-.el-input {
-    height: var(--el-input-height);
-}
-.el-input__icon {
-    color: #409eff;
-}
-.el-input__inner {
-    height: 36px;
-    line-height: 36px
-}
-.el-input__inner:hover {
-    border-color: #409eff;
-}
-
-.el-input__inner:focus {
-    border-color: #409eff;
-}
-
-//公共单选样式
-.el-radio__input.is-checked .el-radio__inner {
-    border-color: #409eff;
-    background: #409eff;
-}
-
-.el-radio__input.is-checked+.el-radio__label {
-    color: #409eff;
-}
-
-//公共复选样式
-.el-checkbox__input.is-checked .el-checkbox__inner {
-    background-color: #409eff;
-    border-color: #409eff;
-}
-
-.el-checkbox__input.is-checked+.el-checkbox__label {
-    color: #409eff;
-}
-
-.el-pagination .btn-prev .el-icon,
-.el-pagination .btn-next .el-icon {
-    padding-left: 10px;
-}
-
-.el-table--border th:first-child .cell,
-.el-table--border td:first-child .cell {
-    // text-align: center;
-}
-
-.el-table .cell {
-    // text-align: center;
-}
-
 //公共字体无法选中
 .fontSizeSelect {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
+}
+
+
+
+
+.card-area {
+    font-size: 14px;
+
+    &-header {
+        display: flex;
+        width: 100%;
+
+        >.image {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+
+        >.title {
+            font-size: 14px;
+            font-weight: 600;
+            margin: 0 auto auto 0;
+        }
+
+        >.subTitle {
+            font-size: 12px;
+            margin: auto 0 0 0;
+        }
+    }
+
+    &-center {
+        display: flex;
+        width: 100%;
+
+        &.inline {
+            display: inline;
+        }
+
+        >.value {
+            display: flex;
+            white-space: nowrap;
+
+            >.image {
+                margin: auto 0;
+                width: 12px;
+                height: 8px;
+            }
+        }
+
+        .count {
+            display: flex;
+            flex-wrap: wrap;
+            width: 238px;
+            height: 132px;
+            padding: 10px;
+            background: #F2F3F8;
+            border: 1px solid #E9E9F3;
+
+            .title {
+                width: 60%;
+                font-size: 14px;
+                font-weight: 600;
+            }
+
+            .subTitle {
+                width: 40%;
+                font-size: 12px;
+                text-align: right;
+            }
+
+            .value {
+                width: 100%;
+                text-align: center;
+                font-size: 18px;
+                font-weight: 600;
+            }
+        }
+
+        .chart {
+            width: calc(100% - 258px);
+            margin: auto auto auto 20px;
+        }
+
+        >.countValue {
+            color: #41BED8;
+            font-size: 54px;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+
+        >.unit {
+            font-size: 16px;
+            text-align: center;
+            color: #666666
+        }
+    }
+
+    &-footer {
+        display: flex;
+        color: #666666;
+
+        >.title {}
+
+        >.percent {
+            margin: auto 5px auto 10px;
+        }
+
+        >.image {
+            margin: auto 0;
+            width: 12px;
+            height: 8px;
+        }
+    }
+
+    &-divider {
+        height: 0.5px !important;
+        margin: 10px 0 !important;
+    }
 }

src/assets/css/index.scss

@@ -62,10 +62,6 @@ a:hover {
     text-decoration: none;
 }
 
-div:focus {
-    outline: none;
-}
-
 .clearfix {
     &:after {
         visibility: hidden;
@@ -84,29 +80,21 @@ div:focus {
     text-overflow: ellipsis;
 }
 
-.text-center {
-    text-align: center
-}
-
-.delete-text {
-    color: #F80000 !important
-}
-
 .remarksTxt {
     opacity: .45;
     line-height: 1.5;
 }
 
-.bg-purple-dark {
-    border: 1px solid #99a9bf;
-}
-
 .bg-purple {
     border: 1px solid #d3dce6;
-}
 
-.bg-purple-light {
-    border: 1px solid #e5e9f2;
+    &-dark {
+        border: 1px solid #99a9bf;
+    }
+
+    &-light {
+        border: 1px solid #e5e9f2;
+    }
 }
 
 .grid-content {
@@ -114,9 +102,13 @@ div:focus {
     min-height: 36px;
 }
 
+.flex {
+    display: flex;
+}
+
 .app-container {
     padding: $vab-padding;
-    width: calc(100%);
+    width: 100%;
     height: 100%;
     background: #fff;
     min-height: calc(100vh - 130px);
@@ -129,6 +121,10 @@ div:focus {
     >.bg-white {
         background: #fff;
     }
+
+    &.bg-nesting {
+        background: transparent;
+    }
 }
 
 .filter-container {
@@ -163,6 +159,16 @@ div:focus {
     .prompt {
         margin: auto 0 auto auto;
     }
+
+    .goBack {
+        margin-right: 20px;
+    }
+
+    .Download {
+        margin: auto 0 auto 0;
+        margin-left: 20px;
+        text-decoration: underline;
+    }
 }
 
 .ant-layout-header {
@@ -170,20 +176,6 @@ div:focus {
     line-height: $vab-header-height !important;
 }
 
-// 台区列表
-.siteTitle {
-    font-size: 16px;
-    padding: 10px 20px 30px 20px;
-    text-align: center;
-    position: relative;
-
-    .goBack {
-        position: absolute;
-        left: 0;
-        top: 0
-    }
-}
-
 .status.el-avatar {
     width: 14px;
     height: 14px;
@@ -198,26 +190,6 @@ div:focus {
 }
 
 // 基本信息
-.basicInfo {
-    width: 100%;
-    height: calc(100vh - 180px);
-    // border: 1px solid pink;
-    display: block;
-    overflow-y: auto;
-}
-
-.siteManage-main {
-    padding: 20px;
-}
-
-.groupInfo,
-.basic-info-page,
-.powerScore {
-    .el-form-item {
-        margin-left: 0px !important
-    }
-}
-
 .goArchive {
     color: #056FFF;
     // text-decoration: underline;
@@ -246,11 +218,6 @@ div:focus {
     background: #4074e7;
 }
 
-// input长度
-.el-form-item__content {
-    width: 250px;
-}
-
 .planOutage {
 
     .el-date-editor.el-input,
@@ -260,15 +227,6 @@ div:focus {
     }
 }
 
-.el-select {
-    width: 100%
-}
-
-// 单选框样式
-.el-radio {
-    margin-right: 24px
-}
-
 //提交:
 .sublitArea {
     text-align: right;
@@ -301,54 +259,16 @@ div:focus {
 }
 
 // 电力监测
-.watchDog,
-.variableList {
-    .el-form-item__content {
-        width: 270px
-    }
-
-    .el-form-item__label {
-        width: 150px !important
-    }
-
-    .el-form-item__content {
-        // margin-left: 150px!important
-    }
-}
-
 .paginationBlock {
     margin-top: 20px;
     text-align: right
 }
 
-// 树形控件icon
-.el-tree-node__content {
-    position: relative;
-    font-size: 16px;
-}
-
-.siteTree .el-icon-delete {
-    color: #409EFF;
-    position: absolute;
-    right: 6px;
-    top: 5px;
-}
-
 .custom-tree-node span:first-child {
-    width: 100px
+    width: 100%;
 }
 
 // 告警管理渐变背景色
-.alarmingTable {
-    a {
-        margin-right: 0 !important;
-    }
-}
-
-.alarmingManage .el-table .cell {
-    text-align: left !important;
-}
-
 .gradualBg {
     padding: 0 5px;
     color: #444;
@@ -413,6 +333,10 @@ div:focus {
             color: #F80000
         }
     }
+
+    .el-radio__input.is-checked+.el-radio__label {
+        color: #606266 !important
+    }
 }
 
 .underline {
@@ -438,12 +362,6 @@ div:focus {
 }
 
 // 谐波分析
-.harmonicReport {
-    .filter-container .filter-item {
-        // margin-right: 10px
-    }
-}
-
 .timeTab.el-button {
     margin-bottom: 20px;
     border-radius: 0
@@ -523,17 +441,6 @@ div:focus {
     border-bottom: 2px solid #2EAEFF
 }
 
-.banlanceBtn {
-    max-width: 80%;
-    // margin: 0 auto 20px;
-    height: 40px;
-    // line-height: 40px;
-    width: 236px;
-    font-size: 16px !important;
-    // background: #6dc6ff;
-    // color: #fff
-}
-
 .assCard {
     min-height: 356px !important;
 
@@ -585,13 +492,14 @@ div:focus {
 }
 
 .totalScore {
+    display: flex;
+    justify-content: center;
     font-weight: bold;
     text-align: center;
-    margin: 30px;
+    margin: 30px 0;
 
-    .el-button {
-        font-size: 16px;
-        margin-left: 10px;
+    .title {
+        margin: auto 20px auto 0;
     }
 }
 
@@ -799,12 +707,6 @@ div:focus {
     transform: scale(.8);
 }
 
-.alarmStatusDialog {
-    .el-radio__input.is-checked+.el-radio__label {
-        color: #606266 !important
-    }
-}
-
 .defetSubTit {
     background: #F4F4F4;
     width: calc(100% + 40px);

src/assets/css/variables.module.scss

@@ -63,6 +63,13 @@
     }
 }
 
+@for $i from 1 through 5 {
+    .col-#{$i} {
+        width: calc(100% / #{ $i}) !important;
+    }
+}
+
+
 /* 文本
 ------------------------------- */
 @for $i from 10 through 500 {
@@ -72,7 +79,6 @@
 }
 
 $vab-color-blue: #1890ff;
-
 $vab-margin: 20px;
 $vab-padding: 20px;
 $vab-header-height: 54px;

src/router/index.js

@@ -57,7 +57,7 @@ export const asyncRoutes = [
                 import('@/views/alarmManage/index'),
         },]
     },
-    
+
     {
         path: '/siteManage',
         redirect: '/siteManage/index',
@@ -205,23 +205,71 @@ export const asyncRoutes = [
     },
 
 
+    // {
+    //     meta: { icon: 'dataManage', title: '能源管理', },
+    //     path: '/energyManage',
+    //     component: Layout,
+    //     redirect: '/energyManage/totalEnergyC/index',
+    //     children: [
+    //         {
+    //             meta: { icon: 'totalEnergyC', title: '总能耗', },
+    //             path: 'totalEnergyC',
+    //             component: () =>
+    //                 import('@/views/energyManage/totalEnergyC/index'),
+    //         },
+    //         {
+    //             meta: { icon: 'energyStatistics', title: '能源统计', },
+    //             path: 'energyStatistics',
+    //             component: () =>
+    //                 import('@/views/energyManage/energyStatistics/index'),
+    //         },
+    //         {
+    //             meta: { icon: 'energyReport', title: '能源报表', },
+    //             path: 'energyReport',
+    //             component: () =>
+    //                 import('@/views/energyManage/energyReport/index'),
+    //         },
+    //     ]
+    // },
+
+
     {
-        meta: { icon: 'energyManage', title: '能源管理', },
-        path: '/energyManage',
+        meta: { icon: 'realMonitored', title: '实时监测', },
+        path: '/realMonitored',
         component: Layout,
-        redirect: '/energyManage/totalEnergyC/index',
+        redirect: '/realMonitored/loadAnalysis/index',
         children: [
             {
-                meta: { icon: 'totalEnergyC', title: '总能耗', },
-                path: 'totalEnergyC',
+                meta: { icon: 'loadAnalysis', title: '负载分析', },
+                path: 'loadAnalysis',
                 component: () =>
-                    import('@/views/energyManage/totalEnergyC/index'),
+                    import('@/views/realMonitored/loadAnalysis/index'),
             },
             {
-                meta: { icon: 'totalEnergyC', title: '同比分析报表', },
-                path: 'totalEnergyC1',
+                meta: { icon: 'loadAnalysis', title: '同比分析报表', },
+                path: 'loadAnalysis1',
                 component: () =>
-                    import('@/views/energyManage/totalEnergyC/index'),
+                    import('@/views/realMonitored/loadAnalysis/index'),
+            },
+        ]
+    },
+    {
+        meta: { icon: 'dataManage', title: '历史数据', },
+        path: '/historyData',
+        component: Layout,
+        redirect: '/historyData/curve/index',
+        children: [
+            {
+                meta: { icon: 'curve', title: '历史曲线', },
+                path: 'curve',
+                component: () =>
+                    import('@/views/historyData/curve/index'),
+            },
+            {
+                meta: { icon: 'report', title: '历史报表', },
+                path: 'report',
+                component: () =>
+                    import('@/views/historyData/report/index'),
             },
         ]
     },
@@ -271,27 +319,27 @@ export const asyncRoutes = [
     /**
      * monthReport 月度报告
      */
-    // {
-    //     path: '/monthReport',
-    //     redirect: '/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
-    //         }
-    //     ]
-    // },
+    {
+        path: '/monthReport',
+        redirect: '/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
+        }
+        ]
+    },
 
 
     {
@@ -428,8 +476,6 @@ export const asyncRoutes = [
     },
 
 
-
-
     // {
     //   path: '/test',
     //   component: Layout,
@@ -450,39 +496,6 @@ export const asyncRoutes = [
     //     },
     //   ],
     // },
-
-    // {
-    //     path: '/error',
-    //     name: 'Error',
-    //     component: Layout,
-    //     redirect: '/error/403',
-    //     meta: {
-    //         title: '错误页',
-    //         icon: 'error-warning-line',
-    //     },
-    //     children: [{
-    //             path: '403',
-    //             name: 'Error403',
-    //             component: () =>
-    //                 import ('@/views/403'),
-    //             meta: {
-    //                 title: '403',
-    //                 icon: 'error-warning-line',
-    //             },
-    //         },
-    //         {
-    //             path: '404',
-    //             name: 'Error404',
-    //             component: () =>
-    //                 import ('@/views/404'),
-    //             meta: {
-    //                 title: '404',
-    //                 icon: 'error-warning-line',
-    //             },
-    //         },
-    //     ],
-    // },
-
 ]
 
 const router = createRouter({

src/views/alarmManage/alarmTotal.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="app-container">
-    <!-- 返回start -->
-    <div class="siteTitle">
-      <el-button class="goBack" @click="goBack">返回</el-button>
+    <div class="filter-container" style="justify-content: left">
+      <div class="filter-item">
+        <el-button class="goBack" @click="goBack">返回</el-button>
+      </div>
+    </div>
+    <div class="mb-20" style="width: 100%;font-size: 16px;text-align: center;">
       站点【{{ alarmGradeList.siteName }}】{{
         alarmGradeList.type == 0
         ? '总数'
@@ -15,10 +18,9 @@
               : ''
       }}
     </div>
-    <!-- 返回end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+    <el-table :data="tableData" border stripe>
       <el-table-column fixed prop="soeTime" label="发生时间" width=""></el-table-column>
       <el-table-column prop="measDesc" label="测点描述" width=""></el-table-column>
       <el-table-column prop="alarmName" label="告警名称" width=""></el-table-column>

src/views/alarmManage/dialogComponent.vue

@@ -231,5 +231,4 @@ defineExpose({
 }
 </style>
 <style>
-.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {}
 </style>

src/views/alarmManage/index.vue

@@ -28,8 +28,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table class="alarmingTable" :data="tableData" :cell-style="cellStyle"
-      :header-cell-style="{ background: '#FAFAFA' }" border stripe>
+    <el-table class="alarmingTable" :data="tableData" :cell-style="cellStyle" border stripe>
       <el-table-column prop="siteName" label="站点名称" width="">
         <template #default="scope">
           <div @click="handleClick(scope.row)">{{ scope.row.siteName }}</div>

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

@@ -22,7 +22,7 @@
             .includes(filterText.toLowerCase()) ||
           data.regCode.toLowerCase().includes(filterText.toLowerCase())
       )
-        " border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" :height="Height">
+        " border stripe :height="Height">
         <el-table-column prop="stationStatus" align="center" label="状态" width="50">
           <template #default="scope">
             <el-avatar class="status" :style="scope.row.stationStatus == 0

src/views/deviceManage/powerEquip/communicateEquip/dialog/cloneDialog.vue

@@ -3,19 +3,19 @@
   <el-dialog v-model="cloneDialog" title="变量克隆" width="30rem" @close="close">
     <div class="dialogOne">
       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
-        <el-form-item label="克隆设备对象:" prop="deviceCode">
+        <el-form-item label="克隆设备对象：" prop="deviceCode">
           <span>{{ form.deviceCode }}</span>
         </el-form-item>
-        <el-form-item label="变量克隆至:" prop="cloneRadio">
+        <el-form-item label="变量克隆至：" prop="cloneRadio">
           <el-radio-group v-model="form.type" size="medium">
             <el-radio :label="1">新设备</el-radio>
             <el-radio :label="2">已有设备（仅克隆变量）</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item label="设备名:" prop="cloneInputName" v-if="form.type == 1">
+        <el-form-item label="设备名：" prop="cloneInputName" v-if="form.type == 1">
           <el-input v-model="form.cloneInputName" placeholder="请输入设备名" clearable />
         </el-form-item>
-        <el-form-item label="设备编号:" prop="cloneInputCode" v-if="form.type == 1">
+        <el-form-item label="设备编号：" prop="cloneInputCode" v-if="form.type == 1">
           <el-input v-model="form.cloneInputCode" placeholder="请输入设备编号" clearable />
         </el-form-item>
         <el-form-item label="选择站点：" v-if="form.type != 1">

src/views/deviceManage/powerEquip/communicateEquip/dialog/insert_update.vue

@@ -1,42 +1,40 @@
 <template>
   <div class="powerdialog">
     <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="640px">
-      <div>
-        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
-          <el-form-item label="设备名称：" prop="deviceName">
-            <el-input v-model="form.deviceName"></el-input>
-          </el-form-item>
-          <el-form-item label="设备编号：" prop="deviceCode">
-            <el-input v-if="dialogTitle == '修改'" v-model="form.deviceCode" disabled></el-input>
-            <el-input v-else v-model="form.deviceCode"></el-input>
-          </el-form-item>
-          <el-form-item label="楼层：" prop="floor">
-            <el-input-number v-model="form.floor" controls-position="right" :min="-10" :max="100"></el-input-number>
-          </el-form-item>
-          <el-form-item label="所属站点：" prop="siteId">
-            <el-select v-model="form.siteId" :disabled="dialogTitle === '修改'" placeholder="请选择所属站点">
-              <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
-                :value="item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="设备安装位置：" prop="deviceAddress">
-            <el-input v-model="form.deviceAddress"></el-input>
-          </el-form-item>
-          <el-form-item label="设备类型:" prop="deviceType">
-            <el-select v-model="form.deviceType" placeholder="请选择设备类型">
-              <el-option v-for="item in deviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="sim卡号：" prop="sim">
-            <el-input v-model="form.sim"></el-input>
-          </el-form-item>
+      <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
+        <el-form-item label="设备名称：" prop="deviceName">
+          <el-input v-model="form.deviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="设备编号：" prop="deviceCode">
+          <el-input v-if="dialogTitle == '修改'" v-model="form.deviceCode" disabled></el-input>
+          <el-input v-else v-model="form.deviceCode"></el-input>
+        </el-form-item>
+        <el-form-item label="楼层：" prop="floor">
+          <el-input-number v-model="form.floor" controls-position="right" :min="-10" :max="100"></el-input-number>
+        </el-form-item>
+        <el-form-item label="所属站点：" prop="siteId">
+          <el-select v-model="form.siteId" :disabled="dialogTitle === '修改'" placeholder="请选择所属站点">
+            <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
+              :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备安装位置：" prop="deviceAddress">
+          <el-input v-model="form.deviceAddress"></el-input>
+        </el-form-item>
+        <el-form-item label="设备类型：" prop="deviceType">
+          <el-select v-model="form.deviceType" placeholder="请选择设备类型">
+            <el-option v-for="item in deviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="sim卡号：" prop="sim">
+          <el-input v-model="form.sim"></el-input>
+        </el-form-item>
 
-          <div style="text-align: right">
-            <el-button @click="close">取消</el-button>
-            <el-button type="primary" @click="submitForm()">保存</el-button>
-          </div>
-        </el-form>
-      </div>
+        <div style="text-align: right">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
+        </div>
+      </el-form>
     </el-dialog>
   </div>
 </template>

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

@@ -1,28 +1,24 @@
 <template>
   <div class="communicate">
-    <div class="comTop">
-      <div class="comTopLeft">
-        <!-- 选择站点:
-        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px; margin-right: 20px">
-          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
-        </el-select> -->
+    <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item">
         <el-input placeholder="搜索设备名" v-model="filterText" class="comTopLeftInput" style="width: 150px"
           :disabled="store.state.authorities.indexOf('查询') == -1">
         </el-input>
-
-        <el-button type="primary" icon="Search" class="search-button" @click="Select()"
-          :disabled="store.state.authorities.indexOf('查询') == -1">
-          搜索
-        </el-button>
-        <el-button class="search-button" icon="Plus" type="success" @click="Insert()"
-          :disabled="store.state.authorities.indexOf('新增') == -1">
-          新增
-        </el-button>
-        <a href="./static/伍继通信设备导入模板.xlsx" download class="downloadMb">模板下载</a>
       </div>
 
+      <el-button type="primary" icon="Search" class="search-button" @click="Select()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
+      <el-button type="success" icon="Plus" class="search-button" @click="Insert()"
+        :disabled="store.state.authorities.indexOf('新增') == -1">
+        新增
+      </el-button>
+
+      <a href="./static/伍继通信设备导入模板.xlsx" download class="Download">模板下载</a>
 
-      <el-upload class="upload-demo" :action="fileUrl + 'device/deviceImport'" :on-progress="handleProgress"
+      <el-upload class="upload-demo prompt" :action="fileUrl + 'device/deviceImport'" :on-progress="handleProgress"
         :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
           accessToken: [accessToken],
         }" :file-list="fileList" style="margin:0 10px 0 auto" :disabled="store.state.authorities.indexOf('导入') == -1">
@@ -30,51 +26,48 @@
       </el-upload>
       <el-button type="primary" @click="DataReportExport()"
         :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
-
     </div>
 
-    <div class="comContent">
-      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
-        :height="Height" v-loading="loading">
-        <el-table-column prop="deviceStatus" align="center" label="状态" width="50">
-          <template #default="scope">
-            <el-avatar class="status" :style="scope.row.deviceStatus == 1
-              ? 'background-color:red'
-              : 'background-color:#04F21C'
-              "></el-avatar>
-          </template>
-        </el-table-column>
-        <el-table-column prop="deviceName" label="设备名称" align="center" width="150"></el-table-column>
-        <el-table-column prop="deviceCode" label="设备编号" align="center" width=""></el-table-column>
-        <el-table-column prop="siteName" label="所属站点" align="center" width=""></el-table-column>
-        <el-table-column prop="statusTime" label="最后通信时间" align="center" min-width="160px"></el-table-column>
-        <el-table-column prop="offlineDuration" label="离线时长（小时）" align="center" width=""></el-table-column>
-        <el-table-column prop="onlineDuration" label="在线时长（小时）" align="center" width=""></el-table-column>
-        <el-table-column prop="deviceAddress" label="设备地址" align="center" width=""></el-table-column>
-        <el-table-column align="center" label="操作" width="200">
-          <template #default="scope">
-            <el-button type="primary" size="small" @click.prevent="Update(scope.row)"
-              :disabled="store.state.authorities.indexOf('修改') == -1" link>
-              编辑
-            </el-button>
-            <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>
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-            <el-button @click="clone(scope.row)" type="primary" size="small" link> 克隆 </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="pageSize"
-          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
-          @current-change="handleCurrentChange" background></el-pagination>
-      </div>
-    </div>
+    <el-table :data="tableData" border stripe :height="props.Height" v-loading="loading">
+      <el-table-column prop="deviceStatus" align="center" label="状态" width="50">
+        <template #default="scope">
+          <el-avatar class="status" :style="scope.row.deviceStatus == 1
+            ? 'background-color:red'
+            : 'background-color:#04F21C'
+            "></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="deviceName" label="设备名称" align="center" width="150"></el-table-column>
+      <el-table-column prop="deviceCode" label="设备编号" align="center" width=""></el-table-column>
+      <el-table-column prop="siteName" label="所属站点" align="center" width=""></el-table-column>
+      <el-table-column prop="statusTime" label="最后通信时间" align="center" min-width="160px"></el-table-column>
+      <el-table-column prop="offlineDuration" label="离线时长（小时）" align="center" width=""></el-table-column>
+      <el-table-column prop="onlineDuration" label="在线时长（小时）" align="center" width=""></el-table-column>
+      <el-table-column prop="deviceAddress" label="设备地址" align="center" width=""></el-table-column>
+      <el-table-column align="center" label="操作" width="200">
+        <template #default="scope">
+          <el-button type="primary" size="small" @click.prevent="Update(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1" link>
+            编辑
+          </el-button>
+          <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>
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+          <el-button @click="clone(scope.row)" type="primary" size="small" link> 克隆 </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination class="listPagination" 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>
+
+
     <insert-Update ref="insertUpdateRef" @handleSelect="Select()"></insert-Update>
     <clone-Dialog ref="cloneDialogRef" @handleSelect="Select()"></clone-Dialog>
   </div>
@@ -276,65 +269,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-//first样式
-.communicate {
-  margin: 15px;
-
-  //顶部左侧样式
-  .comTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-
-    .comTopLeft {
-      width: 70%;
-
-      .goBack {
-        margin-right: 15px;
-      }
-
-      .comTopLeftTitle {
-        font-size: 14px;
-        margin-right: 10px;
-      }
-
-      .comTopLeftInput {
-        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;
-      }
-    }
-
-    //顶部右侧样式
-    .comRight {
-      width: 30%;
-
-      button {
-        margin-left: 1rem;
-        float: right;
-      }
-    }
-  }
-
-  .comContent {
-    margin-top: 15px;
-  }
-}
-
 .listPagination {
   margin-top: 15px;
   float: right;

src/views/deviceManage/powerEquip/index.vue

@@ -33,12 +33,7 @@ const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
 const deviceNumData = ref('') //判断设备列表详情是否显示
 const activeName = ref('monitoring')
-const Height = ref(0)
-
-Height.value = window.innerHeight - 300 + 'px'
-window.addEventListener('resize', () => {
-  Height.value = window.innerHeight - 300 + 'px'
-})
+const Height = ref('calc(100vh - 305px)')
 
 watch(
   () => activeName.value,

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

@@ -1,27 +1,22 @@
 <template>
   <div>
-    <div class="firstTop mb-20">
-      <div class="firstTopLeft">
-        <el-button class="goBack" @click="emit('func')">返回</el-button>
+    <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+      <el-button class="goBack" @click="emit('func')">返回</el-button>
 
-        选择站点:
-        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px; margin-right: 20px"
+      <div class="filter-item">
+        <span class="title">选择站点：</span>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px;"
           :disabled="store.state.authorities.indexOf('查询') == -1">
           <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
         </el-select>
-
-        <!-- <span class="firstTopLeftTitle">设备或编号</span>
-        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"></el-input> -->
-
-        <el-button type="primary" icon="Search" class="search-button" @click="listSelect()"
-          :disabled="store.state.authorities.indexOf('查询') == -1">
-          搜索
-        </el-button>
       </div>
+      <el-button type="primary" icon="Search" @click="listSelect()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
     </div>
 
-    <el-table :data="deviceNumData" border stripe
-      :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 310px)">
+    <el-table :data="deviceNumData" border stripe :height="props.Height">
       <el-table-column prop="monitorDeviceName" label="监控设备名称" align="center" width=""></el-table-column>
       <el-table-column prop="monitorDeviceCode" label="监控设备编号" align="center" width=""></el-table-column>
       <el-table-column prop="loopMeterAddress" label="回路表计地址" align="center" width=""></el-table-column>
@@ -52,11 +47,11 @@
         </template>
       </el-table-column>
     </el-table>
-    <div class="listPagination1">
-      <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>
+
+    <el-pagination class="listPagination" 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>
+
 
     <listDialog ref="listDialogRef"> </listDialog>
   </div>
@@ -75,7 +70,9 @@ import listDialog from './listDialog.vue'
 /*----------------------------------公共方法引入-----------------------------------*/
 /*----------------------------------公共变量-----------------------------------*/
 const store = useStore()
-const props = defineProps({}) //数据双向绑定
+const props = defineProps({
+  Height: String,
+}) //数据双向绑定
 const emit = defineEmits(['updateRow', 'func']);
 const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
@@ -168,15 +165,4 @@ const handleCurrentChange = (val) => {
     }
   }
 }
-
-.listPagination {
-  margin-top: 15px;
-  margin-bottom: -30px;
-  float: right;
-}
-
-.listPagination1 {
-  margin-top: 15px;
-  float: right;
-}
 </style>

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

@@ -1,64 +1,58 @@
 <template>
     <div class="insertBox" v-if="!detailsBool">
-        <div class="firstTop">
-            <div class="firstTopLeft ">
-                <!-- 选择站点:
-                    <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 150px; margin-right: 20px">
-                        <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName"
-                            :value="site.id"></el-option>
-                    </el-select> -->
-                <div class="filter-item">
-                    <span class="firstTopLeftTitle">站点名称:</span>
-                    <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"
-                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                </div>
-                <div class="filter-item">
-                    <span class="firstTopLeftTitle">联系人:</span>
-                    <el-input v-model="userName" placeholder="请输入联系人" class="firstTopLeftInput"
-                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                </div>
-                <div class="filter-item">
-                    <span class="firstTopLeftTitle">手机号:</span>
-                    <el-input v-model="phone" placeholder="请输入手机号码" class="firstTopLeftInput"
-                        :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
-                </div>
-
-                <el-button type="primary" icon="Search" class="search-button" @click="monitorDeviceList()"
-                    :disabled="store.state.authorities.indexOf('查询') == -1">
-                    搜索
-                </el-button>
-                <el-button class="search-button" icon="Plus" type="success" @click="addItem()"
-                    :disabled="store.state.authorities.indexOf('新增') == -1">
-                    新增
-                </el-button>
+        <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+            <!-- 选择站点:
+            <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 150px; margin-right: 20px">
+                <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName"
+                    :value="site.id"></el-option>
+            </el-select> -->
+            <div class="filter-item">
+                <span class="title">站点名称：</span>
+                <el-input placeholder="输入关键字进行过滤" v-model="filterText"
+                    :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
             </div>
-        </div>
-
-        <div class="firstContent">
-            <el-table :data="tableData" border stripe
-                :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 300px)">
-                <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
-                <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
-                <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
-                <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
-                <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
-                    <template #default="scope">
-                        <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
-                            deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
-                            {{ scope.row.deviceCount }}
-                        </div>
-                    </template>
-                </el-table-column>
-            </el-table>
-            <div class="listPagination1">
-                <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 class="filter-item">
+                <span class="title">联系人：</span>
+                <el-input v-model="userName" placeholder="请输入联系人"
+                    :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
             </div>
+            <div class="filter-item">
+                <span class="title">手机号：</span>
+                <el-input v-model="phone" placeholder="请输入手机号码"
+                    :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+            </div>
+
+            <el-button type="primary" icon="Search" @click="monitorDeviceList()"
+                :disabled="store.state.authorities.indexOf('查询') == -1">
+                搜索
+            </el-button>
+            <el-button type="success" icon="Plus" @click="addItem()"
+                :disabled="store.state.authorities.indexOf('新增') == -1">
+                新增
+            </el-button>
         </div>
+
+        <el-table :data="tableData" border stripe :height="props.Height">
+            <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
+            <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
+            <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
+            <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
+            <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
+                <template #default="scope">
+                    <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
+                        deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
+                        {{ scope.row.deviceCount }}
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <el-pagination class="listPagination" 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>
 
-    <deviceDetails @updateRow="update" @func="detailsBool = false" v-else>
+    <deviceDetails :Height="props.Height" @updateRow="update" @func="detailsBool = false" v-else>
     </deviceDetails>
 
     <!-- 新增 -->
@@ -79,7 +73,9 @@ import insertDialog from './insertDialog.vue'
 /*----------------------------------公共方法引入-----------------------------------*/
 /*----------------------------------公共变量-----------------------------------*/
 const store = useStore()
-const props = defineProps({}) //数据双向绑定
+const props = defineProps({
+    Height: String,
+}) //数据双向绑定
 const emit = defineEmits([]); emit
 const { proxy } = getCurrentInstance();
 /*----------------------------------变量声明-----------------------------------*/
@@ -174,47 +170,8 @@ onMounted(() => {
 })
 </script>
 <style lang="scss">
-//顶部左侧样式
-.firstTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-
-    .firstTopLeft {
-        width: 100%;
-
-        .goBack {
-            margin-right: 15px;
-        }
-
-        .firstTopLeftTitle {
-            font-size: 14px;
-            margin-right: 10px;
-        }
-
-        .firstTopLeftInput {
-            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;
-        }
-    }
-}
-
-.firstContent {
+.listPagination {
     margin-top: 15px;
+    float: right;
 }
 </style>

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

@@ -1,86 +1,47 @@
 <template>
   <div class="powerdialog">
     <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="40%">
-      <div>
-        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
-          <el-form-item label="监控设备名称：" prop="monitorDeviceName">
-            <el-input v-model="form.monitorDeviceName"></el-input>
-          </el-form-item>
-          <el-form-item label="监控设备编号：" prop="monitorDeviceCode">
-            <el-input v-model="form.monitorDeviceCode"></el-input>
-          </el-form-item>
-          <el-form-item label="回路表计地址：" prop="loopMeterAddress">
-            <el-input-number v-model="form.loopMeterAddress" controls-position="right" :min="0"
-              :max="255"></el-input-number>
-          </el-form-item>
-          <el-form-item label="所属站点：" prop="siteId">
-            <el-select filterable v-model="form.siteId" :disabled="dialogTitle == '修改设备信息'" placeholder="请选择所属站点">
-              <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
-                :value="item.id"></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="额定电压（kV）：" prop="ratedVoltage">
-            <el-select v-model="form.ratedVoltage" placeholder="请选择额定电压（kV）">
-              <el-option v-for="item in ratedVoltage" :key="item.value" :label="item.label"
-                :value="item.label"></el-option>
-            </el-select>
-            <div class="fontText">(数值为线电压)</div>
-          </el-form-item>
-          <el-form-item label="额定电流（A）:" prop="ratedCurrent">
-            <el-input-number v-model="form.ratedCurrent" controls-position="right"></el-input-number>
-          </el-form-item>
-          <el-form-item label="电流负载率门限：" prop="currentLoadRate">
-            <el-input-number v-model="form.currentLoadRate" controls-position="right" :min="0"
-              :max="100"></el-input-number>
-            <div class="fontText">(0-100之间的数字)</div>
-          </el-form-item>
-          <el-form-item label="设备能力：" prop="qualityAnalysis">
-            <el-checkbox v-model="form.qualityAnalysis" label="电能质量分析"></el-checkbox>
-            <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
-          </el-form-item>
-          <!-- <br />
-          <hr />
-          <br />
-          <el-form-item label="设备类型：" prop="deviceType">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-          <el-form-item label="设备型号：" prop="deviceModel">
-            <el-input v-model="form.deviceModel"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家：" prop="manufactor">
-            <el-input v-model="form.manufactor"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家联系人：" prop="manufactorName">
-            <el-input v-model="form.manufactorName"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家联系联系电话：" prop="manufactorPhone">
-            <el-input v-model="form.manufactorPhone"></el-input>
-          </el-form-item>
-          <el-form-item label="巡检周期：" prop="patrolInsC">
-            <el-input v-model="form.patrolInsC"></el-input>
-          </el-form-item>
-          <el-form-item label="保养周期：" prop="maintenanceC">
-            <el-input v-model="form.maintenanceC"></el-input>
-          </el-form-item>
-          <el-form-item label="投运日期：" prop="operationDate">
-            <el-input v-model="form.operationDate"></el-input>
-          </el-form-item>
-          <el-form-item label="安装位置：" prop="installPosition">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-          <el-form-item label="安装日期：" prop="installDate">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
+      <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
+        <el-form-item label="监控设备名称：" prop="monitorDeviceName">
+          <el-input v-model="form.monitorDeviceName"></el-input>
+        </el-form-item>
+        <el-form-item label="监控设备编号：" prop="monitorDeviceCode">
+          <el-input v-model="form.monitorDeviceCode"></el-input>
+        </el-form-item>
+        <el-form-item label="回路表计地址：" prop="loopMeterAddress">
+          <el-input-number v-model="form.loopMeterAddress" controls-position="right" :min="0"
+            :max="255"></el-input-number>
+        </el-form-item>
+        <el-form-item label="所属站点：" prop="siteId">
+          <el-select filterable v-model="form.siteId" :disabled="dialogTitle == '修改设备信息'" placeholder="请选择所属站点">
+            <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
+              :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="额定电压（kV）：" prop="ratedVoltage">
+          <el-select v-model="form.ratedVoltage" placeholder="请选择额定电压（kV）">
+            <el-option v-for="item in ratedVoltage" :key="item.value" :label="item.label" :value="item.label"></el-option>
+          </el-select>
+          <div class="fontText">(数值为线电压)</div>
+        </el-form-item>
+        <el-form-item label="额定电流（A）:" prop="ratedCurrent">
+          <el-input-number v-model="form.ratedCurrent" controls-position="right"></el-input-number>
+        </el-form-item>
+        <el-form-item label="电流负载率门限：" prop="currentLoadRate">
+          <el-input-number v-model="form.currentLoadRate" controls-position="right" :min="0" :max="100"></el-input-number>
+          <div class="fontText">(0-100之间的数字)</div>
+        </el-form-item>
+        <el-form-item label="设备能力：" prop="qualityAnalysis">
+          <el-checkbox v-model="form.qualityAnalysis" label="电能质量分析"></el-checkbox>
+          <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
+        </el-form-item>
+
+        <div style="margin-top:30px; text-align: right">
+          <el-button @click="close">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
+        </div>
+      </el-form>
 
-          <br />
-          <br />
-          <br /> -->
-          <div style="text-align: right">
-            <el-button @click="close">取消</el-button>
-            <el-button type="primary" @click="submitForm()">保存</el-button>
-          </div>
-        </el-form>
-      </div>
     </el-dialog>
   </div>
 </template>

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

@@ -1,76 +1,69 @@
 <template>
   <div class="video">
-    <div class="videoTop">
-      <div class="videoTopLeft">
-        选择站点：
-        <el-select filterable v-model="store.state.siteId" placeholder="请选择" style="width: 250px; margin-right: 20px"
+    <div class="filter-container mb-15" style="justify-content: left; white-space: nowrap;">
+      <div class="filter-item">
+        <span class="title">选择站点：</span>
+        <el-select filterable v-model="store.state.siteId" placeholder="请选择" style="width: 200px;"
           :disabled="store.state.authorities.indexOf('查询') == -1">
           <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
         </el-select>
+      </div>
+      <div class="filter-item">
         <el-input placeholder="搜索设备名" v-model="filterText" class="videoTopLeftInput"
           :disabled="store.state.authorities.indexOf('查询') == -1">
         </el-input>
-
-        <el-button type="primary" icon="Search" class="search-button" @click="searchData()"
-          :disabled="store.state.authorities.indexOf('查询') == -1">
-          搜索
-        </el-button>
-        <!-- <el-button class="search-button" icon="Plus" type="success" @click="Insert()">
-          新增
-        </el-button> -->
       </div>
 
+      <el-button type="primary" icon="Search" @click="searchData()"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        搜索
+      </el-button>
+
       <!-- <div class="videoRight">
         <el-button type="primary">导入</el-button>
         <el-button type="primary">导出</el-button>
       </div> -->
     </div>
 
-    <div class="videoContent">
-      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
-        :height="Height" v-loading="loadingStatus" element-loading-text="摄像头打开中...."
-        element-loading-background="rgba(255, 255, 255, 0.6)">
-        <el-table-column prop="stationStatus" label="状态" align="center" width="50">
-          <template #default="scope">
-            <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
-              ? 'background-color:#04F21C'
-              : 'background-color:red'
-              "></el-avatar>
-          </template>
-        </el-table-column>
-
-        <el-table-column prop="deviceName" label="名称" align="center"></el-table-column>
-        <el-table-column prop="deviceCode" label="编号" align="center" width=""></el-table-column>
-
-        <el-table-column prop="floor" label="楼层" align="center" width="60"></el-table-column>
-        <el-table-column prop="deviceAddress" label="设备安装位置" align="center" width=""></el-table-column>
-        <el-table-column prop="deviceType" label="设备类型" align="center">
-          <template #default="scope">
-            {{ scope.row.deviceType == '2' ? '视频监控设备' : '其他' }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="installTime" label="安装时间" align="center" width="200"></el-table-column>
-        <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
-        <el-table-column prop="sim" label="sim卡号" align="center"></el-table-column>
-        <el-table-column label="视频画面" align="center" width="150">
-          <template #default="scope">
-            <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)"> 查看 </a>
-            <span v-else style="color: #aaa">--</span>
-          </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>
-      </div>
-
-      <!--视频弹框组件开始-----------------------start-->
-      <check-video ref="checkVideoRef"></check-video>
-      <!--视频弹框组件结束-----------------------end-->
-    </div>
-
-    <div></div>
+    <el-table :data="tableData" border stripe :height="props.Height" v-loading="loadingStatus"
+      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)">
+      <el-table-column prop="stationStatus" label="状态" align="center" width="80">
+        <template #default="scope">
+          <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
+            ? 'background-color:#04F21C'
+            : 'background-color:red'
+            "></el-avatar>
+        </template>
+      </el-table-column>
+
+      <el-table-column prop="deviceName" label="名称" align="center"></el-table-column>
+      <el-table-column prop="deviceCode" label="编号" align="center" width=""></el-table-column>
+
+      <el-table-column prop="floor" label="楼层" align="center" width="60"></el-table-column>
+      <el-table-column prop="deviceAddress" label="设备安装位置" align="center" width=""></el-table-column>
+      <el-table-column prop="deviceType" label="设备类型" align="center">
+        <template #default="scope">
+          {{ scope.row.deviceType == '2' ? '视频监控设备' : '其他' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="installTime" label="安装时间" align="center" width="200"></el-table-column>
+      <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
+      <el-table-column prop="sim" label="sim卡号" align="center"></el-table-column>
+      <el-table-column label="视频画面" align="center" width="150">
+        <template #default="scope">
+          <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)"> 查看 </a>
+          <span v-else style="color: #aaa">--</span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination class="listPagination" 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>
+
+    <!--视频弹框组件开始-----------------------start-->
+    <check-video ref="checkVideoRef"></check-video>
+    <!--视频弹框组件结束-----------------------end-->
   </div>
 </template>
 <script setup>
@@ -232,65 +225,6 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
-//first样式
-.video {
-  margin: 15px;
-
-  //顶部左侧样式
-  .videoTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-
-    .videoTopLeft {
-      width: 70%;
-
-      .goBack {
-        margin-right: 15px;
-      }
-
-      .videoTopLeftTitle {
-        font-size: 14px;
-        margin-right: 10px;
-      }
-
-      .videoTopLeftInput {
-        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;
-      }
-    }
-
-    //顶部右侧样式
-    .videoRight {
-      width: 30%;
-
-      button {
-        margin-left: 1rem;
-        float: right;
-      }
-    }
-  }
-
-  .videoContent {
-    margin-top: 15px;
-  }
-}
-
 .listPagination {
   margin-top: 15px;
   float: right;

src/views/historyData/curve/components/countChart.vue

@@ -0,0 +1,107 @@
+<template>
+  <div shadow="never" class="homeBoxCard">
+    <div class="height400" :id="props.id" :style="{ height: props.height + 'px' }" />
+  </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import dayjs from 'dayjs';
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  id: String,
+  height: Number
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+
+function initEcharts(id, chartData) {
+  let myChart = echarts.init(document.getElementById(id))
+  // 绘制图表
+  myChart.setOption({
+    color: ['#41bfd8', '#FCD011'],
+    title: {
+      subtext: chartData.subtext
+    },
+    tooltip: {
+      trigger: 'axis',
+      // 关闭默认悬浮触发，改为手动控制
+      triggerOn: 'none'
+    },
+    legend: {
+      bottom: '0',
+      data: chartData.legendData
+    },
+    grid: {
+      left: '20',
+      right: '40',
+      top: '40',
+      bottom: '30',
+      containLabel: true,
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: 'category',
+        data: chartData.xAxisData,
+        boundaryGap: false,
+        axisTick: {
+          show: false, // 刻度线
+        },
+        axisLabel: {
+          interval: 17, // 间隔
+          formatter: function (value) {
+            return dayjs(value).format('HH:mm');
+          }
+        },
+        splitLine: { show: false }
+      }
+    ],
+    yAxis: chartData.yAxisData,
+    series: chartData.seriesData
+  })
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+
+  return myChart;
+}
+
+// 暴露变量
+defineExpose({
+  initEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+
+  ::v-deep(.el-card__header) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+
+  ::v-deep(.el-card__body) {
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+
+  ::v-deep(.el-divider) {
+    margin: 8px 0;
+  }
+
+  .num {
+    font-size: 30px;
+    color: #515a6e;
+  }
+
+  .height400 {
+    height: 255px;
+  }
+}
+</style>

src/views/historyData/curve/index.vue

@@ -0,0 +1,533 @@
+<template>
+    <el-radio-group v-model="dateRadio.value" style="margin:0 50px 20px 0">
+        <el-radio-button label="day" value="day">日</el-radio-button>
+        <el-radio-button label="month" value="month">月</el-radio-button>
+        <el-radio-button label="year" value="year">年</el-radio-button>
+    </el-radio-group>
+
+
+    <el-row :gutter="20">
+        <el-col :md="24" :lg="12" style="margin-bottom: 20px;" v-for="(area, index) in areaData" :key="index">
+            <el-card class="card-area">
+                <div class="card-area-header">
+                    <div class="title"> {{ area.title }} </div>
+                </div>
+                <div class="card-area-chart">
+                    <countChart :ref="'chart' + (index + 1)" :id="'chart' + (index + 1)" :height="300" />
+                </div>
+            </el-card>
+        </el-col>
+    </el-row>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import countChart from './components/countChart.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+import dayjs from 'dayjs';
+import * as echarts from 'echarts'
+import { throttle } from 'lodash-es'; // 引入防抖/节流库
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    dataType: String
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+    dateRadio: {
+        value: "day"
+    },
+    areaData: [
+        {
+            title: "GYJLG_183信号",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['设备信号强度'],
+                xAxisData: [],
+                seriesData: [
+                    { name: '设备信号强度', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "",
+                yAxisData: []
+            },
+        },
+        {
+            title: "低压进线",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['A相电压(V)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: 'A相电压(V)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "V",
+                yAxisData: []
+            },
+        },
+        {
+            title: "进线电压",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['A相电压(V)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: 'A相电压(V)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "V",
+                yAxisData: []
+            },
+        },
+        {
+            title: "需量",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['实时需量(kW)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: '实时需量(kW)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "kW",
+                yAxisData: []
+            },
+        },
+        {
+            title: "总有功功率",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['总有功功率(kW)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: '总有功功率(kW)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "kW",
+                yAxisData: []
+            },
+        },
+        {
+            title: "正有功电度",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['正有功电度(kWh)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: '正有功电度(kWh)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "kWh",
+                yAxisData: []
+            },
+        },
+        {
+            title: "总进线三相电流",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['A相电流(A)', 'B相电流(A)', 'C相电流(A)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: 'A相电流(A)', type: 'line', data: [], yAxisIndex: 0, },
+                    { name: 'B相电流(A)', type: 'line', data: [], yAxisIndex: 0, },
+                    { name: 'C相电流(A)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "A",
+                yAxisData: []
+            },
+        },
+        {
+            title: "总进线三相电压",
+            chartLoading: false,
+            chartData: {
+                subtext: '',
+                legendData: ['A相电压(kV)', 'B相电压(kV)', 'C相电压(kV)'],
+                xAxisData: [],
+                seriesData: [
+                    { name: 'A相电压(kV)', type: 'line', data: [], yAxisIndex: 0, },
+                    { name: 'B相电压(kV)', type: 'line', data: [], yAxisIndex: 0, },
+                    { name: 'C相电压(kV)', type: 'line', data: [], yAxisIndex: 0, },
+                ],
+                unit: "kV",
+                yAxisData: []
+            },
+
+        }
+    ],
+    dateTime: dayjs().format('YYYY-MM-DD'),
+})
+const { dateRadio, areaData } = toRefs(state)
+
+
+
+function generateTimeSlots(startDate, intervalMinutes) {
+    var today = dayjs(startDate).startOf('day'); // 获取当天的开始时间
+    var endOfDay = dayjs(startDate).endOf('day'); // 获取当天的结束时间
+    const slots = [];
+
+    while (today.isBefore(endOfDay)) {
+        slots.push(today.format('YYYY-MM-DD HH:mm')); // 添加当前时间到数组
+        today = today.add(intervalMinutes, 'minute'); // 增加间隔时间
+    }
+
+    return slots;
+}
+
+
+function init_FPG_Data(startDate) {
+    return {
+        yAxisIndex: 1,
+        type: 'line',
+        markArea: {
+            data: [
+                [
+                    {
+                        name: `谷\n0.3406元`,
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 00:00'),
+                        itemStyle: {
+                            color: 'rgba(184, 232 , 197, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#b8e8c5'
+                        }
+                    },
+                    {
+                        yAxis: 0.3406,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 06:00'),
+                    }
+                ],
+                [
+                    {
+                        name: '平\n0.7279元',
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 06:00'),
+                        itemStyle: {
+                            color: 'rgba(178, 210 , 242, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#b2d2f2'
+                        }
+                    },
+                    {
+                        yAxis: 0.7279,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 08:00'),
+                    }
+                ],
+                [
+                    {
+                        name: '峰\n1.2442元',
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 08:00'),
+                        itemStyle: {
+                            color: 'rgba(251, 191, 191, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#fbbfbf'
+                        }
+                    },
+                    {
+                        yAxis: 1.2442,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 15:00'),
+                    }
+                ],
+                [
+                    {
+                        name: '平\n0.7279元',
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 15:00'),
+                        itemStyle: {
+                            color: 'rgba(178, 210 , 242, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#b2d2f2'
+                        }
+                    },
+                    {
+                        yAxis: 0.7279,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 18:00'),
+                    }
+                ],
+                [
+                    {
+                        name: '峰\n1.2442元',
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 18:00'),
+                        itemStyle: {
+                            color: 'rgba(251, 191, 191, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#fbbfbf'
+                        }
+                    },
+                    {
+                        yAxis: 1.2442,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 21:00'),
+                    }
+                ],
+                [
+                    {
+                        name: '平\n0.7279元',
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 21:00'),
+                        itemStyle: {
+                            color: 'rgba(178, 210 , 242, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#b2d2f2'
+                        }
+                    },
+                    {
+                        yAxis: 0.7279,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 22:00'),
+                    }
+                ],
+                [
+                    {
+                        name: `谷\n0.3406元`,
+                        yAxis: 0,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 22:00'),
+                        itemStyle: {
+                            color: 'rgba(184, 232 , 197, 0.7)', // 区域填充色
+                        },
+                        label: {
+                            color: '#b8e8c5'
+                        }
+                    },
+                    {
+                        yAxis: 0.3406,
+                        xAxis: dayjs(startDate).format('YYYY-MM-DD 23:55'),
+                    }
+                ],
+            ]
+        }
+    }
+}
+
+function init_yAxis_Data(num) {
+    const yAxis1 = {
+        type: 'value',
+        axisTick: {
+            show: true, // 刻度线
+        },
+        splitLine: {
+            show: true,
+            lineStyle: { type: 'dashed', color: '#eee' }
+        },
+        axisLine: {
+            show: true, // 轴线
+        },
+    }
+
+    const yAxis2 = {
+        type: 'value',
+        axisTick: {
+            show: true, // 刻度线
+        },
+        min: 0,
+        max: 1.5,
+        interval: 0.3,
+        position: 'right', // 显示在右侧
+        splitLine: { show: false },// 不与左侧 Y 轴共享刻度（可选）
+        axisLine: {
+            show: true, // 轴线
+        },
+    }
+
+    if (num == 1) {
+        return [yAxis1,]
+    } else if (num == 2) {
+        return [yAxis1, yAxis2,]
+    }
+}
+
+
+function initChartData() {
+    const timeSlots = generateTimeSlots(state.dateTime, 5);
+    const chartData = []
+
+    state.areaData.forEach((event, index) => {
+        event.chartData.xAxisData = timeSlots;
+        event.chartData.seriesData.forEach((item) => {
+            item.data = Array.from({ length: timeSlots.length }, () => index + 800)
+        })
+        event.chartData.yAxisData = init_yAxis_Data(1)
+
+        if (event.chartData.unit == 'kW' || event.chartData.unit == 'kWh') {
+            event.chartData.seriesData[event.chartData.seriesData.length] = init_FPG_Data(state.dateTime)
+            event.chartData.yAxisData = init_yAxis_Data(2)
+        }
+
+        chartData.push(proxy.$refs['chart' + (index + 1)][0].initEcharts('chart' + (index + 1), event.chartData))
+    })
+
+    syncTooltip(chartData)
+}
+
+function syncTooltip(charts) {
+    // 1. 状态管理：记录当前激活的 tooltip
+    let activeTooltipIndex = -1;
+    let activePoint = null;
+
+    // 2. 节流处理鼠标事件（每 50ms 执行一次）
+    const handleMouseMove = throttle((event, chartIndex) => {
+        const pointInPixel = [event.offsetX, event.offsetY];
+        const targetX = pointInPixel[0];
+        const targetY = pointInPixel[1];
+
+        // 3. 计算鼠标位置对应的 xAxis 索引（只处理网格区域内的事件）
+        if (!charts[chartIndex].containPixel('grid', pointInPixel)) {
+            if (activeTooltipIndex !== -1) {
+                hideAllTooltips();
+                activeTooltipIndex = -1;
+                activePoint = null;
+            }
+            return;
+        }
+
+        // 4. 获取当前鼠标位置对应的 xAxis 索引
+        const xAxisIndex = Math.round(charts[chartIndex].convertFromPixel('grid', [targetX, targetY])[0]);
+        const isNewPoint = activePoint === null ||
+            activePoint[0] !== xAxisIndex ||
+            activePoint[1] !== chartIndex;
+
+        if (isNewPoint) {
+            // 5. 只有当鼠标移动到新的数据点时才更新 tooltip
+            activePoint = [xAxisIndex, chartIndex];
+            updateAllTooltips(xAxisIndex);
+        }
+    }, 50); // 节流时间 50ms，可根据需要调整
+
+    // 6. 批量更新所有图表的 tooltip
+    function updateAllTooltips(xAxisIndex) {
+        charts.forEach(chart => {
+            chart.dispatchAction({
+                type: 'showTip',
+                seriesIndex: 0, // 假设只有一个 series，根据实际情况调整
+                dataIndex: xAxisIndex
+            });
+
+            chart.setOption({
+                tooltip: {
+                    axisPointer: { type: 'line' },
+                }
+            });
+        });
+        activeTooltipIndex = xAxisIndex;
+    }
+
+    // 7. 隐藏所有图表的 tooltip
+    function hideAllTooltips() {
+        charts.forEach(chart => {
+            chart.dispatchAction({
+                type: 'hideTip',
+            });
+
+            chart.setOption({
+                tooltip: {
+                    axisPointer: { type: 'none' },
+                }
+            });
+        });
+    }
+
+    // 8. 绑定事件监听器
+    charts.forEach((chart, index) => {
+        // 鼠标移动事件（使用节流处理）
+        chart.getZr().on('mousemove', (event) => handleMouseMove(event, index));
+
+        // 鼠标离开图表区域时隐藏所有 tooltip
+        chart.getZr().on('mouseout', () => {
+            if (activeTooltipIndex !== -1) {
+                hideAllTooltips();
+                activeTooltipIndex = -1;
+                activePoint = null;
+            }
+        });
+    });
+}
+
+
+onMounted(() => {
+    setTimeout(() => {
+        initChartData()
+    }, 500);
+})
+
+// 暴露变量
+defineExpose({
+});
+</script>
+<style scoped>
+.chart-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.chart {
+    width: 100%;
+    height: 400px;
+}
+</style>
+<style lang="scss" scoped>
+.card-area {
+    font-size: 14px;
+
+    &-header {
+        display: flex;
+        width: 100%;
+
+        >.title {
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        >.subTitle {
+            font-size: 12px;
+            margin: auto 0 0 0;
+        }
+    }
+
+    &-center {
+        width: 100%;
+
+        >.value {
+            color: #41BED8;
+            font-size: 54px;
+            text-align: center;
+            margin-bottom: 10px;
+        }
+
+        >.unit {
+            font-size: 16px;
+            text-align: center;
+            color: #666666
+        }
+    }
+
+    &-footer {
+        display: flex;
+        color: #666666;
+
+        >.title {}
+
+        >.percent {
+            margin: auto 5px auto 10px;
+        }
+
+        >.image {
+            margin: auto 0;
+            width: 12px;
+            height: 8px;
+        }
+    }
+}
+</style>

src/views/historyData/report/index.vue

@@ -0,0 +1,107 @@
+<template>
+    <el-tabs v-model="editableTabsValue" type="border-card" editable class="demo-tabs" @edit="handleTabsEdit">
+        <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
+            <div style="margin-bottom:15px">
+                <el-date-picker v-model="datePicker.value" :type="datePicker.type" :format="datePicker.format"
+                    placeholder="请选择日期" :clearable="false" />
+            </div>
+
+            <el-table :data="tableData" stripe style="width: 100%">
+                <el-table-column prop="date" label="时间" width="180" />
+                <el-table-column prop="name" label="A相电流(A)" width="180" />
+                <el-table-column prop="address" label="B相电流(A)" />
+            </el-table>
+        </el-tab-pane>
+    </el-tabs>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+import dayjs from 'dayjs';
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    dataType: String
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+    editableTabsValue: '1',
+    editableTabs: [{
+        title: '点位数据',
+        name: '1',
+        content: 'Tab 1 content',
+    }],
+    tableData: [
+        {
+            date: '01:00',
+            name: '37.17',
+            address: '36.855',
+        },
+        {
+            date: '02:00',
+            name: '51.525',
+            address: '50.88',
+        },
+        {
+            date: '03:00',
+            name: '50.88',
+            address: '50.88',
+        },
+        {
+            date: '04:00',
+            name: '50.88',
+            address: '50.88',
+        },
+    ],
+    datePicker: {
+        type: "date",
+        format: "YYYY-MM-DD",
+        value: dayjs().format('YYYY-MM-DD'),
+    }
+})
+const { editableTabsValue, editableTabs, tableData, datePicker } = toRefs(state)
+
+
+let tabIndex = 2
+function handleTabsEdit(targetName, action) {
+    if (action === 'add') {
+        const newTabName = `${++tabIndex}`
+        editableTabs.value.push({
+            title: 'New Tab',
+            name: newTabName,
+            content: 'New Tab content',
+        })
+        editableTabsValue.value = newTabName
+    } else if (action === 'remove') {
+        const tabs = editableTabs.value
+        let activeName = editableTabsValue.value
+        if (activeName === targetName) {
+            tabs.forEach((tab, index) => {
+                if (tab.name === targetName) {
+                    const nextTab = tabs[index + 1] || tabs[index - 1]
+                    if (nextTab) {
+                        activeName = nextTab.name
+                    }
+                }
+            })
+        }
+
+        editableTabsValue.value = activeName
+        editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
+    }
+}
+
+onMounted(() => {
+})
+
+// 暴露变量
+defineExpose({
+});
+</script>
+<style lang="scss" scoped></style>

src/views/monthReport/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="monthReport">
+  <div class="app-container page-nesting flex">
     <div class="monthContent1" v-if="modleBool">
       <div style="display: flex">
         <el-input placeholder="输入站点名称或关键字" v-model="filterText" class="attContentInput" clearable>
@@ -12,10 +12,10 @@
       <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="scope">
+          <template #default="{ node }">
             <span class="custom-tree-node">
               <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
-                <span>{{ scope.row.label }}</span>
+                <el-text :truncated="true"> {{ node.label }} </el-text>
               </el-tooltip>
             </span>
           </template>
@@ -104,43 +104,54 @@ watch(
 </script>
 
 <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;
+.monthContent1 {
+  background-color: #fff;
+  width: 15%;
+  height: 100%;
+  margin-right: 20px;
+  padding: 20px;
+  min-width: 200px;
+
+  .monthSwitch {
+    margin-top: 20px;
+    width: 100%;
+    height: calc(100% - 52px);
+    cursor: pointer;
+
+    .el-tree {
       width: 100%;
-      height: 20px;
-      cursor: pointer;
+      overflow: hidden;
+      height: 100%;
+      overflow-y: auto;
+
+      &-node {
+        .el-text {
+          width: 170px;
+        }
+      }
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
     }
   }
+}
 
-  .monthContent2 {
-    background-color: #fff;
-    width: 85%;
-    min-width: 845px;
-    height: 100%;
-
-    .basicHeader {
-      margin-left: 15px;
-      margin-top: 15px;
-      margin-bottom: 15px;
-      overflow: hidden;
-    }
+.monthContent2 {
+  background-color: #fff;
+  width: 85%;
+  min-width: 845px;
+  height: 100%;
+
+  .basicHeader {
+    margin-left: 15px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+    overflow: hidden;
   }
 }
 
+
 // tab重置样式
 .tabsSizeColor>.el-tabs__header .el-tabs__item {
   line-height: 50px;
@@ -161,16 +172,4 @@ watch(
 .el-tabs--card>.el-tabs__header .el-tabs__nav {
   border: none;
 }
-</style>
-<style>
-.monthTree {
-  width: 100%;
-  overflow: hidden;
-  height: 76vh;
-  overflow-y: auto;
-}
-
-.monthTree::-webkit-scrollbar {
-  display: none;
-}
 </style>

src/views/monthReport/tables/basicTable.vue

@@ -1,30 +1,30 @@
 <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="Plus" type="success" @click="Touch()">
-        生成
-      </el-button>
-    </div>
-    <div style="margin: 0 15px">
-      <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="primary" size="small" @click.prevent="preview(scope.row)" link>
-              预览
-            </el-button>
-            <el-button type="primary" size="small" @click="download(scope.$index, scope.row)" link>
-              下载
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
+  <div class="filter-container mb-20" style="justify-content: left">
+    <div class="filter-item">
+      <span class="title">选择时间：</span>
+      <el-date-picker v-model="timeValue" type="month" placeholder="请选择时间"></el-date-picker>
     </div>
+
+    <el-button class="search-button" icon="Plus" type="success" @click="Touch()">
+      生成
+    </el-button>
   </div>
+
+  <el-table :data="tableData" :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="42rem"
+    border stripe>
+    <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="primary" size="small" @click.prevent="preview(scope.row)" link>
+          预览
+        </el-button>
+        <el-button type="primary" size="small" @click="download(scope.$index, scope.row)" link>
+          下载
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
 </template>
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/

src/views/monthReport/tables/deviationTable.vue

@@ -1,35 +1,32 @@
 <template>
   <div>
-    <div class="basicHeader">
+    <div class="filter-container mb-20" style="justify-content: left">
       <el-button icon="Download" type="primary" @click="addModle">
         新建模板
       </el-button>
     </div>
-    <div style="margin: 0 15px">
-      <el-table :data="tableData" border stripe 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="primary" size="small" @click.prevent="Update(scope.row)" link>
-              编辑
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
+
+    <el-table :data="tableData" border stripe 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="primary" size="small" @click.prevent="Update(scope.row)" link>
+            编辑
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/
-
 import { ElMessage, ElNotification } from 'element-plus'
 import { ref, onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
 /*----------------------------------接口引入-----------------------------------*/
-import * as api from '@/api/alarmManage/index'
 /*----------------------------------组件引入-----------------------------------*/
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/

src/views/operManage/siteAchives/checkVideo.vue

@@ -1,19 +1,8 @@
 <template>
   <transition name="dialog-fade">
-    <el-dialog
-      v-if="showDialog"
-      :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
-      width="800px"
-      @close="closeDialog(0)"
-    >
-      <el-form
-        ref="formInfo"
-        class="demo-form-inline alarmStatusDialog"
-        label-width="130px"
-  
-      >
+    <el-dialog v-if="showDialog" :title="dialogTitle" class="dialog-component" v-model="showDialog" width="800px"
+      @close="closeDialog(0)">
+      <el-form ref="formInfo" class="demo-form-inline" label-width="130px">
         <div class="topInfo underline">
           <el-row :gutter="20">
             <el-col :span="12">
@@ -85,16 +74,16 @@
                   配置不足（绝缘体）：
                 </el-radio>
               </div>
-              <div  class="mb-10">
+              <div class="mb-10">
                 <el-radio v-model="radio1" label="1">
                   缺少接地线与存放位置编号：
                 </el-radio>
               </div>
               <div>
                 备注:
-              
-                  <el-input v-model="formInfo.remark" style="width:160px"></el-input>
-               
+
+                <el-input v-model="formInfo.remark" style="width:160px"></el-input>
+
               </div>
             </div>
           </el-col>
@@ -237,6 +226,7 @@ export default {
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 150px;
 }

src/views/operManage/siteAchives/index.vue

@@ -55,9 +55,8 @@
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button @click="checkVideo(scope.$index, scope.row)" type="text" size="small"
-            class="delete-text">查看</el-button>
-          <el-button type="text" size="small" @click.prevent="editRow(scope.row)">编辑</el-button>
+          <el-button @click="checkVideo(scope.$index, scope.row)" type="danger" size="small" link>查看</el-button>
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)" link>编辑</el-button>
         </template>
       </el-table-column>
     </el-table>

src/views/operManage/workManage/index.vue

@@ -95,10 +95,10 @@
 
       <el-table-column fixed="right" label="操作" width="">
         <template #default="scope">
-          <el-button type="text" size="small" @click.prevent="editRow(scope.row)">
+          <el-button type="primary" size="small" @click.prevent="editRow(scope.row)" link>
             编辑
           </el-button>
-          <el-button @click="goDhandlePage()" type="text" size="small" class="delete-text">
+          <el-button @click="goDhandlePage()" type="danger" size="small" link>
             待您处理
           </el-button>
         </template>

src/views/powerQuality/asseReport/loopReport.vue

@@ -71,19 +71,9 @@
                     </div>
                   </el-col>
                 </el-row>
-                <el-button class="banlanceBtn" round :type="getData.uaStatus == true
-                  ? 'primary'
-                  : getData.uaStatus == false
-                    ? 'danger'
-                    : 'warning'
-                  ">
-                  {{
-                    getData.uaStatus == true
-                    ? '合格'
-                    : getData.uaStatus == false
-                      ? '不合格'
-                      : '暂无结论'
-                  }}
+                <el-button class="banlanceBtn" round
+                  :type="getData.uaStatus == true ? 'primary' : getData.uaStatus == false ? 'danger' : 'warning'">
+                  {{ getData.uaStatus == true ? '合格' : getData.uaStatus == false ? '不合格' : '暂无结论' }}
                 </el-button>
                 <ul>
                   <li>
@@ -750,4 +740,15 @@ onMounted(() => {
 .el-col {
   border-radius: 4px;
 }
+
+.banlanceBtn {
+  max-width: 80%;
+  // margin: 0 auto 20px;
+  height: 40px;
+  // line-height: 40px;
+  width: 236px;
+  font-size: 16px !important;
+  // background: #6dc6ff;
+  // color: #fff
+}
 </style>

src/views/powerQuality/asseReport/scoreReport/component/radarChart.vue

@@ -3,172 +3,158 @@
     <div class="height260" id="radarChart" ref="radarChart" />
   </div>
 </template>
-<script>
-import {  defineComponent, onMounted, ref,watch } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  getTableData: Object,
+}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+// 读取数据 func
+const loading = ref(true)
+const getData = async () => {
+  loading.value = false
+}
 
-export default defineComponent({
-  name: 'RadarChart',
-  props:{
-    getTableData:Object,
-  },
-  setup(props) {
-
-    // 读取数据 func
-    const loading = ref(true)
-    const getData = async () => {
-
-      // loading.value = true;
-      // await store.dispatch("Home/queryWorksChartData");
-      loading.value = false
-    }
-    function echarts2(){
-       let myChart = echarts.init(document.getElementById('radarChart'))
-      // 绘制图表
-      myChart.setOption({
-        backgroundColor: '#FFF',
-        tooltip: {},
-        grid: {
-          left: '20',
-          right: '40',
-          top: '-20',
-          bottom: '0',
-          containLabel: true,
+function echarts2() {
+  let myChart = echarts.init(document.getElementById('radarChart'))
+  // 绘制图表
+  myChart.setOption({
+    backgroundColor: '#FFF',
+    tooltip: {},
+    grid: {
+      left: '20',
+      right: '40',
+      top: '-20',
+      bottom: '0',
+      containLabel: true,
+    },
+    radar: {
+      radius: '60%',
+      center: ['50%', '55%'],
+      splitNumber: 5,
+      nameGap: '15',
+      name: {
+        textStyle: {
+          color: '#a8a8a8',
         },
-        radar: {
-          radius: '60%',
-          center: ['50%', '55%'],
-          splitNumber: 5,
-          nameGap: '15',
-          name: {
-            textStyle: {
-              color: '#a8a8a8',
-            },
-          },
-          axisLine: {
-            lineStyle: {
-              color: '#ebebeb',
-            },
-          },
-          splitLine: {
-            lineStyle: {
-              width: 1,
-              color: '#ebebeb',
-            },
-          },
-          splitArea: {
-            areaStyle: {
-              color: ['#f8f8f8', '#fff'].reverse(),
-            },
-          },
-          indicator: [
-            {
-              name: '电压平衡度',
-              max: 20,
-            },
-            {
-              name: '电流平衡度',
-              max: 20,
-            },
-            {
-              name: '功率因数',
-              max: 20,
-            },
-            {
-              name: '电压合格率',
-              max: 20,
-            },
-            {
-              name: '负载率',
-              max: 20,
-            },
-          ],
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ebebeb',
+        },
+      },
+      splitLine: {
+        lineStyle: {
+          width: 1,
+          color: '#ebebeb',
+        },
+      },
+      splitArea: {
+        areaStyle: {
+          color: ['#f8f8f8', '#fff'].reverse(),
         },
-        series: [
+      },
+      indicator: [
+        {
+          name: '电压平衡度',
+          max: 20,
+        },
+        {
+          name: '电流平衡度',
+          max: 20,
+        },
+        {
+          name: '功率因数',
+          max: 20,
+        },
+        {
+          name: '电压合格率',
+          max: 20,
+        },
+        {
+          name: '负载率',
+          max: 20,
+        },
+      ],
+    },
+    series: [
+      {
+        name: 'Title✍',
+        type: 'radar',
+        symbolSize: 12,
+        itemStyle: {
+          borderColor: '#ebebeb',
+          borderWidth: 2,
+        },
+        areaStyle: {
+          opacity: 0.3,
+        },
+        data: [
           {
-            name: 'Title✍',
-            type: 'radar',
-            symbolSize: 12,
             itemStyle: {
-              borderColor: '#ebebeb',
-              borderWidth: 2,
-            },
-            areaStyle: {
-              opacity: 0.3,
+              color: '#5eb6db',
             },
-            data: [
-              {
-                itemStyle: {
-                  color: '#5eb6db',
-                },
-                value: [props.getTableData.vtBalunQ?20:0,props.getTableData.elBalunQ?20:0, props.getTableData.cosQ?20:0, props.getTableData.uq?20:0, props.getTableData.iloadQ?20:0],
-              },
-            ],
+            value: [props.getTableData.vtBalunQ ? 20 : 0, props.getTableData.elBalunQ ? 20 : 0, props.getTableData.cosQ ? 20 : 0, props.getTableData.uq ? 20 : 0, props.getTableData.iloadQ ? 20 : 0],
           },
         ],
-      })
-      window.addEventListener('resize', () => {
-        myChart.resize()
-      })
-
-    }
-
-    const writeValue = (val) => {
-    
-      val
-
-      getData()
-      echarts2()
-    }
-
-    //监听变化
-    watch(
-      () => props.getTableData,
-      (newVal, oldVal, clear) => {
-        // 执行异步任务，并得到关闭异步任务的 id
-        // console.log(newVal)
-        let id = writeValue(newVal, oldVal)
-        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-        clear(() => clearTimeout(id))
       },
-      { lazy: true }
-    )
-
-    onMounted(() => {
-      getData()
-      echarts2()
+    ],
+  })
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
 
-     
-    })
+}
 
-    return {
-      loading,
-   
-      getData,
-      echarts2
-    }
+//监听变化
+watch(
+  () => props.getTableData,
+  (newVal, oldVal, clear) => {
+    getData()
+    echarts2()
   },
+  { lazy: true }
+)
+
+onMounted(() => {
+  getData()
+  echarts2()
 })
 </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;
   }
+
   .height260 {
     height: 260px;
   }

src/views/powerQuality/asseReport/scoreReport/index.vue

@@ -42,20 +42,10 @@
 
           <radar-chart :getTableData="getData[0]" v-if="getData[0]" v-loading="loading"></radar-chart>
           <div class="totalScore">
-            总评分：{{ getData[0].score ? getData[0].score : 0 }}
-            <el-button :type="getData[0].score > 80
-              ? 'success'
-              : getData[0].score >= 60
-                ? 'warning'
-                : 'danger'
-              ">
-              {{
-                getData[0].score > 80
-                ? '优秀'
-                : getData[0].score >= 60
-                  ? '合格'
-                  : '不合格'
-              }}
+            <div class="title">总评分：{{ getData[0].score ? getData[0].score : 0 }}</div>
+            <el-button :type="getData[0].score > 80 ? 'success' : getData[0].score >= 60 ? 'warning' : 'danger'"
+              size="small">
+              {{ getData[0].score > 80 ? '优秀' : getData[0].score >= 60 ? '合格' : '不合格' }}
             </el-button>
           </div>
         </div>

src/views/powerQuality/realTimeMonitoring/realScore/index.vue

@@ -41,20 +41,12 @@
             <span>评分</span>
           </div>
           <radar-chart :getTableData="getData[0]" v-loading="loading"></radar-chart>
+
           <div class="totalScore">
-            总评分：{{ getData[0].score }}
-            <el-button :type="getData[0].score > 80
-              ? 'success'
-              : getData[0].score >= 60
-                ? 'warning'
-                : 'danger'">
-              {{
-                getData[0].score > 80
-                ? '优秀'
-                : getData[0].score >= 60
-                  ? '合格'
-                  : '不合格'
-              }}
+            <div class="title">总评分：{{ getData[0].score ? getData[0].score : 0 }}</div>
+            <el-button :type="getData[0].score > 80 ? 'success' : getData[0].score >= 60 ? 'warning' : 'danger'"
+              size="small">
+              {{ getData[0].score > 80 ? '优秀' : getData[0].score >= 60 ? '合格' : '不合格' }}
             </el-button>
           </div>
         </div>

src/views/realMonitored/loadAnalysis/components/loadChart.vue

@@ -0,0 +1,222 @@
+<template>
+    <div shadow="never" class="homeBox">
+        <div class="chart" ref="lineChartBanlance" />
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import {
+    ref,
+    onMounted,
+    watch,
+    getCurrentInstance,
+    reactive,
+    toRefs,
+} from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    height: Number,
+    chartData: Object,
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+let lineChartBanlance = ref(null)
+
+function initEcharts() {
+    const data = {
+        name: '盛齐充电站',
+        capacity: 2500,
+        power: 155.46,
+        progress: 24.7,
+        children: [
+            {
+                name: 'D4KXG_C1',
+                capacity: 152,
+                power: '--',
+                progress: 36,
+            },
+            {
+                name: 'D4KXG_C2',
+                capacity: 152,
+                power: '--',
+                progress: 36.8,
+            },
+            {
+                name: 'D4KXG_C5',
+                capacity: 38,
+                power: '--',
+                progress: 0,
+            },
+            {
+                name: 'D5KXG_C1',
+                capacity: 152,
+                power: '--',
+                progress: 20.5,
+            },
+            {
+                name: 'D5KXG_C1',
+                capacity: 152,
+                power: '--',
+                progress: 20.5,
+            },
+            {
+                name: 'D5KXG_C1',
+                capacity: 152,
+                power: '--',
+                progress: 20.5,
+            },
+        ],
+    }
+
+    let myChart = echarts.init(lineChartBanlance.value)
+    // 绘制图表
+    myChart.setOption({
+        tooltip: {
+            trigger: 'item',
+            triggerOn: 'mousemove',
+            formatter: function (params) {
+                const item = params.data
+
+                if ('children' in item) {
+                    return `
+                        <div style="font-weight:bold;">${item.name}</div>
+                        <div>功率：${item.power}kW</div>
+                        <div>负载率：${item.progress}%</div>
+                        <div>额定容量：${item.capacity}kVA</div>
+                    `
+                } else {
+                    return `
+                        <div style="font-weight:bold;">${item.name}</div>
+                        <div>功率：${item.power}kW</div>
+                        <div>负载率：${item.progress}%</div>
+                        <div>额定电压：${1}kV</div>
+                        <div>额定容量：${item.capacity}kVA</div>
+                    `
+                }
+            },
+        },
+        series: [
+            {
+                type: 'tree',
+                data: [data],
+                top: '1%',
+                left: '30%',
+                bottom: '1%',
+                right: '30%',
+                symbolSize: 7,
+                label: {
+                    position: 'left',
+                    verticalAlign: 'middle',
+                    color: '#fff',
+                    fontSize: 16,
+                    padding: 15,
+                    backgroundColor: '#354353',
+                    borderRadius: 5,
+                    formatter: function (params) {
+                        const node = params.data
+
+                        const barTotal = 20 // 进度条总长度（字符数）
+                        const barDone = Math.floor(barTotal * (node.progress / 100))
+                        const barRest = barTotal - barDone
+
+                        var res =
+                            `{name|${node.name}} {capacity|${node.capacity}kVA} {power|${node.power}kW}\n\n` +
+                            `{bar|${'■'.repeat(barDone)}${'□'.repeat(barRest)}}{percent|${node.progress}%}`
+                        return res
+                    },
+                    // 富文本样式（关键！区分不同文本块）
+                    rich: {
+                        name: {
+                            fontSize: 16,
+                            fontWeight: 'bold',
+                            color: '#fff',
+                        },
+                        capacity: {
+                            fontSize: 16,
+                            padding: [1, 10, 0, 20],
+                        },
+                        power: {
+                            fontSize: 16,
+                            color: '#5ebddd',
+                            padding: [1, 10, 0, 0],
+                        },
+                        bar: {
+                            color: '#0f0',
+                            // backgroundColor: '#fff',
+                            height: 16,
+                            borderRadius: 8,
+                            padding: [0, 2],
+                            lineHeight: 16,
+                            fontWeight: 'bold',
+                        },
+                        percent: {
+                            color: '#0f0',
+                            fontSize: 14,
+                            padding: [0, 5],
+                        },
+                    },
+                },
+                itemStyle: {
+                    borderColor: '#fff',
+                    borderWidth: 2,
+                    shadowBlur: 10,
+                    shadowColor: 'rgba(0,0,0,0.2)',
+                },
+                leaves: {
+                    label: {
+                        position: 'right',
+                        verticalAlign: 'middle',
+                        align: 'left',
+                    },
+                },
+                emphasis: {
+                    focus: 'descendant',
+                    label: { show: true },
+                    itemStyle: {
+                        borderColor: '#ffd700',
+                        borderWidth: 3,
+                    },
+                },
+                expandAndCollapse: true,
+                animationDuration: 550,
+                animationDurationUpdate: 750,
+            },
+        ],
+    })
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+function writeValue(val) {
+    // getData()
+    initEcharts()
+}
+
+//监听变化
+watch(
+    () => props.chartData,
+    (newVal, oldVal, clear) => {
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(writeValue(newVal, oldVal)))
+    },
+    { lazy: true }
+)
+
+// 暴露变量
+defineExpose({
+    initEcharts,
+})
+</script>
+<style lang="scss" scoped>
+.homeBox {
+    .chart {
+        height: 100%;
+    }
+}
+</style>

src/views/realMonitored/loadAnalysis/components/powerChart.vue

@@ -0,0 +1,110 @@
+<template>
+    <div shadow="never" class="homeBox">
+        <div class="chart" ref="lineChartBanlance" />
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    height: Number,
+    chartData: Object
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+let lineChartBanlance = ref(null)
+
+function initEcharts() {
+    let myChart = echarts.init(lineChartBanlance.value)
+    // 绘制图表
+    myChart.setOption({
+        backgroundColor: '#fff',
+        title: {
+            subtext: '',
+            left: 'center'
+        },
+        series: [
+            {
+                type: 'sankey',
+                left: "2%",
+                top: "2%",
+                right: "22%",
+                bottom: "2%",
+                // height: 10,
+                draggable: true,//控制节点拖拽
+                nodeWidth: 30,
+                nodeAlign: "justify",//对齐方式
+                // orient: 'vertical',//桑基图中节点的布局方向
+                label: {
+                    color: 'rgba(0,0,0,0.7)',
+                    fontFamily: 'Arial',
+                    fontSize: 14,
+                    formatter: function (params) {
+                        const node = params.data
+                        var res =
+                            `{name|${node.name}} / {capacity|${node.capacity}kVA} / {power|${node.power}kW} / {progress|${node.progress}%}`
+                        return res
+                    },
+                    rich: {
+                        name: {
+                            color: '#000',
+                        },
+                        capacity: {
+                            color: '#000',
+                        },
+                        power: {
+                            color: '#5dbadb',
+                        },
+                        progress: {
+                            color: '#31bb06',
+                        }
+                    },
+                },
+                lineStyle: {
+                    color: '#7f8253',
+                    curveness: 0.5,
+                    width: 1 // 设置线条粗细
+                },
+                data: props.chartData.seriesData,
+                links: props.chartData.seriesLinks,
+            }
+        ]
+    })
+    window.addEventListener('resize', () => {
+        myChart.resize()
+    })
+}
+
+function writeValue(val) {
+    // getData()
+    initEcharts()
+}
+
+//监听变化
+watch(
+    () => props.chartData,
+    (newVal, oldVal, clear) => {
+        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+        clear(() => clearTimeout(writeValue(newVal, oldVal)))
+    },
+    { lazy: true }
+)
+
+// 暴露变量
+defineExpose({
+    initEcharts,
+});
+</script>
+<style lang="scss" scoped>
+.homeBox {
+    .chart {
+        height: 100%;
+    }
+}
+</style>

src/views/realMonitored/loadAnalysis/components/tableChart.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="homeBox">
+        <el-table class="table" :data="props.tableData" border stripe>
+            <el-table-column prop="date" label="设备目录" />
+            <el-table-column prop="name" label="设备名称" />
+            <el-table-column prop="address" label="设备sn" />
+            <el-table-column prop="name" label="额定电压（kV）" />
+            <el-table-column prop="address" label="额定容量（kVA）" />
+            <el-table-column prop="name" label="有功功率（kW）" />
+            <el-table-column prop="name" label="负载率（%）" />
+        </el-table>
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import * as echarts from 'echarts'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+    height: Number,
+    tableData: Object
+}) //数据双向绑定
+/*----------------------------------变量声明-----------------------------------*/
+
+
+// 暴露变量
+defineExpose({
+});
+</script>
+<style lang="scss" scoped>
+.homeBox {
+    padding: 10px;
+
+    .table {
+        max-height: 100%;
+    }
+}
+</style>

src/views/realMonitored/loadAnalysis/index.vue

@@ -0,0 +1,180 @@
+<template>
+    <div class="app-container page-nesting loadAnalysis">
+        <!-- 筛选start -->
+        <div class="filter-container mb-20" style="justify-content: left">
+            <el-radio-group v-model="timeRangeRadio.value" style="margin-right: 20px" @change="handleTimeRangeChange">
+                <el-radio-button value="realTime">实时</el-radio-button>
+                <el-radio-button value="history">历史</el-radio-button>
+            </el-radio-group>
+
+            <div style="margin:auto 20px auto 0">数据刷新时间：2025-07-24 16:01:26</div>
+            <el-button type="primary" icon="RefreshRight"> 刷新 </el-button>
+            <el-button type="primary" icon="Upload"> 导出 </el-button>
+
+            <el-radio-group v-model="viewTypeRadio.value" style="margin-left:auto" @change="handleViewChange">
+                <el-radio :value="1">功率流图</el-radio>
+                <el-radio :value="2">负载情况</el-radio>
+                <el-radio :value="3">原始数据</el-radio>
+            </el-radio-group>
+        </div>
+        <!-- 筛选end -->
+
+        <!-- 功率流图 -->
+        <powerChart ref="powerChartRef" class="bg-white" v-if="viewTypeRadio.value == 1" :chartData="powerChartData"
+            style="width: 100%;height:calc(100% - 52px) ;" />
+        <!-- 负载情况 -->
+        <loadChart ref="loadChartRef" class="bg-white" v-if="viewTypeRadio.value == 2" :chartData="powerChartData"
+            style="width: 100%;height:calc(100% - 52px) ;" />
+        <!-- 原始数据 -->
+        <tableChart ref="tableChartRef" class="bg-white" v-if="viewTypeRadio.value == 3" :tableData="tableData"
+            style="width: 100%;height:calc(100% - 52px) ;" />
+    </div>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import powerChart from './components/powerChart.vue'
+import loadChart from './components/loadChart.vue'
+import tableChart from './components/tableChart.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([])
+const { proxy } = getCurrentInstance()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+    timeRangeRadio: {
+        value: 'realTime',
+    },
+    viewTypeRadio: {
+        value: 1,
+    },
+
+
+    powerChartData: {
+        seriesData: [
+            {
+                depth: 0,
+                name: '盛齐充电站',
+                value: 2500,
+                capacity: 2500,
+                power: 36,
+                progress: 1.4,
+                itemStyle: {
+                    color: '#5ba33b',
+                }
+            },
+            {
+                name: 'D4KXG_C1',
+                value: 30,
+                capacity: 2500,
+                power: "--",
+                progress: 1.4,
+                itemStyle: {
+                    color: '#333333',
+                }
+            },
+            {
+                name: 'D4KXG_C2',
+                value: 30,
+                capacity: 2500,
+                power: "--",
+                progress: 1.4,
+                itemStyle: {
+                    color: '#333333',
+                }
+            },
+            {
+                name: 'D4KXG_C5',
+                value: 30,
+                capacity: 2500,
+                power: "--",
+                progress: 1.4,
+                itemStyle: {
+                    color: '#5ba33b',
+                }
+            },
+            {
+                name: 'D5KXG_C1',
+                value: 30,
+                capacity: 2500,
+                power: "--",
+                progress: 1.4,
+                itemStyle: {
+                    color: '#5ba33b',
+                }
+            },
+        ],
+        seriesLinks: [
+            {
+                source: '盛齐充电站',
+                target: 'D4KXG_C1',
+                value: 0,
+            },
+            {
+                source: '盛齐充电站',
+                target: 'D4KXG_C2',
+                value: 0
+            },
+            {
+                source: '盛齐充电站',
+                target: "D4KXG_C5",
+                value: 0
+            },
+            {
+                source: '盛齐充电站',
+                target: 'D5KXG_C1',
+                value: 0
+            },
+        ]
+    },
+    loadChartData: {
+
+    },
+    tableData: [],
+})
+const { timeRangeRadio, viewTypeRadio, powerChartData, loadChartData, tableData } = toRefs(state)
+
+
+
+function powerChartInit() {
+    proxy.$refs['powerChartRef'].initEcharts();
+}
+
+function handleViewChange(val) {
+    switch (val) {
+        case 1:
+            powerChartInit()
+            break
+        case 2:
+            proxy.$refs['loadChartRef'].initEcharts();
+            break
+        case 3:
+            break
+    }
+
+    console.log(val)
+}
+
+function handleTimeRangeChange(val) {
+    switch (val) {
+        case "realTime":
+
+            break
+        case "history":
+
+            break
+    }
+}
+
+onMounted(() => {
+    proxy.$refs['powerChartRef'].initEcharts();
+})
+</script>
+
+<style lang="scss" scoped></style>

src/views/siteManage/basicInfo/index.vue

@@ -3,68 +3,65 @@
     <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="110px" class="demo-ruleForm">
       <el-row style="min-width: 1100px">
         <el-col :span="8" :gutter="20">
-          <div class="grid-content bg-purple">
-            <el-form-item label="站点名称：" prop="siteName">
-              <el-input v-model="ruleForm.siteName"></el-input>
-            </el-form-item>
-
-            <!-- <el-form-item label="站点类型：" prop="siteType">
+          <el-form-item label="站点名称：" prop="siteName">
+            <el-input v-model="ruleForm.siteName"></el-input>
+          </el-form-item>
+          <!-- <el-form-item label="站点类型：" prop="siteType">
               <el-input v-model="ruleForm.siteType"></el-input>
             </el-form-item> -->
-            <el-form-item label="用户公司：" prop="userCompany">
-              <el-input v-model="ruleForm.userCompany"></el-input>
-            </el-form-item>
-
-            <el-form-item label="投运时间：" prop="operationTime" style="margin-top: 0px">
-              <el-date-picker v-model="ruleForm.operationTime" style="width: 100%" type="date" placeholder="选择日期时间"
-                @change="comPareTime(1)"></el-date-picker>
-            </el-form-item>
-            <el-form-item label="服务截止：" prop="serviceDeadline">
-              <el-date-picker v-model="ruleForm.serviceDeadline" type="date" placeholder="选择日期时间"
-                @change="comPareTime(2)"></el-date-picker>
-            </el-form-item>
-
-            <el-form-item label="装机容量：" prop="installedCapacity">
-              <el-input v-model="ruleForm.installedCapacity"></el-input>
-            </el-form-item>
-            <el-form-item label="供电类型：" prop="powerSupplyType">
-              <el-radio-group v-model="ruleForm.powerSupplyType">
-                <el-radio label="1" value="1">单路</el-radio>
-                <el-radio label="2" value="2">双路</el-radio>
-              </el-radio-group>
-            </el-form-item>
-            <el-form-item label="电压等级：" prop="voltageLevel">
-              <el-input v-model="ruleForm.voltageLevel"></el-input>
-            </el-form-item>
-            <el-form-item label="站点地址：" prop="siteAddress">
-              <el-input v-model="ruleForm.siteAddress"></el-input>
-            </el-form-item>
-
-            <el-form-item label="所属区域：" prop="region">
-              <el-radio-group v-model="ruleForm.region">
-                <el-radio label="1">宝山</el-radio>
-                <el-radio label="2">嘉定</el-radio>
-              </el-radio-group>
-            </el-form-item>
-
-            <el-form-item label="所属台区：" prop="stationAreaId">
-              <el-select v-model="ruleForm.stationAreaId" placeholder="请选择">
-                <el-option v-for="(item, index) in platFormData" :key="index" :label="item.platformAreaName"
-                  :value="item.id"></el-option>
-              </el-select>
-            </el-form-item>
-
-            <el-form-item label="站点坐标：" prop="longitude">
-              <el-input v-model="ruleForm.longitude" placeholder="请输入经度">
-                <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
-              </el-input>
-            </el-form-item>
-            <el-form-item label="" prop="latitude">
-              <el-input v-model="ruleForm.latitude" placeholder="请输入维度">
-                <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
-              </el-input>
-            </el-form-item>
-          </div>
+          <el-form-item label="用户公司：" prop="userCompany">
+            <el-input v-model="ruleForm.userCompany"></el-input>
+          </el-form-item>
+
+          <el-form-item label="投运时间：" prop="operationTime" style="margin-top: 0px">
+            <el-date-picker v-model="ruleForm.operationTime" style="width: 100%" type="date" placeholder="选择日期时间"
+              @change="comPareTime(1)"></el-date-picker>
+          </el-form-item>
+          <el-form-item label="服务截止：" prop="serviceDeadline">
+            <el-date-picker v-model="ruleForm.serviceDeadline" type="date" placeholder="选择日期时间"
+              @change="comPareTime(2)"></el-date-picker>
+          </el-form-item>
+
+          <el-form-item label="装机容量：" prop="installedCapacity">
+            <el-input v-model="ruleForm.installedCapacity"></el-input>
+          </el-form-item>
+          <el-form-item label="供电类型：" prop="powerSupplyType">
+            <el-radio-group v-model="ruleForm.powerSupplyType">
+              <el-radio label="1" value="1">单路</el-radio>
+              <el-radio label="2" value="2">双路</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="电压等级：" prop="voltageLevel">
+            <el-input v-model="ruleForm.voltageLevel"></el-input>
+          </el-form-item>
+          <el-form-item label="站点地址：" prop="siteAddress">
+            <el-input v-model="ruleForm.siteAddress"></el-input>
+          </el-form-item>
+
+          <el-form-item label="所属区域：" prop="region">
+            <el-radio-group v-model="ruleForm.region">
+              <el-radio label="1">宝山</el-radio>
+              <el-radio label="2">嘉定</el-radio>
+            </el-radio-group>
+          </el-form-item>
+
+          <el-form-item label="所属台区：" prop="stationAreaId">
+            <el-select v-model="ruleForm.stationAreaId" placeholder="请选择">
+              <el-option v-for="(item, index) in platFormData" :key="index" :label="item.platformAreaName"
+                :value="item.id"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="站点坐标：" prop="longitude">
+            <el-input v-model="ruleForm.longitude" placeholder="请输入经度">
+              <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="" prop="latitude">
+            <el-input v-model="ruleForm.latitude" placeholder="请输入维度">
+              <i :default-slot="suffix" class="el-input__icon el-icon-location-outline"></i>
+            </el-input>
+          </el-form-item>
         </el-col>
         <el-col :span="8" :gutter="20">
           <!-- <el-form-item label="监察：" prop="region">
@@ -126,46 +123,40 @@
           </el-form-item>
         </el-col>
         <el-col :span="8" :gutter="20">
-          <div class="grid-content bg-purple">
-            <div class="grid-content bg-purple-light">
-              <!-- 站点照片start -->
-              <div class="blockTitle mb-20">站点照片</div>
-              <!-- <img v-if="ruleForm.value.sitePictureOne" :src="ruleForm.value.sitePictureOne" alt=""> -->
-              <el-form-item label="选择文件：" prop="delivery">
-                <el-upload :action="uploadUrl" :on-success="handleUpAvatar" :on-remove="handleRemove"
-                  :show-file-list="true" list-type="picture-card" :limit="3" :file-list="fileListImages"
-                  :on-preview="handlePictureCardPreview" :headers="{ accessToken: [accessToken] }"
-                  :on-exceed="overLength">
-                  <Plus style="width: 2em; height: 2em;" />
-                </el-upload>
-                <el-dialog v-model="dialogVisible" width="400px">
-                  <img style="width: 100%" :src="dialogImageUrl" alt="" />
-                </el-dialog>
-              </el-form-item>
-              <!-- 站点照片end -->
-
-              <el-form-item label="联系人：" prop="userName">
-                <el-input v-model="ruleForm.userName"></el-input>
-              </el-form-item>
-              <el-form-item label="联系方式：" prop="phone">
-                <el-input v-model="ruleForm.phone"></el-input>
-              </el-form-item>
-              <el-form-item label="联系人2：" prop="spareUserName">
-                <el-input v-model="ruleForm.spareUserName"></el-input>
-              </el-form-item>
-              <el-form-item label="联系方式2：" prop="sparePhone">
-                <el-input v-model="ruleForm.sparePhone"></el-input>
-              </el-form-item>
-            </div>
-            <br />
-            <el-form-item>
-              <el-button type="primary" @click="submitForm('formInfo')"
-                :disabled="isDisable || store.state.authorities.indexOf('修改') == -1">
-                保存
-              </el-button>
-              <!-- <el-button @click="resetForm('formInfo')">取消</el-button> -->
-            </el-form-item>
-          </div>
+          <!-- 站点照片start -->
+          <div class="blockTitle mb-20">站点照片</div>
+          <!-- <img v-if="ruleForm.value.sitePictureOne" :src="ruleForm.value.sitePictureOne" alt=""> -->
+          <el-form-item label="选择文件：" prop="delivery">
+            <el-upload :action="uploadUrl" :on-success="handleUpAvatar" :on-remove="handleRemove" :show-file-list="true"
+              list-type="picture-card" :limit="3" :file-list="fileListImages" :on-preview="handlePictureCardPreview"
+              :headers="{ accessToken: [accessToken] }" :on-exceed="overLength">
+              <Plus style="width: 2em; height: 2em;" />
+            </el-upload>
+            <el-dialog v-model="dialogVisible" width="400px">
+              <img style="width: 100%" :src="dialogImageUrl" alt="" />
+            </el-dialog>
+          </el-form-item>
+          <!-- 站点照片end -->
+          <el-form-item label="联系人：" prop="userName">
+            <el-input v-model="ruleForm.userName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式：" prop="phone">
+            <el-input v-model="ruleForm.phone"></el-input>
+          </el-form-item>
+          <el-form-item label="联系人2：" prop="spareUserName">
+            <el-input v-model="ruleForm.spareUserName"></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式2：" prop="sparePhone">
+            <el-input v-model="ruleForm.sparePhone"></el-input>
+          </el-form-item>
+          <br />
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('formInfo')"
+              :disabled="isDisable || store.state.authorities.indexOf('修改') == -1">
+              保存
+            </el-button>
+            <!-- <el-button @click="resetForm('formInfo')">取消</el-button> -->
+          </el-form-item>
         </el-col>
       </el-row>
     </el-form>

src/views/siteManage/camera/index.vue

@@ -12,8 +12,6 @@
         </a>
       </div>
 
-
-
       <el-upload class="upload-demo" :action="fileUrl + '/device/deviceImport'" :on-progress="handleProgress"
         :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
           accessToken: [accessToken],
@@ -29,9 +27,9 @@
 
     <!-- 表格start -->
 
-    <el-table :data="deviceData" :header-cell-style="{ background: '#FAFAFA' }" v-loading="loadingStatus"
-      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)"> border stripe
-      <el-table-column prop="status" align="center" label="状态" width="50">
+    <el-table :data="deviceData" v-loading="loadingStatus" element-loading-text="摄像头打开中...."
+      element-loading-background="rgba(255, 255, 255, 0.6)"> border stripe
+      <el-table-column prop="status" align="center" label="状态" width="80">
         <template #default="scope">
           <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
             ? 'background-color:#04F21C'
@@ -54,15 +52,14 @@
 
       <el-table-column fixed="right" label="操作" width="140">
         <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">
             <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>

src/views/siteManage/groupInfoCom.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="siteManage-main groupInfo">
+  <div class="siteManage-main groupInfo p20">
     <el-form :model="form" :rules="rules" ref="formInfo" label-width="100px">
-      <div class="grid-content bg-purple">
-        <div class="el-form-item blockTitle">分组信息</div>
-        <div></div>
-        <el-form-item label="分组名称" prop="groupingName" label-width="130px">
-          <el-input v-model="form.groupingName" v-if="label == '所有站点'" disabled></el-input>
-          <el-input v-model="form.groupingName" v-else></el-input>
-        </el-form-item>
+      <div class="el-form-item blockTitle">分组信息</div>
+      <div></div>
+      <el-form-item label="分组名称" prop="groupingName" label-width="130px">
+        <el-input v-model="form.groupingName" v-if="label == '所有站点'" disabled></el-input>
+        <el-input v-model="form.groupingName" v-else></el-input>
+      </el-form-item>
 
-        <el-form-item>
-          <el-button type="primary" @click="submitForm('formInfo')" v-if="label != '所有站点'">
-            保存
-          </el-button>
-        </el-form-item>
-      </div>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('formInfo')" v-if="label != '所有站点'">
+          保存
+        </el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>

src/views/siteManage/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="app-container page-nesting" style="position: relative">
+  <div class="app-container page-nesting" style="display: flex;">
     <!-- 树形组件start -->
-    <div class="grid-content treeDom">
+    <div class="grid-content left-area">
       <div style="text-align: center" class="mb-20">
         <el-button :type="treeLevel == 3 || groupingId == 0 || treeLevel == 1 ? '' : 'primary'" @click="addGroup()"
           :disabled="treeLevel == 3 || groupingId == 0 || treeLevel == 1 || store.state.authorities.indexOf('新增') == -1">
@@ -14,16 +14,15 @@
       </div>
       <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="mb-20 searchInput"></el-input>
 
-      <el-tree class="filter-tree siteTree" ref="tree" :data="treeData" node-key="id"
+      <el-tree class="filter-tree" ref="tree" :data="treeData" node-key="id"
         :props="{ children: 'children', label: 'label', }" :filter-node-method="filterNode" @node-click="handleNodeClick"
         :expand-on-click-node="false" :highlight-current="true" default-expand-all :current-node-key="0">
         <template #default="{ node, data }">
           <span class="custom-tree-node" style="width: 100%" @mouseenter="(event) => event.show = true"
             @mouseleave="(event) => event.show = false">
-            <span>{{ node.label }}</span>
-            <!-- <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
-              <span>{{ node.label }}</span>
-            </el-tooltip> -->
+            <el-tooltip class="item" effect="dark" :content="node.label" placement="top">
+              <el-text :truncated="true"> {{ node.label }} </el-text>
+            </el-tooltip>
             <span>
               <a class="deleteLink" v-show="data.show" @click="remove(node, data)">
                 <!-- <i size="mini" class="el-icon-delete"></i> -->
@@ -36,7 +35,7 @@
     <!-- 树形组件end -->
 
     <!-- 站点主题start -->
-    <div class="grid-content nestingDom" style="width: calc(100% - 300px)" v-if="flag2 && treeLevel != 1">
+    <div class="grid-content  right-area" v-if="flag2 && treeLevel != 1">
       <el-tabs v-if="treeLevel == 3 || groupingId == 0" v-model="activeName" type="card">
         <el-tab-pane label="基本信息" name="first">
           <basic-info class="basicInfo" :siteId="siteId" :groupingId="groupingId" :siteName="siteName"
@@ -265,7 +264,15 @@ onMounted(() => {
 nextTick(() => { })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+.groupInfo,
+.basic-info-page,
+.powerScore {
+  .el-form-item {
+    margin-left: 0px !important
+  }
+}
+
 .custom-tree-node {
   overflow: hidden;
   white-space: nowrap;
@@ -276,32 +283,39 @@ nextTick(() => { })
 .grid-content {
   background: #fff;
   height: calc(100vh - 130px);
+  min-height: calc(100vh - 130px);
   overflow-y: auto;
 }
 
-.el-input__inner {
-  border-radius: 20px !important;
-}
-
-.treeDom {
-  width: 290px;
-  position: absolute;
-  left: 0;
-  // margin-left: 20px;
+.left-area {
+  width: 20%;
   padding: 20px;
-  min-height: calc(100vh - 130px);
-
-  .el-icon-search {
-    color: #409eff;
-  }
 
   .el-button {
     width: 100px;
   }
+
+  .filter-tree .el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+  }
 }
 
-.nestingDom {
-  margin-left: 300px;
+.right-area {
+  width: calc(80% - 20px);
+  margin-left: 20px;
+
+
+  .basicInfo {
+    width: 100%;
+    height: calc(100vh - 225px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+  }
+
 }
 </style>
 <style lang="scss">

src/views/siteManage/powerScore/index.vue

@@ -1,41 +1,39 @@
 <template>
   <div class="siteManage-main powerScore">
     <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="137px" class="demo-ruleForm">
-      <div class="grid-content bg-purple">
-        <div class="el-form-item blockTitle">电能质量各要素权重</div>
-        <div></div>
-        <el-form-item label="功率因数(100%)" prop="powerFactorOne" label-width="130px">
-          <el-input v-model="ruleForm.powerFactorOne"></el-input>
-        </el-form-item>
-
-        <el-form-item label="电压合格率(%)" prop="voltageQualified" label-width="130px">
-          <el-input v-model="ruleForm.voltageQualified"></el-input>
-        </el-form-item>
-        <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
-          <el-input v-model="ruleForm.loadRate"></el-input>
-        </el-form-item>
-        <el-form-item label="电流平衡度(%)：" prop="currentBalance" label-width="130px">
-          <el-input v-model="ruleForm.currentBalance"></el-input>
-        </el-form-item>
-
-        <el-form-item label="电压平衡度(%)：" prop="voltageBalance" label-width="130px">
-          <el-input v-model="ruleForm.voltageBalance"></el-input>
-        </el-form-item>
-        <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
-          <el-input v-model="ruleForm.thdu"></el-input>
-        </el-form-item>
-
-        <div class="el-form-item blockTitle">功率因素</div>
-
-        <el-form-item label="功率因数" prop="powerFactorTwo" label-width="130px">
-          <el-input v-model="ruleForm.powerFactorTwo"></el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisable">
-            保存
-          </el-button>
-        </el-form-item>
-      </div>
+      <div class="el-form-item blockTitle">电能质量各要素权重</div>
+      <div></div>
+      <el-form-item label="功率因数(100%)" prop="powerFactorOne" label-width="130px">
+        <el-input v-model="ruleForm.powerFactorOne"></el-input>
+      </el-form-item>
+
+      <el-form-item label="电压合格率(%)" prop="voltageQualified" label-width="130px">
+        <el-input v-model="ruleForm.voltageQualified"></el-input>
+      </el-form-item>
+      <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
+        <el-input v-model="ruleForm.loadRate"></el-input>
+      </el-form-item>
+      <el-form-item label="电流平衡度(%)：" prop="currentBalance" label-width="130px">
+        <el-input v-model="ruleForm.currentBalance"></el-input>
+      </el-form-item>
+
+      <el-form-item label="电压平衡度(%)：" prop="voltageBalance" label-width="130px">
+        <el-input v-model="ruleForm.voltageBalance"></el-input>
+      </el-form-item>
+      <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
+        <el-input v-model="ruleForm.thdu"></el-input>
+      </el-form-item>
+
+      <div class="el-form-item blockTitle">功率因素</div>
+
+      <el-form-item label="功率因数" prop="powerFactorTwo" label-width="130px">
+        <el-input v-model="ruleForm.powerFactorTwo"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisable">
+          保存
+        </el-button>
+      </el-form-item>
     </el-form>
   </div>
 </template>

src/views/siteManage/variableList/index.vue

@@ -50,8 +50,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }"
-      :default-sort="{ prop: 'date', order: 'descending' }">
+    <el-table :data="tableData" border stripe :default-sort="{ prop: 'date', order: 'descending' }">
       <el-table-column type="index" label="序号" width="80px" sortable></el-table-column>
       <el-table-column prop="variableName" label="变量名" width="150px" sortable></el-table-column>
       <el-table-column prop="variableCoding" label="变量编号" width="150px" sortable></el-table-column>

src/views/siteManage/watchDog/index.vue

@@ -24,7 +24,7 @@
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+    <el-table :data="tableData" border stripe>
       <el-table-column prop="status" align="center" label="状态" width="50">
         <template #default="scope">
           <el-avatar class="status" :style="scope.row.status == 0
@@ -42,15 +42,14 @@
       <el-table-column prop="qualityAnalysis" label="电能质量分析" align="center" width=""></el-table-column>
       <el-table-column fixed="right" label="操作" width="140">
         <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">
             <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>

src/views/stationManage/index.vue

@@ -22,7 +22,7 @@
       <!-- 筛选end -->
 
       <!-- 表格start -->
-      <el-table :data="tableData" :header-cell-style="{ background: '#FAFAFA' }" border stripe>
+      <el-table :data="tableData" border stripe>
         <el-table-column fixed prop="platformAreaName" label="台区名称" width=""></el-table-column>
         <el-table-column prop="platformAreaCode" label="台区编号" width=""></el-table-column>
         <el-table-column prop="platformAreaAddress" label="台区地址" width=""></el-table-column>

src/views/stationManage/siteList.vue

@@ -1,12 +1,13 @@
 <template>
   <div class="app-container">
-    <div class="siteTitle">
-      <el-button class="goBack" @click="goBack">返回</el-button>
-      台区1-站点列表
+    <div class="filter-container" style="justify-content: left">
+      <div class="filter-item">
+        <el-button class="goBack" @click="goBack">返回</el-button>
+      </div>
     </div>
-
+    <div class="mb-20" style="width: 100%;font-size: 16px;text-align: center;">台区1-站点列表</div>
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+    <el-table :data="tableData" border stripe>
       <el-table-column prop="siteName" label="站点名称" width="" fixed></el-table-column>
       <el-table-column prop="siteAddress" label="站点位置" width=""></el-table-column>
       <el-table-column prop="userName" label="联系人" width="">