|
|
@@ -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>
|
ming