|
@@ -1,5 +1,386 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- 场站
|
|
|
- </div>
|
|
|
-</template>
|
|
|
+ <div>
|
|
|
+ <div class="query mg-b-8">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">场站名称:</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-input
|
|
|
+ v-model="search"
|
|
|
+ size="small"
|
|
|
+ placeholder="输入场站名称"
|
|
|
+ @input="filterStation"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-actions" style="margin-left: 50px">
|
|
|
+ <button class="btn" @click="insertItem()">新增</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="df-table">
|
|
|
+ <el-table :data="tableData" class="custom-table" height="80vh">
|
|
|
+ <el-table-column type="index" label="序号" align="center" width="50" />
|
|
|
+ <el-table-column prop="name" align="center" label="场站名称" />
|
|
|
+ <el-table-column prop="id" align="center" label="场站编码" />
|
|
|
+ <el-table-column prop="capacity" align="center" label="装机容量(MW)" />
|
|
|
+ <el-table-column prop="model" align="center" label="风机型号" />
|
|
|
+ <el-table-column prop="longitude" align="center" label="经度" />
|
|
|
+ <el-table-column prop="latitude" align="center" label="纬度" />
|
|
|
+ <el-table-column prop="manufacturer" align="center" label="风机厂商" />
|
|
|
+ <el-table-column align="center" label="操作">
|
|
|
+ <template v-slot="scope">
|
|
|
+ <el-button type="text" @click="editItem(scope)">编辑</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogTitle"
|
|
|
+ v-model="dialogShow"
|
|
|
+ width="50%"
|
|
|
+ top="15vh"
|
|
|
+ custom-class="modal"
|
|
|
+ :close-on-click-modal="true"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="ruleFormRef"
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ label-width="120px"
|
|
|
+ size="default"
|
|
|
+ >
|
|
|
+ <div class="inlineItem">
|
|
|
+ <el-form-item :label="`${ruleForm['name--name--']}:`" prop="name">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ :placeholder="`请输入${ruleForm['name--name--']}`"
|
|
|
+ type="input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item :label="`${ruleForm['id--name--']}:`" prop="id">
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.id"
|
|
|
+ :placeholder="`请输入${ruleForm['id--name--']}`"
|
|
|
+ type="input"
|
|
|
+ :disabled="codedisabled"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="inlineItem">
|
|
|
+ <el-form-item
|
|
|
+ :label="`${ruleForm['capacity--name--']}:`"
|
|
|
+ prop="capacity"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.capacity"
|
|
|
+ :placeholder="`请输入${ruleForm['capacity--name--']}`"
|
|
|
+ type="input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ :label="`${ruleForm['model--name--']}:`"
|
|
|
+ prop="model"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.model"
|
|
|
+ :placeholder="`请输入${ruleForm['model--name--']}`"
|
|
|
+ type="input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="inlineItem">
|
|
|
+ <el-form-item
|
|
|
+ :label="`${ruleForm['longitude--name--']}:`"
|
|
|
+ prop="longitude"
|
|
|
+ type="input"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.longitude"
|
|
|
+ :placeholder="'请输入风机型号用/隔开'"
|
|
|
+ type="input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ :label="`${ruleForm['latitude--name--']}:`"
|
|
|
+ prop="latitude"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="ruleForm.latitude"
|
|
|
+ :placeholder="`请输入${ruleForm['latitude--name--']}`"
|
|
|
+ type="input"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <div class="inlineItem">
|
|
|
+ <el-form-item
|
|
|
+ :label="`${ruleForm['manufacturer--name--']}:`"
|
|
|
+ prop="manufacturer"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.manufacturer"
|
|
|
+ :placeholder="`请输入${ruleForm['manufacturer--name--']}`"
|
|
|
+ popper-class="select"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in manufacturerArray"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <span class="dialog-footer">
|
|
|
+ <el-button type="info" size="medium" @click="cancel"
|
|
|
+ >取消</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ size="medium"
|
|
|
+ @click="submit('ruleFormRef')"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ filterTableData: [],
|
|
|
+ tableData: [],
|
|
|
+ dialogTitle: "",
|
|
|
+ dialogShow: false,
|
|
|
+ codedisabled: false,
|
|
|
+ ruleForm: {
|
|
|
+ name: "",
|
|
|
+ "name--name--": "场站名称",
|
|
|
+ id: "",
|
|
|
+ "id--name--": "场站编码",
|
|
|
+ capacity: "",
|
|
|
+ "capacity--name--": "装机容量",
|
|
|
+ model: "",
|
|
|
+ "model--name--": "风机型号",
|
|
|
+ longitude: "",
|
|
|
+ "longitude--name--": "经度",
|
|
|
+ latitude: "",
|
|
|
+ "latitude--name--": "经度",
|
|
|
+ manufacturer: "",
|
|
|
+ "manufacturer--name--": "风机厂商",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ id: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ capacity: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ model: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ longitude: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ latitude: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ manufacturer: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: "不可为空",
|
|
|
+ trigger: "blur",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ manufacturerArray: [
|
|
|
+ { label: "联合动力", value: "联合动力" },
|
|
|
+ { label: "华创", value: "华创" },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ created() {
|
|
|
+ this.getStationType();
|
|
|
+ this.renderRules();
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ filterStation(value) {
|
|
|
+ if (value) {
|
|
|
+ let tableData = [];
|
|
|
+ this.filterTableData.forEach((ele) => {
|
|
|
+ if (ele.name.indexOf(value) !== -1) {
|
|
|
+ tableData.push(ele);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.tableData = tableData;
|
|
|
+ } else {
|
|
|
+ this.tableData = this.filterTableData;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取所有故障类型
|
|
|
+ getStationType() {
|
|
|
+ const that = this;
|
|
|
+ this.API.requestData({
|
|
|
+ subUrl: "basic/station/all",
|
|
|
+ success(res) {
|
|
|
+ that.tableData = res.data;
|
|
|
+ that.filterTableData = res.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消新增或编辑
|
|
|
+ cancel() {
|
|
|
+ this.dialogShow = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ //新增
|
|
|
+ insertItem() {
|
|
|
+ this.resetForm();
|
|
|
+ this.dialogShow = true;
|
|
|
+ this.dialogTitle = "新增";
|
|
|
+ this.codedisabled = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 编辑某一条
|
|
|
+ editItem({ row }) {
|
|
|
+ for (let key in row) {
|
|
|
+ if (key !== "time") {
|
|
|
+ this.ruleForm[key] = row[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.dialogShow = true;
|
|
|
+ this.dialogTitle = "编辑";
|
|
|
+ this.codedisabled = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交编辑或者新增数据
|
|
|
+ submit(formName = "") {
|
|
|
+ const that = this;
|
|
|
+ that.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let data = {};
|
|
|
+ for (let key in that.ruleForm) {
|
|
|
+ if (key.indexOf("--name--") === -1) {
|
|
|
+ data[key] = that.ruleForm[key];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ data.time = new Date().formatDate("yyyy-MM-dd hh:mm:ss");
|
|
|
+ data.category = "GZ";
|
|
|
+ that.API.request({
|
|
|
+ method: "POST",
|
|
|
+ subUrl: "know/fault/type/insert",
|
|
|
+ data,
|
|
|
+ success() {
|
|
|
+ that.BASE.showMsg({
|
|
|
+ type: "success",
|
|
|
+ msg: `${data.id ? "编辑" : "新增"}成功`,
|
|
|
+ });
|
|
|
+ that.dialogShow = false;
|
|
|
+ that.getStationType();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 渲染 rules 中文描述
|
|
|
+ renderRules() {
|
|
|
+ for (let key in this.rules) {
|
|
|
+ this.rules[key].forEach((ele) => {
|
|
|
+ ele.message = `${this.ruleForm[key + "--name--"]}` + ele.message;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置表单并且重置表单效验
|
|
|
+ resetForm() {
|
|
|
+ this.dialogTitle = "";
|
|
|
+ this.ruleForm.id && delete this.ruleForm.id;
|
|
|
+ for (let key in this.ruleForm) {
|
|
|
+ if (key.indexOf("--name--") === -1) {
|
|
|
+ this.ruleForm[key] = "";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="less" scpoed>
|
|
|
+.el-form {
|
|
|
+ margin-left: 50px;
|
|
|
+}
|
|
|
+.el-form .el-form-item {
|
|
|
+ margin-top: 40px;
|
|
|
+ width: 80%;
|
|
|
+ display: flex;
|
|
|
+ justify-items: center;
|
|
|
+}
|
|
|
+.el-form {
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .inlineItem {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ align-items: center;
|
|
|
+ height: 80px;
|
|
|
+ .el-form-item {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 40px;
|
|
|
+
|
|
|
+ .el-input__count {
|
|
|
+ background: rgba(83, 98, 104, 0.2);
|
|
|
+ color: #b3bdc0;
|
|
|
+ }
|
|
|
+ .el-input{
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ .el-select{
|
|
|
+ width: 250px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|