fix:预警设置修改,巡检任务修改

This commit is contained in:
SunTao 2024-12-03 09:47:20 +08:00
parent 319818bbf3
commit b88f166de8
12 changed files with 783 additions and 233 deletions

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:04:12
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-25 13:55:51
* @LastEditTime: 2024-12-02 16:39:01
* @FilePath: \znxjxt-ui\src\api\xj\task.js
* @Description: 巡检任务管理接口
*/
@ -43,3 +43,23 @@ export function getRoadType() {
});
}
// 根据id查看新增病害详情
export function getTaskDefectDetail(params) {
return request({
url: "/xj/defect/getNewDefectByTaskId",
method: "get",
params,
});
}
// 查询列表病害类型
export function getDefectList(params) {
return request({
// 病害类型下拉
// url: "/metadata/defectType",
url: "/bigscreen/v2/getDefectTypesDrowDown",
method: "get",
params,
});
}

View File

@ -2,8 +2,8 @@
* @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
* @LastEditTime: 2024-12-02 14:46:30
* @FilePath: \znxjxt-ui\src\api\xj\warnSetup.js
* @Description: 巡检信息-预警设置
*/
import request from "@/utils/request";
@ -18,3 +18,21 @@ export function getDefectList(params) {
params,
});
}
// 查询预警设置列表
export function getWarnSetupList(params) {
return request({
url: "/alarmSetting/list",
method: "get",
params,
});
}
// 更新预警设置
export function updateWarnSetup(params) {
return request({
url: "/alarmSetting/update",
method: "put",
data: params,
});
}

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -4,6 +4,10 @@ import modal from "./modal";
class WebSocketService {
constructor() {
this.ws = null;
// // 记录重连次数
// this.reconnectCount = 0;
// // 最大重连次数
// this.maxReconnectAttempts = 2;
this.reconnectInterval = 3000;
this.eventListeners = {};
}
@ -26,10 +30,23 @@ class WebSocketService {
};
this.ws.onerror = (error) => {
console.error("WebSocket error:", error);
// console.error("WebSocket error:", error);
this.emit("error", error);
};
// this.ws.onclose = () => {
// console.log("WebSocket closed");
// this.emit("close");
// if (this.reconnectCount < this.maxReconnectAttempts) {
// this.reconnectCount++;
// console.log(`尝试第 ${this.reconnectCount} 次重连`);
// setTimeout(() => this.connect(url), this.reconnectInterval);
// } else {
// console.log("达到最大重连次数,停止重连");
// modal.msgError("WebSocket连接失败,请检查网络后刷新页面重试");
// }
// };
this.ws.onclose = () => {
console.log("WebSocket closed");
this.emit("close");

View File

@ -2,8 +2,8 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-19 13:52:47
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
* @LastEditTime: 2024-12-03 09:45:06
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
* @Description: 病害巡检-病害日志
-->
<template>
@ -333,8 +333,6 @@ export default {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else {
console.log(this.dateTime,'ssssssss');
this.pagination.page = 1;
const data = {
...this.trafficForm,
@ -367,6 +365,7 @@ export default {
state: "",
};
this.dateTime = [];
this.segmentList = [];
this.getData();
},

View File

@ -4,7 +4,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-01-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-01-08 13:52:47
* @LastEditTime: 2024-12-02 15:37:29
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\components\add-setup.vue
* @Description: 预警中心-预警设置-新增/编辑组件
-->
@ -19,27 +19,29 @@
>
<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',
}"
<el-form-item label="预警类型" prop="meteringType">
<el-select
v-model="warningSetupForm.meteringType"
placeholder="请选择预警类型"
style="width: 100%"
clearable
></el-cascader>
@change="changeMeteringType"
>
<el-option
v-for="item in meteringList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-row :gutter="24" v-if="warningSetupForm.meteringType !== '面积'">
<el-col :span="24">
<el-form-item label="预警病害长度" prop="targetLen">
<el-form-item label="预警病害长度" prop="length">
<el-input-number
v-model="warningSetupForm.targetLen"
v-model="warningSetupForm.length"
:min="0"
placeholder="请输入预警病害长度"
style="width: 100%"
@ -47,11 +49,11 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-row :gutter="24" v-if="warningSetupForm.meteringType !== '长度'">
<el-col :span="24">
<el-form-item label="预警病害面积" prop="targetArea">
<el-form-item label="预警病害面积" prop="area">
<el-input-number
v-model="warningSetupForm.targetArea"
v-model="warningSetupForm.area"
:min="0"
placeholder="请输入预警病害面积"
style="width: 100%"
@ -68,8 +70,7 @@
</template>
<script>
import m from "diagram-js/lib/core";
import { updateWarnSetup } from "@/api/xj/warnSetup";
export default {
name: "AddSetup",
props: {
@ -89,22 +90,37 @@ export default {
return {
//
warningSetupForm: {
//
defectType: "",
//
meteringType: "",
//
targetLen: null,
length: null,
//
targetArea: null,
area: null,
},
//
meteringList: [
{
value: "长度",
label: "长度",
},
{
value: "面积",
label: "面积",
},
{
value: "长度/面积",
label: "长度/面积",
},
],
//
rules: {
defectType: [
meteringType: [
{ required: true, message: "请选择病害类型", trigger: "change" },
],
targetLen: [
length: [
{ required: true, message: "请输入预警病害长度", trigger: "blur" },
],
targetArea: [
area: [
{ required: true, message: "请输入预警病害面积", trigger: "blur" },
],
},
@ -114,7 +130,8 @@ export default {
dialogItem: {
handler(newVal) {
if (Object.keys(newVal).length > 0) {
console.log(newVal, "sddd");
this.warningSetupForm = newVal;
this.changeMeteringType(newVal.meteringType);
}
},
immediate: true,
@ -122,6 +139,18 @@ export default {
},
},
methods: {
/**
* @description: 选择预警类型改变事件
* @return {*}
*/
changeMeteringType(value) {
if (value === "长度") {
this.warningSetupForm.area = null;
} else if (value === "面积") {
this.warningSetupForm.length = null;
}
},
/**
* @description: 点击确定事件
* @return {*}
@ -129,7 +158,16 @@ export default {
submitForm() {
this.$refs.warningSetupForm.validate((valid) => {
if (valid) {
console.log(this.warningSetupForm);
const data = {
...this.warningSetupForm,
id: this.dialogItem.id,
};
updateWarnSetup(data).then(({ code, data }) => {
if (code === 200) {
this.$modal.msgSuccess("更新成功");
this.$emit("cancel");
}
});
}
});
},

View File

@ -2,13 +2,13 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-01-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-01-08 13:52:47
* @LastEditTime: 2024-12-02 15:45:48
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-setup\index.vue
* @Description: 预警中心-预警设置
-->
<template>
<div class="content">
<el-form
<!-- <el-form
:model="setupForm"
ref="setupForm"
size="small"
@ -96,7 +96,7 @@
>删除
</el-button>
</el-col>
</el-row>
</el-row> -->
<!-- 表格 -->
<el-table
ref="setupTable"
@ -109,18 +109,24 @@
<el-table-column type="index" label="序号"> </el-table-column>
<el-table-column
width="200"
label="时间"
label="预警名称"
align="center"
prop="segmentName"
prop="defectName"
>
</el-table-column>
<el-table-column label="预警标准" align="center" prop="meteringType" />
<el-table-column label="预警长度" align="center" prop="length" />
<el-table-column label="预警面积" align="center" prop="area" />
<el-table-column label="预警状态" align="center" prop="area">
<template slot-scope="scope">
<span class="table-index">asd</span>
{{ scope.row.segmentName }}
<el-switch
v-model="scope.row.status"
active-value="启用"
@change="handleStatusChange(scope.row)"
inactive-value="停用"
/>
</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"
@ -135,14 +141,6 @@
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>
@ -164,11 +162,10 @@
<el-dialog
title="新增预警设置"
:visible.sync="addVisible"
width="40rem"
width="30rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="addCancel"
>
<add-setup
v-if="addVisible"
@ -181,7 +178,7 @@
</template>
<script>
import { getDefectList } from "@/api/xj/warnSetup";
import { getDefectList, getWarnSetupList,updateWarnSetup } from "@/api/xj/warnSetup";
import AddSetup from "./components/add-setup.vue";
export default {
name: "WarningSetup",
@ -218,7 +215,6 @@ export default {
};
},
created() {
this.getTableDefect();
this.getTableData();
},
methods: {
@ -241,22 +237,31 @@ export default {
* @return {*}
*/
getTableData() {
this.setupList = [{ stakeStart: "assssssssasd" }];
this.loading = true;
getWarnSetupList()
.then(({ code, data }) => {
if (code === 200) {
this.setupList = data;
}
})
.finally(() => {
this.loading = false;
});
},
/**
* @description: 点击查询事件
* @param {*}
* @description: 切换预警状态事件
* @param {*} row
* @return {*}
*/
handleQuery() {},
/**
* @description: 点击重置事件
* @param {*}
* @return {*}
*/
resetQuery() {},
handleStatusChange(row) {
updateWarnSetup(row).then(({ code, msg }) => {
if (code === 200) {
this.$modal.msgSuccess(msg);
this.getTableData();
}
});
},
/**
* @description: 列表选择改变事件

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-11 15:14:16
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-05 09:22:27
* @LastEditTime: 2024-12-02 11:09:10
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
* @Description: 巡检信息-路产管理
-->
@ -272,7 +272,7 @@
<el-button
size="mini"
type="text"
icon="el-icon-edit"
icon="el-icon-view"
@click="viewDefect(scope.row)"
>查看
</el-button>

View File

@ -0,0 +1,81 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:36:09
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-02 14:13:10
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-retrace.vue
* @Description: 巡检任务-回顾任务
-->
<template>
<div class="view-content">
<div class="view-left" ref="sidebar" @scroll="handleScroll">
<img
v-for="(item, index) in defectData"
:key="`${item.id}-${index}`"
:src="item.url"
:alt="'Image ' + (index + 1)"
@click="showImage(index)"
:class="{ selected: currentIndex === index }"
/>
</div>
<div class="main-content"></div>
</div>
</template>
<script>
export default {
name: "TaskRetrace",
props: {
dialogItem: {
type: Object,
default: () => {},
},
},
data() {
return {
//
defectData: [],
};
},
created() {
this.getList();
},
methods: {
/**
* @description: 获取左侧图片数据
* @return {*}
*/
getList() {
const data = {};
},
/**
* @description: 滚动事件
* @param {*} e
* @return {*}
*/
handleScroll(e) {
console.log(e);
},
},
mounted() {
window.addEventListener("keydown", this.handleKeydown);
window.addEventListener("resize", this.updateRects);
},
beforeDestroy() {
window.removeEventListener("keydown", this.handleKeydown);
window.removeEventListener("resize", this.updateRects);
},
};
</script>
<style lang="scss" scoped>
.view-content {
width: 100%;
height: calc(100vh - 3rem);
display: flex;
flex-direction: row;
background-color: #2e3a46;
}
</style>

View File

@ -1,68 +1,147 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:36:09
* @Date: 2024-12-02 11:20:55
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-28 11:29:03
* @LastEditTime: 2024-12-02 16:57:55
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\components\task-view.vue
* @Description: 巡检任务-查看路径
* @Description: 巡检信息-巡检任务-查看新增病害
-->
<template>
<div class="view-content">
<div id="view-map">
<fssm-map
ref="mapContent"
@map-click="mapClick"
@feature-dblclick="mapDbclick"
></fssm-map>
</div>
<div class="footer">
<div class="slider">
<el-slider
v-model="timeTip"
:step="sliderStep"
:marks="sliderMarks"
:show-tooltip="true"
></el-slider>
</div>
<div class="pause">
<i
class="el-icon-video-play"
v-if="!animationVisable"
@click="animation(true)"
></i>
<i
class="el-icon-video-pause"
v-if="animationVisable"
@click="animation(false)"
></i>
</div>
<div class="speed">
<el-select
v-model="spaadCode"
@change="changeTimeTip"
placeholder="请选择"
<div class="task-view">
<el-form
class="viewForm"
ref="viewForm"
:model="viewForm"
:rules="viewFormRules"
label-width="5rem"
>
<el-option
v-for="item in speedOption"
:key="item.value"
:label="item.label"
:value="item.value"
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="病害类型">
<el-cascader
v-model="viewForm.defectType"
:options="defectCascaderList"
:props="{
checkStrictly: false,
emitPath: false,
children: 'subTypes',
}"
clearable
></el-cascader>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开始桩号" prop="stakeStart">
<el-input
v-model="viewForm.stakeStart"
placeholder="K00000+000"
size="medium"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="结束桩号" prop="stakeEnd">
<el-input
v-model="viewForm.stakeEnd"
placeholder="K00000+000"
size="medium"
/>
</el-form-item>
</el-col>
<el-col :span="6">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
</el-option>
</el-select>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-col>
</el-row>
</el-form>
<!-- 数据表格 -->
<el-table
ref="defectTable"
v-loading="loading"
:data="defectList"
style="width: 100%"
height="35rem"
>
<el-table-column label="病害类型" align="center" prop="defectTypeName">
</el-table-column>
<el-table-column label="开始桩号" align="center" prop="stakeStart" />
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
<el-table-column label="病害图片" align="center" prop="media">
<template slot-scope="scope">
<img
@click="showScreenImg(scope.row)"
height="50"
:src="scope.row.mediaUrl"
/>
</template>
</el-table-column>
<el-table-column label="病害长度" align="center" prop="targetLen">
<template slot-scope="scope">
{{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}` }}
</template>
</el-table-column>
<el-table-column label="病害面积" align="center" prop="targetArea" />
</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="showImageDialog"
width="75rem"
append-to-body
destroy-on-close
@close="imgCancel"
>
<div class="image-container" ref="imageContainer">
<img
:src="currentImageItem.mediaUrl"
alt="Main Image"
ref="mainImage"
@load="updateRects"
/>
<div
v-for="(rect, index) in rects"
:key="index"
class="rect-overlay"
:style="getRectStyle(rect)"
></div>
</div>
</el-dialog>
</div>
</template>
<script>
import FssmMap from "@/components/map/fssm-map";
import { getTaskDefectDetail } from "@/api/xj/task";
export default {
name: "TaskView",
components: { FssmMap },
components: {},
props: {
defectCascaderList: {
type: Array,
default: () => [],
},
dialogItem: {
type: Object,
default: () => {},
@ -70,113 +149,242 @@ export default {
},
data() {
return {
//
timeTip: "0",
//
sliderMarks: {
0: "18",
100: "24",
//
viewForm: {
taskId: "",
defectType: "",
stakeStart: "",
stakeEnd: "",
},
//
sliderStep: 0.1,
// /
animationVisable: false,
//
timer: null,
//
spaadCode: 1,
//
speedOption: [
//
viewFormRules: {
stakeStart: [
{
value: 1,
label: "1x",
},
{
value: 2,
label: "2x",
},
{
value: 5,
label: "5x",
},
{
value: 10,
label: "10x",
required: false,
pattern: /^K\d{4}\+\d{3}$/,
trigger: "blur",
message: "请正确输入开始桩号",
},
],
stakeEnd: [
{
required: false,
pattern: /^K\d{4}\+\d{3}$/,
trigger: "blur",
message: "请正确输入结束桩号",
},
],
},
//
defectTypeList: [],
//
loading: false,
//
defectList: [],
// -
tableTotal: 0,
// -
pagination: {
page: 1,
size: 10,
},
//
showImageDialog: false,
//
currentImageItem: "",
//
rects: [],
};
},
watch: {
timeTip: {
handler(val) {},
dialogItem: {
handler(val) {
this.viewForm.taskId = val.extId;
this.searchForm = JSON.parse(JSON.stringify(this.viewForm));
this.getDefectList();
},
immediate: true,
deep: true,
},
},
mounted() {},
methods: {
/* 暂停/开始事件 */
animation(boolen) {
this.animationVisable = boolen;
if (boolen) {
this.timer = setInterval(() => {
this.timeTip = (this.timeTip + this.sliderStep).toFixed(1) * 1;
}, 500);
} else {
clearInterval(this.timer);
/**
* @description: 获取列表数据
* @return {*}
*/
getDefectList() {
const data = {
...this.searchForm,
...this.pagination,
};
getTaskDefectDetail(data).then(({ code, rows, total }) => {
if (code === 200) {
this.defectList = rows;
this.tableTotal = total;
}
});
},
/* 进度条修改事件 */
changeTimeTip(value) {
this.sliderStep = value * 0.1;
/**
* @description: 点击搜索事件
* @return {*}
*/
handleQuery() {
this.$refs.viewForm.validate((valid) => {
if (valid) {
this.searchForm = JSON.parse(JSON.stringify(this.viewForm));
this.getDefectList();
}
});
},
/* 定时器事件 */
startTime(value) {},
/* 地图点击事件 */
mapClick(feature) {},
/* 地图双击事件 */
mapDbclick(feature) {},
/**
* @description: 点击重置事件
* @return {*}
*/
resetQuery() {
this.searchForm = {
taskId: this.dialogItem.extId,
};
this.viewForm = {
taskId: this.dialogItem.extId,
defectType: "",
stakeStart: "",
stakeEnd: "",
};
this.getDefectList();
},
/**
* @description: 打开查看图片弹窗
* @param {*} item
* @return {*}
*/
showScreenImg(item) {
this.currentImageItem = item;
this.showImageDialog = true;
},
/**
* @description: 图片位置信息获取
* @param {*}
* @return {*}
*/
updateRects() {
this.rects = [];
this.rectsItem = {};
const image = this.$refs.mainImage;
const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
this.rects = [
{
left: rects[0],
top: rects[1],
width: rects[2],
height: rects[3],
},
];
// 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;
if (!image || !container) return {};
const scaleX = container.clientWidth / image.naturalWidth;
const scaleY = container.clientHeight / image.naturalHeight;
const scale = Math.min(scaleX, scaleY);
const renderedWidth = image.naturalWidth * scale;
const renderedHeight = image.naturalHeight * scale;
const offsetX = (container.clientWidth - renderedWidth) / 2;
const offsetY = (container.clientHeight - renderedHeight) / 2;
return {
position: "absolute",
left: `${left * scale + offsetX}px`,
top: `${top * scale + offsetY}px`,
width: `${width * scale}px`,
height: `${height * scale}px`,
border: "2px solid #FF0000",
boxSizing: "border-box",
};
},
/**
* @description: 关闭查看图片弹窗
* @param {*}
* @return {*}
*/
imgCancel() {
this.showImageDialog = false;
this.currentImageItem = {};
this.rects = [];
},
/**
* @description: 切换分页
* @param {*} arg
* @return {*}
*/
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getDefectList();
},
/**
* @description: 切换每条/
* @param {*} arg
* @return {*}
*/
handleSizeChange(arg) {
this.pagination.size = arg;
this.getDefectList();
},
beforeDestroy() {
clearInterval(this.timer);
},
};
</script>
<style lang="scss" scoped>
.view-content {
.task-view {
width: 100%;
height: 100%;
position: relative;
}
#view-map {
/* 分页样式 */
.pagination-part {
width: 100%;
height: 40rem;
}
.footer {
height: 5rem;
width: 100%;
padding: 1rem;
display: flex;
background-color: rgba(104, 128, 147, 0.3);
.slider {
width: calc(100% - 8rem);
padding: 0 2rem;
::v-deep .el-slider__marks-text {
width: 3rem;
}
padding-top: 1rem;
justify-content: flex-end;
}
.pause {
width: 3rem;
font-size: 1.5rem;
line-height: 2.5rem;
/* 查看大图弹窗 */
.image-container {
position: relative;
width: 100%;
height: 80%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.speed {
width: 5rem;
.image-container img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.rect-overlay {
position: absolute;
pointer-events: none;
border: 2px solid red;
}
</style>

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 09:48:43
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-25 13:59:25
* @LastEditTime: 2024-12-02 16:41:53
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
* @Description: 巡检管理-巡检任务
-->
@ -101,10 +101,29 @@
align="center"
class-name="small-padding fixed-width"
>
<!-- slot-scope="scope" -->
<template>
<el-button size="mini" type="text" icon="el-icon-s-flag">
<!-- @click="viewDefect(scope.row)" -->
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="viewDefect(scope.row)"
>查看
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-refresh-right"
@click="handleRetrace(scope.row)"
v-hasPermi="['system:defect:edit']"
>回顾
</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-download"
@click="handleExport(scope.row)"
v-hasPermi="['system:defect:remove']"
>导出
</el-button>
</template>
</el-table-column>
@ -123,32 +142,63 @@
>
</el-pagination>
</div>
<!-- 查看弹窗 -->
<!-- 查看新增病害弹窗 -->
<el-dialog
title="路径查看"
title="查看新增病害"
:visible.sync="viewVisible"
width="90rem"
width="80rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="viewCancel"
>
<task-view @cancel="viewCancel" :dialogItem="dialogItem"></task-view>
<task-view
v-if="viewVisible"
@cancel="viewCancel"
:dialogItem="dialogItem"
:defectCascaderList="defectCascaderList"
></task-view>
<!-- <task-retrace
v-if="viewVisible"
@cancel="viewCancel"
:dialogItem="dialogItem"
></task-retrace> -->
</el-dialog>
<!-- 回顾巡检任务弹窗 -->
<el-dialog
title="回顾任务"
fullscreen
:visible.sync="retraceVisible"
width="80rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="retraceCancel"
class="retrace-dialog"
>
<task-retrace
v-if="retraceVisible"
@cancel="retraceCancel"
:dialogItem="dialogItem"
></task-retrace>
</el-dialog>
</div>
</template>
<script>
import TaskRetrace from "./components/task-retrace.vue";
import TaskView from "./components/task-view.vue";
import {
getTaskTable,
getSegment,
getRoadType,
getTaskIdList,
getDefectList,
} from "@/api/xj/task";
export default {
components: { TaskView },
components: { TaskRetrace, TaskView },
data() {
return {
//
@ -189,15 +239,37 @@ export default {
dialogItem: {},
//
viewVisible: false,
//
retraceVisible: false,
//
defectCascaderList: [],
};
},
created() {
this.getTaskList();
this.getSegmentList();
this.getRoadTypeList();
this.getDefectCascaderList();
},
methods: {
/* 任务id远程搜索 结果 */
/**
* @description: 获取病害类型下拉数据
* @return {*}
*/
getDefectCascaderList() {
getDefectList().then(({ code, data }) => {
if (code === 200) {
this.defectCascaderList = data;
}
});
},
/**
* @description: 任务id远程搜索 结果
* @param {*} item
* @param {*} cb
* @return {*}
*/
querySearchAsync(item, cb) {
getTaskIdList({ name: item }).then(({ data, code }) => {
if (code === 200) {
@ -212,9 +284,18 @@ export default {
}
});
},
/* 任务id选择事件 */
/**
* @description: 任务id选择事件
* @param {*}
* @return {*}
*/
handleSelect() {},
/* 获取巡检路段下拉数据 */
/**
* @description: 获取巡检路段下拉数据
* @return {*}
*/
getSegmentList() {
getSegment().then(({ code, data }) => {
if (code === 200) {
@ -222,7 +303,11 @@ export default {
}
});
},
/* 获取路产类型下拉数据 */
/**
* @description: 获取路产类型下拉数据
* @return {*}
*/
getRoadTypeList() {
getRoadType().then(({ code, data }) => {
if (code === 200) {
@ -230,13 +315,21 @@ export default {
}
});
},
/* 点击搜索事件 */
/**
* @description: 点击搜索事件
* @return {*}
*/
handleQuery() {
this.pagination.page = 1;
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
this.getTaskList();
},
/* 点击重置事件 */
/**
* @description: 点击重置事件
* @return {*}
*/
resetQuery() {
this.searchForm = {};
this.queryParams = {
@ -247,7 +340,11 @@ export default {
this.dateTime = [];
this.getTaskList();
},
/* 获取列表数据 */
/**
* @description: 获取列表数据
* @return {*}
*/
getTaskList() {
const params = {
...this.pagination,
@ -262,32 +359,82 @@ export default {
}
});
},
/* 列表选择改变事件 */
/**
* @description: 列表选择改变事件
* @param {*} selection
* @return {*}
*/
handleSelectionChange(selection) {
this.checkIds = selection.map((item) => item.taskId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/* 点击路径事件 */
/**
* @description: 点击查看新增病害事件
* @param {*} item
* @return {*}
*/
viewDefect(item) {
this.viewVisible = true;
this.dialogItem = item;
},
/* 切换分页 */
/**
* @description: 点击回顾事件
* @param {*} item
* @return {*}
*/
handleRetrace(item) {
this.retraceVisible = true;
this.dialogItem = item;
},
/**
* @description: 点击导出事件
* @param {*} item
* @return {*}
*/
handleExport(item) {},
/**
* @description: 切换分页
* @param {*} arg
* @return {*}
*/
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getTaskList();
},
/* 切换每条/页 */
/**
* @description: 切换每条/
* @param {*} arg
* @return {*}
*/
handleSizeChange(arg) {
this.pagination.size = arg;
this.getTaskList();
},
/* 关闭查看弹窗 */
/**
* @description: 关闭查看弹窗
* @return {*}
*/
viewCancel() {
this.viewVisible = false;
this.dialogItem = {};
},
/**
* @description: 关闭回顾弹窗
* @return {*}
*/
retraceCancel() {
this.retraceVisible = false;
this.dialogItem = {};
},
},
};
</script>
@ -349,5 +496,22 @@ export default {
max-width: 25rem;
}
}
.retrace-dialog {
::v-deep .el-dialog__header {
padding: 10px;
background-color: #113463;
span,
i {
color: #ffffff;
}
}
::v-deep .el-dialog__body {
padding: 0;
background-color: #2e3a46;
}
}
</style>

View File

@ -35,8 +35,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.1.188:8080`,
// target: `http://localhost:8080`,
// target: `http://192.168.1.188:8080`,
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''