新增

src/assets/css/index.scss

@@ -58,6 +58,19 @@ div:focus {
     }
 }
 
+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
@@ -367,10 +380,11 @@ div:focus {
     .filter-container .filter-item {
         // margin-right: 10px
     }
-    .timeTab.el-button {
-        margin-bottom: 20px;
-        border-radius: 0
-    }
+}
+
+.timeTab.el-button {
+    margin-bottom: 20px;
+    border-radius: 0
 }
 
 // 三项不平衡
@@ -436,4 +450,59 @@ div:focus {
 
 .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
+        }
+    }
 }

src/views/powerQuality/asseReport/index.vue

@@ -1,147 +1,41 @@
 <template>
-  <div class="app-container assePage" style="padding-top: 0">
+  <div class="app-container assePage" style="padding-top: 0;min-width: 1500px;">
     <!-- tab切换 start -->
-    <div class="asseTabs">
-      <span>评分报告</span>
-      <span class="active">单回路报告</span>
-    </div>
-    <!-- tab切换 end -->
-
-    <!-- 筛选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>
 
-          <div class="filter-item">
-            日期：
-            <el-date-picker
-              v-model="value4"
-              type="dates"
-              placeholder="请选择"
-              style="width: 200px"
-            >
-            </el-date-picker>
-          </div>
+    <el-tabs 
+        v-model="activeName"
+        type="card"
+        @tab-click="handleClick"
+      >
+        <el-tab-pane label="评分报告" name="first">
+          <br>
+          <score-report></score-report>
+       
+        </el-tab-pane>
+        <el-tab-pane label="单回路报告" name="second">
+          <br>
+           <loop-report></loop-report>
+        </el-tab-pane>
+      </el-tabs>
+      <br>
 
-          <el-button type="primary" class="search-button">搜索</el-button>
-        </div>
-      </div>
-    </div>
-    <!-- 筛选end -->
-
-    <el-row :gutter="20" class="mt-20">
-      <el-col :span="14">
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>电压质量</span>
-            <span class="subs">标称电压：380V</span>
-          </div>
+    <!-- tab切换 end -->
 
-          <el-row :gutter="20" style="padding: 20px">
-            <el-col :span="8"
-              ><div class="grid-content bg-purple">
-                <div class="subTits">A相电压</div>
-                <el-row :gutter="20" style="padding: 0 20px 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></div
-            ></el-col>
-            <el-col :span="8"
-              ><div class="grid-content bg-purple">
-                <div class="subTits">B相电压</div>
-                <el-row :gutter="20" style="padding: 0 20px 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>
-                
-                </div></el-col
-            >
-            <el-col :span="8"
-              ><div class="grid-content bg-purple">
-                <div class="subTits">C相电压</div>
-                <el-row :gutter="20" style="padding: 0 20px 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>
-                
-                </div></el-col
-            >
-          </el-row>
-        </div>
-      </el-col>
-      <el-col :span="5">
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">
-            <span>频率质量</span>
-            <span class="subs">标称频率：50Hz</span>
-          </div>
-          <div>dsdsd</div>
-        </div>
-      </el-col>
-      <el-col :span="5">
-        <div class="grid-content bg-purple">
-          <div class="blanceChartTit">功率因数分析</div>
-          <div>ddsdssdsds</div>
-        </div>
-      </el-col>
-    </el-row>
+   
   </div>
 </template>
 
 <script>
-// import voltageChart from "./voltageChart";
-// import voltageChart2 from "./voltageChart2";
-// import electricChart from "./electricChart";
-// import electricChart2 from "./electricChart2";
+import loopReport from "./loopReport";
+import scoreReport from "./scoreReport";
+
 
 export default {
   name: "VariableList",
   components: {
-    // voltageChart,
-    // voltageChart2,
-    // electricChart,
-    // electricChart2,
+    loopReport,
+    scoreReport,
+
   },
 
   data() {
@@ -164,30 +58,33 @@ export default {
 </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;
+
+
+
+
+</style>
+<style lang="scss">
+// tab重置样式
+.el-tabs--card > .el-tabs__header .el-tabs__item {
+  line-height: 50px;
+  height: 50px;
+  font-size: 16px;
 }
-.bg-purple {
-  border: 1px solid #d3dce6;
+.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  border-bottom: 2px solid #409eff;
+  color: #409eff;
 }
-.bg-purple-light {
-  border: 1px solid #e5e9f2;
+.el-tabs--card
+.el-tabs__header:hover,
+.el-tabs__item:hover
+{
+  color: #409eff !important;
 }
-.grid-content {
-  border-radius: 4px;
-  min-height: 36px;
+.el-tabs__header {
+  margin-bottom: 0;
 }
-.row-bg {
-  padding: 10px 0;
-  border: 1px solid #f9fafc;
+.el-tabs--card > .el-tabs__header .el-tabs__item,
+.el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none;
 }
 </style>

src/views/powerQuality/asseReport/loopReport.vue

@@ -0,0 +1,500 @@
+<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>
+
+          <div class="filter-item">
+            日期：
+            <el-date-picker
+              v-model="value4"
+              type="dates"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+            </el-date-picker>
+          </div>
+
+          <el-button type="primary" class="search-button">搜索</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 筛选end -->
+    
+    <el-row :gutter="20" class="mt-20">
+      <el-col :span="14">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>电压质量</span>
+            <span class="subs">标称电压：380V</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-col :span="5">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>频率质量</span>
+            <span class="subs">标称频率：50Hz</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>
+      </el-col>
+      <el-col :span="5">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">功率因数分析</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="24" style="margin-bottom:20px">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum">0.9</div>
+                      <div class="assTxt">考核限值</div>
+                    </div></el-col
+                  >
+                  <el-col :span="24" style="margin-bottom:20px">
+                    <div class="grid-content bg-purple assSmallbox">
+                      <div class="assNum greenRate">-</div>
+                      <div class="assTxt">数值</div>
+                    </div></el-col
+                  >
+                </el-row>
+                <el-button class="banlanceBtn" round type="warning" 
+                  >暂无数据</el-button
+                >
+              
+               
+              </div></el-col
+            >
+          </el-row>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20" class="mt-20">
+      <el-col :span="14">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>谐波畸变率</span>
+            <span class="subs">数值标准</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>
+                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="">
+              </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-col :span="10">
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>不平衡度</span>
+            <span class="subs">数值标准</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>
+export default {
+  name: "LoopReport",
+ 
+  data() {
+   
+
+    return {
+      value4: "请选择",
+      number: 1,
+      measurType: 1,
+      select: 1,
+      currentPage4: 4,
+      showDialog: false,
+      tabPosition: "one",
+      input: "",
+      region: "",
+    }
+  },
+  methods: {
+   
+  },
+};
+</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/scoreReport.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <!-- 筛选start -->
+    <div class="filter-container">
+      <div class="left">
+        <div>
+          <el-button
+            class="search-button timeTab"
+            @click="num = 0"
+            :type="num == 0 ? 'primary' : ''"
+            >按日</el-button
+          >
+          <el-button
+            class="search-button timeTab"
+            @click="num = 1"
+            :type="num == 1 ? 'primary' : ''"
+            style="margin-left: 0 !important; margin-right: 20px"
+            >按月</el-button
+          >
+
+          <div class="filter-item">
+            日期：
+            <el-date-picker
+              v-model="value4"
+              type="dates"
+              placeholder="请选择"
+              style="width: 200px"
+            >
+            </el-date-picker>
+          </div>
+
+          <el-button type="primary" class="search-button">搜索</el-button>
+        </div>
+      </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>
+
+          <div>
+            <radar-chart></radar-chart>
+          </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">
+                <el-button size="mini" round type="danger">{{ scope.row.dianLiu }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column label="电压">
+              <template #default="scope">
+                <el-button size="mini" round type="success">{{ scope.row.dianYa }}</el-button>
+              </template>
+            </el-table-column>
+          </el-table-column>
+
+          <el-table-column label="电压">
+            <el-table-column prop="name" label="A相" width="">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.name }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="B相">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.city }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="C相">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.city }}</el-button>
+              </template></el-table-column
+            >
+          </el-table-column>
+          <el-table-column label="电流负载率">
+             <el-table-column prop="name" label="A相" width="">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.name }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="B相">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.city }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="C相">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.city }}</el-button>
+              </template></el-table-column
+            >
+          </el-table-column>
+          <el-table-column label="电流谐波畸变率">
+            <el-table-column prop="name" label="A相" width="">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.name }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="B相">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.city }}</el-button>
+              </template>
+            </el-table-column>
+            <el-table-column prop="city" label="C相">
+              <template #default="scope">
+                <el-button size="mini" round>{{ scope.row.city }}</el-button>
+              </template></el-table-column
+            >
+          </el-table-column>
+        </el-table>
+        <!-- 表格end -->
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import radarChart from "./scoreReportComponent/radarChart.vue";
+import pieChart from "./scoreReportComponent/pieChart.vue";
+// import scoreReport from "./scoreReport";
+export default {
+  name: "ScoreReport",
+  components: {
+    radarChart,
+    pieChart,
+  },
+
+  data() {
+    return {
+      num: 0,
+      value4: "",
+      tableData: [
+        {
+          huilv: "/HZ183",
+          gongLv: "合格",
+          dianLiu: "不合格",
+          dianYa: "合格",
+          name: "合格",
+          city: "不合格",
+        },
+      ],
+    };
+  },
+  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/asseReport/voltageChart.vue → src/views/powerQuality/asseReport/scoreReportComponent/pieChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div shadow="never" class="homeBoxCard" v-loading="loading">
-    <div class="height400" ref="lineChartBanlance" />
+    <div class="height400" ref="pieChart" />
   </div>
 </template>
 <script lang="ts">
@@ -17,7 +17,7 @@ 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 = {
@@ -26,7 +26,7 @@ const worksChartOption: EChartOption = {
 
   legend: {
     bottom: "0",
-    data: ["A相电压", "B相电压", "C相电压"],
+    data: ["A相电流", "B相电流", "C相电流"],
   },
   // toolbox: {
   //   show: false,
@@ -45,7 +45,7 @@ const worksChartOption: EChartOption = {
   },
   xAxis: {
     axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
+      color: "#444", fontSize: 14 ,
     },
     /*改变xy轴颜色*/
     axisLine: {
@@ -58,13 +58,13 @@ const worksChartOption: EChartOption = {
     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: "V",
+    name: "A",
     nameTextStyle: {
       color: "#707070",
       fontSize: 14,
     },
     axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
+     color: "#444", fontSize: 14 ,
     },
 
     axisLine: {
@@ -78,7 +78,7 @@ const worksChartOption: EChartOption = {
 
   series: [
     {
-      name: "A相电压",
+      name: "A相电流",
       type: "line",
       symbolSize: 7,
       smooth: false,
@@ -86,14 +86,14 @@ const worksChartOption: EChartOption = {
       
     },
     {
-      name: "B相电压",
+      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相电压",
+      name: "C相电流",
       type: "line",
       symbolSize: 7,
       smooth: false,
@@ -106,13 +106,13 @@ const worksChartOption: EChartOption = {
 interface WorksChartCardSetupData {
   t: (key: string | number) => string;
   loading: Ref<boolean>;
-  lineChartBanlance: Ref;
+  pieChart: Ref;
   total: ComputedRef<number>;
   num: ComputedRef<number>;
 }
 
 export default defineComponent({
-  name: "VoltageChart",
+  name: "PieChart",
   setup(): WorksChartCardSetupData {
     const store = useStore<{ Home: HomeStateType }>();
     const { t } = useI18n();
@@ -127,8 +127,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 = {
@@ -163,7 +163,7 @@ export default defineComponent({
     return {
       t,
       loading,
-      lineChartBanlance,
+      pieChart,
       total,
       num,
     };

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

@@ -17,111 +17,86 @@ 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: ["电压不平衡度"],
-  },
-
-  tooltip: {
-    trigger: "axis",
-    axisPointer: { type: "cross" },
-  },
-  grid: {
-    left: "20",
-    right: "40",
-    top: "40",
-    bottom: "30",
-    containLabel: true,
-  },
-  xAxis: {
-    axisLabel: {
-      textStyle: { color: "#444", fontSize: 14 },
+  backgroundColor: "#FFF",
+  tooltip: {},
+  radar: {
+    radius: "60%",
+    center: ["50%", "55%"],
+    // startAngle: 0,
+    splitNumber: 10,
+    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: "%",
-    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: "Monday",
+        max: 100,
+      },
+      {
+        name: "Tuesday",
+        max: 100,
+      },
+      {
+        name: "Wednesday",
+        max: 100,
+      },
+      {
+        name: "Thursday",
+        max: 100,
+      },
+      {
+        name: "Friday",
+        max: 100,
+      },
+    ],
   },
-
   series: [
     {
-      name: "电压不平衡度",
-      type: "line",
-      symbolSize: 7,
-      smooth: false,
+      name: "Title✍",
+      type: "radar",
+      symbolSize: 12,
+      itemStyle: {
+        borderColor: "#ebebeb",
+        borderWidth: 2,
+      },
+      areaStyle: {
+        opacity: 0.3,
+      },
       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: "严重三项不平衡",
-            },
-            lineStyle: {
-              width: 2,
-              color: "#FF5D1D",
-            },
+        {
+          itemStyle: {
+            color: "#5eb6db",
           },
-          {
-            yAxis: 8,
-            label: {
-              position: "middle",
-              formatter: "不平衡度",
-            },
-            lineStyle: {
-              width: 2,
-              color: "#f2e251",
-            },
-          },
-        ],
-      },
+          value: [20, 33, 80, 50, 30, 40, 100],
+        },
+      ],
     },
   ],
 };
@@ -135,7 +110,7 @@ interface WorksChartCardSetupData {
 }
 
 export default defineComponent({
-  name: "VoltageChart2",
+  name: "RadarChart",
   setup(): WorksChartCardSetupData {
     const store = useStore<{ Home: HomeStateType }>();
     const { t } = useI18n();

src/views/siteManage/basicInfo/index.vue

@@ -173,6 +173,12 @@
               <el-form-item label="联系方式" prop="name">
                 <el-input v-model="ruleForm.name"></el-input>
               </el-form-item>
+               <el-form-item label="联系人2" prop="spare_user_name">
+                <el-input v-model="ruleForm.spare_user_name"></el-input>
+              </el-form-item>
+              <el-form-item label="联系方式2" prop="spare_phone">
+                <el-input v-model="ruleForm.spare_phone"></el-input>
+              </el-form-item>
             </div>
             <el-form-item>
               <el-button type="primary" @click="submitForm('ruleForm')"
@@ -217,6 +223,14 @@ export default {
         name: [
           { required: true, message: "请输入站点名称", trigger: "blur" },
           { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+         spare_user_name: [
+          { required: true, message: "请输入联系人2", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        spare_phone: [
+          { required: true, message: "请输入联系方式2", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
         ],
         region: [
           { required: true, message: "请选择活动区域", trigger: "change" },