InternetCompetition/src/components/GatewayMaintenance.vue

400 lines
12 KiB
Vue

<template>
<div>
<el-dialog title="详情" :visible.sync="xqFlag" width="30%">
<div class="xqbox">
<p>
<span class="s1">网关SN:</span> <span>{{ rowDate.wgsn }}</span>
</p>
<p>
<span class="s1">网关编号:</span> <span>{{ rowDate.wgbh }}</span>
</p>
<p>
<span class="s1">网关名称:</span> <span>{{ rowDate.wgmc }}</span>
</p>
<p>
<span class="s1">参数key:</span> <span>{{ rowDate.cskey }}</span>
</p>
<p>
<span class="s1">参数名称:</span> <span>{{ rowDate.csmc }}</span>
</p>
<p>
<span class="s1">小数位数:</span> <span>{{ rowDate.xsws }}</span>
</p>
<p>
<span class="s1">设定值:</span> <span>{{ rowDate.sdz }}</span>
</p>
<p>
<span class="s1">偏差值:</span> <span>{{ rowDate.pcz }}</span>
</p>
<p>
<span class="s1">维护人:</span> <span>{{ rowDate.whr }}</span>
</p>
<p>
<span class="s1">维护时间:</span> <span>{{ rowDate.whsj }}</span>
</p>
</div>
</el-dialog>
<el-dialog
title="网关维护"
:visible.sync="dialogVisible"
:append-to-body="true"
width="90%"
>
<div class="title">
<div class="left">
<el-button @click="flag = true">{{$t('ntmaintenance.createParameter')}}</el-button>
<el-button @click="deleteSelectedRows">{{$t('del')}}</el-button>
</div>
<!-- <div class="right">
<el-input type="search" style="margin-right: 10px"></el-input>
<el-button>筛选</el-button>
</div> -->
</div>
<el-table
ref="multipleTable"
:data="tableData"
border
style="margin-top: 10px"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
>
<el-table-column :label="$t('ntmaintenance.num')">
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template></el-table-column
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column prop="sswg" :label="$t('ntmaintenance.gatewaySNNumber')"> </el-table-column>
<el-table-column prop="cskey" :label="$t('ntmaintenance.parameterKey')"> </el-table-column>
<el-table-column prop="csname" :label="$t('ntmaintenance.parameterName')"> </el-table-column>
<el-table-column prop="xsws" :label="$t('ntmaintenance.decimalPlaces')"> </el-table-column>
<el-table-column prop="sdz" :label="$t('ntmaintenance.setValue')"> </el-table-column>
<el-table-column prop="pcz" :label="$t('ntmaintenance.deviationValue')"> </el-table-column>
<el-table-column :label="$t('edit')">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="handleDelete(scope.$index, scope.row)"
>{{ $t('del') }}</el-button
>
</template></el-table-column
>
</el-table>
</el-dialog>
<el-dialog :title="$t('ntmaintenance.createParameter')" :visible.sync="flag" width="30%">
<el-col :span="12">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item :label="$t('ntmaintenance.affiliatedGateway')" prop="sswg">
<el-select v-model="ruleForm.sswg">
<el-option label="lan-box1" value="lan-box1"></el-option>
<el-option label="lan-box2" value="lan-box2"></el-option>
<el-option label="wlan-box1" value="wlan-box1"></el-option>
<el-option label="wlan-box2" value="wlan-box2"></el-option>
<!-- <el-option
label="lan- server port"
value="lan- server port"
></el-option>
<el-option
label="wlan- server port"
value="wlan- server port"
></el-option> -->
</el-select>
</el-form-item>
<el-form-item :label="$t('ntmaintenance.parameterName')" prop="csname">
<el-select v-model="ruleForm.csname">
<el-option label="产量" value="产量"></el-option>
<el-option label="主轴转速" value="主轴转速"></el-option>
<el-option label="急停状态" value="急停状态"></el-option>
<el-option label="切削速度" value="切削速度"></el-option>
<!-- <el-option label="负载电流" value="负载电流"></el-option>
<el-option label="额定电流" value="额定电流"></el-option> -->
</el-select>
</el-form-item>
<el-form-item :label="$t('ntmaintenance.setValue')" prop="sdz">
<el-input v-model="ruleForm.sdz"> </el-input>
</el-form-item>
</el-form>
</el-col>
<el-col :span="12">
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
:label-position="labelPosition"
>
<el-form-item :label="$t('ntmaintenance.parameterKey')" prop="cskey">
<el-select v-model="ruleForm.cskey">
<el-option
label="MachinePamHID910"
value="MachinePamHID910"
></el-option>
<el-option
label="MachinePamHID917"
value="MachinePamHID917"
></el-option>
<el-option
label="MachinePamHID909"
value="MachinePamHID909"
></el-option>
<el-option
label="MachinePamHID928"
value="MachinePamHID928"
></el-option>
<!-- <el-option
label="MachinePamHID923"
value="MachinePamHID923"
></el-option>
<el-option
label="MachinePamHID924"
value="MachinePamHID924"
></el-option> -->
</el-select>
</el-form-item>
<el-form-item :label="$t('ntmaintenance.decimalPlaces')" prop="xsws">
<el-input v-model="ruleForm.xsws"> </el-input>
</el-form-item>
<el-form-item :label="$t('ntmaintenance.deviationValue')" prop="pcz">
<el-input v-model="ruleForm.pcz"> </el-input>
</el-form-item>
</el-form>
</el-col>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveinfo">{{$t('save')}}</el-button>
<el-button @click="flag = false">{{$t('cancel')}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { GetUserAnswer, SaveUserAnswer } from "@/api/user";
export default {
data() {
return {
dialogVisible: true,
labelPosition: "left",
flag: false,
user_id: "",
xqFlag: false,
rowDate: {},
wgid: "",
multipleSelection: [],
tableData: [
// {
// wgsn: "",
// wgbh: "",
// wgmc: "",
// cskey: "",
// csmc: "",
// xsws: "",
// sdz: "",
// pcz: "",
// whr: "",
// whsj: "",
// },
],
ruleForm: {
sswg: "",
csname: "",
// sfyxbz: "",
sdz: "",
cskey: "",
xsws: "",
pcz: "",
},
FormData: [],
rules: {
sswg: [
{ required: true, trigger: "change", message: "请选择一个选项" },
],
csname: [
{ required: true, trigger: "change", message: "请选择一个选项" },
],
// sfyxbz: [
// { required: true, trigger: "change", message: "请选择一个选项" },
// ],
sdz: [{ required: true, trigger: "blur", message: "设定值是必填参数" }],
cskey: [
{ required: true, trigger: "change", message: "请选择一个选项" },
],
xsws: [
{ required: true, trigger: "blur", message: "小数位数是必填参数" },
],
pcz: [{ required: true, trigger: "blur", message: "偏差值是必填参数" }],
},
};
},
created() {
this.user_id = window.location.href.split("?")[1];
this.GetUserAnswer();
},
methods: {
//读缓存
async GetUserAnswer() {
let { data } = await GetUserAnswer({
mark: "YDPZYM_wgwh",
user_id: `${this.user_id}`,
// user_id: "USER202307301109254198",
});
if (data.data && data.state) {
this.tableData = JSON.parse(data.data.mark_value);
}
},
saveinfo() {
this.$refs["ruleForm"].validate((valid) => {
if (valid) {
if (this.tableData.length < 4) {
this.SaveUserAnswer();
this.flag = false;
} else {
this.$message({
message: "抱歉,只能添加四条数据",
type: "error",
});
return false;
}
} else {
console.log("error submit!!");
return false;
}
});
},
//删除
async handleDelete(a, b) {
this.tableData.splice(a, 1);
let { data } = await SaveUserAnswer({
mark: "YDPZYM_wgwh",
user_id: this.user_id,
// user_id: "USER202307301109254198",
mark_value: JSON.stringify(this.tableData),
});
if (data.state) {
this.$message({
message: "操作成功",
type: "success",
});
} else {
this.$message.error("操作失败");
}
},
//多选
handleSelectionChange(val) {
this.multipleSelection = val;
},
//多选删除
async deleteSelectedRows() {
if (this.multipleSelection.length == 0) {
this.$message({
message: "请先选择要删除的数据",
type: "warning",
});
return;
}
this.tableData = this.tableData.filter(
(row) => !this.multipleSelection.includes(row)
);
this.multipleSelection = [];
let { data } = await SaveUserAnswer({
mark: "YDPZYM_wgwh",
user_id: this.user_id,
// user_id: "USER202307301109254198",
mark_value: JSON.stringify(this.tableData),
});
if (data.state) {
this.$message({
message: "操作成功",
type: "success",
});
} else {
this.$message.error("操作失败");
}
},
chakan(a, b) {
console.log(b);
this.rowDate = b;
this.xqFlag = true;
},
//保存数据
async SaveUserAnswer() {
let obj = {
sswg: this.ruleForm.sswg,
csname: this.ruleForm.csname,
// sfyxbz: "",
sdz: this.ruleForm.sdz,
cskey: this.ruleForm.cskey,
xsws: this.ruleForm.xsws,
pcz: this.ruleForm.pcz,
};
this.tableData.push(obj);
let { data } = await SaveUserAnswer({
mark: "YDPZYM_wgwh",
user_id: this.user_id,
// user_id: "USER202307301109254198",
mark_value: JSON.stringify(this.tableData),
});
if (data.state) {
this.$message({
message: "操作成功",
type: "success",
});
for (let key in this.ruleForm) {
this.ruleForm[key] = "";
}
} else {
this.$message.error(data.message);
}
},
},
};
</script>
<style scoped lang="less">
/deep/ .el-dialog__body{
overflow: hidden !important;
}
.title {
display: flex;
justify-content: space-between;
div {
display: flex;
}
}
.el-table {
margin-top: 10px;
}
/deep/.red .el-form-item__label {
color: red;
}
.xqbox {
p {
margin: 5px;
display: flex;
.s1 {
width: 70px;
color: #0275ff;
}
}
}
.el-table {
height: 400px;
}
</style>