|
@@ -5,26 +5,25 @@
|
|
|
<div id="main" style="width: 260px; height: 160px"></div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <h3 >异常设备概览</h3>
|
|
|
+ <h3>异常设备概览</h3>
|
|
|
<div class="BOX">
|
|
|
<div style="display: flex">
|
|
|
<div class="YC01">
|
|
|
- <strong>0</strong>
|
|
|
+ <strong>{{ equipment.errCounrt }}</strong>
|
|
|
<span>异常总数</span>
|
|
|
</div>
|
|
|
<div class="YC02">
|
|
|
- <strong>0</strong>
|
|
|
+ <strong>{{ equipment.errCountInCurrentMonth }}</strong>
|
|
|
<span>本月异常</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
<div style="display: flex">
|
|
|
<div class="YC02">
|
|
|
- <strong class="textred">0</strong>
|
|
|
+ <strong class="textred">{{ equipment.errCountNotDeal }}</strong>
|
|
|
<span>未处理异常</span>
|
|
|
</div>
|
|
|
<div class="YC02">
|
|
|
- <strong class="texyellow">0</strong>
|
|
|
+ <strong class="texyellow">{{ equipment.errDeviceCount }}</strong>
|
|
|
<span>异常设备数</span>
|
|
|
</div>
|
|
|
<div class="YC03"></div>
|
|
@@ -32,7 +31,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <h3 style="margin: 8px 0;">异常数据信息</h3>
|
|
|
+ <h3 style="margin: 8px 0">异常数据信息</h3>
|
|
|
<p class="titleYC"><span>风场名称</span><span>风机信息</span></p>
|
|
|
<Tabroll
|
|
|
:table-data="YCtableData"
|
|
@@ -41,14 +40,9 @@
|
|
|
:column-widths="YCcolumnWidths"
|
|
|
:max-height="120"
|
|
|
></Tabroll>
|
|
|
- <!-- <dv-scroll-board
|
|
|
- :config="config"
|
|
|
- :headerBGC="'#666666'"
|
|
|
- style="height: 150px"
|
|
|
- /> -->
|
|
|
</div>
|
|
|
<div>
|
|
|
- <h3 style="margin: 8px 0;">近期操作记录</h3>
|
|
|
+ <h3 style="margin: 8px 0">性能分析操作记录</h3>
|
|
|
<p class="titleJQ">
|
|
|
<span>名字</span><span>日期</span><span>操作记录</span>
|
|
|
</p>
|
|
@@ -64,84 +58,76 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { queryStatistics, queryOptionRecords } from "@/api/ledger.js";
|
|
|
import * as echarts from "echarts";
|
|
|
import Tabroll from "./tabroll.vue";
|
|
|
+
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ maplistArr: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ defaultdata: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ maplistArr: {
|
|
|
+ handler(newVal) {
|
|
|
+ if (Object.keys(newVal).length > 0) { // 检查maplistArr是否有值
|
|
|
+ console.log("Map list updated:", newVal);
|
|
|
+ this.getStatistics();
|
|
|
+ this.getOptionRecords();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true, // 立即执行一次handler
|
|
|
+ deep: true, // 深度监听对象内部变化
|
|
|
+ },
|
|
|
+ },
|
|
|
components: {
|
|
|
Tabroll,
|
|
|
},
|
|
|
-
|
|
|
data() {
|
|
|
return {
|
|
|
- // config: {
|
|
|
- // header: ["风场名称", "风机信息"],
|
|
|
- // data: [
|
|
|
- // ["行1列1", "行1列2"],
|
|
|
- // ["行2列1", "行2列2"],
|
|
|
- // ["行3列1", "行3列2"],
|
|
|
- // ["行4列1", "行4列2"],
|
|
|
- // ["行5列1", "行5列2"],
|
|
|
- // ["行6列1", "行6列2"],
|
|
|
- // ["行7列1", "行7列2"],
|
|
|
- // ["行8列1", "行8列2"],
|
|
|
- // ["行9列1", "行9列2"],
|
|
|
- // ["行10列1", "行10列2"],
|
|
|
- // ],
|
|
|
- // headerBGC: "#004F5F",
|
|
|
- // oddRowBGC: "#004F5F",
|
|
|
- // evenRowBGC: "#028A8A",
|
|
|
- // },
|
|
|
-
|
|
|
myChart: null,
|
|
|
- YCtableData: [
|
|
|
- { name: "唐龙三期风电场", date: "XXXX001号风机" },
|
|
|
- { name: "唐龙三期风电场", date: "XXXX001号风机" },
|
|
|
- { name: "唐龙三期风电场", date: "XXXX001号风机" },
|
|
|
- { name: "唐龙三期风电场", date: "XXXX001号风机" },
|
|
|
- { name: "唐龙三期风电场", date: "XXXX001号风机" },
|
|
|
- { name: "唐龙三期风电场", date: "XXXX001号风机" },
|
|
|
- ],
|
|
|
- tableData: [
|
|
|
- { name: "王小虎", date: "2020-02-20", record: "操作了性能分析" },
|
|
|
- { name: "王小虎", date: "2020-02-20", record: "操作了性能分析" },
|
|
|
- { name: "王小虎", date: "2020-02-20", record: "操作了性能分析" },
|
|
|
- { name: "王小虎", date: "2020-02-20", record: "操作了性能分析" },
|
|
|
- { name: "王小虎", date: "2020-02-20", record: "操作了性能分析" },
|
|
|
- { name: "王小虎", date: "2020-02-20", record: "操作了性能分析" },
|
|
|
- ],
|
|
|
+ YCtableData: [],
|
|
|
shujuloading: false,
|
|
|
+ YCtableColumns: [{ prop: "fieldName" }, { prop: "engineName" }],
|
|
|
+ YCcolumnWidths: {
|
|
|
+ fieldName: 120,
|
|
|
+ },
|
|
|
+ tableData: [],
|
|
|
tableColumns: [
|
|
|
- { prop: "name", label: "姓名" },
|
|
|
- { prop: "date", label: "日期" },
|
|
|
- { prop: "record", label: "记录" },
|
|
|
+ { prop: "optionByName" },
|
|
|
+ { prop: "createTime" },
|
|
|
+ { prop: "optionContent" },
|
|
|
],
|
|
|
- YCtableColumns: [
|
|
|
- { prop: "name", label: "姓名" },
|
|
|
- { prop: "date", label: "日期" },
|
|
|
-
|
|
|
- ],
|
|
|
-
|
|
|
columnWidths: {
|
|
|
- // 列宽度信息
|
|
|
- name: 60,
|
|
|
- date: 90,
|
|
|
+ optionByName: 60,
|
|
|
+ createTime: 100,
|
|
|
},
|
|
|
- YCcolumnWidths: {
|
|
|
- name: 120,
|
|
|
+ equipment: {
|
|
|
+ analysisedCount: 0,
|
|
|
+ analysisingCount: 0,
|
|
|
+ noAnalysisCount: 0,
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
+ created() {},
|
|
|
mounted() {
|
|
|
this.initChart();
|
|
|
},
|
|
|
-
|
|
|
methods: {
|
|
|
initChart() {
|
|
|
var chartDom = document.getElementById("main");
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
+ this.myChart = echarts.init(chartDom);
|
|
|
+ this.updateChart();
|
|
|
+ },
|
|
|
+ updateChart() {
|
|
|
+ var option = {
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: function (params) {
|
|
@@ -152,7 +138,7 @@ export default {
|
|
|
legend: {
|
|
|
orient: "vertical",
|
|
|
left: "left",
|
|
|
- top: "30%", // 将图例向下移动一些
|
|
|
+ top: "30%",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
@@ -166,23 +152,53 @@ export default {
|
|
|
labelLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
- center: ["60%", "50%"], // 将饼图往右移动一些
|
|
|
+ center: ["60%", "50%"],
|
|
|
data: [
|
|
|
- { value: 1, name: "已完成", itemStyle: { color: "#7ECF51" } },
|
|
|
- { value: 0, name: "进行中", itemStyle: { color: "#EECB5F" } },
|
|
|
- { value: 4, name: "未开始", itemStyle: { color: "#E16757" } },
|
|
|
+ {
|
|
|
+ value: this.equipment.analysisedCount,
|
|
|
+ name: "已完成",
|
|
|
+ itemStyle: { color: "#7ECF51" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.equipment.analysisingCount,
|
|
|
+ name: "进行中",
|
|
|
+ itemStyle: { color: "#EECB5F" },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: this.equipment.noAnalysisCount,
|
|
|
+ name: "未开始",
|
|
|
+ itemStyle: { color: "#E16757" },
|
|
|
+ },
|
|
|
],
|
|
|
},
|
|
|
],
|
|
|
};
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
+ this.myChart.setOption(option);
|
|
|
+ },
|
|
|
+ getStatistics() {
|
|
|
+ let DataObject = {
|
|
|
+ codeNumber: this.maplistArr.codeNumber,
|
|
|
+ codeType: this.maplistArr.codeType,
|
|
|
+ };
|
|
|
+ queryStatistics(DataObject).then((res) => {
|
|
|
+ this.YCtableData = res.data.errList || [];
|
|
|
+ this.equipment = res.data || {};
|
|
|
+ this.updateChart(); // Update chart after data is received
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getOptionRecords() {
|
|
|
+ let DataObject = {
|
|
|
+ codeNumber: this.maplistArr.codeNumber,
|
|
|
+ codeType: this.maplistArr.codeType,
|
|
|
+ };
|
|
|
+ queryOptionRecords(DataObject).then((res) => {
|
|
|
+ this.tableData = res.data || [];
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
.backbone {
|
|
|
width: 300px;
|
|
@@ -192,16 +208,13 @@ export default {
|
|
|
border-radius: 5px;
|
|
|
padding: 20px;
|
|
|
}
|
|
|
-
|
|
|
.BOX {
|
|
|
background: #004f5f;
|
|
|
display: flex;
|
|
|
-
|
|
|
padding-left: 10px;
|
|
|
flex-wrap: wrap;
|
|
|
padding-bottom: 15px;
|
|
|
}
|
|
|
-
|
|
|
.YC01 {
|
|
|
width: 154px;
|
|
|
height: 60px;
|
|
@@ -212,19 +225,16 @@ export default {
|
|
|
margin-right: 15px;
|
|
|
margin-top: 15px;
|
|
|
text-align: center;
|
|
|
-
|
|
|
strong {
|
|
|
display: block;
|
|
|
font-size: 26px;
|
|
|
color: #4bffff;
|
|
|
}
|
|
|
-
|
|
|
span {
|
|
|
display: block;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.YC02 {
|
|
|
width: 70px;
|
|
|
height: 60px;
|
|
@@ -235,57 +245,45 @@ export default {
|
|
|
margin-right: 15px;
|
|
|
margin-top: 15px;
|
|
|
text-align: center;
|
|
|
-
|
|
|
.textred {
|
|
|
color: #d9001b;
|
|
|
}
|
|
|
-
|
|
|
.texyellow {
|
|
|
color: #facd91;
|
|
|
}
|
|
|
-
|
|
|
strong {
|
|
|
display: block;
|
|
|
font-size: 26px;
|
|
|
color: #4bffff;
|
|
|
}
|
|
|
-
|
|
|
span {
|
|
|
display: block;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
.YC03 {
|
|
|
width: 70px;
|
|
|
height: 60px;
|
|
|
}
|
|
|
-
|
|
|
.Tabtab {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
-
|
|
|
::v-deep.el-table__cell {
|
|
|
padding: 2px 0 !important;
|
|
|
}
|
|
|
-
|
|
|
::v-deep.el-table .el-table__cell {
|
|
|
padding: 2px 0 !important;
|
|
|
}
|
|
|
-
|
|
|
::v-deep.el-table--scrollable-y .el-table__body-wrapper {
|
|
|
overflow-y: clip !important;
|
|
|
}
|
|
|
-
|
|
|
-.titleYC{
|
|
|
+.titleYC {
|
|
|
font-size: 14px;
|
|
|
background: #214e5d;
|
|
|
padding: 5px 0;
|
|
|
span:nth-child(1) {
|
|
|
margin: 0 70px 0 10px;
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
.titleJQ {
|
|
|
font-size: 14px;
|
|
@@ -294,9 +292,8 @@ export default {
|
|
|
span:nth-child(1) {
|
|
|
margin: 0 15px 0 10px;
|
|
|
}
|
|
|
-
|
|
|
span:nth-child(2) {
|
|
|
margin: 0 45px 0 30px;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|