-

.history/src/views/powerQuality/realTimeMonitoring/realScore_20211018102819.vue

@@ -0,0 +1,221 @@
+<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>
+          <!-- 评分 end -->
+
+        <br />
+
+        <!-- 回路统计 -->
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>回路统计</span>
+          </div>
+          <div>
+            <pie-chart></pie-chart>
+          </div>
+        </div>
+        <!-- 回路统计 end -->
+
+      </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>

.history/src/views/powerQuality/realTimeMonitoring/realScore_20211018111826.vue

@@ -0,0 +1,228 @@
+<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>
+        <!-- 评分 end -->
+
+        <br />
+
+        <!-- 回路统计 -->
+        <div class="grid-content bg-purple">
+          <div class="blanceChartTit">
+            <span>回路统计</span>
+          </div>
+          <div>
+            <pie-chart></pie-chart>
+          </div>
+        </div>
+        <!-- 回路统计 end -->
+      </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 }) {
+      row, column
+      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/realScore.vue

@@ -6,31 +6,36 @@
         <div>
           数据刷新时间：2021-10-11 15:00:00
 
-          <el-button type="primary" class="search-button" style="margin-left:30px" >刷新</el-button>
+          <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=""  >
+        <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>
+          <radar-chart></radar-chart>
+          <div class="totalScore">
+            总评分：40
+            <el-button type="danger">不合格</el-button>
+          </div>
         </div>
-          <!-- 评分 end -->
+        <!-- 评分 end -->
 
         <br />
 
@@ -44,11 +49,8 @@
           </div>
         </div>
         <!-- 回路统计 end -->
-
       </el-col>
 
-
-
       <el-col :span="18">
         <!-- 表格start -->
         <el-table
@@ -56,22 +58,23 @@
           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 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>
+                <i class="smallSquare"></i>
                 {{ scope.row.dianYa }}
               </template>
             </el-table-column>
@@ -80,7 +83,7 @@
           <el-table-column label="电压">
             <el-table-column prop="name" label="A相" width="">
               <template #default="scope">
-                 <i class="smallSquare"></i>
+                <i class="smallSquare"></i>
                 {{ scope.row.name }}
               </template>
             </el-table-column>
@@ -94,13 +97,13 @@
               <template #default="scope">
                 <i class="smallSquare"></i>
                 {{ scope.row.city }}
-              </template></el-table-column
-            >
+              </template>
+            </el-table-column>
           </el-table-column>
           <el-table-column label="电流负载率">
-             <el-table-column prop="name" label="A相" width="">
+            <el-table-column prop="name" label="A相" width="">
               <template #default="scope">
-               <i class="smallSquare"></i>
+                <i class="smallSquare"></i>
                 {{ scope.row.name }}
               </template>
             </el-table-column>
@@ -114,13 +117,13 @@
               <template #default="scope">
                 <i class="smallSquare"></i>
                 {{ scope.row.city }}
-              </template></el-table-column
-            >
+              </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>
+                <i class="smallSquare"></i>
                 {{ scope.row.name }}
               </template>
             </el-table-column>
@@ -134,14 +137,17 @@
               <template #default="scope">
                 <i class="smallSquare"></i>
                 {{ scope.row.city }}
-              </template></el-table-column
-            >
-          </el-table-column>]
+              </template>
+            </el-table-column>
+          </el-table-column>
+          ]
 
-          <el-table-column  label="评分" width="">
+          <el-table-column label="评分" width="">
             <template #default="scope">
-                <el-button size="mini" type="warning">{{ scope.row.score }}</el-button>
-              </template>
+              <el-button size="mini" type="warning">
+                {{ scope.row.score }}
+              </el-button>
+            </template>
           </el-table-column>
         </el-table>
         <!-- 表格end -->
@@ -151,11 +157,11 @@
 </template>
 
 <script>
-import radarChart from "./realScoreComponent/radarChart.vue";
-import pieChart from "./realScoreComponent/pieChart.vue";
+import radarChart from './realScoreComponent/radarChart.vue'
+import pieChart from './realScoreComponent/pieChart.vue'
 // import scoreReport from "./scoreReport";
 export default {
-  name: "RealScore",
+  name: 'RealScore',
   components: {
     radarChart,
     pieChart,
@@ -164,31 +170,32 @@ export default {
   data() {
     return {
       num: 0,
-      value4: "",
+      value4: '',
       tableData: [
         {
-          huilv: "/HZ183",
-          gongLv: "2%",
-          dianLiu: "100%",
-          dianYa: "0.67%",
-          name: "5%",
-          city: "7%",
-          score:'60'
+          huilv: '/HZ183',
+          gongLv: '2%',
+          dianLiu: '100%',
+          dianYa: '0.67%',
+          name: '5%',
+          city: '7%',
+          score: '60',
         },
       ],
-    };
+    }
   },
   methods: {
     // 表头行的 style 的回调方法
     headCellStyle({ row, column, rowIndex, columnIndex }) {
+      row, column
       if (columnIndex !== 0 && columnIndex !== 1 && rowIndex === 0) {
-        return `text-align:center`;
+        return `text-align:center`
       } else {
-        return "";
+        return ''
       }
     },
   },
-};
+}
 </script>
  
 <style scoped lang="scss">