fix:预警设置页面

This commit is contained in:
SunTao 2024-11-27 10:56:33 +08:00
parent 5db0e11202
commit 5d316b5e3b
7 changed files with 683 additions and 30 deletions

20
src/api/xj/warnSetup.js Normal file
View File

@ -0,0 +1,20 @@
/*
* @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
* @Date: 2024-10-08 09:26:24
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-05 13:54:44
* @FilePath: \znxjxt-ui\src\api\xj\disease.js
* @Description: 巡检信息-预警设置
*/
import request from "@/utils/request";
// 查询列表病害类型
export function getDefectList(params) {
return request({
// 病害类型下拉
// url: "/metadata/defectType",
url: "/bigscreen/v2/getDefectTypesDrowDown",
method: "get",
params,
});
}

View File

@ -74,9 +74,9 @@
<i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
</el-tooltip> -->
</el-form-item>
<el-form-item class="form-item" label="时间筛选" prop="dataTime">
<el-form-item class="form-item" label="时间筛选" prop="dateTime">
<el-date-picker
v-model="dataTime"
v-model="dateTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
@ -207,7 +207,7 @@ export default {
state: "",
},
//
dataTime: [],
dateTime: [],
//
searchForm: {},
// 线
@ -333,6 +333,8 @@ export default {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else {
console.log(this.dateTime,'ssssssss');
this.pagination.page = 1;
const data = {
...this.trafficForm,
@ -364,7 +366,7 @@ export default {
//
state: "",
};
this.dataTime = [];
this.dateTime = [];
this.getData();
},

View File

@ -93,6 +93,15 @@ export default {
"#4C83FF",
"#FC5976",
"#5B40B6",
"#18F7FF",
"#FFEA68",
"#AE74F3",
"#6FC36F",
"#FF8F5F",
"#6FC36F",
"#4C83FF",
"#FC5976",
"#5B40B6",
],
// echart
dataList: [],

View File

@ -133,7 +133,7 @@ export default {
},
series: [
{
name: "护栏损",
name: "护栏",
type: "line",
smooth: true,
areaStyle: {

View File

@ -0,0 +1,159 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2024-01-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-01-08 13:52:47
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\components\add-setup.vue
* @Description: 预警中心-预警设置-新增/编辑组件
-->
<template>
<div class="add-setup">
<el-form
class="addForm"
ref="warningSetupForm"
:model="warningSetupForm"
:rules="rules"
label-width="7rem"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="病害类型" prop="defectType">
<el-cascader
placeholder="请选择病害类型"
v-model="warningSetupForm.defectType"
:options="tableDefect"
:props="{
checkStrictly: false,
emitPath: false,
children: 'subTypes',
}"
style="width: 100%"
clearable
></el-cascader>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="预警病害长度" prop="targetLen">
<el-input-number
v-model="warningSetupForm.targetLen"
:min="0"
placeholder="请输入预警病害长度"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="预警病害面积" prop="targetArea">
<el-input-number
v-model="warningSetupForm.targetArea"
:min="0"
placeholder="请输入预警病害面积"
style="width: 100%"
/>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</div>
</template>
<script>
import m from "diagram-js/lib/core";
export default {
name: "AddSetup",
props: {
//
tableDefect: {
type: Array,
default: () => [],
},
//
dialogItem: {
type: Object,
default: () => {},
},
},
components: {},
data() {
return {
//
warningSetupForm: {
//
defectType: "",
//
targetLen: null,
//
targetArea: null,
},
//
rules: {
defectType: [
{ required: true, message: "请选择病害类型", trigger: "change" },
],
targetLen: [
{ required: true, message: "请输入预警病害长度", trigger: "blur" },
],
targetArea: [
{ required: true, message: "请输入预警病害面积", trigger: "blur" },
],
},
};
},
watch: {
dialogItem: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
console.log(newVal, "sddd");
}
},
immediate: true,
deep: true,
},
},
methods: {
/**
* @description: 点击确定事件
* @return {*}
*/
submitForm() {
this.$refs.warningSetupForm.validate((valid) => {
if (valid) {
console.log(this.warningSetupForm);
}
});
},
/**
* @description: 点击取消事件
* @return {*}
*/
cancel() {
this.$emit("cancel");
},
},
};
</script>
<style lang="scss" scoped>
.add-setup {
width: 100%;
height: 100%;
}
/* 页脚 */
.dialog-footer {
display: flex;
justify-content: flex-end;
}
</style>

View File

@ -0,0 +1,367 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2024-01-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-01-08 13:52:47
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\index.vue
* @Description: 预警中心-预警设置
-->
<template>
<div class="content">
<el-form
:model="setupForm"
ref="setupForm"
size="small"
:inline="true"
label-width="5rem"
>
<el-form-item label="病害类型" prop="paramsDefectType">
<el-cascader
v-model="paramsDefectType"
:options="tableDefect"
:props="{
checkStrictly: true,
emitPath: true,
children: 'subTypes',
}"
clearable
></el-cascader>
</el-form-item>
<el-form-item label="病害长度" prop="lengthRange">
<el-input-number
v-model="setupForm.minLen"
controls-position="right"
placeholder="最小长度"
:min="0"
></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number
v-model="setupForm.maxLen"
controls-position="right"
placeholder="最大长度"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="病害面积" prop="areaRange">
<el-input-number
v-model="setupForm.minArea"
controls-position="right"
placeholder="最小面积"
:min="0"
></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number
v-model="setupForm.maxArea"
controls-position="right"
placeholder="最大面积"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
v-hasPermi="['system:defect:add']"
>新增
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete(null)"
v-hasPermi="['system:defect:remove']"
>删除
</el-button>
</el-col>
</el-row>
<!-- 表格 -->
<el-table
ref="setupTable"
:data="setupList"
v-loading="loading"
@selection-change="handleSelectionChange"
style="width: 100%"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号"> </el-table-column>
<el-table-column
width="200"
label="时间"
align="center"
prop="segmentName"
>
<template slot-scope="scope">
<span class="table-index">asd</span>
{{ scope.row.segmentName }}
</template>
</el-table-column>
<el-table-column label="消息内容" align="center" prop="stakeStart" />
<el-table-column label="车牌号" align="center" prop="stakeEnd" />
<el-table-column label="设备id" align="center" prop="stakeEnd" />
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:defect:edit']"
>编辑
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:defect:remove']"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="pagination-part">
<el-pagination
background
:current-page.sync="pagination.page"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size.sync="pagination.size"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"
:total="tableTotal"
>
</el-pagination>
</div>
<!-- 新增/编辑弹窗 -->
<el-dialog
title="新增预警设置"
:visible.sync="addVisible"
width="40rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="addCancel"
>
<add-setup
v-if="addVisible"
:tableDefect="tableDefect"
:dialogItem="dialogItem"
@cancel="addCancel"
></add-setup>
</el-dialog>
</div>
</template>
<script>
import { getDefectList } from "@/api/xj/warnSetup";
import AddSetup from "./components/add-setup.vue";
export default {
name: "WarningSetup",
components: {
AddSetup,
},
data() {
return {
//
setupForm: {},
//
paramsDefectType: [],
//
tableDefect: [],
//
setupList: [],
//
tableTotal: 0,
//
loading: false,
//
pagination: {
page: 1,
size: 10,
},
//
checkIds: [],
//
multiple: true,
//
addVisible: false,
//
dialogItem: {},
};
},
created() {
this.getTableDefect();
this.getTableData();
},
methods: {
/**
* @description: 获取列表病害类型对应数据
* @param {*} val
* @return {*}
*/
getTableDefect() {
getDefectList().then(({ code, data }) => {
if (code === 200) {
this.tableDefect = data;
}
});
},
/**
* @description: 获取预警设置列表数据
* @param {*}
* @return {*}
*/
getTableData() {
this.setupList = [{ stakeStart: "assssssssasd" }];
},
/**
* @description: 点击查询事件
* @param {*}
* @return {*}
*/
handleQuery() {},
/**
* @description: 点击重置事件
* @param {*}
* @return {*}
*/
resetQuery() {},
/**
* @description: 列表选择改变事件
* @param {*}
* @return {*}
*/
handleSelectionChange(selection) {
this.checkIds = selection.map((item) => item.id);
this.multiple = !selection.length;
},
/**
* @description: 点击新增事件
* @param {*}
* @return {*}
*/
handleAdd() {
this.addVisible = true;
this.dialogItem = {};
},
/**
* @description: 点击删除事件
* @param {*} row
* @return {*}
*/
handleDelete(row) {
const checkIds = row ? [row.id] : this.checkIds;
if (!checkIds.length) {
this.$modal.msgWarning("请选择要删除的记录");
return;
}
this.$modal
.confirm(`是否确认删除选中的${checkIds.length}条记录?`)
.then(() => {
// return deleteRoad(checkIds);
})
.then(() => {
this.getRoadList();
this.$refs.defectTable.clearSelection();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/**
* @description: 点击编辑事件
* @param {*} row
* @return {*}
*/
handleUpdate(row) {
this.dialogItem = row;
this.addVisible = true;
},
/**
* @description: 切换分页
* @param {*} arg
* @return {*}
*/
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getTableData();
},
/**
* @description: 切换每条/
* @param {*} arg
* @return {*}
*/
handleSizeChange(arg) {
this.pagination.size = arg;
this.getTableData();
},
/**
* @description: 新增弹窗取消事件
* @param {*}
* @return {*}
*/
addCancel() {
this.addVisible = false;
this.dialogItem = {};
this.getTableData();
},
},
};
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: calc(100vh - 5.4rem);
padding: 1rem;
}
.mb8 {
margin-bottom: 0.5rem;
}
/* 分页样式 */
.pagination-part {
width: 100%;
display: flex;
padding-top: 1rem;
justify-content: flex-end;
}
</style>

View File

@ -468,7 +468,11 @@ export default {
this.getTaskSelectList();
},
methods: {
/* 获取道路名称下拉数据 */
/**
* @description: 获取道路名称下拉数据
* @param {*}
* @return {*}
*/
getSegmentList() {
getSegment().then(({ code, data }) => {
if (code === 200) {
@ -477,7 +481,11 @@ export default {
});
},
/* 获取路产类型下拉数据 */
/**
* @description: 获取路产类型下拉数据
* @param {*}
* @return {*}
*/
getRoadTypeList() {
getRoadType().then(({ code, data }) => {
if (code === 200) {
@ -486,7 +494,11 @@ export default {
});
},
/* 路产状态下拉数据 */
/**
* @description: 获取路产状态下拉数据
* @param {*}
* @return {*}
*/
getDefectStatusList() {
getDefectStatus().then(({ data, code }) => {
if (code === 200) {
@ -495,7 +507,11 @@ export default {
});
},
/* 获取巡检任务下拉数据 */
/**
* @description: 获取巡检任务下拉数据
* @param {*}
* @return {*}
*/
getTaskSelectList() {
getTaskList().then(({ data, code }) => {
if (code === 200) {
@ -504,7 +520,11 @@ export default {
});
},
/* 点击搜索事件 */
/**
* @description: 点击搜索事件
* @param {*}
* @return {*}
*/
handleQuery() {
const phonereg = /^K\d{4}\+\d{3}$/;
if (this.queryParams.stakeStart) {
@ -530,7 +550,11 @@ export default {
}
},
/* 点击重置事件 */
/**
* @description: 点击重置事件
* @param {*}
* @return {*}
*/
resetQuery() {
this.searchForm = {};
this.queryParams = {
@ -548,7 +572,11 @@ export default {
this.getRoadList();
},
/* 获取列表数据 */
/**
* @description: 获取列表数据
* @param {*}
* @return {*}
*/
getRoadList() {
const params = {
...this.pagination,
@ -564,7 +592,11 @@ export default {
});
},
/* 过滤列表路产类型 */
/**
* @description: 过滤列表路产类型
* @param {*} value
* @return {*}
*/
filterDefect(value) {
let a = null;
[a] = this.roadType.filter((item) => {
@ -575,7 +607,11 @@ export default {
}
},
/* 过滤路产状态 */
/**
* @description: 过滤路产状态
* @param {*} value
* @return {*}
*/
filterState(value) {
let a = null;
[a] = this.defectStatus.filter((item) => {
@ -586,7 +622,11 @@ export default {
}
},
/* 点击新增事件 */
/**
* @description: 点击新增事件
* @param {*}
* @return {*}
*/
handleAdd() {
this.addVisible = true;
this.addTitle = "添加路产";
@ -595,7 +635,11 @@ export default {
};
},
/* 点击删除事件 */
/**
* @description: 点击删除事件
* @param {*} row
* @return {*}
*/
handleDelete(row) {
const checkIds = row ? [row.id] : this.checkIds;
if (!checkIds.length) {
@ -615,10 +659,18 @@ export default {
.catch(() => {});
},
/* 点击导出事件 */
/**
* @description: 点击导出事件
* @param {*}
* @return {*}
*/
handleExport() {},
/* 批量确认事件 */
/**
* @description: 批量确认事件
* @param {*}
* @return {*}
*/
handleUpdateBatch() {
if (this.checkIds.length > 0) {
changeRoad(this.checkIds).then(({ code, data }) => {
@ -633,14 +685,22 @@ export default {
}
},
/* 列表选择改变事件 */
/**
* @description: 列表选择改变事件
* @param {*} selection
* @return {*}
*/
handleSelectionChange(selection) {
this.checkIds = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/* 列表-点击修改事件 */
/**
* @description: 列表-点击修改事件
* @param {*} item
* @return {*}
*/
handleUpdate(item) {
this.addVisible = true;
this.addTitle = "修改路产";
@ -650,7 +710,11 @@ export default {
};
},
/* 列表-点击查看事件 */
/**
* @description: 列表-点击查看事件
* @param {*} item
* @return {*}
*/
viewDefect(item) {
this.viewVisible = true;
this.dialogItem = {
@ -659,19 +723,31 @@ export default {
};
},
/* 切换分页 */
/**
* @description: 切换分页
* @param {*} arg
* @return {*}
*/
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getRoadList();
},
/* 切换每条/页 */
/**
* @description: 切换每条/
* @param {*} arg
* @return {*}
*/
handleSizeChange(arg) {
this.pagination.size = arg;
this.getRoadList();
},
/* 关闭新增/编辑弹窗 */
/**
* @description: 关闭新增/编辑弹窗
* @param {*}
* @return {*}
*/
addCancel() {
this.addVisible = false;
this.dialogItem = { title: "添加路产" };
@ -679,19 +755,31 @@ export default {
this.getRoadList();
},
/* 关闭查看弹窗 */
/**
* @description: 关闭查看弹窗
* @param {*}
* @return {*}
*/
viewCancel() {
this.viewVisible = false;
this.dialogItem = { title: "添加路产" };
},
/* 打开查看图片弹窗 */
/**
* @description: 打开查看图片弹窗
* @param {*} item
* @return {*}
*/
showScreenImg(item) {
this.currentImageItem = item;
this.showImageDialog = true;
},
/* 图片位置信息获取 */
/**
* @description: 图片位置信息获取
* @param {*}
* @return {*}
*/
updateRects() {
this.rects = [];
this.rectsItem = {};
@ -708,7 +796,11 @@ export default {
// this.rectsItem = this.defectData[this.currentIndex];
},
/* 图片红框位置 */
/**
* @description: 图片红框位置
* @param {*} { left, top, width, height }
* @return {*}
*/
getRectStyle({ left, top, width, height }) {
const image = this.$refs.mainImage;
const container = this.$refs.imageContainer;
@ -735,7 +827,11 @@ export default {
};
},
/* 关闭查看图片弹窗 */
/**
* @description: 关闭查看图片弹窗
* @param {*}
* @return {*}
*/
imgCancel() {
this.showImageDialog = false;
this.currentImageItem = {};