123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134 |
- <template>
- <div>
- <div class="action-bar">
- <div class="query mg-b-16">
- <div class="query-items">
- <div class="query-item">
- <div class="lable">风场:</div>
- <div class="search-input">
- <el-select v-model="wpvalue" clearable placeholder="请选择" popper-class="select">
- <el-option v-for="item in ChangZhan" :key="item.id" :label="item.name" :value="item.id">
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">日期:</div>
- <div class="search-input">
- <el-date-picker v-model="myDate" type="date" placeholder="开始日期" popper-class="date-select"
- value-format="YYYY-MM-DD"></el-date-picker>
- </div>
- </div>
- </div>
- <div class="query-actions">
- <button class="btn green" @click="searchData">搜索</button>
- </div>
- </div>
- </div>
- <el-row>
- <el-col :span="14">
- <panel :title="'日雷达图'" class="radar-panel" :icon="'svg-wind-site'">
- <div class="wind-info">
- <radar-chart :width="'100%'" :height="'729px'" :value="rzdfsData" />
- </div>
- </panel>
- </el-col>
- <el-col :span="10">
- <el-row>
- <el-col :span="24">
- <panel :title="'月雷达图'" class="radar-panel" :icon="'svg-wind-site'">
- <div class="wind-info">
- <radar-chart :width="'100%'" :height="'350px'" :value="yzdfsData" />
- </div>
- </panel>
- </el-col>
- </el-row>
- <el-row>
- <el-col :span="24">
- <panel :title="'年雷达图'" class="radar-panel" :icon="'svg-wind-site'">
- <div class="wind-info">
- <radar-chart :width="'100%'" :height="'350px'" :value="nzdfsData" />
- </div>
- </panel>
- </el-col>
- </el-row>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import panel from "@/components/coms/panel/panel.vue";
- import RadarChart from "@/components/chart/radar/radar-chart.vue";
- export default {
- components: {
- panel,
- RadarChart
- },
- data() {
- return {
- rzdfsData: {
- indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
- data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
- },
- yzdfsData: {
- indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
- data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
- },
- nzdfsData: {
- indicator: ["N0", "N1", "N2", "N3", "N4", "N5"],
- data: [{value: [44200, 14200, 20000, 35000, 50000, 38000],name: "",}, ],
- },
- ChangZhan: [],
- wpvalue: '',
- myDate: ""
- }
- },
- created() {
- var that = this;
- that.API.requestData({
- method: "GET",
- baseURL: "http://10.155.32.4:9001/",
- subUrl: "benchmarking/wplist",
- success(res) {
- that.ChangZhan = res.data;
- that.wpvalue = res.data[0].id;
- let end = new Date();
- that.myDate = end.formatDate("yyyy-MM-dd");
- that.searchData();
- },
- });
- },
- methods: {
- searchData(){
- var that = this;
- that.API.requestData({
- method: "GET",
- subUrl: "radar/yjfx",
- data:{
- stationid:that.wpvalue,
- date:that.myDate
- },
- success(res) {
- that.rzdfsData = {
- indicator:Object.keys(res.data[0].year),
- data:[{value:Object.values(res.data[0].year)}]
- }
- that.yzdfsData = {
- indicator:Object.keys(res.data[1].month),
- data:[{value:Object.values(res.data[1].month)}]
- }
- that.nzdfsData = {
- indicator:Object.keys(res.data[2].day),
- data:[{value:Object.values(res.data[2].day)}]
- }
- },
- });
- }
- },
- };
- </script>
- <style>
- </style>
|