|
|
@@ -0,0 +1,363 @@
|
|
|
+<template>
|
|
|
+ <div class="decision-page-3">
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">场站：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select v-model="value1" @change="ChangZhanChange(value1)" multiple placeholder="请选择"
|
|
|
+ popper-class="select">
|
|
|
+ <el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">项目：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select v-model="value2" @change="XiangMuChange(value2)" multiple placeholder="请选择"
|
|
|
+ popper-class="select">
|
|
|
+ <el-option v-for="item in XiangMu" :key="item.id" :value="item.id" :label="item.name">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">开始日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker v-model="value4" @change="BeginChange(value4)" type="date"
|
|
|
+ value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="actions mg-b-8">
|
|
|
+ <button class="btn green">风场</button>
|
|
|
+ <button class="btn">项目</button>
|
|
|
+ <button class="btn">集电线路</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div class="info">
|
|
|
+ <div class="mg-b-16">
|
|
|
+ <div class="project-table">
|
|
|
+ <Table :data="tableData"></Table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 风资源列表 -->
|
|
|
+ <div class="direction-info mg-b-16">
|
|
|
+ <table class="com-table">
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td v-for="(col, i) of tableData.column" :key="i">
|
|
|
+ <div v-if="i == 0">22</div>
|
|
|
+ <div v-if="i == 1">风资源</div>
|
|
|
+ <div v-if="i != 0 && i != 1">
|
|
|
+ <div class="direction-title">3.123</div>
|
|
|
+ <div class="direction-chart">
|
|
|
+ <DirectionRadarChart :width="'70%'" :height="'232px'" :value="90" />
|
|
|
+ <div class="legend mg-t-16">
|
|
|
+ <span class="dot"></span>
|
|
|
+ <span>静风频率为2</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <!-- 日功率曲线 -->
|
|
|
+ <div>
|
|
|
+ <toolbar-panel :title="'日功率曲线'">
|
|
|
+ <template v-slot:tools>
|
|
|
+ <div class="tools">
|
|
|
+ <div class="tool-block">
|
|
|
+ <div class="legend bg-green"></div>
|
|
|
+ <div class="legend-text">理论功率</div>
|
|
|
+ </div>
|
|
|
+ <div class="tool-block">
|
|
|
+ <div class="legend bg-orange"></div>
|
|
|
+ <div class="legend-text">预测功率4小时</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <double-line-chart :height="'200px'" />
|
|
|
+ <normal-line-chart :height="'200px'" />
|
|
|
+ </toolbar-panel>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import DoubleLineChart from "../../components/chart/line/double-line-chart.vue";
|
|
|
+ import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
|
|
|
+ import DirectionRadarChart from "../../components/chart/radar/direction-radar-chart.vue";
|
|
|
+ import SvgIcon from "../../components/coms/icon/svg-icon.vue";
|
|
|
+ import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
|
|
|
+ import Table from "../../components/coms/table/table.vue";
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Table,
|
|
|
+ SvgIcon,
|
|
|
+ DirectionRadarChart,
|
|
|
+ ToolbarPanel,
|
|
|
+ DoubleLineChart,
|
|
|
+ NormalLineChart
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: {
|
|
|
+ column: [{
|
|
|
+ name: "",
|
|
|
+ field: "index",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "项目",
|
|
|
+ field: "name",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "项目",
|
|
|
+ field: "lqf",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "项目",
|
|
|
+ field: "yggl",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "项目",
|
|
|
+ field: "yyy",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "项目",
|
|
|
+ field: "pcspp",
|
|
|
+ is_num: false,
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [{
|
|
|
+ index: 1,
|
|
|
+ name: "MG01-01",
|
|
|
+ lqf: "0.1000",
|
|
|
+ yggl: "0.1000",
|
|
|
+ yyy: "0.10",
|
|
|
+ pcspp: "0.1000",
|
|
|
+ u1: "0.1000",
|
|
|
+ u2: "0.1000",
|
|
|
+ v1: "0.1000",
|
|
|
+ v2: "0.1000",
|
|
|
+ w1: "0.1000",
|
|
|
+ w2: "0.1000",
|
|
|
+ zca: "0.1000",
|
|
|
+ zcb: "0.1000",
|
|
|
+ clx: "0.1000",
|
|
|
+ clx1: "0.1000",
|
|
|
+ clx2: "0.1000",
|
|
|
+ jc: "0.1000",
|
|
|
+ hh: "0.1000",
|
|
|
+ hj: "0.1000",
|
|
|
+ is_light: false,
|
|
|
+ }, ],
|
|
|
+ },
|
|
|
+ options: [{
|
|
|
+ value: "选项1",
|
|
|
+ label: "黄金糕",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项2",
|
|
|
+ label: "双皮奶",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项3",
|
|
|
+ label: "蚵仔煎",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项4",
|
|
|
+ label: "龙须面",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "选项5",
|
|
|
+ label: "北京烤鸭",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ value1: [],
|
|
|
+ value2: [],
|
|
|
+ value3: [],
|
|
|
+ value4: "",
|
|
|
+ value5: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ ChangZhanVal() {
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL : "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/wplist",
|
|
|
+ success(res) {
|
|
|
+ that.ChangZhan = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ ChangZhanChange(val) {
|
|
|
+ this.value1 = val;
|
|
|
+ this.value2 = [];
|
|
|
+ this.value3 = [];
|
|
|
+ this.AjaxCommon();
|
|
|
+ this.XiangMuVal(val);
|
|
|
+ this.clearDb();
|
|
|
+ },
|
|
|
+ XiangMuVal(val) {
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL : "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/projectList",
|
|
|
+ data: {
|
|
|
+ wpids: val
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ that.XiangMu = res.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ XiangMuChange(val) {
|
|
|
+ this.value2 = val;
|
|
|
+ this.value3 = [];
|
|
|
+ this.AjaxCommon();
|
|
|
+ this.XianLuVal(val);
|
|
|
+ this.clearDb();
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .decision-page-3 {
|
|
|
+ .com-panel {
|
|
|
+ .panel-title {
|
|
|
+ color: @gray-l;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tools {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .tool-block {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 0.741vh;
|
|
|
+
|
|
|
+ .legend {
|
|
|
+ flex: auto;
|
|
|
+ width: 0.741vh;
|
|
|
+ height: 0.741vh;
|
|
|
+ margin-right: 0.741vh;
|
|
|
+
|
|
|
+ &.long {
|
|
|
+ width: 2.963vh;
|
|
|
+ height: 0.37vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend-text {
|
|
|
+ color: @gray-l;
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ overflow: auto;
|
|
|
+ height: calc(100vh - 150px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .project-table {
|
|
|
+ overflow: auto;
|
|
|
+
|
|
|
+ .com-table {
|
|
|
+ tbody {
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ color: #b2bdc0;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 32px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 183px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .direction-info {
|
|
|
+ .com-table {
|
|
|
+ tbody {
|
|
|
+ padding-right: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ color: #b2bdc0;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ width: 32px;
|
|
|
+ background-color: fade(#536268, 20);
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(2) {
|
|
|
+ width: 183px;
|
|
|
+ background-color: fade(#536268, 40);
|
|
|
+ }
|
|
|
+
|
|
|
+ .direction-title {
|
|
|
+ background-color: fade(#536268, 20);
|
|
|
+ font-size: @fontsize-s;
|
|
|
+ line-height: 2.963vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .direction-chart {
|
|
|
+ padding-top: 48px;
|
|
|
+
|
|
|
+ .legend {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 32px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+
|
|
|
+ .dot {
|
|
|
+ width: 7px;
|
|
|
+ height: 7px;
|
|
|
+ background: @green;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
mw_666