<script setup>
|
import { ref, reactive, watchEffect, computed, onMounted } from "vue";
|
|
import useStation from "@/hooks/useStationList.js";
|
const { provice, city, country, stationName,
|
proviceList, cityList, countryList, stationList,
|
getProviceList, getCityList, getCountryList, getStationList, getPowerList,
|
} = useStation();
|
|
import {
|
getPowerBrand,
|
getVoltageLevel,
|
getDevType,
|
getVoltage,
|
getBatteryBrand,
|
getPowerType,
|
getProtocol,
|
getMonVol,
|
addDev,
|
updateDev,
|
addBatt,
|
getMonCapByUid,
|
} from "@/api/station";
|
|
import powerTypes from '@/utils/const/const_powerType.js';
|
import moment from 'moment';
|
|
import useElement from "@/hooks/useElement.js";
|
const { $loading, $message, $confirm } = useElement();
|
const props = defineProps({
|
info: {
|
type: Object,
|
},
|
});
|
|
const addBinfFlag = ref(1);
|
const props1 = { value: 'id', checkStrictly: true, multiple: true };
|
const formRef = ref();
|
const areaList = ref([]);
|
const layout = {
|
gutter: 16,
|
span: 6
|
};
|
|
const addDevFlag = ref(0);
|
|
const form1 = reactive({
|
provice: provice.value,
|
city: city.value,
|
country: country.value,
|
stationName: stationName.value,
|
stationType: "",
|
longitude: 0,
|
latitude: 0,
|
powerName: "",
|
company: "",
|
powerModel: "",
|
protocol: "",
|
powerIp: "",
|
devIp: "",
|
devType: "",
|
monvolstd: '',
|
moncapstd: '',
|
monresstd: '',
|
moncount: '',
|
product: "",
|
battModel: "",
|
powerType: 1,
|
powerInuseTime: moment().format('YYYY-MM-DD'),
|
inuseTime: moment().format('YYYY-MM-DD'),
|
});
|
|
const otherIdList = ref([]);
|
const devData = reactive({
|
devType: '',
|
devIp: '',
|
});
|
|
const powerTypeList = computed(() => {
|
return Object.keys(powerTypes).map(v => ({ label: powerTypes[v], value: v * 1 }));
|
});
|
|
const validatorIp = (rule, value, callback) => {
|
const ipRegex = /^(?:(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/;
|
|
|
if (ipRegex.test(value)) {
|
// 校验密码规则是否正确
|
callback();
|
} else {
|
callback(new Error('请输入正确的IP地址'));
|
}
|
}
|
|
const rules = {
|
provice: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
city: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
country: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
stationName: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
stationType: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
],
|
powerIp: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
{
|
validator: validatorIp,
|
trigger: ["blur", "change"],
|
},
|
],
|
devIp: [
|
{
|
required: true,
|
message: "不能为空",
|
trigger: ["blur", "change"],
|
},
|
{
|
validator: validatorIp,
|
trigger: ["blur", "change"],
|
},
|
],
|
phoneNumber: [
|
{
|
validator: (rule, value, callback) => {
|
let reg = /^1\d{10}$/;
|
if (value === '' || reg.test(value)) {
|
// 校验密码规则是否正确
|
callback();
|
} else {
|
callback(new Error('请输入正确的手机号'));
|
}
|
},
|
trigger:["change", "blur"]
|
},
|
],
|
};
|
|
const uroleList = [
|
{
|
label: "普通用户",
|
value: 1,
|
},
|
{
|
label: "管理层",
|
value: 2,
|
},
|
{
|
label: "领导层",
|
value: 3,
|
},
|
{
|
label: "运维班组",
|
value: 4,
|
},
|
];
|
|
const isEdit = computed(() => !!props.info?.stationId);
|
const $emit = defineEmits(["cancel", "success"]);
|
function close() {
|
$emit("cancel");
|
}
|
|
async function update() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
let params = {};
|
|
for (let key in form1) {
|
params[key] = form1[key];
|
}
|
params.longitude = params.longitude || 0;
|
params.latitude = params.latitude || 0;
|
params.addBinfFlag = addBinfFlag.value;
|
|
// 编辑用户时, 区域中不在管理员管理内的区域要挑出来 最后更新时再追加进去
|
console.log("params update", params, "=============");
|
|
let loading = $loading();
|
updateDev(params)
|
.then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
async function onSubmit() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let params = {};
|
|
for (let key in form1) {
|
params[key] = form1[key];
|
}
|
params.longitude = params.longitude || 0;
|
params.latitude = params.latitude || 0;
|
params.addBinfFlag = addBinfFlag.value;
|
console.log("params", params, "=============");
|
|
let loading = $loading();
|
addDev(params)
|
.then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
function devChange() {
|
if (addDevFlag.value == 1) {
|
form1.devType = "";
|
form1.devIp = "";
|
} else {
|
form1.devType = devData.devType;
|
form1.devIp = devData.devIp;
|
}
|
}
|
|
async function addBattFn() {
|
let valid = await formRef.value.validate(() => { });
|
// console.log('valid', valid, '=============');
|
|
if (!valid) {
|
$message.error("表单验证失败");
|
return false;
|
}
|
|
let params = {};
|
|
for (let key in form1) {
|
params[key] = form1[key];
|
}
|
params.longitude = params.longitude || 0;
|
params.latitude = params.latitude || 0;
|
params.addBinfFlag = addBinfFlag.value;
|
console.log("params", params, "=============");
|
|
if (addDevFlag.value == 1) {
|
params.devId = undefined;
|
}
|
|
let loading = $loading();
|
addBatt(params)
|
.then((res) => {
|
let { code, data } = res;
|
if (code && data) {
|
$emit("success");
|
$message.success("操作成功");
|
} else {
|
$message.error("操作失败");
|
}
|
loading.close();
|
})
|
.catch((err) => {
|
console.log(err);
|
loading.close();
|
});
|
}
|
|
watchEffect(() => {
|
provice.value = form1.provice;
|
});
|
|
watchEffect(() => {
|
city.value = form1.city;
|
});
|
|
watchEffect(() => {
|
country.value = form1.country;
|
});
|
|
watchEffect(() => {
|
stationName.value = form1.stationName;
|
});
|
|
watchEffect(() => {
|
form1.provice = provice.value;
|
});
|
|
watchEffect(() => {
|
form1.city = city.value;
|
});
|
|
watchEffect(() => {
|
form1.country = country.value;
|
});
|
|
watchEffect(() => {
|
form1.stationName = stationName.value;
|
});
|
|
const volLevels = ref([]);
|
const powerModelList = ref([]);
|
const companyList = ref([]);
|
const protocolList = ref([]);
|
const devTypeList = ref([]);
|
const monVolList = ref([]);
|
const productList = ref([]);
|
const battModelList = ref([]);
|
const monCapList = ref([]);
|
|
// 获取标称容量
|
function getMonCapList() {
|
getMonCapByUid().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
monCapList.value = list;
|
});
|
}
|
|
// 获取电压等级
|
function getVolLevels() {
|
console.log("获取电压等级");
|
getVoltageLevel().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
volLevels.value = list;
|
});
|
}
|
|
function getPowerModelList() {
|
getPowerType().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
powerModelList.value = list;
|
});
|
}
|
|
function getCompanyList() {
|
getPowerBrand().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
companyList.value = list;
|
});
|
}
|
|
function getProtocolList() {
|
getProtocol().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
protocolList.value = list;
|
});
|
}
|
|
function getDevTypeList() {
|
getDevType().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
devTypeList.value = list;
|
});
|
}
|
|
function getMonVolList() {
|
getMonVol().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
monVolList.value = list;
|
});
|
}
|
|
function getProductList() {
|
getBatteryBrand().then((res) => {
|
let { code, data, data2 } = res;
|
let list = [];
|
if (code && data) {
|
list = data2;
|
}
|
productList.value = list;
|
});
|
}
|
|
onMounted(async () => {
|
let info = props.info;
|
getVolLevels();
|
getPowerModelList();
|
getCompanyList();
|
getProtocolList();
|
getDevTypeList();
|
getMonVolList();
|
getProductList();
|
getMonCapList();
|
|
if (info) {
|
for(let key in info) {
|
form1[key] = info[key];
|
}
|
|
addBinfFlag.value = info.stationId ? !!info.battgroupId * 1 : 1;
|
if (info.addBattFlag) {
|
if (!info.devId) {
|
addDevFlag.value = 1;
|
}
|
|
devData.devType = info.devType;
|
devData.devIp = info.devIp;
|
|
form1.moncount = '';
|
form1.monvolstd = '';
|
form1.moncapstd = '';
|
form1.monresstd = '';
|
form1.product = '';
|
form1.battModel = '';
|
|
}
|
|
await getProviceList();
|
form1.provice = info.provice;
|
await getCityList();
|
form1.city = info.city;
|
await getCountryList();
|
form1.country = info.country;
|
await getStationList();
|
form1.stationName = info.stationName;
|
|
|
|
}
|
});
|
</script>
|
|
<template>
|
<div class="">
|
<el-form ref="formRef" :model="form1" label-width="8em" :rules="rules">
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="省" prop="provice">
|
<el-select
|
v-model="form1.provice"
|
filterable
|
:disabled="isEdit"
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in proviceList"
|
:key="'list0_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="市" prop="city">
|
<el-select
|
v-model="form1.city"
|
:disabled="isEdit"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in cityList"
|
:key="'list1_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="区县" prop="country">
|
<el-select
|
v-model="form1.country"
|
:disabled="isEdit"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in countryList"
|
:key="'list2_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="机房名称" prop="stationName">
|
<el-select
|
v-model="form1.stationName"
|
:disabled="info.addBattFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in stationList"
|
:key="'list3_' + idx"
|
:label="item.stationName"
|
:value="item.stationName"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="电压等级" prop="stationType">
|
<el-select
|
v-model="form1.stationType"
|
:disabled="info.addBattFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in volLevels"
|
:key="'list4_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="经度" prop="longitude">
|
<el-input v-model="form1.longitude" :disabled="info.addBattFlag"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="纬度" prop="latitude">
|
<el-input v-model="form1.latitude" :disabled="info.addBattFlag"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="电源型号" prop="powerModel">
|
<el-select
|
v-model="form1.powerModel"
|
:disabled="info.addBattFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in powerModelList"
|
:key="'list5_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电源品牌" prop="company">
|
<el-select
|
v-model="form1.company"
|
:disabled="info.addBattFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in companyList"
|
:key="'list6_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电源协议" prop="protocol">
|
<el-select
|
v-model="form1.protocol"
|
:disabled="info.addBattFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in protocolList"
|
:key="'list7_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电源类型" prop="powerType">
|
<el-select
|
v-model="form1.powerType"
|
:disabled="info.addBattFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in powerTypeList"
|
:key="'list11_' + idx"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="电源IP" prop="powerIp">
|
<el-input v-model="form1.powerIp" :disabled="info.addBattFlag"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电源投运日期" prop="powerInuseTime">
|
<el-date-picker
|
v-model="form1.powerInuseTime"
|
:disabled="info.addBattFlag"
|
type="date"
|
size="small"
|
:clearable="false"
|
:editable="false"
|
placeholder="选择日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span" v-if="!info.addBattFlag">
|
<el-form-item label="有无电池组">
|
<el-select
|
v-model="addBinfFlag"
|
:disabled="isEdit"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
label="有电池组"
|
:value="1"
|
/>
|
<el-option
|
label="无电池组"
|
:value="0"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span" v-else>
|
<el-form-item label="设备">
|
<el-select
|
v-model="addDevFlag"
|
:disabled="!info.devId"
|
filterable
|
allow-create
|
placeholder="请选择"
|
@change="devChange"
|
style="width: 180px"
|
>
|
<el-option
|
label="创建新设备"
|
:value="1"
|
/>
|
<el-option
|
label="当前设备"
|
:value="0"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<template v-if="addBinfFlag || info.addBattFlag">
|
<el-col :span="layout.span">
|
<el-form-item label="设备型号" prop="devType">
|
<el-select
|
v-model="form1.devType"
|
:disabled="info.addBattFlag && !addDevFlag"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in devTypeList"
|
:key="'list8_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="设备IP" prop="devIp">
|
<el-input v-model="form1.devIp" :disabled="info.addBattFlag && !addDevFlag"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="单体个数" prop="moncount">
|
<el-input v-model="form1.moncount"></el-input>
|
</el-form-item>
|
</el-col>
|
</template>
|
</el-row>
|
<template v-if="addBinfFlag || info.addBattFlag">
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="标称电压" prop="monvolstd">
|
<el-select
|
v-model="form1.monvolstd"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in monVolList"
|
:key="'list9_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="标称容量" prop="moncapstd">
|
<el-select
|
v-model="form1.moncapstd"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in monCapList"
|
:key="'list11_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="标称内阻" prop="monresstd">
|
<el-input v-model="form1.monresstd"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电池品牌" prop="product">
|
<el-select
|
v-model="form1.product"
|
filterable
|
allow-create
|
placeholder="请选择"
|
style="width: 180px"
|
>
|
<el-option
|
v-for="(item, idx) in productList"
|
:key="'list10_' + idx"
|
:label="item"
|
:value="item"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="layout.gutter">
|
<el-col :span="layout.span">
|
<el-form-item label="电池型号" prop="battModel">
|
<el-input v-model="form1.battModel"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="layout.span">
|
<el-form-item label="电池投运日期" prop="inuseTime">
|
<el-date-picker
|
v-model="form1.inuseTime"
|
type="date"
|
size="small"
|
:clearable="false"
|
:editable="false"
|
placeholder="选择日期"
|
format="YYYY-MM-DD"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</template>
|
<div class="form-footer">
|
<el-button v-if="info.addBattFlag" type="primary" @click="addBattFn">添加电池组</el-button>
|
<el-button v-else-if="isEdit" type="primary" @click="update">修改</el-button>
|
<el-button v-else type="primary" @click="onSubmit">新增</el-button>
|
<el-button @click="close">取消</el-button>
|
</div>
|
</el-form>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
:deep(.select) {
|
width: 100%;
|
}
|
.form-footer {
|
padding: 10px;
|
text-align: right;
|
}
|
</style>
|
