ipfcst-mts/ipfcst/ipfcst-reportquery/src/main/frontend/views/parameterConfiguration/WindTurbinePowerCurve/index.vue

<template>
  <div class="chart-container">
    <div class="filter" >
      <div style="margin-left:-10px;">
<!--        <el-button size="small" type="primary"  @click="insertEvent"> 新增</el-button>-->
        <el-upload
          ref="upload"
          name="file"
          :http-request="this.readWindTurbinePowerCurve"
          class="link-block"
          action=""
          :show-file-list = false
        >
          <el-button size="small" type="primary" >导入</el-button>
        </el-upload>
        <el-button size="small" type="primary" @click="exportToExcel">导出</el-button>
      </div>
      <div class="toolbar" v-show="this.showToolBar">
        <div class="toolMenu">
          <el-row>
            <el-col :span="6">
              风速
              <el-input type="text"
                        v-model="speed"
                        placeholder="请输入风速值"
                        prefix-icon="el-icon-search"
                        clearable
                        style="max-width: 180px;"
                        size="small"
              ></el-input>
            </el-col>
            <el-col :span="6">
              功率
              <el-input type="text"
                        v-model="power"
                        placeholder="请输入功率值"
                        prefix-icon="el-icon-search"
                        clearable
                        style="max-width: 180px;"
                        size="small"
              ></el-input>
            </el-col>
            <el-col :span="6">
              机组
              <el-input type="text"
                        v-model="fanId"
                        placeholder="请输入机组id"
                        prefix-icon="el-icon-search"
                        clearable
                        style="max-width: 200px;"
                        size="small"
              ></el-input>
            </el-col>

            <el-col :span="6">
              <el-button type="primary" size="small" :loading="loading" @click="findBySomeConditions">查询</el-button>
              <el-button type="primary" size="small" :loading="loading" @click="clearInput">清空</el-button>

            </el-col>
          </el-row>
        </div>

<!--        <vxe-toolbar ref="fstToolBar" custom >-->
<!--          <template v-slot:buttons>-->
<!--            <vxe-button class="downloadButton" style="border:none;"  @click="exportDataEvent"><i class="vxe-icon&#45;&#45;download" ></i></vxe-button>-->
<!--          </template>-->
<!--        </vxe-toolbar>-->
      </div>
<!--      <div class="toolbar" v-show="this.showToolBar"> <vxe-toolbar ref="nwpToolBar" custom></vxe-toolbar></div>-->
    </div>

    <div class="content">
      <el-tabs type="card" v-model="activeName" @tab-click="Byresize">
        <el-tab-pane label="图表" name="first">
          <chart :drawData = this.drawData :resizeKey=this.resizeKey  />
        </el-tab-pane>
        <el-tab-pane label="表格" name="second">
          <div class="tableContent">
            <vxe-grid
              id="nwpTable"
              ref="windRef"
              border
              export-config
              :loading="loading"
              resizable
              keep-source
              :auto-resize="true"
              :header-cell-style="styleStr"
              max-height="90%"
              :cell-style="styleTableStr"
              align="center"
              :data="tableData"
              :columns="tableColumn"
              :edit-config="{trigger: 'manual', mode: 'row', showStatus: true, }"
            >
              <template v-slot:operate="{ row }">
                <template v-if="$refs.windRef.isActiveByRow(row)">
                  <vxe-button  content="保存" circle @click="saveRowEvent(row)"></vxe-button>
                </template>
                <template v-else>
                  <vxe-button content="编辑" circle @click="editRowEvent(row)"></vxe-button>
                </template>
<!--                <vxe-button content="删除" circle @click="removeRowEvent(row)"></vxe-button>-->
              </template>
            </vxe-grid>
            <div class="rtPageturning">
              <vxe-pager
                background
                :loading="loading"
                :current-page.sync="currentPage"
                :page-size.sync="pageSize"
                :page-sizes="pageSizes"
                :total="total"
                @page-change="handlePageChange"
                :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager>

            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog
      title="风机曲线"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="风速(m/s)" prop="speed">
          <el-input v-model="form.speed" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="功率(Kw)" prop="power">
          <el-input v-model="form.power" style="width: 70%"></el-input>
        </el-form-item>
        <el-form-item label="所属机组" prop="fanId">
          <el-select v-model="form.fanId" style="width: 70%">
            <el-option   v-for="item in fanIdData"
                         :key="item.value"
                         :label="item.fanIdStr"
                         :value="item.fanId"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" style="color: #000000; border: 1px solid #000000">取 消</el-button>
          <el-button type="primary" @click="saveRowEvent1"
                     style="color: #000000; border: 1px solid #000000">确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
  import Chart from './charts'
  import resize from '../../../components/Charts/mixins/resize'
  export default {

    components: { Chart},
    mixins: [resize],
    data(){
      return {
        fanIdStr: '',
        value: '',
        fanIdData: [],
        styleStr: {},
        styleTableStr: {},
        tableToolbar: {
          export: true,
          custom: true
        },
        tableColumn: [],
        chart: null,
        loading: true,
        drawLoading: true,
        tableLoading: true,
        resizeKey: 1,
        activeName: 'first',
        drawData: {},
        tableData: [],
        total: 0,
        pageSize: 10,
        pageSizes: [10, 50, 100, {label: '大量数据', value: 1000},],
        currentPage: 1,
        showToolBar: false,
        dialogVisible: false,
        form: {},
        rules: {
          fanId: [
            {required: true, message: '此处为必填项'},
            {pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: "填写数字", trigger: 'blur'},
          ],
          speed: [
            {required: true, message: '此处为必填项'},
            {pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: "填写数字", trigger: 'blur'}
          ],
          power: [
            {required: true, message: '此处为必填项'},
            {pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/, message: "填写数字", trigger: 'blur'}
          ],
        },
        speed: '',
        power: '',
        fanId: '',
      }

    },
    created () {
      if(sessionStorage.getItem('styleSwitch') === 'blue'){
        this.styleStr = {background:'black',color:'white',border:'white'}
        this.styleTableStr = {background:'black',color:'white'}
      }
      this.$nextTick(() => {
        // 手动将表格和工具栏进行关联
        this.$refs.nwpRef.connect(this.$refs.nwpToolBar)
      })
    },
    mounted() {
      this.init()
      this.$axios.get("/windTurbinePowerCurve/getFanId").then(res =>{
        this.fanIdData = res.data
      })
    },
    methods:{
      exportDataEvent() {
        this.loading = true
        this.$axios.get('export/powerStationStatus/'+this.startTime+'/'+this.endTime, {
          responseType: 'blob'// 用于解决中文乱码
        }).then((response) => {
          this.loading = false
        }).catch((error) => {
          this.loading = false
          this.$message.error('导出失败' + error)
        })
      },
      init(){
        this.loading = true
        this.getDraw()
        this.getTable()

      },
      getDraw(){
        this.drawLoading = true
        this.$axios.get('/windTurbinePowerCurve/new/').then((res) => {

          this.drawData = res.data
          this.drawLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
        }).catch((error) => {
          this.drawLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
          this.$message.error('查询出错' + error)
        })
      },
      getTable(){
        this.findBySomeConditions()
        // this.tableLoading = true
        // this.$axios.get('/windTurbinePowerCurve/'+this.currentPage+'/'+this.pageSize).then((res) => {
        //   this.tableData = res.data.content
        //   // 表分页格数据总条数
        //   this.total = res.data.count
        //   this.tableColumn = []
        //   this.tableColumn = [
        //     { field: 'id', title: 'id',minWidth:"150",width:"180"},
        //     { field: 'speed', title: '风速',minWidth:"60",editRender: { name: 'input' }},
        //     { field: 'power', title: '功率',minWidth:"60",editRender: { name: 'input' }},
        //     { field: 'fanId', title: '机组',minWidth:"60",editRender: { name: 'input' }},
        //     { title: '操作', width: 200, slots: { default: 'operate' } }
        //   ]
        //
        //   this.tableLoading = false
        //   if(!this.drawLoading && !this.tableLoading){
        //     this.loading = false
        //   }
        // }).catch((error) => {
        //   this.tableLoading = false
        //   if(!this.drawLoading && !this.tableLoading){
        //     this.loading = false
        //   }
        //   this.$message.error('查询table出错' + error)
        // })

      },
      handlePageChange ({ currentPage, pageSize }) {
        this.currentPage = currentPage
        this.pageSize = pageSize
        this.loading = true
        this.getTable();
      },
      readWindTurbinePowerCurve(obj) {
        this.$XModal.confirm('是否从Excel读取数据?').then(type => {
          if (type === 'confirm') {
            const formData = new FormData()
            formData.append("multipartFile",obj.file)
            this.loading = true
            this.$axios.post("/readToMysql/readWindTurbinePowerCurveMap",formData).then(res=>{
              this.$message.success(
                res.message
              )
              this.loading = false
              this.init()
            })
          }
        })
      },
      Byresize(tab){
        if(tab.name =='first'){
          this.resizeKey++
          this.showToolBar = false
        }else{
          this.showToolBar = true
        }

      },

      editRowEvent (row) {
        this.$refs.windRef.setActiveRow(row)
      },
      saveRowEvent (row) {
        this.$refs.windRef.clearActived().then(() => {
          this.loading = true
          this.$axios.put('/windTurbinePowerCurve/',row).then((res) => {
            this.$message.success(
              res.message
            )
            this.loading = false
          }).catch((error) => {
            this.$message.error('修改失败' + error)
            this.loading = false
          })
        })
      },
      removeRowEvent (row) {
        this.$XModal.confirm('您确定要删除该数据?').then(type => {
          if (type === 'confirm') {
            this.$axios.delete('/windTurbinePowerCurve/',{data:row}).then((res) => {
              this.$message.success(
                res.message
              )
              this.loading = false
              this.getTable()
              this.init()
            }).catch((error) => {
              this.$message.error('删除' + error)
              this.loading = false
            })
          }
        })
      },
      insertEvent() {
        this.form = {};
        this.dialogVisible = true;
      },
      saveRowEvent1() {
        this.$axios.post('/windTurbinePowerCurve', this.form).then(res => {
          this.$message.success(res.message)
          this.findBySomeConditions()
        }).catch(e => {
          this.$message.error(e)
        })
        this.dialogVisible = false;
        this.findBySomeConditions()

      },
      exportToExcel(){
        this.dialogVisible = true;
        this.$axios.get('/exportToExcel/windTurbinePowerCurveExport').then(res => {
          this.$XModal.message({status: 'success', message: res.message})
        })
        this.dialogVisible = false;
      },
      findBySomeConditions() {
        if (this.speed == '') {
          this.speed = null
        }
        if (this.power == '') {
          this.power = null
        }
        if (this.fanId == '') {
          this.fanId = null
        }

        // this.$axios.get("/windTurbinePowerCurve/bySomeConditions/" + this.currentPage + "/" + this.pageSize + "/" + this.speed + '/' + this.power + '/' + this.fanId).then(res => {
        //   this.tableData = res.data.content
        //   this.total = res.data.totalElements
        // })


        this.$axios.get("/windTurbinePowerCurve/bySomeConditions/" + this.currentPage + "/" + this.pageSize + "/" + this.speed + '/' + this.power + '/' + this.fanId).then(res => {
          this.tableData = res.data.content
          // 表分页格数据总条数
          this.total = res.data.totalElements
          this.tableColumn = []
          this.tableColumn = [
            { field: 'id', title: 'id',minWidth:"150",width:"180"},
            { field: 'speed', title: '风速',minWidth:"60",editRender: { name: 'input' }},
            { field: 'power', title: '功率',minWidth:"60",editRender: { name: 'input' }},
            { field: 'fanId', title: '机组',minWidth:"60",editRender: { name: 'input' }},
            { title: '操作', width: 200, slots: { default: 'operate' } }
          ]

          this.tableLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
        }).catch((error) => {
          this.tableLoading = false
          if(!this.drawLoading && !this.tableLoading){
            this.loading = false
          }
          this.$message.error('查询table出错' + error)
        })


      },
      clearInput(){
        this.speed = ''
        this.power = ''
        this.fanId = ''
      }
    }
  }
</script>

<style scoped>
.link-block{
  display: inline-block;
}
</style>