|
@@ -1,198 +1,256 @@
|
|
|
<template>
|
|
|
- <transition name="dialog-fade">
|
|
|
- <el-dialog
|
|
|
- v-if="showDialog"
|
|
|
- :title="dialogTitle"
|
|
|
- class="dialog-component"
|
|
|
- v-model="showDialog"
|
|
|
- width="640px"
|
|
|
- @close="closeDialog(0)"
|
|
|
+ <el-dialog
|
|
|
+ :title="dialogTitle"
|
|
|
+ v-model="dialogVisible"
|
|
|
+ width="640px"
|
|
|
+ @close="closeDialog()"
|
|
|
+ @open="open"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="formInfo"
|
|
|
+ :model="form"
|
|
|
+ class="demo-form-inline"
|
|
|
+ label-width="100px"
|
|
|
+ :rules="rules"
|
|
|
>
|
|
|
- <el-form
|
|
|
- ref="formInfo"
|
|
|
- :model="formInfo"
|
|
|
- class="demo-form-inline"
|
|
|
- label-width="100px"
|
|
|
- :rules="rules"
|
|
|
- >
|
|
|
- <el-form-item label="设备名称:" prop="watchName">
|
|
|
- <el-input v-model="formInfo.watchName"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="设备编号:" prop="watchCode">
|
|
|
- <el-input v-model="formInfo.watchCode"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="回路表记地址:" prop="routeAddress">
|
|
|
- <el-select
|
|
|
- v-model="formInfo.routeAddress"
|
|
|
- multiple
|
|
|
- filterable
|
|
|
- collapse-tags
|
|
|
- placeholder="请选择"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in options"
|
|
|
- :key="item.value"
|
|
|
- :label="item.label"
|
|
|
- :value="item.value"
|
|
|
- >
|
|
|
- </el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item label="额定电压(kV):" prop="ratedVoltage">
|
|
|
- <el-input v-model="formInfo.ratedVoltage"></el-input>
|
|
|
- <div class="remarksTxt">(数值为线电压)</div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="额定电流(A):" prop="stationAddress">
|
|
|
- <el-input v-model="formInfo.ratedCurrent"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="电流负载率门限:" prop="fzlMx">
|
|
|
- <el-input v-model="formInfo.fzlMx"></el-input>
|
|
|
- <div class="remarksTxt">(0-100之间的数字)</div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="设备能力:" prop="ability">
|
|
|
- <el-checkbox v-model="checked">电能质量分析</el-checkbox>
|
|
|
- <div class="remarksTxt">(如果未勾选,该设备不参与电能质量分析)</div>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <br />
|
|
|
- <br />
|
|
|
- <br />
|
|
|
- <div style="text-align: right">
|
|
|
- <el-button @click="closeDialog(0)">取消</el-button>
|
|
|
- <el-button type="primary" @click="submitForm('formInfo')"
|
|
|
- >保存</el-button
|
|
|
- >
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </el-dialog>
|
|
|
- </transition>
|
|
|
+ <el-form-item label="设备编号:" prop="deviceCode">
|
|
|
+ <el-input v-model="form.watchCode"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="变量名:" prop="variableName">
|
|
|
+ <el-input v-model="form.ratedVoltage"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="变量编码:" prop="variableCoding">
|
|
|
+ <el-input v-model="form.ratedCurrent"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="监控设备:" prop="routeAddress">
|
|
|
+ <el-select
|
|
|
+ v-model="form.routeAddress"
|
|
|
+ filterable
|
|
|
+ collapse-tags
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="通信设备:" prop="routeAddress">
|
|
|
+ <el-select
|
|
|
+ v-model="form.routeAddress"
|
|
|
+ filterable
|
|
|
+ collapse-tags
|
|
|
+ placeholder="请选择"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in options"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="数据地址:" prop="fzlMx">
|
|
|
+ <el-input v-model="form.dataAddress"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数据类型:" prop="ability">
|
|
|
+ <el-input v-model="form.dataType"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="系数:" prop="ability">
|
|
|
+ <el-input v-model="form.coefficient"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="存盘周期(分钟):" prop="ability">
|
|
|
+ <el-input v-model="form.saveCycle"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态:" prop="ability">
|
|
|
+ <el-radio-group v-model="form.dataArea">
|
|
|
+ <el-radio label="1">模拟量</el-radio>
|
|
|
+ <el-radio label="2">状态量</el-radio>
|
|
|
+ <el-radio label="3">参数量</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <br />
|
|
|
+ <div style="text-align: right">
|
|
|
+ <el-button @click="closeDialog(0)">取消</el-button>
|
|
|
+ <el-button type="primary" @click="submitForm()">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+// import { useStore } from 'vuex'
|
|
|
+import { defineComponent, ref, watchEffect } from 'vue'
|
|
|
+import * as api from '@/api/siteManage/watchDog.js' //待修改
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
|
|
|
-export default {
|
|
|
- name: "DialogComponent",
|
|
|
+export default defineComponent({
|
|
|
+ name: 'DialogComponent',
|
|
|
+ emits: ['closeDialog'],
|
|
|
props: {
|
|
|
- dialogTitle: {
|
|
|
- type: String,
|
|
|
- default: "新增",
|
|
|
- },
|
|
|
- itemInfo: {
|
|
|
- type: Object,
|
|
|
- default: function () {
|
|
|
- return {};
|
|
|
- },
|
|
|
- },
|
|
|
+ flag: Boolean,
|
|
|
+ dialogTitle: String,
|
|
|
+ itemInfo: Object,
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- checked: true,
|
|
|
- showDialog: false,
|
|
|
- formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
|
|
|
- options: [
|
|
|
- {
|
|
|
- value: "选项1",
|
|
|
- label: "站点一",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项2",
|
|
|
- label: "站点二",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项3",
|
|
|
- label: "站点三",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项4",
|
|
|
- label: "站点四",
|
|
|
- },
|
|
|
- {
|
|
|
- value: "选项5",
|
|
|
- label: "站点五",
|
|
|
- },
|
|
|
- ],
|
|
|
+ setup(props, context) {
|
|
|
+ context
|
|
|
+ // const store = useStore()
|
|
|
+ const dialogVisible = ref(false)
|
|
|
+ const formInfo = ref(null)
|
|
|
+
|
|
|
+ const form = ref([])
|
|
|
+
|
|
|
+ const siteList = ref([])
|
|
|
+
|
|
|
+ // open(): Dialog弹窗打开之前做的事
|
|
|
+ const open = () => {
|
|
|
+ form.value = props.itemInfo.value
|
|
|
+ // siteList.value = store.state.siteList
|
|
|
+ console.log('props.itemInfo.value')
|
|
|
+ console.log(props.itemInfo.value)
|
|
|
+ }
|
|
|
+
|
|
|
+ const options = [
|
|
|
+ {
|
|
|
+ value: '选项1',
|
|
|
+ label: '站点一',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '选项2',
|
|
|
+ label: '站点二',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '选项3',
|
|
|
+ label: '站点三',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '选项4',
|
|
|
+ label: '站点四',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '选项5',
|
|
|
+ label: '站点五',
|
|
|
+ },
|
|
|
+ ]
|
|
|
+
|
|
|
+ // 关闭弹框
|
|
|
+ const closeDialog = () => {
|
|
|
+ context.emit('closeDialog', false)
|
|
|
+ dialogVisible.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ watchEffect((fn, options) => {
|
|
|
+ fn, options
|
|
|
+ dialogVisible.value = props.flag
|
|
|
+ })
|
|
|
+
|
|
|
+ const roleValid = (rule, value, callback) => {
|
|
|
+ rule
|
|
|
+ if (value.length === 0) {
|
|
|
+ callback(new Error('角色不能为空'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 保存-修改操作
|
|
|
+ const submitForm = () => {
|
|
|
+ formInfo.value.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ form.value.qualityAnalysis =
|
|
|
+ form.value.qualityAnalysis == true
|
|
|
+ ? (form.value.qualityAnalysis = '是')
|
|
|
+ : (form.value.qualityAnalysis = '否')
|
|
|
|
|
|
+ if (props.dialogTitle === '新增') {
|
|
|
+ api.deviceNewsAdd(form.value).then((requset) => {
|
|
|
+ if (requset.status === 'SUCCESS') {
|
|
|
+ ElMessage.success({
|
|
|
+ message: '新增成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ closeDialog()
|
|
|
+ } else {
|
|
|
+ ElMessage.error(requset.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ api.deviceNewsUpdate(form.value).then((requset) => {
|
|
|
+ if (requset.status === 'SUCCESS') {
|
|
|
+ ElMessage.success({
|
|
|
+ message: '修改成功',
|
|
|
+ type: 'success',
|
|
|
+ })
|
|
|
+ closeDialog()
|
|
|
+ } else {
|
|
|
+ ElMessage.error(requset.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ closeDialog,
|
|
|
+ dialogVisible,
|
|
|
+ options,
|
|
|
+ roleValid,
|
|
|
+ formInfo,
|
|
|
+ siteList,
|
|
|
+ form,
|
|
|
+ open,
|
|
|
+ submitForm,
|
|
|
rules: {
|
|
|
watchName: [
|
|
|
// required 是否为必填项, trigger:表单验证的触发时机,失去焦点进行验证
|
|
|
- { required: true, message: "请输入设备名称", trigger: "blur" },
|
|
|
+ { required: true, message: '请输入设备名称', trigger: 'blur' },
|
|
|
{
|
|
|
min: 3,
|
|
|
max: 6,
|
|
|
- message: "用户名长度在 3 到 6 个字符",
|
|
|
- trigger: "blur",
|
|
|
+ message: '用户名长度在 3 到 6 个字符',
|
|
|
+ trigger: 'blur',
|
|
|
},
|
|
|
],
|
|
|
watchCode: [
|
|
|
- { required: true, message: "请输入设备编号", trigger: "blur" },
|
|
|
+ { required: true, message: '请输入设备编号', trigger: 'blur' },
|
|
|
{
|
|
|
min: 3,
|
|
|
max: 6,
|
|
|
- message: "用户名长度在 3 到 6 个字符",
|
|
|
- trigger: "blur",
|
|
|
+ message: '用户名长度在 3 到 6 个字符',
|
|
|
+ trigger: 'blur',
|
|
|
},
|
|
|
],
|
|
|
routeAddress: [
|
|
|
- { required: true, message: "请选则回路表记地址", trigger: "change" },
|
|
|
-
|
|
|
+ { required: true, message: '请选则回路表记地址', trigger: 'change' },
|
|
|
],
|
|
|
ratedVoltage: [
|
|
|
- { required: true, message: '请选择站点列表', trigger: 'change'}
|
|
|
-
|
|
|
+ { required: true, message: '请选择站点列表', trigger: 'change' },
|
|
|
],
|
|
|
ratedCurrent: [
|
|
|
- { required: true, message: "请输入已选站点个数", trigger: "blur" },
|
|
|
- { trigger: "blur" },
|
|
|
+ { required: true, message: '请输入已选站点个数', trigger: 'blur' },
|
|
|
+ { trigger: 'blur' },
|
|
|
],
|
|
|
fzlMx: [
|
|
|
- { required: true, message: "请输入挂载设备个数", trigger: "blur" },
|
|
|
- { trigger: "blur" },
|
|
|
+ { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
|
|
|
+ { trigger: 'blur' },
|
|
|
],
|
|
|
},
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- roleValid(rule, value, callback) {
|
|
|
- rule
|
|
|
- if (value.length === 0) {
|
|
|
- callback(new Error("角色不能为空"));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // onSelectedDrug(event) {
|
|
|
- // this.routeAddress = event;
|
|
|
- // console.log(this.routeAddress);
|
|
|
- // },
|
|
|
- // 保存操作
|
|
|
- submitForm(formName) {
|
|
|
- const params = Object.assign(this.formInfo, {});
|
|
|
- params
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- // 走保存请求
|
|
|
- this.$message({
|
|
|
- message: "操作成功!",
|
|
|
- type: "success",
|
|
|
- });
|
|
|
- this.closeDialog(1);
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // 关闭弹框
|
|
|
- closeDialog(flag) {
|
|
|
- this.$refs["formInfo"].resetFields();
|
|
|
- this.showDialog = false;
|
|
|
- this.$emit("closeDialog", flag);
|
|
|
- },
|
|
|
+ }
|
|
|
},
|
|
|
-};
|
|
|
+})
|
|
|
</script>
|
|
|
-
|
|
|
<style scoped lang="scss">
|
|
|
.el-input,
|
|
|
.el-select {
|
|
@@ -201,9 +259,9 @@ export default {
|
|
|
|
|
|
// label样式
|
|
|
.el-form-item__label {
|
|
|
- width: 150px
|
|
|
+ width: 150px;
|
|
|
}
|
|
|
.el-form-item__content {
|
|
|
- margin-left: 150px
|
|
|
+ margin-left: 150px;
|
|
|
}
|
|
|
</style>
|