新也买你

src/assets/css/index.scss

@@ -1,508 +1,623 @@
-@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;
-    }
-}
-
-ul li {
-    padding: 0;
-    margin: 0;
-    list-style: none
-}
-
-.inOneLine {
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-// 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: 90%;
-    max-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;
-}
-
-.groupInfo,
-.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
-}
-
-.filter-container {
-    .el-button+.el-button {
-        margin-left: 20px !important;
-    }
-    .el-input {
-        margin: 0 20px 0 0;
-    }
-}
-
-// 树形控件icon
-.el-tree-node__content {
-    position: relative
-}
-
-.siteTree .el-icon-delete {
-    color: #409EFF;
-    position: absolute;
-    right: 6px;
-    top: 5px;
-}
-
-//告警详情弹框组件
-.alarmStatusDialog {
-    .el-form-item:not(.user-layout .el-form-item) {
-        margin-bottom: 0
-    }
-    .deviceTit {
-        font-size: 16px;
-        color: #409EFF;
-        padding: 20px 0
-    }
-    .basicTit {
-        color: #4074e7;
-        line-height: 49px;
-        height: 49px;
-    }
-    .basicTit:before {
-        content: "";
-        width: 3px;
-        margin-right: 9px;
-        height: 16px;
-        position: relative;
-        top: 3px;
-        display: inline-block;
-        background: #4074e7;
-    }
-    .topInfo {
-        position: relative;
-        .lubo {
-            position: absolute;
-            right: 0px;
-            bottom: 20px;
-        }
-        .handleStatus {
-            position: absolute;
-            right: 0px;
-            top: 0px;
-            color: #F80000
-        }
-    }
-}
-
-.underline {
-    position: relative;
-}
-
-.underline:after {
-    position: absolute;
-    bottom: 0;
-    left: -20px;
-    right: -20px;
-    height: 1px;
-    content: '';
-    -webkit-transform: scaleY(.5);
-    transform: scaleY(.5);
-    background-color: #000; //这个是唯佳的线颜色
-    opacity: .2
-}
-
-.underline:last-child:after {
-    //可以这样用
-    height: 0;
-}
-
-// 谐波分析
-.harmonicReport {
-    .filter-container .filter-item {
-        // margin-right: 10px
-    }
-}
-
-.timeTab.el-button {
-    margin-bottom: 20px;
-    border-radius: 0
-}
-
-// 三项不平衡
-.blanceChartTit {
-    padding: 10px 14px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #f0f0f0;
-    background: #FAFAFA;
-    font-weight: bold
-}
-
-//评估报告
-.assePage .blanceChartTit {
-    margin-bottom: 0;
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    vertical-align: middle;
-    span {
-        display: inline-block
-    }
-}
-
-.assePage {
-    .subTits {
-        margin: 25px auto;
-        text-align: center;
-        font-weight: bold
-    }
-    .assNum {
-        font-size: 18px;
-        color: #2EAEFF;
-        margin-bottom: 10px;
-    }
-    .greenRate {
-        color: #04A522
-    }
-    .assTxt {
-        font-size: 14px
-    }
-    .assSmallbox {
-        padding: 10px 0;
-        text-align: center;
-        font-weight: bold;
-    }
-}
-
-// tab重置样式
-.asseTabs {
-    margin-bottom: 20px;
-    border-bottom: 1px solid #E5E5E5;
-    width: calc(100% + 40px);
-    margin-left: -20px;
-}
-
-.asseTabs span {
-    line-height: 50px;
-    height: 50px;
-    font-size: 16px;
-    display: inline-block;
-    padding: 0 20px;
-}
-
-.asseTabs span.active {
-    border-bottom: 2px solid #2EAEFF
-}
-
-.banlanceBtn {
-    max-width: 80%;
-    margin: 0 auto 20px;
-    height: 40px;
-    line-height: 40px;
-    width: 236px;
-    font-size: 16px!important;
-    // background: #6dc6ff;
-    // color: #fff
-}
-
-.assCard {
-    min-height: 336px!important;
-    .noDataImg {
-        width: 40%;
-        margin-top: 40px;
-    }
-}
-
-.assCard ul {
-    text-align: left;
-    margin: 0;
-    padding: 15px 20px 0;
-    li:not(:last-child) {
-        border-bottom: 1px solid #F0F0F0;
-    }
-    li {
-        line-height: 40px;
-        display: flex;
-        justify-content: space-between;
-        vertical-align: middle;
-        font-size: 14px;
-        div {
-            display: inline-block;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        span {
-            color: #04A522;
-            background: #F4F4F4;
-            display: inline-block;
-            border-radius: 20px;
-            line-height: 20px;
-            height: 20px;
-            text-align: center;
-            width: 58px;
-            margin-top: 10px;
-        }
-        span.overLimit {
-            color: #F80000
-        }
-    }
-}
+            @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;
+                }
+            }
+            
+            ul li {
+                padding: 0;
+                margin: 0;
+                list-style: none
+            }
+            
+            .inOneLine {
+                display: inline-block;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            
+            // main-container global css
+            .mb-5 {
+                margin-bottom: 5px
+            }
+            
+            .mb-10 {
+                margin-bottom: 10px
+            }
+            
+            .mb-20 {
+                margin-bottom: 20px
+            }
+            
+            .mr-30 {
+                margin-right: 30px
+            }
+            
+            .ml-30 {
+                margin-left: 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: 90%;
+                max-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;
+            }
+            
+            .groupInfo,
+            .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
+            }
+            
+            .filter-container {
+                .el-button+.el-button {
+                    margin-left: 20px !important;
+                }
+                .el-input {
+                    margin: 0 20px 0 0;
+                }
+            }
+            
+            // 树形控件icon
+            .el-tree-node__content {
+                position: relative
+            }
+            
+            .siteTree .el-icon-delete {
+                color: #409EFF;
+                position: absolute;
+                right: 6px;
+                top: 5px;
+            }
+            
+            //告警详情弹框组件
+            .alarmStatusDialog {
+                .el-form-item:not(.user-layout .el-form-item) {
+                    margin-bottom: 0
+                }
+                .deviceTit {
+                    font-size: 16px;
+                    color: #409EFF;
+                    padding: 20px 0
+                }
+                .basicTit {
+                    color: #4074e7;
+                    line-height: 49px;
+                    height: 49px;
+                }
+                .basicTit:before {
+                    content: "";
+                    width: 3px;
+                    margin-right: 9px;
+                    height: 16px;
+                    position: relative;
+                    top: 3px;
+                    display: inline-block;
+                    background: #4074e7;
+                }
+                .topInfo {
+                    position: relative;
+                    .lubo {
+                        position: absolute;
+                        right: 0px;
+                        bottom: 20px;
+                    }
+                    .handleStatus {
+                        position: absolute;
+                        right: 0px;
+                        top: 0px;
+                        color: #F80000
+                    }
+                }
+            }
+            
+            .underline {
+                position: relative;
+            }
+            
+            .underline:after {
+                position: absolute;
+                bottom: 0;
+                left: -20px;
+                right: -20px;
+                height: 1px;
+                content: '';
+                -webkit-transform: scaleY(.5);
+                transform: scaleY(.5);
+                background-color: #000; //这个是唯佳的线颜色
+                opacity: .2
+            }
+            
+            .underline:last-child:after {
+                //可以这样用
+                height: 0;
+            }
+            
+            // 谐波分析
+            .harmonicReport {
+                .filter-container .filter-item {
+                    // margin-right: 10px
+                }
+            }
+            
+            .timeTab.el-button {
+                margin-bottom: 20px;
+                border-radius: 0
+            }
+            
+            // 三项不平衡
+            .blanceChartTit {
+                padding: 10px 14px;
+                margin-bottom: 10px;
+                border-bottom: 1px solid #f0f0f0;
+                background: #FAFAFA;
+                font-weight: bold
+            }
+            
+            //评估报告
+            .assePage .blanceChartTit {
+                margin-bottom: 0;
+                width: 100%;
+                display: flex;
+                justify-content: space-between;
+                vertical-align: middle;
+                span {
+                    display: inline-block
+                }
+            }
+            
+            .assePage {
+                .subTits {
+                    margin: 25px auto;
+                    text-align: center;
+                    font-weight: bold
+                }
+                .assNum {
+                    font-size: 18px;
+                    color: #2EAEFF;
+                    margin-bottom: 10px;
+                }
+                .greenRate {
+                    color: #04A522
+                }
+                .assTxt {
+                    font-size: 14px
+                }
+                .assSmallbox {
+                    padding: 10px 0;
+                    text-align: center;
+                    font-weight: bold;
+                }
+            }
+            
+            // tab重置样式
+            .asseTabs {
+                margin-bottom: 20px;
+                border-bottom: 1px solid #E5E5E5;
+                width: calc(100% + 40px);
+                margin-left: -20px;
+            }
+            
+            .asseTabs span {
+                line-height: 50px;
+                height: 50px;
+                font-size: 16px;
+                display: inline-block;
+                padding: 0 20px;
+            }
+            
+            .asseTabs span.active {
+                border-bottom: 2px solid #2EAEFF
+            }
+            
+            .banlanceBtn {
+                max-width: 80%;
+                margin: 0 auto 20px;
+                height: 40px;
+                line-height: 40px;
+                width: 236px;
+                font-size: 16px!important;
+                // background: #6dc6ff;
+                // color: #fff
+            }
+            
+            .assCard {
+                min-height: 336px!important;
+                .noDataImg {
+                    width: 40%;
+                    margin-top: 40px;
+                }
+            }
+            
+            .assCard ul {
+                text-align: left;
+                margin: 0;
+                padding: 15px 20px 0;
+                li:not(:last-child) {
+                    border-bottom: 1px solid #F0F0F0;
+                }
+                li {
+                    line-height: 40px;
+                    display: flex;
+                    justify-content: space-between;
+                    vertical-align: middle;
+                    font-size: 14px;
+                    div {
+                        display: inline-block;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
+                    span {
+                        color: #04A522;
+                        background: #F4F4F4;
+                        display: inline-block;
+                        border-radius: 20px;
+                        line-height: 20px;
+                        height: 20px;
+                        text-align: center;
+                        width: 58px;
+                        margin-top: 10px;
+                    }
+                    span.overLimit {
+                        color: #F80000
+                    }
+                }
+            }
+            
+            .totalScore {
+                font-weight: bold;
+                text-align: center;
+                margin: 30px;
+                .el-button {
+                    font-size: 16px;
+                    margin-left: 10px;
+                }
+            }
+            
+            // 实时评分 
+            .descIcon img {
+                position: relative;
+                top: 2px;
+            }
+            
+            .smallSquare {
+                display: inline-block;
+                width: 7px;
+                position: relative;
+                top: -1px;
+                height: 7px;
+                background: #F80000;
+            }
+            
+            .smallSquare.green {
+                background: #24BE00
+            }
+            
+            .loopUnbanlanceContainer {
+                overflow: hidden;
+                .el-row {
+                    margin-bottom: 0!important;
+                }
+            }
+            
+            .loopUnbanlanceCard {
+                ul {
+                    padding: 0;
+                    margin-bottom: 0;
+                    font-size: 14px;
+                }
+                li {
+                    display: flex;
+                    >div {
+                        margin: 7px 20px;
+                    }
+                    >div:first-child {
+                        // min-width: 64px;
+                    }
+                }
+            }
+            
+            .voltagePanel {
+                .el-table--small th,
+                .el-table--small td {
+                    padding: 17px 0
+                }
+                .uList p {
+                    margin-right: 10px;
+                    padding: 11px 0
+                }
+                .shangXian {
+                    padding: 20px 0 0;
+                    display: flex;
+                    width: 300px;
+                    margin-left: 40px;
+                    text-align: center;
+                    div {
+                        width: 50%;
+                        text-align: center;
+                        position: relative
+                    }
+                    div:first-child:after {
+                        position: absolute;
+                        top: 0;
+                        z-index: 4;
+                        /* left: -20px; */
+                        right: 20px;
+                        height: 211px;
+                        width: 1px;
+                        border: 1px dashed #000;
+                        content: "";
+                        /* transform: scaleY(0.5); */
+                        background-color: rgba(0, 0, 0, 0);
+                        opacity: .2;
+                    }
+                    div:last-child:before {
+                        position: absolute;
+                        top: 0;
+                        z-index: 4;
+                        left: 20px;
+                        height: 211px;
+                        width: 1px;
+                        border: 1px dashed #000;
+                        content: "";
+                        /* transform: scaleY(.2); */
+                        background-color: rgba(0, 0, 0, 0);
+                        opacity: .2;
+                    }
+                }
+            }

src/views/powerQuality/asseReport/scoreReport.vue

@@ -41,10 +41,12 @@
           <div class="blanceChartTit">
             <span>评分</span>
           </div>
-
-          <div>
+          
             <radar-chart></radar-chart>
-          </div>
+            <div class="totalScore">总评分：40  
+              <el-button type="danger">不合格</el-button>
+            </div>
+        
         </div>
         <br />
         <div class="grid-content bg-purple">

src/views/powerQuality/asseReport/scoreReportComponent/pieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height400" ref="pieChart" />
+    <div class="height300" ref="pieChart" />
   </div>
 </template>
 <script lang="ts">
@@ -20,86 +20,75 @@ import useEcharts from "@/composables/useEcharts";
 import { StateType as HomeStateType } from "../../../home/store";
 // import { ChartDataType } from "../../data";
 
-const worksChartOption: EChartOption = {
-  // backgroundColor: "pink",
-  color: ["#f2e251", "#48C964", "#fe8161"],
-
-  legend: {
-    bottom: "0",
-    data: ["A相电流", "B相电流", "C相电流"],
-  },
-  // toolbox: {
-  //   show: false,
-  // },
-  tooltip: {
-    // show: true
-    trigger: "axis",
-    axisPointer: { type: "cross" },
-  },
-  grid: {
-    left: "20",
-    right: "40",
-    top: "40",
-    bottom: "30",
-    containLabel: true,
-  },
-  xAxis: {
-    axisLabel: {
-      color: "#444", fontSize: 14 ,
-    },
-    /*改变xy轴颜色*/
-    axisLine: {
-      lineStyle: {
-        color: "#444",
-        width: 1, //这里是为了突出显示加上的
-      },
-    },
-    boundaryGap: false,
-    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
-  },
-  yAxis: {
-    name: "A",
-    nameTextStyle: {
-      color: "#707070",
-      fontSize: 14,
-    },
-    axisLabel: {
-     color: "#444", fontSize: 14 ,
-    },
+var echartData=[
+               {value:335, legendname:'优秀',name:"优秀",itemStyle:{color:"#40ABFE"}},
+               {value:335, legendname:'合格',name:"合格",itemStyle:{color:"#EEAA3F"}},
+               {value:335, legendname:'不合格',name:"不合格",itemStyle:{color:"#FF2222"}},
+            
+            ]
 
-    axisLine: {
-      symbolOffset: [0, 4],
-      lineStyle: { color: "#444" },
-    },
-    splitArea: {
-      show: false,
-    },
-  },
-
-  series: [
-    {
-      name: "A相电流",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
-      
-    },
+var total_datas = 0;
+for (var i = 0; i < echartData.length; i++) {
+    total_datas += Number(echartData[i].value)
+    console.log(typeof(echartData[i].value))
+}
+const worksChartOption: EChartOption = {
+  
+   title: [
     {
-      name: "B相电流",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
+        text:''+total_datas,
+        subtext: '共计回路',
+        textStyle:{
+            fontSize:24,
+            color:"black"
+        },
+        subtextStyle: {
+            fontSize: 16,
+            color: 'black'
+        },
+        textAlign:"center",
+        x: '49%',
+        y: '40%',
+    }],
+    tooltip: {
+        trigger: 'item',
+        formatter:function (parms){
+          var str=  parms.seriesName+"</br>"+
+            parms.marker+""+parms.data.legendname+"</br>"+
+            "数量："+ parms.data.value+"</br>"+
+            "占比："+ parms.percent+"%";
+            return  str ;
+        }
     },
-    {
-      name: "C相电流",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
+    legend: {
+        type:"scroll",
+        orient: 'horizontal',
+        bottom:'0%',
+        align:'left',
+        // top:'middle',
+        textStyle: {
+            color:'#8C8C8C'
+        },
+        height:250
     },
-  ],
+    series: [
+        {
+            name:'标题',
+            type:'pie',
+            center: ['50%', '50%'],
+            radius: ['40%', '60%'],
+
+             clockwise: false, //饼图的扇区是否是顺时针排布
+            avoidLabelOverlap: false,
+            label : {
+              show : false
+            },
+            labelLine : {
+              show : false
+            },
+            data:echartData
+        }
+    ]
 
 };
 
@@ -189,8 +178,8 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height400 {
-    height: 400px;
+  .height300 {
+    height: 300px;
   }
 }
 </style>

src/views/powerQuality/asseReport/scoreReportComponent/radarChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height400" ref="lineChartBanlance" />
+    <div class="height260" ref="lineChartBanlance" />
   </div>
 </template>
 <script lang="ts">
@@ -23,11 +23,17 @@ import { StateType as HomeStateType } from "../../../home/store";
 const worksChartOption: EChartOption = {
   backgroundColor: "#FFF",
   tooltip: {},
+  grid: {
+    left: "20",
+    right: "40",
+    top: "-20",
+    bottom: "0",
+    containLabel: true,
+  },
   radar: {
-    radius: "60%",
+    radius: "70%",
     center: ["50%", "55%"],
-    // startAngle: 0,
-    splitNumber: 10,
+    splitNumber: 5,
     nameGap: "15",
     name: {
       textStyle: {
@@ -56,23 +62,23 @@ const worksChartOption: EChartOption = {
         max: 100,
       },
       {
-        name: "Monday",
+        name: "电压平衡度",
         max: 100,
       },
       {
-        name: "Tuesday",
+        name: "电压合格率",
         max: 100,
       },
       {
-        name: "Wednesday",
+        name: "功率因数",
         max: 100,
       },
       {
-        name: "Thursday",
+        name: "电流平衡度",
         max: 100,
       },
       {
-        name: "Friday",
+        name: "负载率",
         max: 100,
       },
     ],
@@ -187,8 +193,8 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height400 {
-    height: 400px;
+  .height260 {
+    height: 260px;
   }
 }
 </style>

src/views/powerQuality/realTimeMonitoring/index.vue

@@ -1,5 +1,90 @@
 <template>
-  <div style="padding:30px;">
-   实时监测
+  <div class="app-container assePage" style="padding-top: 0;min-width: 1500px;">
+    <!-- tab切换 start -->
+
+    <el-tabs 
+        v-model="activeName"
+        type="card"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane label="实时评分" name="first">
+          <br>
+          <real-score></real-score>
+       
+        </el-tab-pane>
+        <el-tab-pane label="单回路监测" name="second">
+          <br>
+           <loop-monitor></loop-monitor>
+        </el-tab-pane>
+      </el-tabs>
+      <br>
+
+    <!-- tab切换 end -->
+
+   
   </div>
 </template>
+
+<script>
+import loopMonitor from "./loopMonitor";
+import realScore from "./realScore";
+
+
+export default {
+  name: "VariableList",
+  components: {
+    loopMonitor,
+    realScore,
+
+  },
+
+  data() {
+    return {
+      activeName: "second",
+
+      value4: "请选择",
+      number: 1,
+      measurType: 1,
+      select: 1,
+      currentPage4: 4,
+      showDialog: false,
+      tabPosition: "one",
+      input: "",
+      region: "",
+    };
+  },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+
+
+
+
+</style>
+<style lang="scss">
+// tab重置样式
+.el-tabs--card > .el-tabs__header .el-tabs__item {
+  line-height: 50px;
+  height: 50px;
+  font-size: 16px;
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  border-bottom: 2px solid #409eff;
+  color: #409eff;
+}
+.el-tabs--card
+.el-tabs__header:hover,
+.el-tabs__item:hover
+{
+  color: #409eff !important;
+}
+.el-tabs__header {
+  margin-bottom: 0;
+}
+.el-tabs--card > .el-tabs__header .el-tabs__item,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none;
+}
+</style>

src/views/powerQuality/realTimeMonitoring/loopMonitor.vue

@@ -0,0 +1,419 @@
+<template>
+  <div>
+     <!-- 筛选start -->
+    <div class="filter-container">
+      <div class="left">
+        <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" class="search-button">搜索</el-button>
+        </div>
+      </div>
+       <div class="right descIcon">
+        <img src="@/assets/images/descIcon.png" alt=""  >
+        指标说明
+      </div>
+    </div>
+    <!-- 筛选end -->
+    
+
+    
+    <el-row :gutter="20" class="mt-20">
+
+      <!-- 三项不平衡度 -->
+      <el-col :span="8">
+        <div class="grid-content bg-purple loopUnbanlanceContainer">
+          <div class="blanceChartTit">
+            <span>三项不平衡度</span>
+          </div>
+          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6;" >
+            <el-col :span="12" class="loopUnbanlanceCard">
+              <div
+                class="grid-content "
+                style="text-align: center" >
+                 <loop-pieChart></loop-pieChart>
+                </div>
+            </el-col>
+            <el-col :span="12" class="loopUnbanlanceCard">
+              <div style="width:90%;background:#1187FF;margin:0px auto;text-align:center;color:#fff;padding:10px 0px">
+                <div class="mb-10">电压不平衡度</div>
+                <div>100%</div>
+              </div>
+              <ul>
+                <li>
+                 <div>A相电压</div>
+                 <div>
+                   <div class="mb-5">幅值:9.72A</div>
+                   <div>相角:-</div>
+                 </div>
+                </li>
+                <li>
+                 <div>A相电压</div>
+                 <div>
+                   <div class="mb-5">幅值:9.72A</div>
+                   <div>相角:-</div>
+                 </div>
+                </li>
+                <li>
+                 <div>A相电压</div>
+                 <div>
+                   <div class="mb-5">幅值:9.72A</div>
+                   <div>相角:-</div>
+                 </div>
+                </li>
+              </ul>
+            </el-col>
+          </el-row>
+
+          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6;" >
+            <el-col :span="12" class="loopUnbanlanceCard">
+              <div
+                class="grid-content "
+                style="text-align: center" >
+                 <loop-pieChart></loop-pieChart>
+                </div>
+            </el-col>
+            <el-col :span="12" class="loopUnbanlanceCard">
+              <div style="width:90%;background:#1187FF;margin:0px auto;text-align:center;color:#fff;padding:10px 0px">
+                <div class="mb-10">电流不平衡度</div>
+                <div>100%</div>
+              </div>
+              <ul>
+                <li>
+                 <div>A相电压</div>
+                 <div>
+                   <div class="mb-5">幅值:9.72A</div>
+                   <div>相角:-</div>
+                 </div>
+                </li>
+                <li>
+                 <div>A相电压</div>
+                 <div>
+                   <div class="mb-5">幅值:9.72A</div>
+                   <div>相角:-</div>
+                 </div>
+                </li>
+                <li>
+                 <div>A相电压</div>
+                 <div>
+                   <div class="mb-5">幅值:9.72A</div>
+                   <div>相角:-</div>
+                 </div>
+                </li>
+              </ul>
+            </el-col>
+          </el-row>
+
+
+        </div>
+      </el-col>
+       <!-- 三项不平衡度 end -->
+      <el-col :span="16">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>谐波</span>
+          </div>
+
+          <el-row :gutter="20" style="padding: 20px">
+            <el-col :span="8"
+              ><div
+                class="grid-content bg-purple assCard"
+                style="text-align: center"
+              >
+                <div class="subTits">A相电压</div>
+                <el-row :gutter="20" style="padding: 0 20px">
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0/128</div>
+                      <div class="assTxt">超限数/测点数</div>
+                    </div></el-col
+                  >
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">100%</div>
+                      <div class="assTxt">合格率</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="primary"
+                  >合格</el-button
+                >
+                <ul>
+                  <li>
+                    <div>最大值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>最小值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>平均值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                </ul>
+                
+              </div></el-col
+            >
+            <el-col :span="8"
+              ><div
+                class="grid-content bg-purple assCard"
+                style="text-align: center"
+              >
+                <div class="subTits">B相电压</div>
+                <el-row :gutter="20" style="padding: 0 20px">
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0/128</div>
+                      <div class="assTxt">超限数/测点数</div>
+                    </div></el-col
+                  >
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">100%</div>
+                      <div class="assTxt">合格率</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="danger"
+                  >不合格，会影响设备安全运行</el-button
+                >
+                <ul>
+                  <li>
+                    <div>最大值：234.87V(6.76%)</div>
+                    <span class="overLimit">超限</span>
+                  </li>
+                  <li>
+                    <div>最小值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>平均值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                </ul>
+              </div></el-col
+            >
+            <el-col :span="8"
+              ><div
+                class="grid-content bg-purple assCard"
+                style="text-align: center"
+              >
+                <div class="subTits">C相电压</div>
+                <el-row :gutter="20" style="padding: 0 20px">
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0/128</div>
+                      <div class="assTxt">超限数/测点数</div>
+                    </div></el-col
+                  >
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">100%</div>
+                      <div class="assTxt">合格率</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="primary"
+                  >合格</el-button
+                >
+                <ul>
+                  <li>
+                    <div>最大值：234.87V(6.76%)</div>
+                    <span class="overLimit">超限</span>
+                  </li>
+                  <li>
+                    <div>最小值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>平均值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                </ul>
+              </div></el-col
+            >
+          </el-row>
+        </div>
+      </el-col>
+      
+
+    </el-row>
+
+
+    <el-row :gutter="20" class="mt-20">
+
+     <!-- 电压start -->
+      <el-col :span="8">
+         <voltage-panel></voltage-panel>
+      </el-col>
+      <!-- 电压end -->
+
+
+      <el-col :span="8">
+        <frequency-panel></frequency-panel>   
+        
+      </el-col>
+      <el-col :span="8">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>有功功率和无功功率</span>
+          </div>
+          <el-row :gutter="20" style="padding: 20px">
+            <el-col :span="12"
+              ><div
+                class="grid-content bg-purple assCard"
+                style="text-align: center"
+              >
+                <div class="subTits">电流不平衡度</div>
+                <el-row :gutter="20" style="padding: 0 20px">
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0/128</div>
+                      <div class="assTxt">超限数/测点数</div>
+                    </div></el-col
+                  >
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">100%</div>
+                      <div class="assTxt">合格率</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="primary"
+                  >合格</el-button
+                >
+                <ul>
+                  <li>
+                    <div>最大值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>最小值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>平均值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                </ul>
+              </div></el-col
+            >
+
+            <el-col :span="12"
+              ><div
+                class="grid-content bg-purple assCard"
+                style="text-align: center"
+              >
+                <div class="subTits">电压不平衡度</div>
+                <el-row :gutter="20" style="padding: 0 20px">
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0/128</div>
+                      <div class="assTxt">超限数/测点数</div>
+                    </div></el-col
+                  >
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">100%</div>
+                      <div class="assTxt">合格率</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="primary"
+                  >合格</el-button
+                >
+                <ul>
+                  <li>
+                    <div>最大值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>最小值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>平均值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                </ul>
+              </div></el-col
+            >
+          </el-row>
+        </div>
+      </el-col>
+    
+    </el-row>
+
+    
+  </div>
+ 
+</template>
+
+<script> 
+import loopPieChart from "./loopMonitorComponent/loopPieChart";
+import voltagePanel from "./loopMonitorComponent/voltagePanel";
+import frequencyPanel from "./loopMonitorComponent/frequencyPanel";
+export default {
+   components: { loopPieChart,voltagePanel,frequencyPanel },
+  name: "LoopMonitor",
+ 
+  data() {
+   
+
+    return {
+      value4: "请选择",
+      number: 1,
+      measurType: 1,
+      select: 1,
+      currentPage4: 4,
+      showDialog: false,
+      tabPosition: "one",
+      input: "",
+      region: "",
+    }
+  },
+  methods: {
+   
+  },
+};
+</script>
+ 
+<style lang="scss" scoped>
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  border: 1px solid #99a9bf;
+}
+.bg-purple {
+  border: 1px solid #d3dce6;
+}
+.bg-purple-light {
+  border: 1px solid #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  border: 1px solid #f9fafc;
+} 
+
+</style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/frequencyPanel.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+      <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>频率</span>
+          </div>
+          <el-row :gutter="20" style="padding: 20px">
+          
+
+            <el-col :span="24"
+              ><div
+                class="grid-content bg-purple assCard"
+                style="text-align: center"
+              >
+                <div class="subTits">电压不平衡度</div>
+                <el-row :gutter="20" style="padding: 0 20px">
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0/128</div>
+                      <div class="assTxt">超限数/测点数</div>
+                    </div></el-col
+                  >
+                  <el-col :span="12">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">100%</div>
+                      <div class="assTxt">合格率</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="primary"
+                  >合格</el-button
+                >
+                <ul>
+                  <li>
+                    <div>最大值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>最小值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                  <li>
+                    <div>平均值：234.87V(6.76%)</div>
+                    <span>未超限</span>
+                  </li>
+                </ul>
+              </div></el-col
+            >
+          </el-row>
+        </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "FrenquencyPanel",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "10.31(kV)",
+          name: "Tom",
+          pointNum: 60,
+          status: "warning",
+        },
+        {
+          date: "0(kV)",
+          name: "Tom2",
+          pointNum: 0,
+          status: "exception",
+        },
+        {
+          date: "10.35(kV)",
+          name: "Tom",
+          pointNum: 70,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  border: 1px solid #99a9bf;
+}
+.bg-purple {
+  border: 1px solid #d3dce6;
+}
+.bg-purple-light {
+  border: 1px solid #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  border: 1px solid #f9fafc;
+} 
+</style>

src/views/powerQuality/asseReport/electricChart2.vue → src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/loopPieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height400" ref="lineChartBanlance" />
+    <div class="height200" ref="pieChart" />
   </div>
 </template>
 <script lang="ts">
@@ -17,124 +17,91 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { EChartOption } from "echarts";
 import useEcharts from "@/composables/useEcharts";
-import { StateType as HomeStateType } from "../../home/store";
+import { StateType as HomeStateType } from "../../../home/store";
 // import { ChartDataType } from "../../data";
 
-const worksChartOption: EChartOption = {
-  color: ["#1187FF"],
-  legend: {
-    bottom: "0",
-    data: ["电流不平衡度"],
-  },
+var echartData=[
+               {value:335, legendname:'优秀',name:"优秀",itemStyle:{color:"#40ABFE"}},
+               {value:335, legendname:'合格',name:"合格",itemStyle:{color:"#EEAA3F"}},
+               {value:335, legendname:'不合格',name:"不合格",itemStyle:{color:"#FF2222"}},
+            
+            ]
 
-  tooltip: {
-    trigger: "axis",
-    axisPointer: { type: "cross" },
-  },
-  grid: {
-    left: "20",
-    right: "40",
-    top: "40",
-    bottom: "30",
-    containLabel: true,
-  },
-  xAxis: {
-    axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
-    },
-    /*改变xy轴颜色*/
-    axisLine: {
-      lineStyle: {
-        color: "#444",
-        width: 1, //这里是为了突出显示加上的
-      },
-    },
-    boundaryGap: false,
-    data: [
-      "0:00",
-      "2:00",
-      "4:00",
-      "6:00",
-      "8:00",
-      "10:00",
-      "12:00",
-      "14:00",
-      "16:00",
-      "18:00",
-      "20:00",
-      "22:00",
-      "24:00",
-    ],
-  },
-  yAxis: {
-    name: "%",
-    nameTextStyle: {
-      color: "#707070",
-      fontSize: 14,
-    },
-    axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
-    },
-    axisLine: {
-      symbolOffset: [0, 4],
-      lineStyle: { color: "#444" },
+var total_datas = 0;
+for (var i = 0; i < echartData.length; i++) {
+    total_datas += Number(echartData[i].value)
+    console.log(typeof(echartData[i].value))
+}
+const worksChartOption: EChartOption = {
+  
+   title: [
+    {
+        text:''+total_datas,
+        subtext: '共计回路',
+        textStyle:{
+            fontSize:24,
+            color:"black"
+        },
+        subtextStyle: {
+            fontSize: 16,
+            color: 'black'
+        },
+        textAlign:"center",
+        x: '49%',
+        y: '40%',
+    }],
+    tooltip: {
+        trigger: 'item',
+        formatter:function (parms){
+          var str=  parms.seriesName+"</br>"+
+            parms.marker+""+parms.data.legendname+"</br>"+
+            "数量："+ parms.data.value+"</br>"+
+            "占比："+ parms.percent+"%";
+            return  str ;
+        }
     },
-    splitArea: {
-      show: false,
+    legend: {
+        type:"scroll",
+        orient: 'horizontal',
+        bottom:'0%',
+        align:'left',
+        // top:'middle',
+        textStyle: {
+            color:'#8C8C8C'
+        },
+        height:250
     },
-  },
+    series: [
+        {
+            name:'标题',
+            type:'pie',
+            center: ['50%', '50%'],
+            radius: ['40%', '60%'],
 
-  series: [
-    {
-      name: "电流不平衡度",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [
-        10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10, 2, 12, 0, 5, 10,
-        2, 12, 0, 5,
-      ],
-      markLine: {
-        //最大值和最小值
-        data: [
-          {
-            yAxis: 10,
-            label: {
-              position: "middle",
-              formatter: "严重三项不平衡",
+             clockwise: false, //饼图的扇区是否是顺时针排布
+            avoidLabelOverlap: false,
+            label : {
+              show : false
             },
-            lineStyle: {
-              width: 2,
-              color: "#FF5D1D",
+            labelLine : {
+              show : false
             },
-          },
-          {
-            yAxis: 8,
-            label: {
-              position: "middle",
-              formatter: "不平衡度",
-            },
-            lineStyle: {
-              width: 2,
-              color: "#f2e251",
-            },
-          },
-        ],
-      },
-    },
-  ],
+            data:echartData
+        }
+    ]
+
 };
 
 interface WorksChartCardSetupData {
   t: (key: string | number) => string;
   loading: Ref<boolean>;
-  lineChartBanlance: Ref;
+  pieChart: Ref;
   total: ComputedRef<number>;
   num: ComputedRef<number>;
 }
 
 export default defineComponent({
-  name: "ElectricChart2",
+  name: "PieChart",
   setup(): WorksChartCardSetupData {
     const store = useStore<{ Home: HomeStateType }>();
     const { t } = useI18n();
@@ -149,8 +116,8 @@ export default defineComponent({
     // );
 
     // echarts 图表
-    const lineChartBanlance = ref<HTMLDivElement>();
-    const echarts = useEcharts(lineChartBanlance, worksChartOption);
+    const pieChart = ref<HTMLDivElement>();
+    const echarts = useEcharts(pieChart, worksChartOption);
     // watch([echarts, chartData], () => {
     //   if (echarts.value) {
     //     const option: EChartOption = {
@@ -185,7 +152,7 @@ export default defineComponent({
     return {
       t,
       loading,
-      lineChartBanlance,
+      pieChart,
       total,
       num,
     };
@@ -211,8 +178,8 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height400 {
-    height: 400px;
+  .height200 {
+    height: 200px;
   }
 }
 </style>

src/views/powerQuality/realTimeMonitoring/loopMonitorComponent/voltagePanel.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="voltagePanel">
+    <div class="grid-content bg-purple">
+      <div class="blanceChartTit">
+        <span>电压</span>
+        <span class="subs">额定电压：10kV</span>
+      </div>
+      <div>
+        <div class="shangXian" style="">
+          <div>下限5.37kv</div>
+          <div>上限6.18kV</div>
+        </div>
+         <div style="padding: 20px; display: flex">
+        <div class="uList">
+          <p>Ua</p>
+          <p>Ub</p>
+          <p>Uc</p>
+        </div>
+        <el-table
+          :data="tableData"
+          :show-header="false"
+          border
+          style="width: 100%"
+        >
+          <el-table-column prop="name" label="进度条" width="300px">
+            <template #default="scope">
+              <div class="demo-progress" style="width: 100%">
+                <el-progress
+                  style="width: 100%"
+                  :text-inside="true"
+                  :stroke-width="14"
+                  :percentage="scope.row.pointNum"
+                  :status="scope.row.status"
+                />
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="date" label="日期"> </el-table-column>
+        </el-table>
+      </div>
+      </div>
+     
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "VoltagePanel",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "10.31(kV)",
+          name: "Tom",
+          pointNum: 60,
+          status: "warning",
+        },
+        {
+          date: "0(kV)",
+          name: "Tom2",
+          pointNum: 0,
+          status: "exception",
+        },
+        {
+          date: "10.35(kV)",
+          name: "Tom",
+          pointNum: 70,
+        },
+      ],
+    };
+  },
+};
+</script>
+<style scoped lang="scss">
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  border: 1px solid #99a9bf;
+}
+.bg-purple {
+  border: 1px solid #d3dce6;
+}
+.bg-purple-light {
+  border: 1px solid #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  border: 1px solid #f9fafc;
+} 
+</style>

src/views/powerQuality/realTimeMonitoring/realScore.vue

@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <!-- 筛选start -->
+    <div class="filter-container">
+      <div class="left">
+        <div>
+          数据刷新时间：2021-10-11 15:00:00
+
+          <el-button type="primary" class="search-button" style="margin-left:30px" >刷新</el-button>
+        </div>
+      </div>
+      <div class="right descIcon">
+        <img src="@/assets/images/descIcon.png" alt=""  >
+        指标说明
+      </div>
+    </div>
+    <!-- 筛选end -->
+
+    <el-row :gutter="20" class="mt-20">
+      <el-col :span="6">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>评分</span>
+          </div>
+          
+            <radar-chart></radar-chart>
+            <div class="totalScore">总评分：40  
+              <el-button type="danger">不合格</el-button>
+            </div>
+        
+        </div>
+        <br />
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>回路统计</span>
+          </div>
+          <div>
+            <pie-chart></pie-chart>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="18">
+        <!-- 表格start -->
+        <el-table
+          :data="tableData"
+          style="width: 100%"
+          :header-cell-style="headCellStyle"
+        >
+          <el-table-column prop="huilv" label="回路" width="">
+          </el-table-column>
+          <el-table-column prop="gongLv" label="功率因数" width="">
+          </el-table-column>
+
+          <el-table-column label="不平衡度">
+            <el-table-column label="电流" width="">
+              <template #default="scope">
+                <i class="smallSquare"></i>
+                {{ scope.row.dianLiu }}
+                
+              </template>
+            </el-table-column>
+            <el-table-column label="电压">
+              <template #default="scope">
+                 <i class="smallSquare"></i>
+                {{ scope.row.dianYa }}
+              </template>
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column label="电压">
+            <el-table-column prop="name" label="A相" width="">
+              <template #default="scope">
+                 <i class="smallSquare"></i>
+                {{ scope.row.name }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="B相">
+              <template #default="scope">
+                <i class="smallSquare"></i>
+                {{ scope.row.city }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="C相">
+              <template #default="scope">
+                <i class="smallSquare"></i>
+                {{ scope.row.city }}
+              </template></el-table-column
+            >
+          </el-table-column>
+          <el-table-column label="电流负载率">
+             <el-table-column prop="name" label="A相" width="">
+              <template #default="scope">
+               <i class="smallSquare"></i>
+                {{ scope.row.name }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="B相">
+              <template #default="scope">
+                <i class="smallSquare"></i>
+                {{ scope.row.city }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="C相">
+              <template #default="scope">
+                <i class="smallSquare"></i>
+                {{ scope.row.city }}
+              </template></el-table-column
+            >
+          </el-table-column>
+          <el-table-column label="电流谐波畸变率">
+            <el-table-column prop="name" label="A相" width="">
+              <template #default="scope">
+               <i class="smallSquare"></i>
+                {{ scope.row.name }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="B相">
+              <template #default="scope">
+                <i class="smallSquare green"></i>
+                {{ scope.row.city }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="C相">
+              <template #default="scope">
+                <i class="smallSquare"></i>
+                {{ scope.row.city }}
+              </template></el-table-column
+            >
+          </el-table-column>]
+
+          <el-table-column  label="评分" width="">
+            <template #default="scope">
+                <el-button size="mini" type="warning">{{ scope.row.score }}</el-button>
+              </template>
+          </el-table-column>
+        </el-table>
+        <!-- 表格end -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import radarChart from "./realScoreComponent/radarChart.vue";
+import pieChart from "./realScoreComponent/pieChart.vue";
+// import scoreReport from "./scoreReport";
+export default {
+  name: "RealScore",
+  components: {
+    radarChart,
+    pieChart,
+  },
+
+  data() {
+    return {
+      num: 0,
+      value4: "",
+      tableData: [
+        {
+          huilv: "/HZ183",
+          gongLv: "2%",
+          dianLiu: "100%",
+          dianYa: "0.67%",
+          name: "5%",
+          city: "7%",
+          score:'60'
+        },
+      ],
+    };
+  },
+  methods: {
+    // 表头行的 style 的回调方法
+    headCellStyle({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
+        return `text-align:center`;
+      } else {
+        return "";
+      }
+    },
+  },
+};
+</script>
+ 
+<style scoped lang="scss">
+.el-row {
+  margin-bottom: 20px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  border: 1px solid #99a9bf;
+}
+.bg-purple {
+  border: 1px solid #d3dce6;
+}
+.bg-purple-light {
+  border: 1px solid #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  border: 1px solid #f9fafc;
+}
+</style>

src/views/powerQuality/realTimeMonitoring/realScoreComponent/pieChart.vue

@@ -0,0 +1,185 @@
+<template>
+  <div shadow="never" class="homeBoxCard" v-loading="loading">
+    <div class="height300" ref="pieChart" />
+  </div>
+</template>
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  onMounted,
+  Ref,
+  ref,
+  watch,
+  ComputedRef,
+} from "vue";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import { EChartOption } from "echarts";
+import useEcharts from "@/composables/useEcharts";
+import { StateType as HomeStateType } from "../../../home/store";
+// import { ChartDataType } from "../../data";
+
+var echartData=[
+               {value:335, legendname:'优秀',name:"优秀",itemStyle:{color:"#40ABFE"}},
+               {value:335, legendname:'合格',name:"合格",itemStyle:{color:"#EEAA3F"}},
+               {value:335, legendname:'不合格',name:"不合格",itemStyle:{color:"#FF2222"}},
+            
+            ]
+
+var total_datas = 0;
+for (var i = 0; i < echartData.length; i++) {
+    total_datas += Number(echartData[i].value)
+    console.log(typeof(echartData[i].value))
+}
+const worksChartOption: EChartOption = {
+  
+   title: [
+    {
+        text:''+total_datas,
+        subtext: '共计回路',
+        textStyle:{
+            fontSize:24,
+            color:"black"
+        },
+        subtextStyle: {
+            fontSize: 16,
+            color: 'black'
+        },
+        textAlign:"center",
+        x: '49%',
+        y: '40%',
+    }],
+    tooltip: {
+        trigger: 'item',
+        formatter:function (parms){
+          var str=  parms.seriesName+"</br>"+
+            parms.marker+""+parms.data.legendname+"</br>"+
+            "数量："+ parms.data.value+"</br>"+
+            "占比："+ parms.percent+"%";
+            return  str ;
+        }
+    },
+    legend: {
+        type:"scroll",
+        orient: 'horizontal',
+        bottom:'0%',
+        align:'left',
+        // top:'middle',
+        textStyle: {
+            color:'#8C8C8C'
+        },
+        height:250
+    },
+    series: [
+        {
+            name:'标题',
+            type:'pie',
+            center: ['50%', '50%'],
+            radius: ['40%', '60%'],
+
+             clockwise: false, //饼图的扇区是否是顺时针排布
+            avoidLabelOverlap: false,
+            label : {
+              show : false
+            },
+            labelLine : {
+              show : false
+            },
+            data:echartData
+        }
+    ]
+
+};
+
+interface WorksChartCardSetupData {
+  t: (key: string | number) => string;
+  loading: Ref<boolean>;
+  pieChart: Ref;
+  total: ComputedRef<number>;
+  num: ComputedRef<number>;
+}
+
+export default defineComponent({
+  name: "PieChart",
+  setup(): WorksChartCardSetupData {
+    const store = useStore<{ Home: HomeStateType }>();
+    const { t } = useI18n();
+
+    // 总数
+    const total = computed<number>(() => store.state.Home.worksChartData.total);
+    // num
+    const num = computed<number>(() => store.state.Home.worksChartData.num);
+    // chart Data
+    // const chartData = computed<ChartDataType>(
+    //   () => store.state.Home.worksChartData.chart
+    // );
+
+    // echarts 图表
+    const pieChart = ref<HTMLDivElement>();
+    const echarts = useEcharts(pieChart, worksChartOption);
+    // watch([echarts, chartData], () => {
+    //   if (echarts.value) {
+    //     const option: EChartOption = {
+    //       xAxis: {
+    //         // data: ["03-01", "03-01", "03-01", "03-01", "03-01", "03-01", "03-01"]
+    //         data: chartData.value.day,
+    //       },
+    //       series: [
+    //         {
+    //           name: "新增",
+    //           // data: [3, 1, 1, 2, 2, 2, 2]
+    //           data: chartData.value.num,
+    //         },
+    //       ],
+    //     };
+    //     echarts.value.setOption(option);
+    //   }
+    // });
+
+    // 读取数据 func
+    const loading = ref<boolean>(true);
+    const getData = async () => {
+      loading.value = true;
+      await store.dispatch("Home/queryWorksChartData");
+      loading.value = false;
+    };
+
+    onMounted(() => {
+      getData();
+    });
+
+    return {
+      t,
+      loading,
+      pieChart,
+      total,
+      num,
+    };
+  },
+});
+</script>
+<style lang="scss" scoped>
+.homeBoxCard {
+  margin-bottom: 24px;
+  ::v-deep(.el-card__header) {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+  ::v-deep(.el-card__body) {
+    padding: 12px;
+    font-size: 14px;
+    line-height: 1.5715;
+  }
+  ::v-deep(.el-divider) {
+    margin: 8px 0;
+  }
+  .num {
+    font-size: 30px;
+    color: #515a6e;
+  }
+  .height300 {
+    height: 300px;
+  }
+}
+</style>

src/views/powerQuality/asseReport/electricChart.vue → src/views/powerQuality/realTimeMonitoring/realScoreComponent/radarChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height400" ref="lineChartBanlance" />
+    <div class="height260" ref="lineChartBanlance" />
   </div>
 </template>
 <script lang="ts">
@@ -17,90 +17,94 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import { EChartOption } from "echarts";
 import useEcharts from "@/composables/useEcharts";
-import { StateType as HomeStateType } from "../../home/store";
+import { StateType as HomeStateType } from "../../../home/store";
 // import { ChartDataType } from "../../data";
 
 const worksChartOption: EChartOption = {
-  // backgroundColor: "pink",
-  color: ["#f2e251", "#48C964", "#fe8161"],
-
-  legend: {
-    bottom: "0",
-    data: ["A相电流", "B相电流", "C相电流"],
-  },
-  // toolbox: {
-  //   show: false,
-  // },
-  tooltip: {
-    // show: true
-    trigger: "axis",
-    axisPointer: { type: "cross" },
-  },
+  backgroundColor: "#FFF",
+  tooltip: {},
   grid: {
     left: "20",
     right: "40",
-    top: "40",
-    bottom: "30",
+    top: "-20",
+    bottom: "0",
     containLabel: true,
   },
-  xAxis: {
-    axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
+  radar: {
+    radius: "70%",
+    center: ["50%", "55%"],
+    splitNumber: 5,
+    nameGap: "15",
+    name: {
+      textStyle: {
+        color: "#a8a8a8",
+      },
     },
-    /*改变xy轴颜色*/
     axisLine: {
       lineStyle: {
-        color: "#444",
-        width: 1, //这里是为了突出显示加上的
+        color: "#ebebeb",
       },
     },
-    boundaryGap: false,
-    data: ["0:00", "2:00", "4:00", "6:00", "8:00","10:00","12:00","14:00","16:00","18:00","20:00","22:00","24:00",],
-  },
-  yAxis: {
-    name: "A",
-    nameTextStyle: {
-      color: "#707070",
-      fontSize: 14,
-    },
-    axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
-    },
-
-    axisLine: {
-      symbolOffset: [0, 4],
-      lineStyle: { color: "#444" },
+    splitLine: {
+      lineStyle: {
+        width: 1,
+        color: "#ebebeb",
+      },
     },
     splitArea: {
-      show: false,
+      areaStyle: {
+        color: ["#f8f8f8", "#fff"].reverse(),
+      },
     },
+    indicator: [
+      {
+        name: "谐波畸变率",
+        max: 100,
+      },
+      {
+        name: "电压平衡度",
+        max: 100,
+      },
+      {
+        name: "电压合格率",
+        max: 100,
+      },
+      {
+        name: "功率因数",
+        max: 100,
+      },
+      {
+        name: "电流平衡度",
+        max: 100,
+      },
+      {
+        name: "负载率",
+        max: 100,
+      },
+    ],
   },
-
   series: [
     {
-      name: "A相电流",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,10, 2, 12, 0, 5,],
-      
-    },
-    {
-      name: "B相电流",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [10, 2, 12, 0,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,7, 8, 9, 7, 19,],
-    },
-    {
-      name: "C相电流",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
-      data: [5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14,5, 3, 6, 5, 14],
+      name: "Title✍",
+      type: "radar",
+      symbolSize: 12,
+      itemStyle: {
+        borderColor: "#ebebeb",
+        borderWidth: 2,
+      },
+      areaStyle: {
+        opacity: 0.3,
+      },
+      data: [
+        {
+          itemStyle: {
+            color: "#5eb6db",
+          },
+          value: [20, 33, 80, 50, 30, 40, 100],
+        },
+      ],
     },
   ],
-
 };
 
 interface WorksChartCardSetupData {
@@ -112,7 +116,7 @@ interface WorksChartCardSetupData {
 }
 
 export default defineComponent({
-  name: "ElectricChart",
+  name: "RadarChart",
   setup(): WorksChartCardSetupData {
     const store = useStore<{ Home: HomeStateType }>();
     const { t } = useI18n();
@@ -189,8 +193,8 @@ export default defineComponent({
     font-size: 30px;
     color: #515a6e;
   }
-  .height400 {
-    height: 400px;
+  .height260 {
+    height: 260px;
   }
 }
 </style>