panyuyi
4 months ago
17 changed files with 1840 additions and 843 deletions
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,205 @@ |
|||
<template> |
|||
<div class="form-comp"> |
|||
<el-form |
|||
:disabled="disabled" |
|||
ref="formRef" |
|||
:model="formData" |
|||
label-position="right" |
|||
:rules="rules" |
|||
label-width="120px" |
|||
> |
|||
<el-form-item |
|||
:label="item.label" |
|||
v-for="item in formItems" |
|||
:key="item.key" |
|||
:prop="item.key" |
|||
> |
|||
<!-- 普通输入框 --> |
|||
<el-input |
|||
:disabled="item.disabled" |
|||
class="input-w" |
|||
v-if="item.type === 'input'" |
|||
v-model="formData[item.key]" |
|||
:placeholder="item.placeholder" |
|||
> |
|||
<template slot="append" v-if="item.unit || item.unitHtml"> |
|||
<div v-if="item.unitHtml" v-html="item.unitHtml"></div> |
|||
<span v-else>{{ item.unit }}</span> |
|||
</template> |
|||
</el-input> |
|||
<template v-else-if="item.type === 'selectPerson'"> |
|||
<el-select |
|||
class="input-w" |
|||
v-model="formData.tempUserList" |
|||
:placeholder="item.placeholder" |
|||
:multiple-limit="item.max" |
|||
multiple |
|||
filterable |
|||
remote |
|||
reserve-keyword |
|||
:remote-method="remoteMethod" |
|||
@change="handleChangeUserList" |
|||
> |
|||
<el-option |
|||
v-for="option in userList" |
|||
:key="option.id" |
|||
:label="option.nickName" |
|||
:value="option.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-checkbox-group |
|||
style="margin-left: 12px; display: inline-block" |
|||
v-model="formData.msgType" |
|||
> |
|||
<el-checkbox label="SITE_MSG">站内信通知</el-checkbox> |
|||
<el-checkbox label="SMS_MSG">短信通知</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
<template v-else-if="item.type === 'rainCheckbox'"> |
|||
<el-checkbox-group v-model="formData[item.key]"> |
|||
<el-checkbox label="1">小雨</el-checkbox> |
|||
<el-checkbox label="2">中雨</el-checkbox> |
|||
<el-checkbox label="3">大雨</el-checkbox> |
|||
<el-checkbox label="4">暴雨</el-checkbox> |
|||
<el-checkbox label="5">大暴雨</el-checkbox> |
|||
<el-checkbox label="6">特大暴雨</el-checkbox> |
|||
</el-checkbox-group> |
|||
</template> |
|||
<template v-else-if="item.type === 'noticeInterval'"> |
|||
<el-input |
|||
class="input-w" |
|||
v-model="formData[item.key]" |
|||
:placeholder="item.placeholder" |
|||
> |
|||
</el-input> |
|||
<el-select |
|||
style="width: 80px; margin-left: 12px" |
|||
v-model="formData.warnTimeUnit" |
|||
> |
|||
<el-option label="分钟" value="1"></el-option> |
|||
<el-option label="秒" value="2"></el-option> |
|||
<el-option label="小时" value="3"></el-option> |
|||
</el-select> |
|||
<el-tooltip |
|||
style="margin-left: 12px" |
|||
effect="dark" |
|||
content="" |
|||
placement="right" |
|||
> |
|||
<div style="max-width: 300px" slot="content"> |
|||
a.默认执行规则：执行数据对比后，触发预警值后默认执行一次告警通知，单次执行；<br /> |
|||
b.设置通知间隔：最新一条预警触发后，执行通知间隔条件，循环执行。关闭本次告警循环执行，需在安全运行监测/水库信息/[监测告警] |
|||
[解除预警] 进行操作。 |
|||
</div> |
|||
<i class="el-icon-question"></i> |
|||
</el-tooltip> |
|||
</template> |
|||
<el-input |
|||
type="textarea" |
|||
style="max-width: 720px" |
|||
v-else-if="item.type === 'textarea'" |
|||
v-model="formData[item.key]" |
|||
maxlength="300" |
|||
:rows="5" |
|||
show-word-limit |
|||
></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="flex justify-end mt-16"> |
|||
<el-button :disabled="disabled" type="primary" @click="submit" |
|||
>保存</el-button |
|||
> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { listUser } from "@/api/system/user"; |
|||
|
|||
export default { |
|||
props: { |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
formData: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
rules: { |
|||
type: Object, |
|||
default: () => ({}), |
|||
}, |
|||
formItems: { |
|||
type: Array, |
|||
default: () => [], |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
userList: [], |
|||
}; |
|||
}, |
|||
created() {}, |
|||
methods: { |
|||
// 获取人员列表信息 |
|||
searchUser(e) { |
|||
listUser({ |
|||
data: { |
|||
timeView: { |
|||
timeField: "create_time", |
|||
}, |
|||
}, |
|||
cv: { |
|||
name: "nickName", |
|||
type: "like", |
|||
value: e, |
|||
}, |
|||
pageSize: 100, |
|||
pageNum: 1, |
|||
}).then((res) => { |
|||
this.userList = res.records || []; |
|||
}); |
|||
}, |
|||
remoteMethod(query) { |
|||
this.searchUser(query); |
|||
}, |
|||
handleChangeUserList(ids) { |
|||
console.log("handleChangeUserList >>>>> ", ids); |
|||
if (ids.length) { |
|||
let currentUer = this.userList.filter((item) => ids.includes(item.id)); |
|||
if ( |
|||
this.formData.warnOperator.filter((item) => ids.includes(item.id)) |
|||
.length === 0 |
|||
) { |
|||
this.formData.warnOperator.push(...currentUer); |
|||
} |
|||
// 过滤掉ids中不存在的用户 |
|||
this.formData.warnOperator = this.formData.warnOperator.filter((item) => |
|||
ids.includes(item.id) |
|||
); |
|||
} else { |
|||
this.formData.tempUserList = []; |
|||
this.formData.warnOperator = []; |
|||
} |
|||
}, |
|||
|
|||
submit() { |
|||
console.log("提交数据 >>> ", this.formData); |
|||
this.$refs.formRef.validate((valid) => { |
|||
if (valid) { |
|||
console.log("提交通过 >>>>> ", this.formData); |
|||
this.$emit("submit", this.formData); |
|||
// this.$refs.formRef.resetFields(); |
|||
} |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.form-comp { |
|||
.input-w { |
|||
width: 360px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,494 @@ |
|||
// 表单配置
|
|||
export const formConfig = { |
|||
// 水情监测
|
|||
waterCase: { |
|||
formData: { |
|||
warnType: '预警水位监测', |
|||
mpType: 'HMD007', |
|||
typeValue: '', |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请输入设置预警值', trigger: 'blur' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'input', |
|||
placeholder: '请输入设置预警值', |
|||
unit: '/m' |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
// 降雨监测
|
|||
rainCase: { |
|||
formData: { |
|||
warnType: '预警日降雨量监测', |
|||
mpType: 'HMD001', |
|||
typeValue: [], |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请选择设置预警值', trigger: 'change' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'rainCheckbox', |
|||
placeholder: '请选择设置预警值', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
// 渗流监测
|
|||
vadoseCase: { |
|||
formData: { |
|||
warnType: '预警渗流量监测', |
|||
mpType: 'DSM19', |
|||
typeValue: '', |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请选择设置预警值', trigger: 'change' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'input', |
|||
placeholder: '示例：100', |
|||
unit: 'L/s' |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
// 变形监测
|
|||
distortedCase: { |
|||
formData: { |
|||
warnType: '预警裂缝开合度', |
|||
mpType: 'DSM04', |
|||
typeValue: '', |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请选择设置预警值', trigger: 'change' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'input', |
|||
placeholder: '示例：100', |
|||
unit: 'mm' |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
// 应力监测
|
|||
stressCase: { |
|||
formData: { |
|||
warnType: '预警应力监测', |
|||
mpType: 'DSM05', |
|||
typeValue: '', |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请选择设置预警值', trigger: 'change' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'input', |
|||
placeholder: '示例：100', |
|||
unit: 'MPa' |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
// 应变监测
|
|||
strainCase: { |
|||
formData: { |
|||
warnType: '预警应变监测', |
|||
mpType: 'DSM06', |
|||
typeValue: '', |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请选择设置预警值', trigger: 'change' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'input', |
|||
placeholder: '示例：100', |
|||
unit: '10^6', |
|||
unitHtml: '10<sup>6</sup>' |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
// 水利学量监测
|
|||
wccmCase: { |
|||
formData: { |
|||
warnType: '预警入库流量监测', |
|||
mpType: 'DSM07', |
|||
typeValue: '', |
|||
warnOperators: [], |
|||
msgType: ['SITE_MSG'], |
|||
warnInterval: '', |
|||
warnTimeUnit: '1', |
|||
msgTemplate: '{通知人name}同志，现发生【水库名称】【测站点编码】{预警类型name}，预警数值【监测值、监测日期时间】，请您严格履行责任人防汛职责，（核对水库数据，提交相关水行政主管单位、联系仪器厂商校准仪器），保证水库数据准确。【广东省水利厅】' |
|||
}, |
|||
rules:{ |
|||
warnType: [ |
|||
{ required: true, message: '请输入预警类型', trigger: 'blur' } |
|||
], |
|||
typeValue: [ |
|||
{ required: true, message: '请选择设置预警值', trigger: 'change' } |
|||
], |
|||
warnOperators: [ |
|||
{ required: true, message: '请选择预警通知人', trigger: 'change' } |
|||
], |
|||
warnInterval: [ |
|||
{ required: false, message: '请选择预警通知间隔', trigger: 'change' } |
|||
], |
|||
msgTemplate: [ |
|||
{ required: false, message: '请输入通知模板', trigger: 'blur' } |
|||
] |
|||
}, |
|||
formItems: [ |
|||
{ |
|||
label: '预警类型', |
|||
disabled: true, |
|||
key: 'warnType', |
|||
type: 'input', |
|||
placeholder: '请输入预警类型', |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '设置预警值', |
|||
key: 'typeValue', |
|||
type: 'input', |
|||
placeholder: '示例：100', |
|||
unit: '10³/s' |
|||
}, |
|||
{ |
|||
label: '预警通知人', |
|||
key: 'warnOperators', |
|||
type: 'selectPerson', |
|||
placeholder: '请选择预警通知人', |
|||
options: [], |
|||
max: 3, |
|||
unit: null |
|||
}, |
|||
{ |
|||
label: '预警通知间隔', |
|||
key: 'warnInterval', |
|||
type: 'noticeInterval', |
|||
placeholder: '请选择预警通知间隔', |
|||
unit: null, |
|||
}, |
|||
{ |
|||
label: '通知模板', |
|||
key: 'msgTemplate', |
|||
type: 'textarea', |
|||
placeholder: '请输入通知模板', |
|||
unit: null |
|||
} |
|||
] |
|||
}, |
|||
} |
|||
@ -1,229 +0,0 @@ |
|||
<!-- 实时监测 --> |
|||
<template> |
|||
<div class="real-time-monitor-page"> |
|||
<el-tabs v-model="activeName"> |
|||
<el-tab-pane label="过程线分析" name="1"> |
|||
<div class="flex items-center"> |
|||
<div> |
|||
开始日期： |
|||
<el-date-picker |
|||
v-model="paramsData.startDate" |
|||
type="date" |
|||
:picker-options="{ |
|||
disabledDate: filterStartDate, |
|||
}" |
|||
placeholder="选择日期" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
<div class="ml-8"> |
|||
结束日期： |
|||
<el-date-picker |
|||
v-model="paramsData.endDate" |
|||
type="date" |
|||
:picker-options="{ |
|||
disabledDate: filterEndDate, |
|||
}" |
|||
placeholder="选择日期" |
|||
> |
|||
</el-date-picker> |
|||
</div> |
|||
<el-button type="primary" class="!ml-16" @click="handleSearch" |
|||
>查询</el-button |
|||
> |
|||
<el-button @click="handleReset">重置</el-button> |
|||
</div> |
|||
|
|||
<div class="mt-12 flex content-box"> |
|||
<div class="tree-box"> |
|||
<el-input placeholder="输入关键字进行过滤" v-model="filterText"> |
|||
</el-input> |
|||
<el-tree |
|||
class="filter-tree" |
|||
:data="treeData" |
|||
:props="defaultProps" |
|||
default-expand-all |
|||
:filter-node-method="filterNode" |
|||
@node-click="handleClickTreeNode" |
|||
ref="tree" |
|||
> |
|||
</el-tree> |
|||
</div> |
|||
<div class="echarts-box"> |
|||
<div class="title">统计图</div> |
|||
<div ref="echartsRef" class="echart-dom"></div> |
|||
</div> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import * as echarts from "echarts"; |
|||
import { initLineOptions, doubleYAxisOptions } from "../js/initEcharts"; |
|||
|
|||
import { |
|||
getReservoirMonitorTreeData, |
|||
getReservoirRainDetailData, |
|||
} from "@/api/reservoir"; |
|||
export default { |
|||
data() { |
|||
return { |
|||
resCode: null, // 水库编码 |
|||
activeName: "1", |
|||
filterText: "", |
|||
myChart: null, |
|||
treeData: [ |
|||
{ |
|||
label: "xxx水库", |
|||
value: "xxxreservoir", |
|||
children: [ |
|||
{ |
|||
label: "xx环境量", |
|||
value: "xxxenv1", |
|||
children: [ |
|||
{ |
|||
label: "xx雨量站", |
|||
value: "xxxrain1", |
|||
type: "1", |
|||
}, |
|||
{ |
|||
label: "xx水位站", |
|||
value: "xxxwater1", |
|||
type: "2", |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
defaultProps: { |
|||
children: "children", |
|||
label: "label", |
|||
}, |
|||
paramsData: { |
|||
startDate: "", |
|||
endDate: "", |
|||
}, |
|||
}; |
|||
}, |
|||
created() {}, |
|||
watch: { |
|||
filterText(val) { |
|||
this.$refs.tree.filter(val); |
|||
}, |
|||
}, |
|||
methods: { |
|||
initData(code) { |
|||
console.log("请求数据 >>>>>> ", code); |
|||
this.resCode = code; |
|||
getReservoirMonitorTreeData(code).then((res) => { |
|||
this.treeData = res.data; |
|||
}); |
|||
}, |
|||
|
|||
filterStartDate(date) { |
|||
if (this.paramsData.endDate) { |
|||
return ( |
|||
(date && date.valueOf() > this.paramsData.endDate) || |
|||
date.valueOf() > Date.now() |
|||
); |
|||
} |
|||
return date && date.valueOf() > Date.now(); |
|||
}, |
|||
filterEndDate(date) { |
|||
if (this.paramsData.startDate) { |
|||
return ( |
|||
(date && date.valueOf() < this.paramsData.startDate) || |
|||
date.valueOf() > Date.now() |
|||
); |
|||
} |
|||
return date && date.valueOf() > Date.now(); |
|||
}, |
|||
filterNode(value, data) { |
|||
if (!value) return true; |
|||
return data.label.indexOf(value) !== -1; |
|||
}, |
|||
initChart(data, type) { |
|||
// 渲染echarts |
|||
switch (type) { |
|||
case "1": |
|||
// 渲染雨量站echarts |
|||
if (!this.$refs.echartsRef) { |
|||
return; |
|||
} |
|||
if (this.myChart) { |
|||
this.myChart.dispose(); |
|||
} |
|||
let options = initLineOptions(data); |
|||
this.myChart = echarts.init(this.$refs.echartsRef); |
|||
options && this.myChart.setOption(options); |
|||
break; |
|||
case "2": |
|||
// 渲染水位站echarts |
|||
if (!this.$refs.echartsRef) { |
|||
return; |
|||
} |
|||
if (this.myChart) { |
|||
this.myChart.dispose(); |
|||
} |
|||
let options2 = doubleYAxisOptions(data); |
|||
this.myChart = echarts.init(this.$refs.echartsRef); |
|||
options2 && this.myChart.setOption(options2); |
|||
break; |
|||
|
|||
default: |
|||
break; |
|||
} |
|||
}, |
|||
// 请求数据 |
|||
handleSearch() { |
|||
this.initData(); |
|||
}, |
|||
handleReset() { |
|||
this.paramsData.startDate = ""; |
|||
this.paramsData.endDate = ""; |
|||
}, |
|||
handleClickTreeNode(data, node) { |
|||
if (node.isLeaf && data.type) { |
|||
getReservoirRainDetailData({ |
|||
resCode: this.resCode, |
|||
id: data.id, |
|||
}).then((res) => { |
|||
this.initChart(res.data, data.type); |
|||
}); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped lang="scss"> |
|||
.real-time-monitor-page { |
|||
.content-box { |
|||
.tree-box { |
|||
width: 240px; |
|||
border: 1px solid #f4f5f7; |
|||
border-radius: 2px; |
|||
background: #fff; |
|||
overflow: auto; |
|||
padding: 4px; |
|||
} |
|||
.echarts-box { |
|||
flex: 1; |
|||
border: 1px solid #f4f5f7; |
|||
border-radius: 2px; |
|||
background: #fff; |
|||
margin-left: 4px; |
|||
.title { |
|||
height: 32px; |
|||
line-height: 32px; |
|||
padding-left: 12px; |
|||
border-bottom: 1px solid #f4f5f7; |
|||
} |
|||
.echart-dom { |
|||
height: 360px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue