662 lines
20 KiB
Vue
662 lines
20 KiB
Vue
<template>
|
||
<view class="updatePond">
|
||
<scroll-view :scroll-y="true" :style="{ height: '100%' }">
|
||
<view class="body">
|
||
<nut-form ref="updateRef" :rules="rule" :model-value="formData">
|
||
<nut-form-item label="鱼塘名称" prop="pondName">
|
||
<nut-input
|
||
clearable
|
||
:cursor="formData.pondName.length"
|
||
input-align="right"
|
||
v-model="formData.pondName"
|
||
type="text"
|
||
:max-length="20"
|
||
placeholder="请输入鱼塘名称"
|
||
/>
|
||
</nut-form-item>
|
||
<nut-form-item label="养殖品种" prop="fishKindIds">
|
||
<view
|
||
@click="showFish = true"
|
||
:style="{
|
||
width: '100%',
|
||
minHeight: '60px',
|
||
justifyContent: ' flex-end',
|
||
}"
|
||
:class="fishListInfo ? 'c_222 view_f' : 'c_757575 view_f'"
|
||
>
|
||
<nut-ellipsis
|
||
direction="end"
|
||
:content="fishListInfo ? fishListInfo : '请选择养殖品种'"
|
||
:rows="3"
|
||
expand-text="展开"
|
||
collapse-text="收起"
|
||
:style="{ float: 'right' }"
|
||
></nut-ellipsis>
|
||
<Right color="#979797" />
|
||
</view>
|
||
</nut-form-item>
|
||
<nut-form-item label="密度" prop="density">
|
||
<nut-input
|
||
type="digit"
|
||
clearable
|
||
:cursor="String(formData.density).length"
|
||
input-align="right"
|
||
v-model="formData.density"
|
||
placeholder="请输入密度"
|
||
>
|
||
<template #right>
|
||
<text class="c_888">尾/亩</text>
|
||
</template>
|
||
</nut-input>
|
||
</nut-form-item>
|
||
<nut-form-item label="鱼塘面积" prop="area">
|
||
<nut-input
|
||
type="digit"
|
||
clearable
|
||
input-align="right"
|
||
:cursor="String(formData.area).length"
|
||
v-model="formData.area"
|
||
placeholder="请输入鱼塘面积"
|
||
>
|
||
<template #right>
|
||
<text class="c_888">亩</text>
|
||
</template>
|
||
</nut-input>
|
||
</nut-form-item>
|
||
<nut-form-item label="投苗日期" prop="placeTime">
|
||
<nut-input
|
||
clearable
|
||
input-align="right"
|
||
v-model="formData.placeTime"
|
||
type="text"
|
||
readonly
|
||
@click="show = true"
|
||
placeholder="请选择投苗日期"
|
||
>
|
||
<template #right>
|
||
<Right color="#979797" />
|
||
</template>
|
||
</nut-input>
|
||
</nut-form-item>
|
||
</nut-form>
|
||
<nut-config-provider :theme-vars="themeVars">
|
||
<nut-cell-group>
|
||
<nut-cell title="塘口设备" is-link @click="bandDevice">
|
||
<template #desc>
|
||
<text class="c_17B4B2">选择设备</text>
|
||
</template>
|
||
</nut-cell>
|
||
<nut-cell
|
||
v-for="item in detectorList"
|
||
:key="item.id"
|
||
:style="{
|
||
padding: 'var(--nut-cell-padding, 26rpx 32rpx) !important',
|
||
}"
|
||
>
|
||
<template #title>
|
||
<span class="font_30 c_222">{{ item.deviceName }}</span>
|
||
</template>
|
||
<template #icon>
|
||
<IconFont :name="rongjieyang" />
|
||
</template>
|
||
</nut-cell>
|
||
<nut-collapse v-for="item in controlList" :key="item.id">
|
||
<nut-collapse-item :name="item.id">
|
||
<template #title>
|
||
<view class="view_f">
|
||
<IconFont
|
||
:name="kongzhiqi"
|
||
:style="{
|
||
margin: 'var(--nut-cell-default-icon-margin, 0 8rpx 0 0rpx)',
|
||
}"
|
||
/>
|
||
<text class="font_30 c_222">{{ item.deviceName }}</text>
|
||
</view>
|
||
</template>
|
||
<nut-cell-group>
|
||
<nut-cell v-for="i in item.listSwitch" :key="i.id">
|
||
<template #title>
|
||
<span class="font_30 c_222">{{ i.switchName }}</span>
|
||
</template>
|
||
<template #icon>
|
||
<IconFont :name="kaiguan" />
|
||
</template>
|
||
</nut-cell>
|
||
</nut-cell-group>
|
||
</nut-collapse-item>
|
||
</nut-collapse>
|
||
</nut-cell-group>
|
||
</nut-config-provider>
|
||
<nut-button
|
||
block
|
||
shape="square"
|
||
type="primary"
|
||
size="large"
|
||
:style="{
|
||
fontWeight: 'bold',
|
||
fontSize: '14px !important',
|
||
borderRadius: '10px',
|
||
}"
|
||
@click="save"
|
||
:loading="isLoading"
|
||
>保存</nut-button
|
||
>
|
||
<nut-button
|
||
block
|
||
shape="square"
|
||
size="large"
|
||
color="#E22323"
|
||
plain
|
||
:style="{
|
||
fontWeight: 'bold',
|
||
fontSize: '14px !important',
|
||
borderRadius: '10px',
|
||
marginTop: '20rpx',
|
||
}"
|
||
:loading="d_isLoading"
|
||
@click="delPond"
|
||
v-if="Uid == rootuserid"
|
||
>删除塘口</nut-button
|
||
>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 日期选择器 -->
|
||
<nut-popup v-model:visible="show" position="bottom">
|
||
<nut-date-picker
|
||
v-model="val"
|
||
:min-date="min"
|
||
:max-date="max"
|
||
:three-dimensional="false"
|
||
@confirm="confirm"
|
||
@cancel="cancelDate"
|
||
></nut-date-picker>
|
||
</nut-popup>
|
||
<!-- 鱼类选择器 -->
|
||
<nut-popup v-model:visible="showFish" position="bottom" :style="{ height: '50%' }">
|
||
<Fish
|
||
@cancel="cancel"
|
||
@confirm="submit"
|
||
:fishIds="formData.fishKindIds"
|
||
:style="{ marginBottom: '20px' }"
|
||
/>
|
||
</nut-popup>
|
||
<!-- 绑定设备弹框 -->
|
||
<nut-dialog v-model:visible="bandDevShow" text-align="left" no-footer>
|
||
<view class="d_body" :style="{ paddingBottom: '0px' }">
|
||
<nut-row>
|
||
<nut-col :span="24">
|
||
<view class="d_title">选择设备</view>
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<nut-divider class="divider" />
|
||
</nut-col>
|
||
<nut-col :span="24">
|
||
<next-tree
|
||
ref="qiantree"
|
||
:selectParent="false"
|
||
labelKey="deviceName"
|
||
valueKey="id"
|
||
:multiple="true"
|
||
:treeData="deviceList"
|
||
@confirm="onconfirm"
|
||
childrenKey="listSwitch"
|
||
border
|
||
@cancel="oncancel"
|
||
showChild
|
||
/>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</nut-dialog>
|
||
<!-- 弹出层提示 -->
|
||
<nut-dialog :content="msg" v-model:visible="showRes" no-footer>
|
||
<view :style="{ height: '100%' }">
|
||
<view class="d_body">
|
||
<nut-row>
|
||
<nut-col :span="24" class="d_title" :style="{ textAlign: 'center' }">
|
||
请选择鱼塘!
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
<view class="d_btn" :style="{ position: 'absolute' }">
|
||
<nut-row>
|
||
<nut-col :span="24" :style="{ border: '1px solid #eee', color: '#15BBC5' }">
|
||
<nut-button type="primary" shape="square" block @click="goHome"
|
||
>确定</nut-button
|
||
>
|
||
</nut-col>
|
||
</nut-row>
|
||
</view>
|
||
</view>
|
||
</nut-dialog>
|
||
<!-- 弹出层提示 -->
|
||
<nut-toast :msg="state.msg" v-model:visible="state.show" :type="state.type" />
|
||
</view>
|
||
</template>
|
||
<script setup lang="ts" name="UpdatePond">
|
||
import { UpdateFormType } from "./types";
|
||
import Fish from "@/components/other/fish";
|
||
import { PondUpdate, pondBaseInfo, pondDeviceInfo, PondDel, fishList } from "@/api/pond";
|
||
import { allDeviceList, bandDeviceToPond } from "@/api/device";
|
||
import { formatDate, sortByField } from "@/utils/tools";
|
||
import Taro from "@tarojs/taro";
|
||
import { IconFont, Right } from "@nutui/icons-vue-taro";
|
||
import nextTree from "@/components/tree/index";
|
||
import { stateType } from "@/utils/types";
|
||
import { imgUrl } from "@/utils/imgUrl";
|
||
definePageConfig({
|
||
navigationBarTitleText: "塘口设置",
|
||
});
|
||
const store: any = inject("store");
|
||
const kaiguan = `${imgUrl}kaiguan.png`;
|
||
const rongjieyang = `${imgUrl}rongjieyang.png`;
|
||
const kongzhiqi = `${imgUrl}kongzhiqi.png`;
|
||
// 塘口id
|
||
const instance: any = Taro.getCurrentInstance();
|
||
const id = instance.router.params.id;
|
||
const themeVars = ref({
|
||
// cellPadding: '5px 16px',
|
||
collapseItemPadding: "5px 16px",
|
||
cellBoxShadow: "0px",
|
||
collapseWrapperContentPadding: "0px 10px",
|
||
});
|
||
const formData: UpdateFormType = reactive({
|
||
id: undefined,
|
||
pondName: "",
|
||
fishKindIds: [],
|
||
area: 0,
|
||
density: 0,
|
||
placeTime: null,
|
||
});
|
||
const rule = reactive({
|
||
pondName: [{ required: true, message: "请输入鱼塘名称" }],
|
||
fishKindIds: [{ required: true, message: "请选择养殖品种", validator: kindValidator }],
|
||
});
|
||
const updateRef: any = ref(null);
|
||
const showRes = ref<boolean>(false);
|
||
const msg = ref<string>("设置成功");
|
||
/** 日期弹框相关 */
|
||
const show = ref<boolean>(false);
|
||
const min = new Date(2000, 0, 1);
|
||
const max = new Date(2100, 0, 1);
|
||
const val = ref(new Date());
|
||
|
||
const showFish = ref<boolean>(false);
|
||
const isLoading = ref<boolean>(false);
|
||
const d_isLoading = ref<boolean>(false);
|
||
const fishListInfo = ref("");
|
||
const allFishList = ref<any[]>([]);
|
||
const detectorList = ref([]);
|
||
const controlList = ref([]);
|
||
const bandDevShow = ref(false);
|
||
const bandDeviceList = ref<any[]>([]);
|
||
// 设备列表
|
||
const deviceList = ref<any[]>([]);
|
||
const state: stateType = reactive({
|
||
msg: "",
|
||
type: "text",
|
||
center: true,
|
||
show: false,
|
||
});
|
||
const Uid = Taro.getStorageSync("UserId");
|
||
const rootuserid = ref(store.getRootUserId);
|
||
/** -----------------method start----------------- */
|
||
Taro.useDidShow(() => {
|
||
// 先加载鱼类列表，然后再加载塔口信息
|
||
getAllFishList().then(() => {
|
||
info();
|
||
});
|
||
getDeviceList();
|
||
getDevicesList();
|
||
});
|
||
// 校验
|
||
function kindValidator(val) {
|
||
if (val.length > 0) {
|
||
return Promise.resolve();
|
||
} else {
|
||
return Promise.reject("请选择养殖品种");
|
||
}
|
||
}
|
||
// 取消选择鱼类
|
||
function cancel() {
|
||
showFish.value = false;
|
||
// fishListInfo.value = "";
|
||
// formData.fishKindIds = [];
|
||
}
|
||
// 确定选择鱼类
|
||
function submit(e) {
|
||
showFish.value = false;
|
||
formData.fishKindIds = e ? e.res : [];
|
||
fishListInfo.value = e ? e.fishInfo : "";
|
||
}
|
||
// 确定日期
|
||
function confirm(e) {
|
||
const s = e.selectedValue;
|
||
formData.placeTime = s[0] + "-" + s[1] + "-" + s[2];
|
||
val.value = new Date(s[0], s[1] - 1 > 0 ? s[1] - 1 : 0, s[2]);
|
||
show.value = false;
|
||
}
|
||
// 保存
|
||
function save() {
|
||
updateRef.value?.validate().then(({ valid, errors }) => {
|
||
if (valid) {
|
||
if (formData.id) {
|
||
// 将fishKindIds数组转换为字符串格式 "[1,2]"
|
||
let fishKindIdsStr = '';
|
||
if (Array.isArray(formData.fishKindIds) && formData.fishKindIds.length > 0) {
|
||
// 转换为数字数组，然后转JSON字符串
|
||
const fishIds = formData.fishKindIds.map(id => Number(id));
|
||
fishKindIdsStr = JSON.stringify(fishIds);
|
||
}
|
||
|
||
const data = {
|
||
id: formData.id,
|
||
pondName: formData.pondName,
|
||
fishKindIds: fishKindIdsStr, // 使用字符串格式
|
||
area: formData.area,
|
||
density: formData.density,
|
||
placeTime: formData.placeTime ? formData.placeTime : null,
|
||
};
|
||
console.log('保存数据', data);
|
||
isLoading.value = true;
|
||
PondUpdate(data)
|
||
.then((res: any) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "保存成功";
|
||
// 延迟返回首页，让用户看到成功提示
|
||
setTimeout(() => {
|
||
Taro.switchTab({
|
||
url: "/pages/main/home",
|
||
});
|
||
}, 1500);
|
||
}
|
||
})
|
||
.finally(() => {
|
||
isLoading.value = false;
|
||
});
|
||
}
|
||
} else {
|
||
console.warn("error:", errors);
|
||
}
|
||
});
|
||
}
|
||
// 获取所有鱼类列表
|
||
function getAllFishList() {
|
||
return fishList().then((res: any) => {
|
||
console.log('鱼类列表接口返回', res);
|
||
// 处理不同的返回格式
|
||
if (res.rows) {
|
||
// 直接返回 {total, rows} 格式
|
||
allFishList.value = res.rows || [];
|
||
console.log('鱼类列表加载完成(rows)', allFishList.value);
|
||
} else if (res.code == 200 && res.data) {
|
||
allFishList.value = res.data || [];
|
||
console.log('鱼类列表加载完成(code)', allFishList.value);
|
||
} else if (res.statusCode == 200 && res.data) {
|
||
allFishList.value = res.data || [];
|
||
console.log('鱼类列表加载完成(statusCode)', allFishList.value);
|
||
} else {
|
||
console.error('鱼类列表加载失败', res);
|
||
}
|
||
});
|
||
}
|
||
// 根据鱼类ID获取鱼类名称
|
||
function getFishNames(fishIds: any[]) {
|
||
const names: string[] = [];
|
||
console.log('查找鱼类名称', { fishIds, allFishList: allFishList.value });
|
||
fishIds.forEach((id: any) => {
|
||
const fish = allFishList.value.find((f: any) => f.id == id || f.id == String(id));
|
||
if (fish) {
|
||
names.push(fish.fishName);
|
||
}
|
||
});
|
||
console.log('鱼类名称结果', names.join("，"));
|
||
return names.join("，");
|
||
}
|
||
// 查看鱼塘详情
|
||
function info() {
|
||
if (!id) {
|
||
// 错误提示
|
||
msg.value = "请选择鱼塘";
|
||
showRes.value = true;
|
||
return;
|
||
}
|
||
pondBaseInfo({ id }).then((res: any) => {
|
||
if (res.code == 200) {
|
||
formData.id = res.data.id;
|
||
formData.pondName = res.data.pondName;
|
||
formData.area = res.data.area;
|
||
formData.density = res.data.density;
|
||
|
||
// 解析fishKindIds（后端返回的是字符串）
|
||
let fishIds = [];
|
||
try {
|
||
if (typeof res.data.fishKindIds === 'string') {
|
||
fishIds = JSON.parse(res.data.fishKindIds);
|
||
} else if (Array.isArray(res.data.fishKindIds)) {
|
||
fishIds = res.data.fishKindIds;
|
||
}
|
||
} catch (e) {
|
||
console.error('解析fishKindIds失败', e);
|
||
}
|
||
formData.fishKindIds = fishIds.map(id => String(id));
|
||
|
||
// 根据ID查找鱼类名称
|
||
fishListInfo.value = getFishNames(fishIds);
|
||
|
||
// 时间日期格式化
|
||
if (res.data.placeTime) {
|
||
val.value = new Date(res.data.placeTime);
|
||
formData.placeTime = formatDate(val.value);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
// 返回首页
|
||
function goHome() {
|
||
Taro.switchTab({
|
||
url: "/pages/main/home",
|
||
});
|
||
}
|
||
// 弹出绑定设备列表
|
||
function bandDevice() {
|
||
if (detectorList.value.length == 0 && controlList.value.length == 0) {
|
||
state.show = true;
|
||
state.msg = "请先添加设备";
|
||
} else {
|
||
bandDevShow.value = true;
|
||
}
|
||
}
|
||
// 获取塘口下的设备列表
|
||
function getDeviceList() {
|
||
// 查询塘口下设备列表
|
||
pondDeviceInfo({ id }).then((res: any) => {
|
||
if (res.code == 200) {
|
||
detectorList.value = res.data.listDetector;
|
||
controlList.value = res.data.listController;
|
||
}
|
||
});
|
||
}
|
||
// 设备列表
|
||
function getDevicesList() {
|
||
allDeviceList({ type: 1 }).then((res: any) => {
|
||
if (res.code == 200) {
|
||
res.data.forEach((r: any) => {
|
||
r.open = true;
|
||
r.disabled = false;
|
||
r.checked = false;
|
||
// 判断是否在当前选中的港口id
|
||
if (r.pondInfo) {
|
||
if (id == r.pondInfo.id) {
|
||
r.checked = true;
|
||
} else {
|
||
r.disabled = true;
|
||
}
|
||
}
|
||
if (r.deviceType == 2) {
|
||
r.id = undefined;
|
||
// r.id = r.deviceName;
|
||
}
|
||
if (r.listSwitch && r.listSwitch.length > 0) {
|
||
r.listSwitch.forEach((rr) => {
|
||
rr.deviceName = rr.switchName;
|
||
rr.disabled = false;
|
||
rr.checked = false;
|
||
// 判断是否在当前选中的港口id
|
||
if (rr.pondInfo) {
|
||
if (id == rr.pondInfo.id) {
|
||
rr.checked = true;
|
||
} else {
|
||
rr.disabled = true;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
const ids: any = [];
|
||
res.data.forEach((device, i) => {
|
||
if (device.deviceType === 2 && device.isOxygenUsed) {
|
||
ids.push(i);
|
||
}
|
||
});
|
||
if (ids.length > 0) {
|
||
ids.forEach((i) => {
|
||
let newDevice = { ...res.data[i], deviceType: 1, listSwitch: [] }; // 修改deviceType并清空listSwitch
|
||
newDevice.id = newDevice.kzId;
|
||
res.data.push(newDevice);
|
||
});
|
||
}
|
||
res.data.forEach((r) => {
|
||
r.open = true;
|
||
r.disabled = false;
|
||
r.checked = false;
|
||
// 判断是否在当前选中的港口id
|
||
if (r.pondInfo) {
|
||
if (id == r.pondInfo.id) {
|
||
r.checked = true;
|
||
} else {
|
||
r.disabled = true;
|
||
}
|
||
}
|
||
});
|
||
res.data.sort(sortByField("deviceType", true));
|
||
deviceList.value = res.data;
|
||
}
|
||
});
|
||
}
|
||
// 取消绑定设备选择
|
||
function oncancel() {
|
||
bandDevShow.value = false;
|
||
}
|
||
// 确定选择绑定的设备
|
||
function onconfirm(list) {
|
||
bandDeviceList.value = list.list;
|
||
const listDetectorId: any = [];
|
||
const listSwitchId: any = [];
|
||
list.list.forEach((res) => {
|
||
if (res.source.deviceType) {
|
||
if (res.source.id) {
|
||
listDetectorId.push(res.source.id);
|
||
}
|
||
} else {
|
||
listSwitchId.push(res.source.id);
|
||
}
|
||
});
|
||
// 确定提示框
|
||
Taro.showModal({
|
||
title: "提示",
|
||
content: "确认绑定选中的设备？",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
const data = {
|
||
pondId: id,
|
||
listDetectorId,
|
||
listSwitchId,
|
||
};
|
||
bandDeviceToPond(data)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "绑定成功";
|
||
getDeviceList();
|
||
}
|
||
})
|
||
.finally(() => {
|
||
bandDevShow.value = false;
|
||
});
|
||
} else if (res.cancel) {
|
||
bandDevShow.value = false;
|
||
}
|
||
},
|
||
});
|
||
}
|
||
// 删除塘口
|
||
function delPond() {
|
||
let msg = "确认删除塘口？";
|
||
let title = "提示";
|
||
if (detectorList.value.length == 0 && controlList.value.length == 0) {
|
||
msg = "确认删除塘口？";
|
||
} else {
|
||
title = "提示！！！";
|
||
msg = "塘口存在设备，确认要删除塘口？";
|
||
}
|
||
Taro.showModal({
|
||
title: title,
|
||
content: msg,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
d_isLoading.value = true;
|
||
PondDel({ id })
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
state.show = true;
|
||
state.msg = "删除成功";
|
||
// 返回首页
|
||
Taro.switchTab({
|
||
url: "/pages/main/home",
|
||
});
|
||
}
|
||
})
|
||
.finally(() => {
|
||
d_isLoading.value = false;
|
||
});
|
||
} else if (res.cancel) {
|
||
console.log("用户点击取消");
|
||
}
|
||
},
|
||
});
|
||
}
|
||
// 取消日期选择
|
||
function cancelDate() {
|
||
formData.placeTime = null;
|
||
show.value = false;
|
||
}
|
||
/** -----------------method end------------------- */
|
||
</script>
|
||
<style lang="scss">
|
||
.updatePond {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url("https://www.yuceyun.cn/wechat/bg.jpg");
|
||
background-color: #e5ebed;
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: fixed;
|
||
margin: 0;
|
||
|
||
.body {
|
||
padding: 20px;
|
||
}
|
||
|
||
.nut-dialog {
|
||
padding: 0;
|
||
}
|
||
|
||
.nut-dialog__content {
|
||
margin: 0;
|
||
max-height: 100%;
|
||
}
|
||
}
|
||
</style>
|