|
@@ -1,240 +1,302 @@
|
|
|
<template>
|
|
|
-
|
|
|
-
|
|
|
- <div class="backbone">
|
|
|
- <div>
|
|
|
- <h3>风场分析完成率</h3>
|
|
|
- <div id="main" style="width: 260px; height: 160px;"></div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <h3>异常设备概览</h3>
|
|
|
- <div class="BOX">
|
|
|
- <div style="display: flex;">
|
|
|
- <div class="YC01">
|
|
|
- <strong>4545</strong>
|
|
|
- <span>异常总数</span>
|
|
|
- </div>
|
|
|
- <div class="YC02">
|
|
|
- <strong>20</strong>
|
|
|
- <span>本月异常</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div style="display: flex;">
|
|
|
- <div class="YC02">
|
|
|
- <strong class="textred">0</strong>
|
|
|
- <span>未处理异常</span>
|
|
|
- </div>
|
|
|
- <div class="YC02">
|
|
|
- <strong class="texyellow">20</strong>
|
|
|
- <span>异常设备数</span>
|
|
|
- </div>
|
|
|
- <div class="YC03">
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <h3>异常数据信息</h3>
|
|
|
- <Tabroll :table-data="tableData" :shujuloading="shujuloading" :columns="tableColumns" :max-height="150"></Tabroll>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <h3>近期操作记录</h3>
|
|
|
- <Tabroll :table-data="tableData" :shujuloading="shujuloading" :columns="tableColumns" :max-height="150"></Tabroll>
|
|
|
+ <div class="backbone">
|
|
|
+ <div>
|
|
|
+ <h3>风场分析完成率</h3>
|
|
|
+ <div id="main" style="width: 260px; height: 160px"></div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3>异常设备概览</h3>
|
|
|
+ <div class="BOX">
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="YC01">
|
|
|
+ <strong>4545</strong>
|
|
|
+ <span>异常总数</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC02">
|
|
|
+ <strong>20</strong>
|
|
|
+ <span>本月异常</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
+ <div style="display: flex">
|
|
|
+ <div class="YC02">
|
|
|
+ <strong class="textred">0</strong>
|
|
|
+ <span>未处理异常</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC02">
|
|
|
+ <strong class="texyellow">20</strong>
|
|
|
+ <span>异常设备数</span>
|
|
|
+ </div>
|
|
|
+ <div class="YC03"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <h3>异常数据信息</h3>
|
|
|
+ <p class="titleYC"><span>风场名称</span><span>风机信息</span></p>
|
|
|
+ <Tabroll
|
|
|
+ :table-data="YCtableData"
|
|
|
+ :shujuloading="shujuloading"
|
|
|
+ :columns="YCtableColumns"
|
|
|
+ :column-widths="YCcolumnWidths"
|
|
|
+ :max-height="120"
|
|
|
+ ></Tabroll>
|
|
|
+ <!-- <dv-scroll-board
|
|
|
+ :config="config"
|
|
|
+ :headerBGC="'#666666'"
|
|
|
+ style="height: 150px"
|
|
|
+ /> -->
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <h3>近期操作记录</h3>
|
|
|
+ <p class="titleJQ">
|
|
|
+ <span>名字</span><span>日期</span><span>操作记录</span>
|
|
|
+ </p>
|
|
|
+ <Tabroll
|
|
|
+ :table-data="tableData"
|
|
|
+ :shujuloading="shujuloading"
|
|
|
+ :columns="tableColumns"
|
|
|
+ :max-height="120"
|
|
|
+ :column-widths="columnWidths"
|
|
|
+ ></Tabroll>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import * as echarts from 'echarts';
|
|
|
-import Tabroll from './tabroll.vue';
|
|
|
+import * as echarts from "echarts";
|
|
|
+import Tabroll from "./tabroll.vue";
|
|
|
export default {
|
|
|
- components: {
|
|
|
- Tabroll
|
|
|
+ components: {
|
|
|
+ Tabroll,
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- myChart: null,
|
|
|
- tableData: [
|
|
|
- { name: '王小虎' },
|
|
|
- { name: '王小虎' },
|
|
|
- { name: '王小虎' },
|
|
|
- { name: '王小虎' },
|
|
|
- { name: '王小虎' },
|
|
|
- { name: '王小虎' }
|
|
|
+
|
|
|
+ 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: "操作了性能分析" },
|
|
|
],
|
|
|
shujuloading: false,
|
|
|
tableColumns: [
|
|
|
- { prop: 'name', label: '姓名' },
|
|
|
- { prop: 'date', label: '日期' },
|
|
|
- { prop: 'record', label: '记录' }
|
|
|
- ]
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- this.initChart();
|
|
|
+ { prop: "name", label: "姓名" },
|
|
|
+ { prop: "date", label: "日期" },
|
|
|
+ { prop: "record", label: "记录" },
|
|
|
+ ],
|
|
|
+ YCtableColumns: [
|
|
|
+ { prop: "name", label: "姓名" },
|
|
|
+ { prop: "date", label: "日期" },
|
|
|
|
|
|
- },
|
|
|
+ ],
|
|
|
|
|
|
+ columnWidths: {
|
|
|
+ // 列宽度信息
|
|
|
+ name: 60,
|
|
|
+ date: 90,
|
|
|
+ },
|
|
|
+ YCcolumnWidths: {
|
|
|
+ name: 120,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
|
|
|
- methods: {
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- initChart() {
|
|
|
- var chartDom = document.getElementById('main');
|
|
|
- var myChart = echarts.init(chartDom);
|
|
|
- var option;
|
|
|
-
|
|
|
- option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'item',
|
|
|
- formatter: function (params) {
|
|
|
- var percent = params.percent.toFixed(2) + '%';
|
|
|
- return `${params.name}: ${params.value} (${percent})`;
|
|
|
- }
|
|
|
- },
|
|
|
- legend: {
|
|
|
- orient: 'vertical',
|
|
|
- left: 'left',
|
|
|
- top: '30%' // 将图例向下移动一些
|
|
|
- },
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '80%'],
|
|
|
- avoidLabelOverlap: false,
|
|
|
- label: {
|
|
|
- show: false,
|
|
|
- position: 'center'
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- center: ['60%', '50%'], // 将饼图往右移动一些
|
|
|
- data: [
|
|
|
- { value: 15, name: '已完成', itemStyle: { color: '#7ECF51' } },
|
|
|
- { value: 50, name: '进行中', itemStyle: { color: '#EECB5F' } },
|
|
|
- { value: 30, name: '未开始', itemStyle: { color: '#E16757' } },
|
|
|
- ]
|
|
|
- }
|
|
|
- ]
|
|
|
- };
|
|
|
-
|
|
|
- option && myChart.setOption(option);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
+ methods: {
|
|
|
+ initChart() {
|
|
|
+ var chartDom = document.getElementById("main");
|
|
|
+ var myChart = echarts.init(chartDom);
|
|
|
+ var option;
|
|
|
+
|
|
|
+ option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ formatter: function (params) {
|
|
|
+ var percent = params.percent.toFixed(2) + "%";
|
|
|
+ return `${params.name}: ${params.value} (${percent})`;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ left: "left",
|
|
|
+ top: "30%", // 将图例向下移动一些
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "80%"],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: "center",
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ center: ["60%", "50%"], // 将饼图往右移动一些
|
|
|
+ data: [
|
|
|
+ { value: 1, name: "已完成", itemStyle: { color: "#7ECF51" } },
|
|
|
+ { value: 0, name: "进行中", itemStyle: { color: "#EECB5F" } },
|
|
|
+ { value: 4, name: "未开始", itemStyle: { color: "#E16757" } },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ option && myChart.setOption(option);
|
|
|
+ },
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.backbone {
|
|
|
- width: 300px;
|
|
|
- color: #FFF;
|
|
|
- background: #008080;
|
|
|
- height: 95%;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 20px;
|
|
|
-
|
|
|
+ width: 300px;
|
|
|
+ color: #fff;
|
|
|
+ background: #008080;
|
|
|
+ height: 95%;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 20px;
|
|
|
}
|
|
|
|
|
|
.BOX {
|
|
|
- background: #004F5F;
|
|
|
- display: flex;
|
|
|
-
|
|
|
-
|
|
|
- padding-left: 10px;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding-bottom: 15px;
|
|
|
+ background: #004f5f;
|
|
|
+ display: flex;
|
|
|
|
|
|
+ padding-left: 10px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding-bottom: 15px;
|
|
|
}
|
|
|
|
|
|
.YC01 {
|
|
|
- width: 154px;
|
|
|
- height: 60px;
|
|
|
- background-image: url('../../../../assets/001.png');
|
|
|
- background-size: 154px 60px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- margin-right: 15px;
|
|
|
- margin-top: 15px;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- strong {
|
|
|
- display: block;
|
|
|
- font-size: 26px;
|
|
|
- color: #4BFFFF;
|
|
|
- }
|
|
|
-
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- font-size: 12px;
|
|
|
-
|
|
|
- }
|
|
|
+ width: 154px;
|
|
|
+ height: 60px;
|
|
|
+ background-image: url("../../../../assets/001.png");
|
|
|
+ background-size: 154px 60px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ 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;
|
|
|
- background-image: url('../../../../assets/002.png');
|
|
|
- background-size: 70px 60px;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center;
|
|
|
- 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;
|
|
|
-
|
|
|
- }
|
|
|
+ width: 70px;
|
|
|
+ height: 60px;
|
|
|
+ background-image: url("../../../../assets/002.png");
|
|
|
+ background-size: 70px 60px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ 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;
|
|
|
-
|
|
|
+ width: 70px;
|
|
|
+ height: 60px;
|
|
|
}
|
|
|
|
|
|
.Tabtab {
|
|
|
- font-size: 12px;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
|
|
|
::v-deep.el-table__cell {
|
|
|
- padding: 2px 0 !important
|
|
|
+ padding: 2px 0 !important;
|
|
|
}
|
|
|
|
|
|
::v-deep.el-table .el-table__cell {
|
|
|
- padding: 2px 0 !important
|
|
|
+ padding: 2px 0 !important;
|
|
|
}
|
|
|
|
|
|
-
|
|
|
::v-deep.el-table--scrollable-y .el-table__body-wrapper {
|
|
|
- overflow-y: clip !important
|
|
|
+ overflow-y: clip !important;
|
|
|
+}
|
|
|
+
|
|
|
+.titleYC{
|
|
|
+ font-size: 14px;
|
|
|
+ background: #214e5d;
|
|
|
+ padding: 5px 0;
|
|
|
+ span:nth-child(1) {
|
|
|
+ margin: 0 70px 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+.titleJQ {
|
|
|
+ font-size: 14px;
|
|
|
+ background: #214e5d;
|
|
|
+ padding: 5px 0;
|
|
|
+ span:nth-child(1) {
|
|
|
+ margin: 0 15px 0 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span:nth-child(2) {
|
|
|
+ margin: 0 45px 0 30px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|