<template>
|
<div class="main">
|
<div class="main_header">
|
<div class="header_item">
|
<el-button class="search_btn" v-if="showButton('insert')" icon="el-icon-plus" @click="propInsert()">新增</el-button>
|
</div>
|
</div>
|
<div class="main_content cistern_content" v-loading="loading">
|
<div
|
class="cistern_item"
|
v-for="item in cisternList"
|
:key="item.id">
|
<div class="cistern_item_header">
|
<div>{{item.waterCultivatedName}}</div>
|
<div class="cistern_item_button">
|
<el-button class="table_btn" size="mini" icon="el-icon-edit-outline" v-if="showButton('update')" @click="propUpdate(item)">修改</el-button>
|
<el-button class="delete_btn" size="mini" icon="el-icon-delete" v-if="showButton('delete')" @click="deleteInfo(item)">删除</el-button>
|
</div>
|
</div>
|
<div class="cistern_item_content">
|
<div class="item_content_img" @click="propDetails(item)">
|
<img src="../../assets/water_icon.png" width="100%" height="100%">
|
</div>
|
<div class="item_content_info">
|
<div class="item_content_value">
|
<div style="padding: 10px 0">
|
<div>
|
<span>养护中管片：</span>
|
<span class="pipe_count">{{item.pipeCount}}</span>
|
<span style="font-size: 16px"> 环</span>
|
</div>
|
</div>
|
</div>
|
<div class="item_content_title">实时监控：</div>
|
<div class="item_content_value item_content_device">
|
<div
|
class="device_item"
|
v-for="device in item.temList"
|
:key="device.deviceId">
|
<div>{{device.deviceName}}</div>
|
<div class="pipe_count pipe_temp">
|
{{device.tem}}
|
<span style="font-size: 16px">℃</span>
|
</div>
|
<div class="pipe_count pipe_temp">
|
<span style="font-size: 16px">PH:</span>
|
{{device.ph}}
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<el-dialog
|
class="prop_dialog"
|
:title="asyncTitle ? '新增水养池' : '修改水养池信息'"
|
:visible.sync="asyncCistern"
|
width="35%">
|
<el-form ref="form" :model="formCistern" :rules="rulesCistern" label-width="auto" class="rule_form">
|
<el-form-item label="水养池名称：" prop="waterCultivatedName">
|
<el-input v-model="formCistern.waterCultivatedName" clearable placeholder="请输入水养池名称"></el-input>
|
</el-form-item>
|
<el-form-item label="最大容量：" prop="maxSize">
|
<el-input v-model="formCistern.maxSize" clearable placeholder="请输入最大容量"></el-input>
|
</el-form-item>
|
<el-form-item label="温度采集设备：" prop="deviceList">
|
<el-select v-model="formCistern.deviceList" multiple clearable placeholder="请选择采集设备">
|
<el-option
|
v-for="item in deviceData"
|
:key="item.deviceId"
|
:label="item.deviceName"
|
:value="item.deviceId">
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="asyncCistern = false">取 消</el-button>
|
<el-button @click="asyncTitle ? submitInsertForm() :submitUpdateForm()">确 定</el-button>
|
</div>
|
</el-dialog>
|
<!-- 详情 -->
|
<el-dialog
|
class="prop_dialog"
|
title="详情"
|
:visible.sync="asyncDetails"
|
width="70%">
|
<div class="prop_details">
|
<el-tabs v-model="activeName">
|
<el-tab-pane label="水养池实时监控" name="first"></el-tab-pane>
|
<el-tab-pane label="水养池出入记录" name="second"></el-tab-pane>
|
</el-tabs>
|
<div class="prop_details_content">
|
<component :water-id="waterCultivatedId" :is="activeName === 'first' ? 'MonitoringIndex' : 'RecordIndex'"></component>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { buttonPinia } from '../../pinia';
|
import { throttle } from '../../plugins/public';
|
import MonitoringIndex from './components/MonitoringIndex.vue'; // 实时监控
|
import RecordIndex from './components/RecordIndex.vue'; // 出入记录
|
export default {
|
components: {
|
MonitoringIndex,
|
RecordIndex
|
},
|
data() {
|
return {
|
total: 0,
|
pageNum: 1,
|
pageSize: 100000,
|
loading: false,
|
cisternList: [], // 水养池信息
|
asyncTitle: true, // true 新增水养池 false 修改水养池信息
|
asyncCistern: false,
|
formCistern: {
|
deviceList: []
|
}, // 表单信息
|
rulesCistern: {
|
waterCultivatedName: [{
|
required: true,
|
message: '请输入水养池名称',
|
trigger: 'blur'
|
}],
|
maxSize: [{
|
required: true,
|
message: '请输入最大容量',
|
trigger: 'blur'
|
}],
|
deviceList: [{
|
required: true,
|
message: '请选择采集设备',
|
trigger: ['blur', 'change']
|
}]
|
}, // 表单校验信息
|
deviceData: [], // 设备信息
|
waterCultivatedId: '', // 水养池编号
|
asyncDetails: false, // 详情弹窗
|
activeName: ''
|
}
|
},
|
mounted() {
|
this.searchCisternList();
|
},
|
methods: {
|
// 获取全部采集设备信息
|
async getAllDeviceData() {
|
const { data } = await this.$api.DuctpiecePLM.getAllDeviceInfo({
|
deviceType: '02195c7bba9a8b59dbc66452'
|
});
|
this.deviceData = data;
|
},
|
// 查询水养池信息
|
searchCisternList() {
|
this.loading = true;
|
this.cisternList = [];
|
this.$api.DuctpiecePLM.searchCisternList({
|
pageNum: this.pageNum,
|
pageSize: this.pageSize
|
}).then((res) => {
|
if(res.success) {
|
this.total = res.data.total;
|
this.cisternList = res.data.list.map(item => {
|
item.temList = item.temList.map(its => {
|
its.ph = its.ph.toFixed(1);
|
its.tem = its.tem.toFixed(1);
|
// its.ph = (Math.floor(its.ph * 10)) / 10;
|
// its.tem = (Math.floor(its.tem * 10)) / 10;
|
return its;
|
})
|
return item;
|
});
|
}
|
this.loading = false;
|
}).catch(() => {
|
this.loading = false;
|
});
|
},
|
// 打开添加信息
|
propInsert() {
|
this.asyncTitle = true;
|
this.asyncCistern = true;
|
this.getAllDeviceData();
|
},
|
// 打开修改信息
|
propUpdate(row) {
|
this.asyncTitle = false;
|
this.asyncCistern = true;
|
this.getAllDeviceData();
|
this.$set(this.formCistern, 'waterCultivatedId', row.waterCultivatedId);
|
this.$set(this.formCistern, 'waterCultivatedName', row.waterCultivatedName);
|
this.$set(this.formCistern, 'maxSize', row.maxSize);
|
this.$set(this.formCistern, 'deviceList', row.temList.map(item => item.deviceId));
|
},
|
// 删除水养池信息
|
deleteInfo(row) {
|
this.$confirm("该操作将删除该水养池信息，是否继续删除?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$api.DuctpiecePLM.deleteCisternInfo({
|
waterCultivatedId: row.waterCultivatedId
|
}).then(res => {
|
if(res.success) {
|
this.searchCisternList(true);
|
this.$message.success("删除成功！");
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
})
|
.catch(() => {
|
this.$message.warning("您已取消");
|
})
|
},
|
// 查看详情信息
|
propDetails(item) {
|
this.activeName = 'first';
|
this.waterCultivatedId = item.waterCultivatedId;
|
this.asyncDetails = true;
|
},
|
// 提交添加信息
|
submitInsertForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formCistern);
|
params.deviceList = params.deviceList.map(item => {
|
return {
|
deviceId: item
|
}
|
});
|
this.$api.DuctpiecePLM.insertCisternInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncCistern = false;
|
this.searchCisternList();
|
this.$message.success('添加成功！');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 提交修改信息
|
submitUpdateForm: throttle(function() {
|
this.$refs.form.validate((valid) => {
|
if(valid) {
|
const params = Object.assign({}, this.formCistern);
|
params.deviceList = params.deviceList.map(item => {
|
return {
|
deviceId: item
|
}
|
});
|
this.$api.DuctpiecePLM.insertCisternInfo(params).then((res) => {
|
if(res.success) {
|
this.asyncCistern = false;
|
this.searchCisternList();
|
this.$message.success('修改成功！');
|
} else {
|
this.$message.warning(res.statusMsg);
|
}
|
})
|
}
|
})
|
}, 3000),
|
// 判断按钮权限信息
|
showButton(str) {
|
const pinia = buttonPinia();
|
return pinia.$state.buttonInfo.includes(str);
|
}
|
},
|
watch: {
|
asyncCistern(bol) {
|
if(!bol) {
|
this.formCistern = {
|
deviceList: []
|
};
|
this.$refs.form.resetFields();
|
}
|
},
|
asyncDetails(bol) {
|
if(!bol) {
|
this.activeName = '';
|
this.waterCultivatedId = '';
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/style/layout-main.scss';
|
|
.main_header {
|
justify-content: flex-end;
|
}
|
|
.cistern_content {
|
display: flex;
|
flex-wrap: wrap;
|
align-content: flex-start;
|
justify-content: flex-start;
|
flex: 1;
|
overflow-y: auto !important;
|
|
.cistern_item {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
margin: 0 10px;
|
margin-bottom: 20px;
|
width: calc((100% - 60px) / 3);
|
height: 275px;
|
background: #031A46;
|
box-shadow: 0 0 8px 0 #0c4f79;
|
|
.cistern_item_header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 15px;
|
color: #39B5FE;
|
font-size: 20px;
|
background: #13497E;
|
border-radius: 6px 6px 0 0;
|
}
|
|
|
.cistern_item_button {
|
.delete {
|
color: #F42829;
|
|
&:hover {
|
color: #F76F70;
|
}
|
}
|
|
.line::before {
|
background: #0F94AC;
|
}
|
}
|
|
.cistern_item_content {
|
display: flex;
|
flex: 1;
|
align-items: center;
|
justify-content: space-between;
|
padding: 0 20px;
|
color: #fff;
|
|
.item_content_img {
|
// margin: 60px 0 30px 20px;
|
width: 120px;
|
height: 120px;
|
cursor: pointer;
|
}
|
|
.item_content_info {
|
display: flex;
|
flex-direction: column;
|
justify-items: flex-start;
|
width: calc(100% - 150px);
|
}
|
|
.item_content_title {
|
color: #18F6F8;
|
font-size: 20px;
|
}
|
|
.item_content_value {
|
display: flex;
|
justify-content: flex-start;
|
|
.pipe_count {
|
padding: 5px 0;
|
color: #18F6F8;
|
font-size: 28px;
|
}
|
|
.pipe_temp {
|
font-size: 18px;
|
}
|
}
|
|
.item_content_device {
|
justify-content: space-between;
|
overflow-x: auto;
|
|
&::-webkit-scrollbar {
|
height: 6px;
|
}
|
|
&::-webkit-scrollbar-thumb {
|
border-radius: 10px;
|
box-shadow: inset 0 0 5px transparent;
|
background: #305375;
|
}
|
|
&::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 5px transparent;
|
border-radius: 10px;
|
background: #082F57;
|
}
|
|
.device_item {
|
padding: 10px 0;
|
margin: 0 10px;
|
}
|
}
|
}
|
}
|
}
|
|
.prop_details {
|
width: 100%;
|
height: 65vh;
|
|
.prop_details_content {
|
position: relative;
|
height: 90%;
|
}
|
}
|
</style>
|
