|
@@ -0,0 +1,286 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6"> </el-col>
|
|
|
+ <el-col :span="18">
|
|
|
+ <div class="operation">
|
|
|
+ <div class="title">操作面板</div>
|
|
|
+ <div class="condition">
|
|
|
+ <div class="query">
|
|
|
+ <div class="lable">使用模板:</div>
|
|
|
+ <div class="search">
|
|
|
+ <el-select
|
|
|
+ v-model="model"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ style="width: 120px;"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in modelList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query1">
|
|
|
+ <div class="lable">最大风速:</div>
|
|
|
+ <el-input size="middle" v-model="wind" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="query1">
|
|
|
+ <div class="lable">最小风速:</div>
|
|
|
+ <el-input size="middle" v-model="wind" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="query1">
|
|
|
+ <div class="lable">最大功率:</div>
|
|
|
+ <el-input size="middle" v-model="wind" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="query1">
|
|
|
+ <div class="lable">最小功率:</div>
|
|
|
+ <el-input size="middle" v-model="wind" clearable></el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="condition">
|
|
|
+ <el-checkbox-group v-model="checkList">
|
|
|
+ <el-checkbox label="非并网"></el-checkbox>
|
|
|
+ <el-checkbox label="非合理值"></el-checkbox>
|
|
|
+ <el-checkbox label="并网后十分钟"></el-checkbox>
|
|
|
+ <el-checkbox label="停机前十分钟"></el-checkbox>
|
|
|
+ <el-checkbox label="功率曲线偏差"></el-checkbox>
|
|
|
+ <el-checkbox label="欠符合等级"></el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ <div class="level">
|
|
|
+ <el-select
|
|
|
+ v-model="level"
|
|
|
+ clearable
|
|
|
+ placeholder="请选择"
|
|
|
+ popper-class="select"
|
|
|
+ style="width: 80px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in levelList"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="chart" id="linechart3"></div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import util from "@/helper/util.js";
|
|
|
+import partten from "@/helper/partten.js";
|
|
|
+import * as echarts from "echarts";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ wind: "",
|
|
|
+ model: "进阶模板",
|
|
|
+ modelList: [
|
|
|
+ {
|
|
|
+ label: "进阶模板",
|
|
|
+ value: "0",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ checkList: [
|
|
|
+ "非并网",
|
|
|
+ "非合理值",
|
|
|
+ "并网后十分钟",
|
|
|
+ "停机前十分钟",
|
|
|
+ "功率曲线偏差",
|
|
|
+ "欠符合等级",
|
|
|
+ ],
|
|
|
+ level: "1级",
|
|
|
+ levelList: [
|
|
|
+ {
|
|
|
+ label: "1级",
|
|
|
+ value: "1",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "2级",
|
|
|
+ value: "2",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ wtId: "MG01_01",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.getChart3();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getChart3() {
|
|
|
+ console.log(111111111);
|
|
|
+ const res = await this.API.requestData({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "yaw/getTotalRanges",
|
|
|
+ data: {
|
|
|
+ wtId: this.wtId,
|
|
|
+ beginDate: new Date(new Date().getTime() - 86400000).formatDate("yyyy-MM-dd"),
|
|
|
+ endDate: new Date().formatDate("yyyy-MM-dd"),
|
|
|
+ type: 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ if (res && res.data && res.data.data) {
|
|
|
+ const xData = [];
|
|
|
+ const lData = [];
|
|
|
+ const dataMap = res.data.data;
|
|
|
+ for (let key in dataMap) {
|
|
|
+ let tmpKey = key.replace(/r/, "");
|
|
|
+ tmpKey = tmpKey.replace(/_/, "-");
|
|
|
+ if (tmpKey < 100) {
|
|
|
+ xData.push(tmpKey);
|
|
|
+ lData.push(dataMap[key]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.line3Data = lData;
|
|
|
+ let option = {
|
|
|
+ color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"],
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ backgroundColor: "rgba(0,0,0,0.4)",
|
|
|
+ borderColor: partten.getColor("gray"),
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: util.vh(16),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: false,
|
|
|
+ data: ["偏航次数"],
|
|
|
+ right: 56,
|
|
|
+ icon: "circle",
|
|
|
+ itemWidth: 6,
|
|
|
+ inactiveColor: "#606769",
|
|
|
+ textStyle: {
|
|
|
+ color: partten.getColor("grayl"),
|
|
|
+ fontSize: 12,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: util.vh(40),
|
|
|
+ left: util.vh(60),
|
|
|
+ right: util.vh(130),
|
|
|
+ bottom: util.vh(24),
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ name: "对风偏差(度)",
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: util.vh(14),
|
|
|
+ textStyle: {
|
|
|
+ color: partten.getColor("gray"),
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: xData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ name: "数量",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ fontSize: util.vh(14),
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: partten.getColor("gray") + 55,
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "数量",
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ zlevel: 0,
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: "#05bb4c",
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxisIndex: 0,
|
|
|
+ data: lData,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ const chart = echarts.init(document.getElementById("linechart3"));
|
|
|
+ chart.clear();
|
|
|
+ chart.setOption(option);
|
|
|
+ this.resize = function () {
|
|
|
+ chart.resize();
|
|
|
+ };
|
|
|
+ window.addEventListener("resize", this.resize);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.operation {
|
|
|
+ width: 95%;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 100px;
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: -30px;
|
|
|
+ background-image: url("../../../assets/background.png");
|
|
|
+ }
|
|
|
+ .condition {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ .query {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .query1 {
|
|
|
+ width: 130px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 20px;
|
|
|
+
|
|
|
+ .lable {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .level {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.chart {
|
|
|
+ width: 100%;
|
|
|
+ height: 220px;
|
|
|
+ display: block;
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
+</style>
|