performance-test/src/views/ledger/draught.vue

<template>
  <div class="global-variable">
    <div class="condition">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="风机名称:">
          <el-input v-model="formInline.engineName" placeholder="请输入风机名称" size="small"></el-input>
        </el-form-item>
        <el-form-item label="选择日期:" size="small">
          <el-date-picker v-model="formInline.timeQuantum" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="onDateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
          <el-button @click="reset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="list-page">
      <div class="newly">
        <el-button @click="upfile" size="small">导入</el-button>
        <el-button type="primary" @click="newnuedialog" size="small">新增</el-button>
      </div>

      <el-table class="center-align-table" :data="tableData" border :cell-style="rowStyle">
        <el-table-column align="center" fixed prop="engineCode" label="系统编号">
          <template slot-scope="scope">
            <el-button @click="particulars(scope.row)" type="text" size="small">{{ scope.row.engineCode }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="engineName" align="center" label="风机名称">
        </el-table-column>

        <el-table-column prop="fieldName" align="center" label="关联风场">
        </el-table-column>
        <el-table-column prop="longitude" align="center" label="经度" width="100">
        </el-table-column>
        <el-table-column prop="latitude" align="center" label="纬度" width="100">
        </el-table-column>

        <el-table-column prop="elevationHeight" align="center" label="海拔高度/米" width="100">
        </el-table-column>
        <el-table-column prop="sightcing" align="center" label="是否标杆" width="100">
          <template slot-scope="{ row }">
            {{ row.sightcing == 1 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column prop="state" align="center" label="状态" width="100">
          <template slot-scope="{ row }">
            {{ row.state == 1 ? '启用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" align="center" label="创建时间">
        </el-table-column>

        <el-table-column prop="transition" align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="compile(scope.row)" type="text" size="small">编辑</el-button>

            <el-button v-if="scope.row.state == 0" @click="start(scope.row, 1)" type="text" size="small">启用</el-button>
            <el-button v-else style="color: #666" @click="start(scope.row, 0)" type="text" size="small">停用</el-button>
            <el-button style="color: #f00" @click="deleted(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="formInline.pageNum"
          layout="total, prev, pager, next" :page-size="formInline.pageSize" :total="formInline.totalSize">
        </el-pagination>
      </div>
    </div>

    <!-- 弹出层 -->
    <!-- 导入 -->
    <el-dialog title="导入文件" :visible.sync="tolead" width="400px">
      <el-alert title="请点击模板下载文件附件" type="success" :closable="false">
      </el-alert>
      <p class="model-center" @click="download">模板下载</p>
      <div class="UPcondition">
        <p>所属风场:</p>
        <el-select v-model="subordinate" placeholder="请选择" value-key="fieldCode">
          <el-option v-for="item in subordinatedata" :key="item.fieldCode" :label="item.fieldName"
            :value="item.fieldCode">
          </el-option>
        </el-select>
      </div>

      <el-upload class="upload-demo" :file-list="fileList" drag action :multiple="false" :before-upload="beforeUpload"
        :limit="1" :auto-upload="false" :on-change="handleOnChange" accept=".xlsx">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传xlsx文件，且不超过5MB
        </div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="tolead = false" size="small">取 消</el-button>
        <el-button type="primary" @click="UPsubmit" size="small">提交</el-button>
      </span>
    </el-dialog>
    <!-- 新增 -->
    <el-dialog :title="title" :visible.sync="nuedialog" width="1000px">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="form-row">
          <el-form-item label="风机名称:" prop="engineName">
            <el-input v-model="ruleForm.engineName" size="small"></el-input>
          </el-form-item>
          <el-form-item label="关联风场:" prop="fieldCode">
            <el-select v-model="ruleForm.fieldCode" filterable placeholder="请选择" size="small">
              <el-option v-for="item in fieldCodeOptions" :key="item.fieldCode" :label="item.fieldName"
                :value="item.fieldCode">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="机型编号:" prop="millTypeCode">
            <el-select v-model="ruleForm.millTypeCode" placeholder="请选择" size="small">
              <el-option v-for="item in millTypeCodeOptions" :key="item.millTypeCode" :label="item.machineTypeCode"
                :value="item.millTypeCode">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="额定容量:" prop="ratedCapacity">
            <el-input v-model="ruleForm.ratedCapacity" size="small"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="海拔高度:" prop="elevationHeight">
            <el-input v-model="ruleForm.elevationHeight" size="small"></el-input>
          </el-form-item>
          <el-form-item label="经度:" prop="longitude">
            <el-input v-model="ruleForm.longitude" size="small"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="纬度:" prop="latitude">
            <el-input v-model="ruleForm.latitude" size="small"></el-input>
          </el-form-item>
          <el-form-item label="轮廓高度:" prop="hubHeight">
            <el-input v-model="ruleForm.hubHeight" size="small"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="是否标杆:" prop="sightcing">
            <el-select v-model="ruleForm.sightcing" placeholder="请选择" size="small">
              <el-option v-for="item in sightcingOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="额定风速:" prop="rated_wind_speed">
            <el-input v-model="ruleForm.rated_wind_speed" size="small"></el-input>
          </el-form-item>
        </div>
        <div class="form-row">
          <el-form-item label="切入风速:" prop="ratedCutInWindspeed">
            <el-input v-model="ruleForm.ratedCutInWindspeed" size="small"></el-input>
          </el-form-item>
          <el-form-item label="切出风速:" prop="ratedCutOutWindspeed">
            <el-input v-model="ruleForm.ratedCutOutWindspeed" size="small"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div class="form-buttons">
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </div>
    </el-dialog>

    <!-- 风机详情 -->
    <el-dialog title="风机详情" :visible.sync="unusualdialog" width="800px">
      <div class="general">
        <div class="condition">
          <p>关联风场:</p>
          <span>{{ particularsdata.fieldCode }}</span>
        </div>
        <div class="condition">
          <p>风机名称:</p>
          <span>{{ particularsdata.engineCode }}</span>
        </div>

        <div class="condition">
          <p>风机名称:</p>
          <span>{{ particularsdata.engineName }}</span>
        </div>
        <div class="condition">
          <p>机型编号:</p>
          <span>{{ particularsdata.millTypeCode }}</span>
        </div>
        <div class="condition">
          <p>额定容量:</p>
          <span>{{ particularsdata.ratedCapacity }}</span> <span>(MW)</span>
        </div>

        <div class="condition">
          <p>海拔高度:</p>
          <span>{{ particularsdata.elevationHeight }}</span> <span>(米)</span>
        </div>
        <div class="condition">
          <p>经度:</p>
          <span>{{ particularsdata.longitude }}</span>
        </div>

        <div class="condition">
          <p>纬度:</p>
          <span>{{ particularsdata.latitude }}</span>
        </div>
        <div class="condition">
          <p>额定风速:</p>
          <span>{{ particularsdata.rated_wind_speed }}</span><span>(m/s)</span>
        </div>

        <div class="condition">
          <p>切入风速:</p>
          <span>{{ particularsdata.ratedCutInWindspeed }}</span><span>(m/s)</span>
        </div>

        <div class="condition">
          <p>切出风速:</p>
          <span>{{ particularsdata.ratedCutOutWindspeed }}</span><span>(m/s)</span>
        </div>

        <div class="condition">
          <p>轮廓高度:</p>
          <span>{{ particularsdata.hubHeight }}</span> <span>(米)</span>
        </div>
        <div class="condition">
          <p>是否标杆:</p>
          <span>{{ particularsdata.sightcing == 1 ? '是' : '否' }}</span>
        </div>
        <div class="condition">
          <p>状态:</p>
          <span>{{ particularsdata.state == 1 ? '启用' : '停用' }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createWindEngineGroup,
  delWindEngineGroup,
  getWindEngineGroup,
  getWindEngineMillList,
  getWindFieldNames,
  updateStateWindEngineGroup,
  updateWindEngineGroup,
  windEngineGrouPage,
  getAllTemplate,
  windEngineGroupImportData 
} from '@/api/ledger.js'
export default {
  data() {
    return {
      formInline: {
        fieldCode: '',
        timeQuantum: [],
        pageNum: 1,
        pageSize: 10,
        totalSize: 0
      },
      startDate: '',
      endDate: '',
      tableData: [],
      particularsdata: [],
      ruleForm: {
        fieldCode: '',
        engineName: '',
        airdensity: '',
        millTypeCode: '',
        ratedCapacity: '',
        elevationHeight: '',
        longitude: '',
        latitude: '',
        hubHeight: '',
        sightcing: '',
        rated_wind_speed: '',
        ratedCutInWindspeed: '',
        ratedCutOutWindspeed: ''
      },
      fieldCodeOptions: [],
      millTypeCodeOptions: [],
      sightcingOptions: [
        {
          value: 1,
          label: '是'
        },
        {
          value: 2,
          label: '否'
        }
      ],
      rules: {
        fieldCode: [
          { required: true, message: '请选择关联风场', trigger: 'change' }
        ],
        engineName: [
          { required: true, message: '请输入风机名称', trigger: 'blur' }
        ],
        millTypeCode: [
          { required: true, message: '请输入机型编号', trigger: 'blur' }
        ],
        ratedCapacity: [
          { required: true, message: '请输入额定容量', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        elevationHeight: [
          { required: true, message: '请输入海拔高度', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        hubHeight: [
          { required: true, message: '请输入轮廓高度', trigger: 'blur' },
          { validator: this.validateNumber, trigger: 'blur' }
        ],
        sightcing: [
          { required: true, message: '请选择是否标杆', trigger: 'change' }
        ]
      },
      subordinatedata: [],
      subordinate: "",
      AllTemplateurl: "",
      // 新增信息
      engineName: '',
      airdensity: '',
      fieldCode: '',

      millTypeCode: '',
      sheng: '',
      shengOptions: [],
      shi: '',
      shiOptions: [],
      elevationHeight: '',
      latitude: '',
      sightcing: '',

      fileList: [

      ],
      globalFileList: [],
      nuedialog: false,
      unusualdialog: false,
      tolead: false,
      isEdit: false,
      title: ''
    }
  },
  created() {
    this.onSubmit()
    this.windsite()
    this.relevancy()
    this.getAllTemplate()
  },
  methods: {
    rowStyle() {
      return 'text-align:center'
    },
    onDateChange(date) {
      if (Array.isArray(date)) {
        this.startDate = this.$formatDate(date[0])
        this.endDate = this.$formatDate(date[1])
        if (this.endDate < this.startDate) {
          this.endDate = this.startDate
        }
      } else {
        this.startDate = null
        this.endDate = null
      }
    },
    //获取模板
    getAllTemplate() {
      getAllTemplate().then((res) => {
        this.AllTemplateurl = res.data.draught
      })
    },
    // 下载模板
    download() {
      if (this.AllTemplateurl) {
        const link = document.createElement('a')
        link.href = this.AllTemplateurl
        link.download = '' // 可以设置默认下载文件名
        link.target = '_blank' // 新窗口打开
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      } else {
        console.error('URL is not set')
      }
    },
    // 数字验证
    validateNumber(rule, value, callback) {
      const numberRegex = /^\d{1,4}(\.\d{1,2})?$/ // 匹配不超过四位数且小数点后不超过二位数的数字
      if (!value) {
        callback(new Error('该项不能为空'))
      } else if (!numberRegex.test(value)) {
        callback(
          new Error('该项必须为不超过四位数且小数点后不超过三位数的数字')
        )
      } else {
        callback()
      }
    },
    // 查询
    onSubmit() {
      let paramsData = {
        engineName: this.formInline.engineName || undefined,
        beginTime: this.startDate || undefined,
        endTime: this.endDate || undefined,
        pageNum: 1,
        pageSize: 10
      }
      windEngineGrouPage(paramsData).then((res) => {
        this.tableData = res.data.list
        this.formInline.totalSize = res.data.totalSize
      })
    },

    // 停用
    start(row, type) {
      let objectval = {
        engineCode: row.engineCode,
        state: type === 0 ? 0 : 1
      }
      updateStateWindEngineGroup(objectval).then((res) => {
        this.$message({
          message: '状态已更新成功',
          type: 'success'
        })
        // this.$message(`${type === 1 ? '状态已更新成功' : '状态已更新成功'}`);
        row.state = type === 1 ? 0 : 1
        this.onSubmit()
      })
    },
    //详情
    particulars(row) {
      this.unusualdialog = true
      getWindEngineGroup({ engineCode: row.engineCode }).then((res) => {
        this.particularsdata = res.data
      })
    },
    // 确认
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        const objData = {
          fieldCode: this.ruleForm.fieldCode,
          engineName: this.ruleForm.engineName,
          // airdensity: this.ruleForm.airdensity,
          millTypeCode: this.ruleForm.millTypeCode,
          ratedCapacity: this.ruleForm.ratedCapacity,
          elevationHeight: this.ruleForm.elevationHeight,
          longitude: this.ruleForm.longitude,
          latitude: this.ruleForm.latitude,
          hubHeight: this.ruleForm.hubHeight,
          sightcing: this.ruleForm.sightcing,
          rated_wind_speed: this.ruleForm.rated_wind_speed,
          ratedCutInWindspeed: this.ruleForm.ratedCutInWindspeed,
          ratedCutOutWindspeed: this.ruleForm.ratedCutOutWindspeed
        }
        // fieldCode
        if (valid) {
          const API = this.isEdit
            ? updateWindEngineGroup(objData)
            : createWindEngineGroup(objData)
          API.then((res) => {
            this.nuedialog = false
            this.onSubmit()
          })
        } else {
          console.log('表单验证失败')
          return false
        }
      })
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.nuedialog = false
    },
    // 获取风场
    windsite() {
      debugger
      getWindFieldNames().then((res) => {
        this.fieldCodeOptions = res.data
        this.subordinatedata = res.data
      })
    },
    // 获取机型
    async relevancy() {
      try {
        const res = await getWindEngineMillList()
        this.millTypeCodeOptions = res.data
      } catch (error) {
        console.error('Error fetching wind engine mill list:', error)
      }
    },

    //分页数据切换
    handleCurrentChange(val) {
      this.formInline.pageNum = val
      this.onSubmit()
    },
    // 重置
    reset() { },
    //导入提交
    UPsubmit() {
      console.log(this.globalFileList)
      let filedata = {
        fieldCode: this.subordinate,
        file: this.globalFileList
      }
      windEngineGroupImportData(filedata).then((res) => {
        console.log(res)
        this.uploadingPOP = false
        this.$message.success('上传成功')
      })
      console.log(filedata);
      // this.tolead = false
    },
    // 新增
    newly() {
      this.nuedialog = false
    },

    // 编辑
    compile(row) {
      getWindEngineGroup({ engineCode: row.engineCode }).then((res) => {
        const item = JSON.parse(JSON.stringify(res.data))
        this.detail = item
        Object.keys(this.ruleForm).forEach((key) => {
          this.ruleForm[key] = item[key]
        })
      })
      this.nuedialog = true
      this.title = '编辑'
      this.isEdit = true
    },

    // 删除
    deleted(row) {
      console.log(row, 'row')
      if (row.state == '1') {
        this.$message({
          type: 'error',
          message: '该项处于启用状态，无法删除！'
        })
        return
      }
      this.$confirm('此操作将永久删除该文件，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delWindEngineGroup({ engineCode: row.engineCode }).then((res) => {
            this.onSubmit()
            // 执行删除操作
            this.$message({
              type: 'success',
              message: '删除成功！'
            })
          })
        })
        .catch(() => {
          // 取消删除
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 导入
    upfile() {
      this.tolead = true
    },
    // 新增
    newnuedialog() {
      this.nuedialog = true
      this.title = '新增'
    },

    // 附件验证
    beforeUpload(fileList) {
      const isXLSX =
        fileList.type ===
        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isXLSX) {
        this.$message.error('只能上传xlsx文件')
      }
      const isLt5MB = fileList.size / 1024 / 1024 < 5
      if (!isLt5MB) {
        this.$message.error('文件大小不能超过5MB')
      }
      console.log(fileList, 'fileList')
      return isXLSX && isLt5MB
    },
    handleOnChange(fileList) {
      console.log(fileList)
      this.globalFileList = fileList.raw
    }
  }
}
</script>

<style lang="scss" scoped>
.general {
  display: flex;
  flex-wrap: wrap;

  .condition {
    width: 50%;
    display: flex;

    p {
      width: 100px;
      text-align: right;
      line-height: 40px;
      margin-right: 10px;
    }

    span {
      line-height: 40px;
    }

    .el-select {
      width: 260px;
    }

    .el-input {
      width: 260px;
    }
  }
}

.UPcondition {
  display: flex;
  margin-bottom: 10px;

  p {
    width: 74px;
    text-align: right;
    line-height: 40px;
  }

  .el-select {
    width: 260px;
  }

  .el-input {
    width: 260px;
  }
}

.attachment {
  display: flex;
  padding-top: 10px;

  p {
    margin-right: 20px;
    color: #409eff;
  }
}

.model-center {
  color: #666;
  line-height: 40px;
  height: 40px;
  font-size: 14px;
}

.demo-ruleForm {

  .el-select {
    width: 260px;
  }

  .el-input {
    width: 260px;
  }

  .el-form-item {
    margin-bottom: 20px;
  }

  .form-row {
    display: flex;
    justify-content: space-between;
  }

  .el-form-item {
    width: 48%;
  }
}

.form-buttons {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  /* optional: adds some space above the buttons */
}

.model-center {
  color: #409eff;
  cursor: pointer;
  line-height: 40px;
  height: 40px;
  font-size: 14px;
}
</style>