新增曲线查询页面

vpp-ui/src/views/vpp/echartsQuery/index.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <div class="topBanner">
+      <div class="topLogoErJi">
+      </div>
+      <div style="position: absolute;right: 19%;top: 8px">
+        <img alt="" onclick="window.open('/#/rqdd','_self')" src="../ssddjk/img/返回首页.png">
+      </div>
+
+      <div id="iframe0" class="pos_2" style="">
+        <el-row :gutter="20" style="top: 6%">
+          <el-form>
+            <el-col :span="12" style="width: 40%; float: left;">
+              <el-form-item
+                label="节点名称:"
+                label-width="120px"
+                style="font-weight: 700"
+              >
+                <el-select v-model="table.name" clearable placeholder="请选择" size="mini">
+                  <el-option
+                    v-for="item in options0"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                    @click.native="handleSelectTeam()">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col>
+              <el-form-item
+                label="日期:"
+                label-width="200px"
+                style="font-weight: 700"
+              >
+                <el-date-picker
+                  v-model="table.time"
+                  placeholder="选择日期"
+                  style="width: 180px"
+                  type="date"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  @change="handleSelectTeam()">
+                </el-date-picker>
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </el-row>
+        <div class="table-wrapper">
+          <el-table
+            :cell-style="{border:0,color:'#fff'}"
+            :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
+            :header-cell-style="{color:'#fff'}"
+            :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
+            size="mini"
+            style="width: 1429px;font-size: 17px;background: none;"
+          >
+            <el-table-column
+              align="center"
+              label="节点名称"
+              prop="name"
+              width="230px"
+            >
+            </el-table-column>
+            <el-table-column
+              align="center"
+              label="虚拟电厂计划值"
+              prop="plan">
+            </el-table-column>
+            <el-table-column
+              :formatter="timeFormatter"
+              align="center"
+              label="计划时刻"
+              prop="time">
+            </el-table-column>
+          </el-table>
+          <div class="tabListPage" style="padding-top: 2%">
+            <el-pagination
+              :page-size="pagesize"
+              :page-sizes="[10, 15, 30,50]"
+              :total="total"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange">
+            </el-pagination>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="iframe1" class="pos_3" style="">
+      <Echart
+        :options="options"
+        class="echarts_top"
+        style="height: 90%"
+      ></Echart>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import {listDayAheadPlanData} from "@/api/vpp/ahead";
+import {listRealTimePlanDataEcharts} from "@/api/vpp/time";
+
+export default {
+  name: 'fdjh-name',
+
+  data() {
+    return {
+      table: {
+        time: '',
+        name: '',
+        type: '',
+        plan: '',
+        control: '',
+        outputState: '',
+        outputTime: '',
+      },
+      options: [],
+      options0: [],
+      options1: [],
+      tableData: [],
+      currentPage: 1,
+      pagesize: 10,
+      total: 0,
+    }
+
+  },
+  methods: {
+    handleSelectTeam() {
+      this.listDayAheadPlanData()
+      this.listRealTimePredictDataEcharts()
+    },
+    listDayAheadPlanData() {
+      listDayAheadPlanData(this.table).then(res => {
+        this.tableData = res.rows
+        this.total = this.tableData.length
+        for (let i = 0; i < res.rows.length; i++) {
+          const a = {
+            "value": res.rows[i].name,
+            "label": res.rows[i].name
+          }
+          this.options0.push(a)
+        }
+        this.options0 = this.deweight(this.options0, "label")
+      });
+    },
+    listRealTimePredictDataEcharts() {
+      listRealTimePlanDataEcharts(this.table).then(resp => {
+        this.init({
+          "timePoints": resp.times,
+          "jhData": resp.plan,
+        });
+      });
+    },
+    init(newData) {
+      this.options = {
+        title: {
+          subtext: "MW",
+          left: '5%',
+          top: '5px',
+          // left: 15,// 距离左边位置
+          // top: -10,// 距离上面位置
+          subtextStyle: { // 设置二级标题的样式
+            color: "#efefef"
+          }
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#efefef",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#efefef",
+          },
+          itemStyle: {
+            // 去掉图例上的圆圈
+            opacity: 0
+          },
+          top: "20",
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '2%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          data: newData.timePoints,
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        yAxis: {
+          scale: true,//yAxis 刻度 自适应 最大值/最小值
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#efefef",
+              type: 'dashed'
+            }
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#efefef",
+            },
+          },
+          // // y轴横线
+          // axisTick: {
+          //   show: true
+          // }
+        },
+        series: [
+          {
+            name: "计划值",
+            type: "line",
+            smooth: true,
+            // showAllSymbol: true,
+            // symbol: "emptyCircle",
+            symbolSize: 0,
+            itemStyle: {
+              color: "#f0e62f",
+            },
+            data: newData.jhData
+          }
+        ],
+      };
+    },
+    deweight(arr, key) {
+      let res = []
+      arr.forEach((item) => {
+        let list = []
+        res.forEach((resitem) => {
+          list.push(resitem[key])
+        })
+        if (list.indexOf(item[key]) === -1) {
+          res.push(item)
+        }
+      })
+      return res
+    },
+    handleSizeChange(val) {
+      this.pagesize = val;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+    },
+    timeFormatter(row, column) {
+      return this.formatDate(row.time)
+    },
+    outputtimeFormatter(row, column) {
+      return this.formatDate(row.outputTime)
+    },
+    formatDate(date1) {
+      let date = new Date(date1);
+      const year = date.getFullYear();
+      const month = ('0' + (date.getMonth() + 1)).slice(-2);
+      const day = ('0' + date.getDate()).slice(-2);
+      const hours = ('0' + date.getHours()).slice(-2);
+      const minutes = ('0' + date.getMinutes()).slice(-2);
+      const seconds = ('0' + date.getSeconds()).slice(-2);
+      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+    }
+
+  },
+  mounted() {
+    this.listDayAheadPlanData();
+    this.listRealTimePredictDataEcharts();
+  }
+}
+</script>
+
+<style lang="css" scoped>
+
+
+iframe {
+  border: 0;
+}
+
+#iframe0 {
+  background: url(../fdjh/img/img.png) no-repeat;
+}
+
+#iframe1 {
+  background: url(../fdjh/img/img.png) no-repeat;
+}
+
+
+.pos_2 {
+  position: absolute;
+  width: 42%;
+  height: 92%;
+  left: 1%;
+  top: 7%;
+}
+
+.pos_3 {
+  position: absolute;
+  width: 57%;
+  height: 92%;
+  left: 43%;
+  right: 33px;
+  top: 7%;
+
+  .echarts_top {
+    top: 3%;
+  }
+}
+
+
+body {
+  border: 0;
+  background-image: url(../Articles/img/bgc.png)
+}
+
+.el-table__row > td {
+  border: none;
+}
+
+/deep/ .el-form-item__label {
+  color: #fff;
+  font-size: 17px;
+}
+
+/deep/ .el-table__header tr {
+  background: url(../Articles/img/bg1.png);
+}
+
+/*
+/deep/ .el-table th.el-table__cell {
+  background: url(../Articles/img/bg1.png) 100% no-repeat !important;
+}*/
+
+/deep/ .el-table, .el-table__expanded-cell {
+  background-color: rgb(1, 40, 81);
+}
+
+/deep/ .el-input__inner {
+  background-color: rgba(14, 73, 131);
+  border: 1px solid rgb(64, 153, 255);
+  height: 34px;
+  font-size: 17px;
+}
+
+
+/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
+  background-color: rgb(103, 118, 49) !important
+}
+
+/deep/ .el-col {
+  padding: 0;
+  display: inline-block;
+  position: relative;
+}
+
+/deep/ .el-col:nth-child(1) {
+  width: 19%;
+}
+
+/deep/ .el-col:nth-child(2) {
+  width: 22%;
+}
+
+/deep/ .el-col:nth-child(3) {
+  width: 19%;
+}
+
+/deep/ .el-col:nth-child(4) {
+  width: 19%;
+}
+
+/deep/ .el-col:nth-child(5) {
+  width: 11%;
+}
+
+
+/deep/ .el-input__inner {
+  width: 100%;
+}
+
+
+/deep/ .el-icon-arrow-up {
+  transform: rotateZ(0deg);
+
+}
+
+
+/deep/ .el-icon-arrow-up:before {
+  content: url(../Articles/img/xiala2.png);
+}
+
+/deep/ .el-input__prefix {
+  left: 75%;
+  padding-top: 3px;
+  width: 10%;
+}
+
+/deep/ .el-icon-date:before {
+  content: url(../Articles/img/riqi.png);
+}
+
+
+/deep/ .el-table th.el-table__cell {
+  background: none;
+  border: 0;
+}
+
+/deep/ .el-table__body {
+  -webkit-border-vertical-spacing: 13px;
+}
+
+/deep/ .el-form-item__content {
+  text-align: left;
+}
+
+.table-wrapper {
+  width: 97%;
+  padding-left: 3%;
+  padding-top: 5%;
+
+
+}
+</style>