旧页面样式错乱修复,计划停电页面优化

.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/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,11 @@ 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: 400px;
+    margin: 0 auto 20px;
+}
+
 // 弹框样式end
 // 台区列表
 .siteTitle {
@@ -184,8 +189,12 @@ div:focus {
 
 .siteManage-main {
     padding: 20px;
-    .el-form-item.basic-info-page {
-        margin-left: 0px
+}
+
+.basic-info-page,
+.powerScore {
+    .el-form-item {
+        margin-left: 0px!important
     }
 }
 
@@ -224,28 +233,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 +267,7 @@ div:focus {
         width: 150px!important
     }
     .el-form-item__content {
-        margin-left: 150px!important
+        // margin-left: 150px!important
     }
 }
 
@@ -281,4 +285,16 @@ div:focus {
             margin: 0 20px;
         }
     }
+}
+
+// 树形控件icon
+.el-tree-node__content {
+    position: relative
+}
+
+.el-icon-delete {
+    color: #409EFF;
+    position: absolute;
+    right: 6px;
+    top: 5px;
 }

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/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"