neim/neim-ui/src/views/dataQuery/electrucStation/index.vue

<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
          >新增
          </el-button>
        </el-col>
      </el-row>

      <el-table v-loading="loading" border
                :data="tableAllData.slice((page.currentPage-1)*page.pageSize,page.currentPage*page.pageSize)">
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column label="场站编号" align="center" prop="stationId"/>
        <el-table-column label="场站名称" align="center" prop="stationName"/>
        <el-table-column label="简称" align="center" prop="abbreviation"/>
        <el-table-column label="场站经度" align="center" prop="longitude"/>
        <el-table-column label="场站纬度" align="center" prop="latitude"/>
        <el-table-column label="场站类型" align="center" prop="stationType" :formatter="formatStatus" />
        <el-table-column label="关联设备" align="center" prop="equipment">
<!--          <template slot-scope="scope">-->
<!--            <span>{{ formatEquipment(scope.row.equipment) }}</span>-->
<!--          </template>-->
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="float: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page=page.currentPage
          :page-sizes="[10, 15, 30, 50]"
          :page-size=page.pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=page.total>
        </el-pagination>
      </div>

    </el-card>
    <!-- 添加或修改测风塔信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20" class="mb8">
          <el-col :span="12">
            <el-form-item label="场站编号" prop="stationId">
              <el-input v-model="form.stationId" placeholder="请输入场站编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场站名称" prop="stationName">
              <el-input v-model="form.stationName" placeholder="请输入场站名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mb8">
          <el-col :span="12">
            <el-form-item label="场站缩写" prop="abbreviation">
              <el-input v-model="form.abbreviation" placeholder="请输入场站缩写"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入经度"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="mb8">
          <el-col :span="12">
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入纬度"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="场站类型" prop="stationType">
              <el-select v-model="form.stationType" placeholder="请选择" style="width: 100%" clearable @change="typeChange">
                <el-option
                  v-for="item in terrain"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="关联设备" prop="equipment" v-if="eType === '风'">
          <el-select v-model="form.equipment" placeholder="请选择" style="width: 100%" multiple clearable>
            <el-option
              v-for="item in equipment"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关联设备" prop="equipment" v-if="eType === '光'">
          <el-select v-model="form.equipment" placeholder="请选择" style="width: 100%" multiple clearable>
            <el-option
              v-for="item in gEquipment"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {
  listElectricStation,
  addElectricStation,
  updateElectricStation,
  delElectricStation
} from "@/api/biz/dataQuery/electricStation";
import {listAllDisabled} from "@/api/biz/dataQuery/windTowerStatusInfo";
import axios from "axios";

export default {
  name: "WindTowerStatusInfo",
  data() {
    return {
      //
      dialogVisible: false,
      equipmentNoDisable: false,
      //文件上传
      fileList: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 测风塔信息表格数据
      windTowerStatusInfoList: [],
      tableAllData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      eType: '风',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        modelNumber: null,
        equipmentNo: null,
        installationTime: null,
        manufacturer: null,
        longitude: null,
        latitude: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        stationId: [{required: true, message: '请输入场站编号', trigger: 'blur'}],
        stationName: [{required: true, message: '请输入场站名称', trigger: 'blur'}],
        abbreviation: [{required: true, message: '请输入场站名称缩写', trigger: 'blur'}],
        longitude: [
          {required: true, message: '请正确填写场站经度'},
          {pattern: /^\d+(\.\d{1,9})?$/, message: '只能输入正数数字或带小数点9位以内的数字'},
          {pattern: /^-?((0|1?[0-8]?[0-9]?)(([.][0-9]{1,10})?)|180(([.][0]{1,10})?))$/, message: '请输入正确的经度'}
          // {message: '输入过长', max: 10}
        ],
        latitude: [
          {required: true, message: '请正确填写场站纬度'},
          {pattern: /^\d+(\.\d{1,9})?$/, message: '只能输入正数数字或带小数点9位以内的数字'},
          {pattern: /^-?((0|[1-8]?[0-9]?)(([.][0-9]{1,10})?)|90(([.][0]{1,10})?))$/, message: '请输入正确的纬度'}
          // {message: '输入过长', max: 10}
        ],
        stationType: [
          {required: true, message: '请填写场站类型'}
        ]
      },
      modId: '',
      cftData: [],
      cftId: '',
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      terrain: [{label: "风力电站", value: "风"},
        {label: "光伏电站", value: "光"}],
      status: [
        {label: "运行中", value: "Y1"},
        {label: "未运行", value: "Y2"},
      ],
      equipment: [],// 风的关联设备
      gEquipment: [],// 光的关联设备
      heightOption: []
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    this.getAllWindTowerInfo()
  },
  methods: {
    /*获取所有的测风塔*/
    getAllWindTowerInfo() {
      listAllDisabled().then(res => {
        this.equipment = res.data
      })
    },
    // formatEquipment(data) {
    //   console.log(data)
    //   if (data !== null) {
    //     var a = data.split(",");
    //     var b = "";
    //     if (a.length !== 0) {
    //       for (let i = 0; i < a.length; i++) {
    //         for (let k = 0; k < this.equipment.length; k++) {
    //           if (this.equipment[k].value === a[i]) {
    //             b += this.equipment[k].label
    //             if (i !== a.length - 1) {
    //               b += ","
    //             }
    //           }
    //         }
    //       }
    //       return b;
    //     }
    //   }
    // },
    /** 查询测风塔信息列表 */
    getList() {
      // this.loading = true;
      listElectricStation().then(res => {
        this.tableAllData = res.data
        this.page.total = res.data.length;
        this.loading = false;
      })
    },
    typeChange(){
      this.eType = this.form.stationType
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        stationId: null,
        stationName: null,
        abbreviation: null,
        longitude: null,
        latitude: null,
        stationType: null,
        equipment: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.modId = ''
      this.open = true;
      this.equipmentNoDisable = false
      this.title = "添加场站信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.equipmentNoDisable = true
      this.reset();
      var a = null
      const id = row.id || this.ids
      this.modId = id
      if (row. equipment!== null) {
        a = row.equipment.split(",")
        a = a.length === 1 && a[0] === "" ? null : row.equipment.split(",")
      }
      this.form = {
        id: row.id,
        stationId: row.stationId,
        stationName: row.stationName,
        abbreviation: row.abbreviation,
        longitude: row.longitude,
        latitude: row.latitude,
        stationType: row.stationType,
        equipment: a
      };
      this.eType = this.form.stationType
      this.open = true;
    },
    /** 提交按钮 */
    submitForm() {
      // this.form.heights = this.form.heights.toString()
      this.$refs["form"].validate(valid => {
        if (this.form.equipment !== null) {
          this.form.equipment = this.form.equipment.toString()
        }
        if (valid) {
          if (this.form.id != null) {
            updateElectricStation(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addElectricStation(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$modal.confirm('是否确认场站名称为"' + row.stationName + '"信息及所有数据？').then(function () {
        return delElectricStation(row);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /*pageSize改变*/
    handleSizeChange(val) {
      this.page.pageSize = val
      this.page.currentPage = 1
    },
    /*currentPage改变*/
    handleCurrentChange(val) {
      this.page.currentPage = val
    },
    formatStatus(row){
      let option = this.terrain.find(w=>w.value === row.stationType)
      return option !==undefined?option.label:row.stationType
    },
    // formatType(row){
    //   let option = this.status.find(w=>w.value === row.stationStatus)
    //   return option !==undefined?option.label:row.stationStatus
    // },
  }
};
</script>
<style scoped>
.uploadDiv {
  display: flex;
  justify-content: flex-start;
}

.uploadText {
  font-size: 18px;
  padding: .5%;
}

.upload-demo {
  padding: .5%;
}
</style>