Merge branch 'master' of http://47.111.81.118:3000/xf15575941817/fiveFollowing-admin

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+.history
 
 # local env files
 .env.local

.history/src/assets/css/index_20211008093225.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008093701.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.page-nesting .el-form-item {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008093727.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.page-nesting .el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.page-nesting .el-form-item {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008093844.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008093914.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008094114.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008094421.scss

@@ -0,0 +1,285 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+    .el-form-item.basic-info-page {
+        margin-left: 0px
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008095550.scss

@@ -0,0 +1,286 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page .el-form-item {
+    margin-left: 0px
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008095659.scss

@@ -0,0 +1,286 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page .el-form-item {
+    margin-left: 0px!important
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008095828.scss

@@ -0,0 +1,289 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}

.history/src/assets/css/index_20211008100307.scss

@@ -0,0 +1,301 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-link.el-link--primary {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008100358.scss

@@ -0,0 +1,301 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008101048.scss

@@ -0,0 +1,302 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+}
+
+.el-upload,
+.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008101100.scss

@@ -0,0 +1,300 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+// .el-upload--picture-card {
+//     width: 90px;
+//     height: 90px;
+// }
+.el-upload.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px;
+    height: 90px;
+    line-height: 90px;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008101319.scss

@@ -0,0 +1,300 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+// .el-upload--picture-card {
+//     width: 90px;
+//     height: 90px;
+// }
+.el-upload.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px!important;
+    height: 92px!important;
+    line-height: 92px!important;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px!important;
+    height: 90px!important;
+    line-height: 90px!important;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008101411.scss

@@ -0,0 +1,296 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px!important;
+    height: 92px!important;
+    line-height: 92px!important;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px!important;
+    height: 90px!important;
+    line-height: 90px!important;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008110247.scss

@@ -0,0 +1,296 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000!important
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px!important;
+    height: 92px!important;
+    line-height: 92px!important;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px!important;
+    height: 90px!important;
+    line-height: 90px!important;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008114013.scss

@@ -0,0 +1,300 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000!important
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table--small {
+    font-size: 14px
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px!important;
+    height: 92px!important;
+    line-height: 92px!important;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px!important;
+    height: 90px!important;
+    line-height: 90px!important;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/assets/css/index_20211008114101.scss

@@ -0,0 +1,300 @@
+@import './variables.scss';
+@import './mixin.scss';
+// @import './transition.scss';
+@import './element-variables.scss';
+// @import './sidebar.scss';
+body {
+    height: 100%;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+
+label {
+    font-weight: 700;
+}
+
+html {
+    height: 100%;
+    box-sizing: border-box;
+}
+
+#app {
+    height: 100%;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+a:focus,
+a:active {
+    outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+    cursor: pointer;
+    color: inherit;
+    text-decoration: none;
+}
+
+div:focus {
+    outline: none;
+}
+
+.clearfix {
+    &:after {
+        visibility: hidden;
+        display: block;
+        font-size: 0;
+        content: " ";
+        clear: both;
+        height: 0;
+    }
+}
+
+// main-container global css
+.mb-20 {
+    margin-bottom: 20px
+}
+
+.mr-30 {
+    margin-right: 30px
+}
+
+.mt-20 {
+    margin-top: 20px
+}
+
+.mt-40 {
+    margin-top: 40px
+}
+
+.mt-60 {
+    margin-top: 60px
+}
+
+.font-16 {
+    font-size: 16px
+}
+
+.padding-20 {
+    padding: 20px
+}
+
+.text-center {
+    text-align: center
+}
+
+.delete-text {
+    color: #F80000!important
+}
+
+.remarksTxt {
+    opacity: .45;
+    line-height: 1.5;
+}
+
+.app-container {
+    padding: 20px;
+    // width: 100%;
+    width: calc(100% - 40px);
+    // height: 100%;
+    margin: 20px;
+    margin-top: 70px;
+    background: #fff;
+    min-height: calc(100vh - 140px)
+}
+
+.filter-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    vertical-align: middle;
+    .el-button+.el-button {
+        margin-left: 30px!important;
+    }
+    .filter-item {
+        margin-right: 30px;
+        display: inline-block;
+    }
+}
+
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
+
+.el-button {
+    padding: 10px 12px;
+}
+
+.el-table--small {
+    font-size: 14px!important
+}
+
+.el-table td,
+.el-table th {
+    padding: 10px 0
+}
+
+// 弹框样式start
+.el-dialog__header {
+    background: #f8f8f8;
+    padding: 16px 20px 16px;
+}
+
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 400px;
+    margin: 0 auto 20px;
+}
+
+// 弹框样式end
+// 台区列表
+.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;
+    background: #04F21C
+}
+
+// 基本信息
+.basicInfo {
+    width: 100%;
+    height: calc(100vh - 193px);
+    // border: 1px solid pink;
+    display: block;
+    overflow-y: auto;
+}
+
+.siteManage-main {
+    padding: 20px;
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
+    }
+}
+
+.goArchive {
+    color: #056FFF;
+    text-decoration: underline;
+}
+
+.blockTitle {
+    font-weight: bold
+}
+
+// input长度
+.el-form-item__content {
+    width: 250px;
+}
+
+.el-date-editor.el-input,
+.el-date-editor.el-input__inner {
+    width: 250px;
+}
+
+.el-select {
+    width: 100%
+}
+
+// 单选框样式
+.el-radio {
+    margin-right: 24px
+}
+
+//提交:
+.sublitArea {
+    text-align: right;
+    margin-top: 40px
+}
+
+// 图片上传样式 start
+.el-upload.el-upload--picture-card {
+    width: 90px;
+    height: 90px;
+    line-height: 100px;
+}
+
+.el-upload-list--picture-card .el-upload-list__item {
+    width: 92px!important;
+    height: 92px!important;
+    line-height: 92px!important;
+    text-align: center
+}
+
+.el-upload-list--picture-card .el-upload-list__item-thumbnail {
+    width: 90px!important;
+    height: 90px!important;
+    line-height: 90px!important;
+}
+
+.avatar {
+    width: 90px;
+    height: 90px;
+}
+
+// 电力监测
+.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
+}
+
+.variableList {
+    .filter-container {
+        .el-button+.el-button {
+            margin-left: 20px !important;
+        }
+        .el-input {
+            margin: 0 20px;
+        }
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}

.history/src/views/planOutage/index_20211008105015.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008105642.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008111742.vue

@@ -0,0 +1,279 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.handleStatus);
+      if (row.column.label == "处理状态" && row.row.handleStatus == "未处理") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "处理状态" && row.row.handleStatus == "已完成") {
+        return "color:#8DCF6E";
+      }
+      if (
+        row.column.label == "处理状态" &&
+        row.row.handleStatus == "审核未通过"
+      ) {
+        return "color:#5c88fa";
+      }
+      if (
+        row.column.label == "处理状态" &&
+        row.row.handleStatus == "超时完成"
+      ) {
+        return "color:red";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008111809.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.handleStatus);
+      if (row.column.label == "处理状态" && row.row.handleStatus == "未处理") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "处理状态" && row.row.handleStatus == "已完成") {
+        return "color:#8DCF6E";
+      }
+      if (
+        row.column.label == "处理状态" &&
+        row.row.handleStatus == "审核未通过"
+      ) {
+        return "color:#5c88fa";
+      }
+      if (
+        row.column.label == "处理状态" &&
+        row.row.handleStatus == "超时完成"
+      ) {
+        return "color:red";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008111942.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.handleStatus);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "处理状态" && row.row.handleStatus == "已完成") {
+        return "color:#8DCF6E";
+      }
+      if (
+        row.column.label == "处理状态" &&
+        row.row.handleStatus == "审核未通过"
+      ) {
+        return "color:#5c88fa";
+      }
+      if (
+        row.column.label == "处理状态" &&
+        row.row.handleStatus == "超时完成"
+      ) {
+        return "color:red";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112023.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.handleStatus);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112129.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112155.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      if (row.row.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112225.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112256.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      if (column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112309.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112439.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112516.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row.column.status);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112531.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row.column);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008112635.vue

@@ -0,0 +1,270 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113023.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template slot-scope="{ row }">
+          <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113039.vue

@@ -0,0 +1,275 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113202.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+          :style="scope.row.status === 'Home' ? 'primary' : 'success'"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113215.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+          :style="scope.row.status === '已处理' ? 'primary' : 'success'"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113312.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已处理'?'green':'red'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113330.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'green':'red'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113412.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'green':'red'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113528.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'green':scope.row.status=='未执行'?'red':'orange'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113622.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'green':scope.row.status=='未执行'?'#FF747B':'orange'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113632.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'#':scope.row.status=='未执行'?'#FF747B':'orange'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113638.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'#8DCF6E':scope.row.status=='未执行'?'#FF747B':'orange'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113717.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <!-- <div class="cursorP" @click="dialogStatusVisible = true">
+            {{ row.handleStatus }}
+          </div> -->
+
+          <span
+
+          :style="{'color': scope.row.status=='已执行'?'#8DCF6E':scope.row.status=='未执行'?'#FF747B':'#5c88fa'}"
+        
+          >{{ scope.row.status }}</span
+        >
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/planOutage/index_20211008113734.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">计划停电列表</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+        <div style="margin-top: 20px">
+          <div class="filter-item">
+            选择时间范围：
+            <el-date-picker
+              v-model="value1"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              style="width:auto"
+            >
+            </el-date-picker>
+          </div>
+          <div class="filter-item">
+            状态:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <el-button type="primary" icon="el-icon-search" class="search-button"
+            >搜索</el-button
+          >
+        </div>
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+       :cell-style="cellStyle"
+  
+    >
+      <el-table-column prop="xh" label="序号" width="">
+      </el-table-column>
+      <el-table-column prop="siteName" label="站点名称" width="">
+      </el-table-column>
+      <el-table-column prop="startTime" label="开始停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="endTime" label="结束停电时间" width="">
+      </el-table-column>
+      <el-table-column prop="subTime" label="提交时间" width="">
+      </el-table-column>
+      <el-table-column prop="submitter" label="提交人" width="">
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <span :style="{'color': scope.row.status=='已执行'?'#8DCF6E':scope.row.status=='未执行'?'#FF747B':'#5c88fa'}"
+          >{{ scope.row.status }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >编辑</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+
+export default {
+  name: "VariableList",
+
+  components: { DialogComponent },
+
+  data() {
+    return {
+      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
+      select: 1,
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "",
+      region: "",
+      tableData: [
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "未执行",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "执行中",
+        },
+        {
+           xh: "1",
+          siteName: "测试站点1",
+          startTime: "2020-02-02 12:00:00",
+          endTime: "2020-02-02 12:00:00",
+          subTime: "2020-02-02 12:00:00",
+          submitter: "张三",
+          status: "已执行",
+        },
+       
+      ],
+    };
+  },
+  methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        xh: "",
+        siteName: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/siteManage/basicInfo/index_20210929154343.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="联系方式" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item> -->
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
+              <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BasicInfo",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        planStartTime: "",
+        planEndTime: "",
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        planEndDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

.history/src/views/siteManage/basicInfo/index_20211008100547.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="联系方式" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item> -->
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
+              <!-- <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item> -->
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BasicInfo",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        planStartTime: "",
+        planEndTime: "",
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        planEndDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

.history/src/views/siteManage/basicInfo/index_20211008100617.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="联系方式" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item> -->
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
+              <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BasicInfo",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        planStartTime: "",
+        planEndTime: "",
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        planEndDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

.history/src/views/siteManage/basicInfo/index_20211008100626.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="联系方式" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item> -->
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
+              <!-- <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item> -->
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BasicInfo",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        planStartTime: "",
+        planEndTime: "",
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        planEndDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

.history/src/views/siteManage/basicInfo/index_20211008100810.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="联系方式" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item> -->
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <i class="el-icon-zoom-in"></i>
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
+              <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BasicInfo",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        planStartTime: "",
+        planEndTime: "",
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        planEndDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

.history/src/views/siteManage/basicInfo/index_20211008102626.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="siteManage-main basic-info-page">
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      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="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item label="站点类型" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="用户公司" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+
+            <el-form-item
+              label="投运时间:"
+              prop="planStartDate"
+              style="margin-top: 0px"
+            >
+              <el-date-picker
+                v-model="ruleForm.planStartDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item label="服务截止:" prop="planEndDate">
+              <el-date-picker
+                v-model="ruleForm.planEndDate"
+                type="datetime"
+                placeholder="选择日期时间"
+              >
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item label="装机容量：" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="供电类型" prop="resource">
+              <el-radio-group v-model="ruleForm.resource">
+                <el-radio label="单路"></el-radio>
+                <el-radio label="双路"></el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="电压等级" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点地址" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="所属台区" prop="name">
+              <el-input v-model="ruleForm.name"></el-input>
+            </el-form-item>
+            <el-form-item label="站点坐标" prop="name">
+              <el-input v-model="ruleForm.name">
+                <i
+                  :default-slot="suffix"
+                  class="el-input__icon el-icon-location-outline"
+                ></i>
+              </el-input>
+            </el-form-item>
+          </div>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <el-form-item label="监察：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择">
+              <el-option label="监察1" value="1"></el-option>
+              <el-option label="监察2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <!-- <el-form-item label="联系方式" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item> -->
+          <el-form-item label="折标准煤：" prop="name">
+            <el-input v-model="ruleForm.name"></el-input>
+          </el-form-item>
+
+          <el-form-item label="折标准煤：" prop="resource">
+            <el-radio-group v-model="ruleForm.resource">
+              <el-radio label="电力（等价）"></el-radio>
+              <el-radio label="电力（当量）"></el-radio>
+            </el-radio-group>
+            <div style="opacity: 0.45">0.000404吨标准煤/千瓦时</div>
+          </el-form-item>
+
+          <a class="goArchive">现场档案</a>
+
+          <div class="blockTitle mt-60 mb-20">动态属性</div>
+          <el-form-item label="故障动态：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="故障动态1" value="1"></el-option>
+              <el-option label="故障动态2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="实时负荷：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="实时负荷1" value="1"></el-option>
+              <el-option label="实时负荷2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="总用电量：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="总用电量1" value="1"></el-option>
+              <el-option label="总用电量2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="功率因数：" prop="region">
+            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+              <el-option label="选择1" value="1"></el-option>
+              <el-option label="选择2" value="2"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8" :gutter="20">
+          <div class="grid-content bg-purple">
+            <div class="grid-content bg-purple-light">
+              <div class="blockTitle mb-20">站点照片</div>
+              <el-form-item label="选择文件" prop="delivery">
+                <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <!-- <i class="el-icon-zoom-in"></i> -->
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
+              </el-form-item>
+
+              <!-- <div class="blockTitle mt-40 mb-20">添加更多属性</div> -->
+              <el-form-item label="联系人" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式" prop="name">
+                <el-input v-model="ruleForm.name"></el-input>
+              </el-form-item>
+            </div>
+            <el-form-item>
+              <el-button type="primary" @click="submitForm('ruleForm')"
+                >保存</el-button
+              >
+              <el-button @click="resetForm('ruleForm')">取消</el-button>
+            </el-form-item>
+          </div>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BasicInfo",
+  data() {
+    return {
+      dialogImageUrl: "",
+      dialogVisible: false,
+      disabled: false,
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+        planStartTime: "",
+        planEndTime: "",
+      },
+      rules: {
+        planStartDate: [
+          { required: true, message: "请选择开始日期", trigger: "change" },
+        ],
+        planEndDate: [
+          { required: true, message: "请输入结束日期", trigger: "change" },
+        ],
+        name: [
+          { required: true, message: "请输入站点名称", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+</style>

.history/src/views/siteManage/camera/index_20210929154343.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="siteManage-main variableList">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table :data="tableData" border stripe :header-cell-style="headClass"  :cell-style="cellStyle">
+      <el-table-column
+        fixed
+        prop="watchStatus"
+        label="状态"
+        width="50"
+        align="center"
+       
+      >
+        <template #default>
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="watchCode" label="名称" width="">
+      </el-table-column>
+      <el-table-column prop="ratedVoltage" label="编号" width="">
+      </el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电压" width="">
+      </el-table-column>
+      <el-table-column prop="fzlMx" label="额定电流" width="">
+      </el-table-column>
+      <el-table-column prop="powerAnalysis" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column prop="watchAddress" label="视频画面" width="">
+         <template #default="scope">
+            <a  @click="checkVideo(scope.row)">查看</a>
+          </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template #default>
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+    <!--弹框组件开始-----------------------start-->
+    <check-video
+      v-if="showDialog"
+      ref="checkVideo"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></check-video>
+    <!--视频弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+import checkVideo from "./checkVideo";
+
+export default {
+  name: "Camera",
+
+  components: { DialogComponent,checkVideo },
+
+  data() {
+    return {
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "请输入状态",
+      tableData: [
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+      ],
+    };
+  },
+  methods: {
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+   
+      if (columnIndex === 6) {
+        return `color:#0284E8;`;
+      } else {
+        return "";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 查看视频
+    checkVideo() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked:true,
+        resource:''
+      };
+      this.dialogTitle = "查看视频";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["checkVideo"].showDialog = true;
+      });
+    },
+
+
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

.history/src/views/siteManage/camera/index_20211008102144.vue

@@ -0,0 +1,301 @@
+<template>
+  <div class="siteManage-main variableList">
+    <!-- 筛选start -->
+    <div class="filter-container mb-20">
+      <div class="left">
+        <div>
+          <a class="" style="margin-right: 30px">【测试站点1】站点的所有变量</a>
+          <el-button icon="el-icon-plus" type="success" @click="addItem()"
+            >新增</el-button
+          >
+        </div>
+
+      </div>
+
+      <div class="right">
+        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <!-- 表格start -->
+    <el-table :data="tableData" border stripe :header-cell-style="headClass"  :cell-style="cellStyle">
+      <el-table-column
+        fixed
+        prop="watchStatus"
+        label="状态"
+        width="50"
+        align="center"
+       
+      >
+        <template #default>
+          <el-avatar class="status"></el-avatar>
+        </template>
+      </el-table-column>
+      <el-table-column prop="watchCode" label="名称" width="">
+      </el-table-column>
+      <el-table-column prop="ratedVoltage" label="编号" width="">
+      </el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电压" width="">
+      </el-table-column>
+      <el-table-column prop="fzlMx" label="额定电流" width="">
+      </el-table-column>
+      <el-table-column prop="powerAnalysis" label="电流负载率门限" width="">
+      </el-table-column>
+      <el-table-column prop="watchAddress" label="视频画面" width="">
+         <template #default="scope">
+            <a  @click="checkVideo(scope.row)">查看</a>
+          </template>
+      </el-table-column>
+      <el-table-column fixed="right" label="操作" width="180">
+        <template  #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click.prevent="editRow(scope.row)"
+            >修改</el-button
+          >
+          <el-button
+            @click="handleDelete(scope.$index, scope.row)"
+            type="text"
+            size="small"
+            class="delete-text"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+    <!--弹框组件开始-----------------------start-->
+    <check-video
+      v-if="showDialog"
+      ref="checkVideo"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></check-video>
+    <!--视频弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+import checkVideo from "./checkVideo";
+
+export default {
+  name: "Camera",
+
+  components: { DialogComponent,checkVideo },
+
+  data() {
+    return {
+      currentPage4: 4,
+
+      showDialog: false,
+      tabPosition: "one",
+
+      input: "请输入状态",
+      tableData: [
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+        {
+          ratedVoltage: "10KV",
+          watchName: "测试设备1",
+          watchCode: "cssb1",
+          ratedCurrent: "58A",
+          fzlMx: "80%",
+          powerAnalysis: "开启",
+          watchAddress: "1",
+        },
+      ],
+    };
+  },
+  methods: {
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+   
+      if (columnIndex === 6) {
+        return `color:#0284E8;`;
+      } else {
+        return "";
+      }
+    },
+    handleSizeChange(val) {
+      console.log(`每页 ${val} 条`);
+    },
+    handleCurrentChange(val) {
+      console.log(`当前页: ${val}`);
+    },
+
+    // 表头样式设置
+    goVariableList() {
+      // 跳转至订单列表页面传参
+      this.$router.push({
+        path: "../siteManage/variableList/index.vue",
+      });
+      // this.$router.push({ name:'variableList'})
+    },
+    headClass() {
+      return "background:#FAFAFA;";
+    },
+
+    // 查看视频
+    checkVideo() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked:true,
+        resource:''
+      };
+      this.dialogTitle = "查看视频";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["checkVideo"].showDialog = true;
+      });
+    },
+
+
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        watchName: "",
+        watchCode: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+        checked: true,
+      };
+      this.dialogTitle = "新增";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 编辑操作
+    editRow(row) {
+      console.log(row);
+      this.tableItem = row;
+      this.dialogTitle = "编辑";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+    // 关闭操作
+    closeDialog(flag) {
+      if (flag) {
+        // 重新刷新表格内容
+        this.fetchData();
+      }
+      this.showDialog = false;
+    },
+
+    //删除操作
+    handleDelete(index, row) {
+      console.log(index, row);
+      alert(index);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/assets/css/element-variables.scss

@@ -1,36 +1,30 @@
 /* 改变主题色变量 */
-$--color-primary: #009688;
 
+$--color-primary: #1187FF;
 /// color|1|Font Color|2
 $--color-text-primary: #303133 !default;
 
 /* 改变 icon 字体路径变量，必需 */
-$--font-path: '~element-plus/lib/theme-chalk/fonts';
 
+$--font-path: '~element-plus/lib/theme-chalk/fonts';
 @import '~element-plus/packages/theme-chalk/src/index';
-
 $heading-color: rgba(0, 0, 0, 0.85); // 标题色
-
 // Menu
 $menu-collapsed-width: 54px;
-
 // dark theme
 $menu-dark-bg: #222834;
 $menu-dark-submenu-bg: #000c17;
 $menu-dark-color: rgba(#FFF, 0.65);
 $menu-dark-highlight-color: #fff;
 
-
 /* 重置 NavMenu */
+
 .index-layout-leftmenu {
     background-color: $menu-dark-bg;
     border: none;
-
-
     .el-submenu .el-menu {
         background-color: $menu-dark-submenu-bg;
     }
-    
     .el-submenu__title,
     .el-menu-item {
         height: 40px;
@@ -43,17 +37,15 @@ $menu-dark-highlight-color: #fff;
             text-align: center;
             color: $menu-dark-color;
         }
-
         &:focus,
         &:hover {
             color: $menu-dark-highlight-color !important;
-            background:none;
+            background: none;
             .icon {
                 color: $menu-dark-highlight-color !important;
             }
-        } 
+        }
     }
-
     .is-active>.el-submenu__title {
         color: $menu-dark-highlight-color !important;
         .icon {
@@ -61,7 +53,7 @@ $menu-dark-highlight-color: #fff;
         }
     }
     .el-submenu .el-menu-item.is-active,
-    .el-menu-item.is-active{
+    .el-menu-item.is-active {
         color: $menu-dark-highlight-color !important;
         background-color: $--color-primary !important;
     }
@@ -72,8 +64,6 @@ $menu-dark-highlight-color: #fff;
     .el-menu-item:not(:last-child) {
         margin-bottom: 8px;
     }
-
-
     /* 收起 */
     &.el-menu--collapse {
         width: $menu-collapsed-width;
@@ -84,14 +74,12 @@ $menu-dark-highlight-color: #fff;
                 left: 15px;
                 top: 10px;
                 margin: 0;
-            }         
+            }
         }
     }
-
-
 }
-.index-layout-leftmenu-popper {
 
+.index-layout-leftmenu-popper {
     .el-menu {
         background-color: $menu-dark-submenu-bg;
     }
@@ -107,17 +95,15 @@ $menu-dark-highlight-color: #fff;
             text-align: center;
             color: $menu-dark-color;
         }
-
         &:focus,
         &:hover {
             color: $menu-dark-highlight-color !important;
-            background:none;
+            background: none;
             .icon {
                 color: $menu-dark-highlight-color !important;
             }
-        }        
+        }
     }
-
     .is-active>.el-submenu__title {
         color: $menu-dark-highlight-color !important;
         .icon {
@@ -125,7 +111,7 @@ $menu-dark-highlight-color: #fff;
         }
     }
     .el-submenu .el-menu-item.is-active,
-    .el-menu-item.is-active{
+    .el-menu-item.is-active {
         color: $menu-dark-highlight-color !important;
         background-color: $--color-primary !important;
     }
@@ -136,12 +122,11 @@ $menu-dark-highlight-color: #fff;
     .el-menu-item:not(:last-child) {
         margin-bottom: 8px;
     }
-
-
 }
 
 
 /* 重置 Drawer */
+
 .el-drawer {
     .el-drawer__header {
         padding: 15px 20px;
@@ -154,14 +139,18 @@ $menu-dark-highlight-color: #fff;
     }
 }
 
+
 /* 重置 card */
+
 .cus-card {
     .el-card {
         border: 0;
     }
 }
 
+
 /*自定义 table 样式*/
+
 .custom-table {
     .el-table__header {
         background-color: #F5F7FA;
@@ -173,11 +162,10 @@ $menu-dark-highlight-color: #fff;
         background-color: #F5F7FA;
     }
 }
+
 .custom-table-header {
     color: #303133;
     th {
         background-color: #F5F7FA;
     }
-}
-
-
+}

src/assets/css/index.scss

@@ -92,7 +92,7 @@ div:focus {
 }
 
 .delete-text {
-    color: #F80000
+    color: #F80000!important
 }
 
 .remarksTxt {
@@ -138,6 +138,10 @@ div:focus {
     padding: 10px 12px;
 }
 
+.el-table--small {
+    font-size: 14px!important
+}
+
 .el-table td,
 .el-table th {
     padding: 10px 0
@@ -149,10 +153,12 @@ div:focus {
     padding: 16px 20px 16px;
 }
 
-// .el-form-item {
-//     width: 400px;
-//     margin: 0 auto 20px;
-// }
+.el-form-item:not(.user-layout .el-form-item) {
+    width: 90%;
+    max-width: 400px;
+    margin: 0 auto 20px;
+}
+
 // 弹框样式end
 // 台区列表
 .siteTitle {
@@ -184,8 +190,13 @@ div:focus {
 
 .siteManage-main {
     padding: 20px;
-    .el-form-item.basic-info-page {
-        margin-left: 0px
+}
+
+.groupInfo,
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
     }
 }
 
@@ -224,28 +235,23 @@ div:focus {
 }
 
 // 图片上传样式 start
-.el-upload--picture-card {
-    width: 90px;
-    height: 90px;
-}
-
-.el-upload {
+.el-upload.el-upload--picture-card {
     width: 90px;
     height: 90px;
     line-height: 100px;
 }
 
 .el-upload-list--picture-card .el-upload-list__item {
-    width: 92px;
-    height: 92px;
-    line-height: 92px;
+    width: 92px!important;
+    height: 92px!important;
+    line-height: 92px!important;
     text-align: center
 }
 
 .el-upload-list--picture-card .el-upload-list__item-thumbnail {
-    width: 90px;
-    height: 90px;
-    line-height: 90px;
+    width: 90px!important;
+    height: 90px!important;
+    line-height: 90px!important;
 }
 
 .avatar {
@@ -263,7 +269,7 @@ div:focus {
         width: 150px!important
     }
     .el-form-item__content {
-        margin-left: 150px!important
+        // margin-left: 150px!important
     }
 }
 
@@ -272,13 +278,86 @@ div:focus {
     text-align: right
 }
 
-.variableList {
-    .filter-container {
-        .el-button+.el-button {
-            margin-left: 20px !important;
+.filter-container {
+    .el-button+.el-button {
+        margin-left: 20px !important;
+    }
+    .el-input {
+        margin: 0 20px;
+    }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
+}
+
+//告警详情弹框组件
+.alarmStatusDialog {
+    .el-form-item:not(.user-layout .el-form-item) {
+        margin-bottom: 0
+    }
+    .deviceTit {
+        font-size: 16px;
+        color: #409EFF;
+        padding: 20px 0
+    }
+    .basicTit {
+        color: #4074e7;
+        line-height: 49px;
+        height: 49px;
+    }
+    .basicTit:before {
+        content: "";
+        width: 3px;
+        margin-right: 9px;
+        height: 16px;
+        position: relative;
+        top: 3px;
+        display: inline-block;
+        background: #4074e7;
+    }
+    .topInfo {
+        position: relative;
+        .lubo {
+            position: absolute;
+            right: 0px;
+            bottom: 20px;
         }
-        .el-input {
-            margin: 0 20px;
+        .handleStatus {
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            color: #F80000
         }
     }
+}
+
+.underline {
+    position: relative;
+}
+
+.underline:after {
+    position: absolute;
+    bottom: 0;
+    left: -20px;
+    right: -20px;
+    height: 1px;
+    content: '';
+    -webkit-transform: scaleY(.5);
+    transform: scaleY(.5);
+    background-color: #000; //这个是唯佳的线颜色
+    opacity: .2
+}
+
+.underline:last-child:after {
+    //可以这样用
+    height: 0;
 }

src/layouts/IndexLayout/components/RightTop.vue

@@ -166,7 +166,7 @@ export default defineComponent({
       cursor: pointer;
 
       &:hover {
-        background-color: #009688;
+        background-color: #1187FF;
         color: #616161;
       }
     }

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

@@ -3,6 +3,8 @@ export default {
   'index-layout.topmenu.logout': '退出',
 
   'index-layout.menu.alarmManage': '告警管理',
+  'index-layout.menu.alarmManage.alarmTotal': '告警总数',
+
   'index-layout.menu.siteManage': '站点管理',
 
   'index-layout.menu.stationManage': '台区管理',

src/layouts/IndexLayout/routes.ts

@@ -4,12 +4,44 @@ import BlankLayout from '@/layouts/BlankLayout.vue';
 
 const IndexLayoutRoutes: Array<RoutesDataItem> = [
 
+  // {
+  //   icon: 'alarmManage',
+  //   title: 'index-layout.menu.alarmManage',
+  //   path: '/alarmManage',
+  //   component: () => import('@/views/alarmManage/index.vue')
+  // },
+
+
   {
     icon: 'alarmManage',
     title: 'index-layout.menu.alarmManage',
     path: '/alarmManage',
-    component: () => import('@/views/alarmManage/index.vue')
+    redirect: '/alarmManage/index',
+    component: BlankLayout,
+    children: [
+      {
+        icon: 'alarmManage',
+        title: 'index-layout.menu.alarmManage.alarmTotal',
+        path: 'alarmTotal',
+        component: () => import('@/views/alarmManage/alarmTotal.vue'),
+        selectLeftMenu: '/alarmManage',
+        hidden: true
+      },
+      {
+        icon: 'alarmManage',
+        title: 'index-layout.menu.alarmManage',
+        path: 'index',
+        component: () => import('@/views/alarmManage/index.vue'),
+        selectLeftMenu: '/alarmManage',
+        hidden: true
+      },
+      
+    ]
   },
+
+
+
+
   {
     icon: 'siteManage',
     title: 'index-layout.menu.siteManage',

src/views/alarmManage/alarmTotal.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class='app-container'>
+    <!-- 返回start -->
+    <div class='siteTitle'>
+      <el-button class='goBack' @click='goBack'>返回</el-button>
+      站点【上海新时达电气股份有限公司】{{alarmTit==1?'一级告警':''}}
+    </div>
+    <!-- 返回end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data='tableData'
+      border
+      stripe
+      :header-cell-style='headClass'
+      :cell-style='cellStyle'
+    >
+      <el-table-column fixed prop='happenTime' label='发生时间' width=''>
+      </el-table-column>
+      <el-table-column prop='alarmDes' label='告警描述' width=''>
+      </el-table-column>
+      <el-table-column prop='deviceName' label='设备' width=''>
+      </el-table-column>
+      <el-table-column prop='alarmType' label='告警类型' width=''> </el-table-column>
+      <el-table-column prop='check' label='详情' width=''> 
+
+          <template #default="scope">
+            <span   @click="addItem()"
+            >{{ scope.row.check }}</span>
+          </template>
+    </el-table-column>
+      <el-table-column prop='eddl' label='状态' width=''>
+        <template #default="scope">
+          <span :style="{'color': scope.row.eddl=='已确认-admin'?'#8DCF6E':scope.row.eddl=='未确认'?'#FF747B':'#5c88fa'}"
+          >{{ scope.row.eddl }}</span>
+          </template>
+         </el-table-column>
+   
+    </el-table>
+    <!-- 表格end -->
+
+     <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage4"
+        :page-sizes="[100, 200, 300, 400]"
+        :page-size="100"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="400"
+      >
+      </el-pagination>
+    </div>
+    <!-- 分页end -->
+
+     <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      v-if="showDialog"
+      ref="dialogComponent"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+
+  </div>
+</template>
+
+<script>
+import DialogComponent from "./dialogComponent";
+export default {
+  // name: 'Dashboard',
+  // computed: {
+  //   ...mapGetters(['name']),
+  // },
+ components: { DialogComponent },
+  data() {
+    return {
+      showDialog: false,
+
+      input: '请输入发生时间',
+      tableData: [
+        {
+          happenTime: '2021-09-14 14:23:21',
+          alarmDes: '【母线带电】SEO状态变为ON',
+          deviceName: '电压测试',
+          alarmType: '故障',
+          check: '查看',
+          eddl: '自动恢复',
+        },
+        {
+          happenTime: '2021-09-14 14:23:21',
+          alarmDes: '【母线带电】SEO状态变为ON',
+          deviceName: '小会议室测试151',
+          alarmType: '故障',
+          check: '查看',
+          eddl: '已确认-admin',
+        },
+        {
+          happenTime: '2021-09-14 14:23:21',
+          alarmDes: '【母线带电】SEO状态变为ON',
+          deviceName: '电压测试',
+          alarmType: 'spjcsdb1',
+          check: '查看',
+          eddl: '未确认',
+        },
+        {
+          happenTime: '2021-09-14 14:23:21',
+          alarmDes: '【母线带电】SEO状态变为ON',
+          deviceName: '小会议室测试151',
+          alarmType: '故障',
+          check: '查看',
+          eddl: '自动恢复',
+        },
+      ],
+    };
+  },
+  computed:{
+    alarmTit:function(){
+       return this.$route.query.type
+      // if(this.$route.query.id==1){
+      //   alert(1)
+      //   return '一级告警'
+      // }
+      
+      
+    }
+
+  },
+  methods: {
+
+    // 查看操作
+    checkItem() {
+      this.tableItem = {
+        id: "",
+        stationName: "",
+        stationCode: "",
+        stationAddress: "",
+        siteList: [],
+        done: "",
+        guaZai: "",
+      };
+      this.dialogTitle = "告警详情";
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs["dialogComponent"].showDialog = true;
+      });
+    },
+
+    goBack() {
+      this.$router.replace('/alarmManage/index');
+    },
+    // 表头样式设置
+    headClass() {
+      return 'background:#FAFAFA;';
+    },
+
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 4) {
+        return `color:#1187FF;cursor:pointer`;
+      } else {
+        return '';
+      }
+    },
+    //查看
+     handleClick(row) {
+         alert('查看对应站点（页面跳转）')
+        console.log(row);
+      },
+
+    // 添加操作
+    addItem() {
+      this.tableItem = {
+        id: '',
+        happenTime: '',
+        alarmDes: '',
+        deviceName: '',
+        siteList: [],
+        done: '',
+        guaZai: '',
+      };
+      this.dialogTitle = '告警详情';
+      this.showDialog = true;
+      this.$nextTick(() => {
+        this.$refs['dialogComponent'].showDialog = true;
+      });
+    },
+  },
+};
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/alarmManage/dialogComponent.vue

@@ -11,52 +11,102 @@
       <el-form
         ref="formInfo"
         :model="formInfo"
-        class="demo-form-inline"
+        class="demo-form-inline alarmStatusDialog"
         label-width="100px"
         :rules="rules"
       >
-        <el-form-item label="站点名称：" prop="watchName" label-width="150px">
-          <el-input v-model="formInfo.watchName"></el-input>
+        <div class="topInfo underline">
+          <el-form-item label="卡号：" prop="stationName">
+            2021-09-14 14:53:28
+          </el-form-item>
+          <el-form-item label="告警历时：" prop="stationCode">
+            3分钟
+          </el-form-item>
+          <el-form-item label="关联告警：" prop="stationAddress">
+            2021-09-14 14:54:59
+          </el-form-item>
+          <div class="deviceTit">【测试站点主线】设备低压 复归:</div>
+           <el-button type="success" class="lubo">故障录播</el-button>
+           <div class="handleStatus">未处理</div>
+        </div>
+
+        <div class="basicTit">基本信息</div>
+
+        <el-form-item label="站点名称：" prop="pointNum">
+          测试站点1
         </el-form-item>
-        <el-form-item label="开始停电时间：" prop="watchCode" label-width="150px">
-          <el-input v-model="formInfo.watchCode"></el-input >
+        <el-form-item label="台区展示：" prop="deviceNum">
+          测试台区1
         </el-form-item>
-        <el-form-item label="结束停电时间:" prop="routeAddress" label-width="150px">
-          <el-select
-            v-model="formInfo.routeAddress"
-            multiple
-            filterable
-            collapse-tags
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
+        <el-form-item label="线路：" prop="deviceNum"> 进线二 </el-form-item>
+        <el-form-item label="告警信息：" prop="deviceNum"> 低压 </el-form-item>
+        <el-form-item label="告警状态：" prop="deviceNum"> 动作 </el-form-item>
+        <el-form-item label="采集终端：" prop="deviceNum">
+          DA00013433
         </el-form-item>
-
-        <el-form-item label="提交时间：" prop="ratedVoltage" label-width="150px">
-          <el-input v-model="formInfo.ratedVoltage"></el-input>
+        <el-form-item label="站点地址：" prop="deviceNum">
+          沪太路8786弄155号
         </el-form-item>
-        <el-form-item label="提交人：" prop="stationAddress" label-width="150px">
-          <el-input v-model="formInfo.ratedCurrent"></el-input>
+        <el-form-item label="联系人：" prop="deviceNum"> 张三 </el-form-item>
+        <el-form-item label="联系方式：" prop="deviceNum">
+          12345675223
         </el-form-item>
-        <el-form-item label="状态：" prop="fzlMx" label-width="150px">
-          <el-input v-model="formInfo.fzlMx"></el-input>
+
+        <div class="basicTit">处理信息</div>
+
+        <el-form-item label="处理内容" prop="handleCont" style="margin-bottom:20px">
+          <el-input
+            v-model="textarea"
+            :rows="2"
+            type="textarea"
+            placeholder="Please input"
+          />
+        </el-form-item>
+
+        <el-form-item label="现场照片" prop="deviceNum">
+          <el-upload
+                  action="#"
+                  list-type="picture-card"
+                  :auto-upload="false"
+                  :limit="3"
+                >
+                <!-- slot="default" -->
+                  <i  class="el-icon-plus"></i>
+                  <!-- :default-slot="{ file }" -->
+                  <div  >
+                    <!-- <img
+                      class="el-upload-list__item-thumbnail"
+                      :src="file.url"
+                      alt=""
+                    /> -->
+                    <span class="el-upload-list__item-actions">
+                      <span
+                        class="el-upload-list__item-preview"
+                        @click="handlePictureCardPreview(file)"
+                      >
+                        <!-- <i class="el-icon-zoom-in"></i> -->
+                      </span>
+                      <span
+                        v-if="!disabled"
+                        class="el-upload-list__item-delete"
+                        @click="handleRemove(file)"
+                      >
+                        <i class="el-icon-delete"></i>
+                      </span>
+                    </span>
+                  </div>
+                </el-upload>
+                <el-dialog v-model="dialogVisible">
+                  <img width="100%" :src="dialogImageUrl" alt="" />
+                </el-dialog>
         </el-form-item>
- 
-        
         <br />
         <br />
         <br />
         <div style="text-align: right">
           <el-button @click="closeDialog(0)">取消</el-button>
           <el-button type="primary" @click="submitForm('formInfo')"
-            >保存</el-button
+            >确定</el-button
           >
         </div>
       </el-form>
@@ -65,16 +115,12 @@
 </template>
 
 <script>
-
-
-
-
 export default {
   name: "DialogComponent",
   props: {
     dialogTitle: {
       type: String,
-      default: "新增",
+      default: "告警详情",
     },
     itemInfo: {
       type: Object,
@@ -85,7 +131,8 @@ export default {
   },
   data() {
     return {
-       checked: true,
+       disabled: false,
+      textarea: "请输入",
       showDialog: false,
       formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
       options: [
@@ -112,45 +159,33 @@ export default {
       ],
 
       rules: {
-        watchName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入站点名称", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        watchCode: [
-          { required: true, message: "请输入开始停电时间", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        routeAddress: [
-          { required: true, message: "请选则结束停电时间", trigger: "change" },
-         
-        ],
-        ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
-        ],
-        ratedCurrent: [
-          { required: true, message: "请输入已选站点个数", trigger: "blur" },
+      
+        handleCont: [
+          { required: true, message: "请输入处理内容", trigger: "blur" },
           { trigger: "blur" },
         ],
-        fzlMx: [
-          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+        unloadImg: [
+          { required: true, message: "请上传图片", trigger: "blur" },
           { trigger: "blur" },
         ],
       },
     };
   },
   methods: {
+
+     handleRemove(file) {
+      console.log(file);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      this.dialogVisible = true;
+    },
+
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+
+
     roleValid(rule, value, callback) {
       if (value.length === 0) {
         callback(new Error("角色不能为空"));
@@ -160,8 +195,8 @@ export default {
     },
 
     // onSelectedDrug(event) {
-    //   this.routeAddress = event;
-    //   console.log(this.routeAddress);
+    //   this.siteList = event;
+    //   console.log(this.siteList);
     // },
     // 保存操作
     submitForm(formName) {
@@ -195,11 +230,7 @@ export default {
   width: 240px;
 }
 
-// label样式
-.el-form-item__label {
-    width: 150px
-}
-.el-form-item__content {
-    margin-left: 150px
+.el-form-item {
+  margin-left: 0 !important;
 }
 </style>

src/views/alarmManage/index.vue

@@ -4,15 +4,19 @@
     <div class="filter-container mb-20">
       <div class="left">
         <div>
-          <a class="" style="margin-right: 30px">告警管理列表</a>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()"
-            >新增</el-button
-          >
-        </div>
-
-        <div style="margin-top: 20px">
           <div class="filter-item">
-            选择时间范围：
+            站点:
+            <el-select
+              v-model="region"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+              <el-option label="已执行" value="1"></el-option>
+              <el-option label="未执行" value="2"></el-option>
+            </el-select>
+          </div>
+          <div class="filter-item">
+            时间：
             <el-date-picker
               v-model="value1"
               type="datetimerange"
@@ -23,26 +27,13 @@
             >
             </el-date-picker>
           </div>
-          <div class="filter-item">
-            状态:
-            <el-select
-              v-model="region"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-              <el-option label="已执行" value="1"></el-option>
-              <el-option label="未执行" value="2"></el-option>
-            </el-select>
-          </div>
-          <el-button type="primary" icon="el-icon-search" class="search-button"
-            >搜索</el-button
-          >
+          <el-button  class="search-button"
+            >重置</el-button>
+          <el-button type="primary" class="search-button"
+            >搜索</el-button>
         </div>
       </div>
 
-      <div class="right">
-        <el-button type="primary">导入</el-button>
-      </div>
     </div>
     <!-- 筛选end -->
 
@@ -52,38 +43,31 @@
       border
       stripe
       :header-cell-style="headClass"
-  
+       :cell-style="cellStyle"
     >
-      <el-table-column prop="xh" label="序号" width="">
-      </el-table-column>
       <el-table-column prop="siteName" label="站点名称" width="">
+         <template #default="scope">
+           <div @click='handleClick(scope.row)' >  {{ scope.row.totalNum }}</div>
+          
+        </template>
       </el-table-column>
-      <el-table-column prop="startTime" label="开始停电时间" width="">
-      </el-table-column>
-      <el-table-column prop="endTime" label="结束停电时间" width="">
-      </el-table-column>
-      <el-table-column prop="subTime" label="提交时间" width="">
+      <el-table-column prop="totalNum" label="总数" width="">
+         <template #default="scope">  
+            <router-link style="margin-right:15px;" :to="{ path:'alarmTotal',query:{id:scope.row.totalNum}}">
+              {{ scope.row.totalNum }}
+            </router-link>
+          </template>
       </el-table-column>
-      <el-table-column prop="submitter" label="提交人" width="">
+      <el-table-column prop="oneAlarming" label="一级告警" width="">
+         <template #default="scope">  
+            <router-link style="margin-right:15px;" :to="{ path:'alarmTotal',query:{id:scope.row.oneAlarming,type:1}}">
+              {{ scope.row.oneAlarming }}
+            </router-link>
+          </template>
       </el-table-column>
-      <el-table-column prop="status" label="状态" width="">
+      <el-table-column prop="twoAlarming" label="二级告警" width="">
       </el-table-column>
-      <el-table-column fixed="right" label="操作" width="180">
-        <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-            >修改</el-button
-          >
-          <el-button
-            @click="handleDelete(scope.$index, scope.row)"
-            type="text"
-            size="small"
-            class="delete-text"
-            >删除</el-button
-          >
-        </template>
+       <el-table-column prop="other" label="其他" width="">
       </el-table-column>
     </el-table>
     <!-- 表格end -->
@@ -104,25 +88,18 @@
 
     <!-- 分页end -->
 
-    <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-    ></dialog-component>
-    <!--弹框组件开始-----------------------end-->
+   
+
+  
   </div>
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
+
 
 export default {
   name: "VariableList",
-
-  components: { DialogComponent },
+   
 
   data() {
     return {
@@ -137,55 +114,62 @@ export default {
       region: "",
       tableData: [
         {
-           xh: "1",
+           other: "10",
           siteName: "测试站点1",
-          startTime: "2020-02-02 12:00:00",
-          endTime: "2020-02-02 12:00:00",
-          subTime: "2020-02-02 12:00:00",
-          submitter: "张三",
-          status: "未执行",
+          totalNum: "626",
+          oneAlarming: "10",
+          twoAlarming: "10",
         },
         {
-           xh: "1",
+           other: "10",
           siteName: "测试站点1",
-          startTime: "2020-02-02 12:00:00",
-          endTime: "2020-02-02 12:00:00",
-          subTime: "2020-02-02 12:00:00",
-          submitter: "张三",
-          status: "未执行",
+          totalNum: "66",
+          oneAlarming: "10",
+          twoAlarming: "10",
         },
         {
-           xh: "1",
+           other: "0",
           siteName: "测试站点1",
-          startTime: "2020-02-02 12:00:00",
-          endTime: "2020-02-02 12:00:00",
-          subTime: "2020-02-02 12:00:00",
-          submitter: "张三",
-          status: "未执行",
+          totalNum: "6",
+          oneAlarming: "3",
+          twoAlarming: "10",
         },
         {
-           xh: "1",
+           other: "0",
           siteName: "测试站点1",
-          startTime: "2020-02-02 12:00:00",
-          endTime: "2020-02-02 12:00:00",
-          subTime: "2020-02-02 12:00:00",
-          submitter: "张三",
-          status: "未执行",
+          totalNum: "3",
+          oneAlarming: "3",
+          twoAlarming: "3",
         },
         {
-           xh: "1",
+           other: "0",
           siteName: "测试站点1",
-          startTime: "2020-02-02 12:00:00",
-          endTime: "2020-02-02 12:00:00",
-          subTime: "2020-02-02 12:00:00",
-          submitter: "张三",
-          status: "未执行",
+          totalNum: "0",
+          oneAlarming: "2",
+          twoAlarming: "0",
         },
        
       ],
     };
   },
   methods: {
+
+     
+
+    //查看
+     handleClick(row) {
+         alert('查看对应站点（页面跳转）')
+        console.log(row);
+      },
+    //自定义列样式
+    cellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 0) {
+        return `color:#0284E8;cursor:pointer`;
+      } else {
+        return "";
+      }
+    },
+    
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },
@@ -204,49 +188,6 @@ export default {
     headClass() {
       return "background:#FAFAFA;";
     },
-
-    // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        xh: "",
-        siteName: "",
-        siteList: [],
-        done: "",
-        guaZai: "",
-        checked: true,
-      };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-    // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData();
-      }
-      this.showDialog = false;
-    },
-
-    //删除操作
-    handleDelete(index, row) {
-      console.log(index, row);
-      alert(index);
-    },
   },
 };
 </script>

src/views/planOutage/index.vue

@@ -41,7 +41,7 @@
       </div>
 
       <div class="right">
-        <el-button type="primary">导入</el-button>
+        <el-button type="primary">导出</el-button>
       </div>
     </div>
     <!-- 筛选end -->
@@ -52,6 +52,7 @@
       border
       stripe
       :header-cell-style="headClass"
+       :cell-style="cellStyle"
   
     >
       <el-table-column prop="xh" label="序号" width="">
@@ -67,6 +68,10 @@
       <el-table-column prop="submitter" label="提交人" width="">
       </el-table-column>
       <el-table-column prop="status" label="状态" width="">
+         <template #default="scope">
+          <span :style="{'color': scope.row.status=='已执行'?'#8DCF6E':scope.row.status=='未执行'?'#FF747B':'#5c88fa'}"
+          >{{ scope.row.status }}</span>
+        </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
@@ -74,7 +79,7 @@
             type="text"
             size="small"
             @click.prevent="editRow(scope.row)"
-            >修改</el-button
+            >编辑</el-button
           >
           <el-button
             @click="handleDelete(scope.$index, scope.row)"
@@ -170,7 +175,7 @@ export default {
           endTime: "2020-02-02 12:00:00",
           subTime: "2020-02-02 12:00:00",
           submitter: "张三",
-          status: "未执行",
+          status: "执行中",
         },
         {
            xh: "1",
@@ -179,13 +184,27 @@ export default {
           endTime: "2020-02-02 12:00:00",
           subTime: "2020-02-02 12:00:00",
           submitter: "张三",
-          status: "未执行",
+          status: "已执行",
         },
        
       ],
     };
   },
   methods: {
+
+    //处理状态状态值变色
+    cellStyle(row, column, rowIndex, columnIndex) {
+      console.log("rowIndex");
+      console.log(row.row.status);
+      console.log(row);
+      if (row.column.status == "未执行") {
+        return "color:#FF747B";
+      }
+      if (row.column.label == "已执行") {
+        return "color:#8DCF6E";
+      }
+     
+    },
     handleSizeChange(val) {
       console.log(`每页 ${val} 条`);
     },

src/views/siteManage/addGroupCom.vue

@@ -16,7 +16,7 @@
         :rules="rules"
       >
         <el-form-item label="分组名称：" prop="watchName">
-          <el-input v-model="formInfo.watchName"></el-input>
+          <el-input v-model="formInfo.watchName"  ></el-input>
         </el-form-item>
       
         <div style="text-align: right">
@@ -100,4 +100,9 @@ export default {
  
 <style scoped lang="scss">
 
+// .el-form-item {
+//     width: auto!important;
+    
+// }
+
 </style>

src/views/siteManage/basicInfo/index.vue

@@ -149,7 +149,7 @@
                         class="el-upload-list__item-preview"
                         @click="handlePictureCardPreview(file)"
                       >
-                        <i class="el-icon-zoom-in"></i>
+                        <!-- <i class="el-icon-zoom-in"></i> -->
                       </span>
                       <span
                         v-if="!disabled"

src/views/siteManage/camera/index.vue

@@ -49,7 +49,7 @@
           </template>
       </el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
-        <template #default>
+        <template  #default="scope">
           <el-button
             type="text"
             size="small"

src/views/siteManage/groupInfoCom.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="siteManage-main">
+  <div class="siteManage-main groupInfo">
     <el-form
       :model="ruleForm"
       :rules="rules"

src/views/stationManage/dialogComponent.vue

@@ -113,7 +113,7 @@ export default {
       rules: {
         stationName: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入台区名称", trigger: "blur" },
+          { required: false, message: "请输入台区名称", trigger: "blur" },
           {
             min: 3,
             max: 6,