123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266 |
- <template>
- <div class="draught-fan-list">
- <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="wpId" clearable placeholder="请选择" popper-class="select" @change="(wpId) => { getWt(wpId, true); }">
- <el-option v-for="item in wpArray" :key="item.id" :value="item.id" :label="item.name" />
- </el-select>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">风机:</div>
- <div class="search-input">
- <el-select v-model="wtId" clearable placeholder="请选择" popper-class="select">
- <el-option v-for="item in wtArray" :key="item.id" :value="item.id" :label="item.name" />
- </el-select>
- </div>
- </div>
- </div>
- <div class="query-actions">
- <button class="btn green" @click="search">搜索</button>
- </div>
- </div>
- <div class="df-table">
- <ComTable height="35vh" :data="tableData"></ComTable>
- </div>
- <Mlc height="300px" :list="chartData" :units="chartUnit" :showLegend="true" />
- </div>
- </template>
- <script>
- import ComTable from "@com/coms/table/table.vue";
- import Mlc from "@com/chart/line/multiple-line-chart.vue";
- export default {
- // 名称
- name: "cutAnalyse",
- // 使用组件
- components: {
- ComTable,
- Mlc
- },
- // 数据
- data () {
- return {
- isAsc: "asc",
- wpArray: [],
- wtArray: [],
- wpId: "",
- wtId: "",
- tableData: {
- column: [
- {
- name: "风机",
- field: "windturbineid",
- is_num: false,
- is_light: false,
- sortable: true
- },
- {
- name: "风速",
- field: "speed",
- is_num: false,
- is_light: false,
- sortable: true
- },
- {
- name: "实际拟合功率",
- field: "actualpower",
- is_num: false,
- is_light: false,
- sortable: true
- },
- {
- name: "最优拟合功率",
- field: "optimalpower",
- is_num: false,
- is_light: false,
- sortable: true
- }
- ],
- data: [],
- },
- chartData: [{
- title: "",
- yAxisIndex: 0,
- value: []
- }],
- chartUnit: ["功率(MW)", "(m/s)"]
- };
- },
- // 函数
- methods: {
- // 获取风场
- getWp (reGetWp) {
- let that = this;
- that.API.requestData({
- method: "GET",
- subUrl: "powercompare/windfarmAjax",
- success (res) {
- that.wpArray = res.data;
- that.wpId = res.data[0].id;
- that.getWt(that.wpId, reGetWp);
- }
- });
- },
- // 获取风机
- getWt (wpid, reGetWp) {
- let that = this;
- if (that.wpId) {
- that.API.requestData({
- method: "GET",
- baseURL: "http://10.155.32.4:9001",
- subUrl: "benchmarking/wtList",
- data: {
- wpid
- },
- success (res) {
- that.wtArray = res.data;
- that.wtId = res.data[0].id;
- if (!reGetWp) {
- that.getTabData();
- }
- }
- });
- }
- },
- getTabData () {
- let that = this;
- that.API.requestData({
- method: "POST",
- subUrl: "powersaturation/powersaturationamonutlist",
- data: {
- wtId: that.wtId
- },
- success (res) {
- that.tableData.data = res.data.list;
- that.getChartData();
- }
- });
- },
- // 获取图表数据
- getChartData () {
- let that = this;
- that.API.requestData({
- method: "POST",
- subUrl: "powersaturation/powersaturationamonutchart",
- data: {
- wtId: that.wtId
- },
- success (res) {
- const keyArray = [{
- key: "value1",
- title: "风速"
- }, {
- key: "value2",
- title: "实际拟合功率"
- }, {
- key: "value3",
- title: "最优拟合功率"
- }, {
- key: "value4",
- title: "保证功率"
- }];
- let chartData = [{
- title: "风速",
- yAxisIndex: 1,
- value: []
- }, {
- title: "实际拟合功率",
- yAxisIndex: 0,
- value: []
- }, {
- title: "最优拟合功率",
- yAxisIndex: 0,
- value: []
- }, {
- title: "保证功率",
- yAxisIndex: 0,
- value: []
- }];
- keyArray.forEach((keyEle, keyIndex) => {
- res.data.forEach(ele => {
- chartData[keyIndex].value.push({
- text: "",
- value: ele[keyEle.key]
- });
- });
- });
- that.chartData = chartData;
- }
- });
- },
- search () {
- if (!this.wpId || !this.wtId) {
- this.BASE.showMsg({
- msg: '场站与风机为必选项'
- });
- } else {
- this.getTabData();
- }
- }
- },
- created () {
- this.getWp();
- },
- mounted () { },
- unmounted () { },
- };
- </script>
- <style lang="less" scoped>
- .draught-fan-list {
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- .btn-group-tabs {
- display: flex;
- flex-direction: row;
- .photovoltaic {
- margin-left: 1.481vh;
- }
- }
- .df-table {
- border: 0.093vh solid fade(@darkgray, 50%);
- position: relative;
- overflow: auto;
- flex-grow: 1;
- margin-top: 1.481vh;
- height: 30vh;
- &:before {
- content: '';
- width: 0.37vh;
- height: 0.37vh;
- background: @write;
- position: absolute;
- left: 0.278vh;
- top: 0.278vh;
- }
- tbody {
- height: calc(100vh - 166px);
- }
- }
- }
- </style>
|