Compare commits

..
19 Commits
Author SHA1 Message Date
SunTao a712a1c9a0 fix:修改状态字段 2025-05-15 17:22:25 +08:00
SunTao 8b92c56708 fix:修改病害图片标注,增加滚动图表 2025-05-15 17:20:57 +08:00
SunTao 0e82e20e75 fix:修改轮廓标缺失地图 2025-05-15 15:37:59 +08:00
SunTao 41a866c019 fix:修改登录页面 2025-05-15 15:23:25 +08:00
SunTao 3cb7d03eb7 fix:去除消息查询 2025-05-15 14:39:05 +08:00
SunTao 2bd65a8b2a fix:修改logo 2025-05-14 10:38:18 +08:00
SunTao 60fea4c700 fix:修改病害编码 2025-05-09 17:01:37 +08:00
SunTao 9b6f34fe4e fix:修改病害管理 2025-05-09 16:58:32 +08:00
SunTao 09f3bbaa01 fix:修改病害管理,地图展示2 2025-05-09 10:23:26 +08:00
SunTao f03325a30e 初始化项目 2025-05-06 10:32:07 +08:00
SunTao 9ccef71dcc fix:养护通知单新增加载全屏 2025-04-21 14:14:05 +08:00
SunTao 9d6570ba18 fix:修改查看图片时间 2025-04-16 16:18:00 +08:00
SunTao 26c51dae2d fix:修改通知单是否紧急标识 2025-04-16 11:14:42 +08:00
SunTao 370c5fd633 fix:修改时间 2025-04-15 17:14:00 +08:00
SunTao cfb6fb5b7a fix:修改地图展示聚焦点位数据 2025-04-15 14:04:35 +08:00
SunTao 537ef33fdf fix:修改轮廓标地图 2025-04-14 15:37:59 +08:00
SunTao 6275e6a29e fix:增加删除地图选中事件对象 2025-04-14 10:16:05 +08:00
SunTao 7d6f503c77 fix:修改查看图片 2025-04-10 17:23:04 +08:00
SunTao 67e1cf5723 fix:修改分页与点击事件重复 2025-04-10 17:12:55 +08:00
21 changed files with 1326 additions and 490 deletions
+9 -1
View File
@@ -1,5 +1,13 @@
###
# @Author: SunTao 328867980@qq.com
# @Date: 2025-05-06 09:10:45
# @LastEditors: SunTao 328867980@qq.com
# @LastEditTime: 2025-05-14 10:21:47
# @FilePath: \znxjxt-copy\.env.development
# @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
###
# 页面标题
VUE_APP_TITLE =能巡检系统
VUE_APP_TITLE =领未来
# 开发环境配置
ENV = 'development'
+1 -1
View File
@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE =能巡检系统
VUE_APP_TITLE =领未来
# 生产环境配置
ENV = 'production'
+1 -1
View File
@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE =能巡检系统
VUE_APP_TITLE =领未来
NODE_ENV = production
+1 -1
View File
@@ -40,7 +40,7 @@ http {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://192.168.50.208:8080/;
proxy_pass http://123.57.39.12:8080/;
}
error_page 500 502 503 504 /50x.html;
Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

+13 -1
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:46:23
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-03-31 13:02:21
* @LastEditTime: 2025-04-14 09:54:46
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
* @Description: 公共地图
-->
@@ -541,6 +541,18 @@ export default {
this.selectSingClick.getFeatures().clear();
},
/**
* @description: 清除地图上的选中事件
* @return {void}
*/
clearSelectInteraction() {
if (this.selectSingClick) {
const map = this.instance.get("map");
map.removeInteraction(this.selectSingClick);
this.selectSingClick = null;
}
},
/**
* @description: 绘制多边形地图
* @return {*}
+29 -43
View File
@@ -1,26 +1,18 @@
<template>
<div class="navbar">
<hamburger
id="hamburger-container"
:is-active="sidebar.opened"
class="hamburger-container"
@toggleClick="toggleSideBar"
/>
<hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
@toggleClick="toggleSideBar" />
<breadcrumb
id="breadcrumb-container"
class="breadcrumb-container"
v-if="!topNav"
/>
<breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
<top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
<div class="right-menu">
<template v-if="device !== 'mobile'">
<div class="menu-return right-menu-item">
<!-- <div class="menu-return right-menu-item">
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
</div>
</div> -->
<!-- <search id="header-search" class="right-menu-item" /> -->
<div class="header-news">
<!-- <div class="header-news">
<el-popover
placement="bottom-end"
width="400"
@@ -40,7 +32,6 @@
@click="handleMessageItemClick(item.notificationType)"
>
<div class="index">
<!-- <i v-if="item.title === '成功'" style="color: #67c23a" class="el-icon-success"></i> -->
<i
v-if="item.notificationType === 'REMIND'"
style="color: #e6a23c"
@@ -51,7 +42,6 @@
style="color: #909399"
class="el-icon-warning"
></i>
<!-- <i v-if="item.title === '错误'" style="color: #f56c6c" class="el-icon-error"></i> -->
</div>
<div class="time">
<span>{{ item.createdTime }}</span>
@@ -82,11 +72,10 @@
class="item"
>
<i class="el-icon-bell">
<!-- <div class="num">{{ noticeNum }}</div> -->
</i>
</el-badge>
</el-popover>
</div>
</div> -->
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
@@ -94,10 +83,7 @@
</el-tooltip> -->
</template>
<el-dropdown
class="avatar-container right-menu-item hover-effect"
trigger="click"
>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar" />
<i class="el-icon-caret-bottom" />
@@ -173,7 +159,7 @@ export default {
};
},
mounted() {
this.getMessageList();
// this.getMessageList();
},
methods: {
/* 点击跳转大屏页面 */
@@ -194,32 +180,32 @@ export default {
location.href = "/index";
});
})
.catch(() => {});
.catch(() => { });
},
/**
* @description: 获取消息中心数据
* @return {void}
*/
getMessageList() {
this.messageTimer = setInterval(() => {
getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
if (code === 200) {
this.messageList = rows;
this.noticeNum = total;
if(total > 99){
clearInterval(this.messageTimer);
}
}
});
}, 120000);
getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
if (code === 200) {
this.messageList = rows;
this.noticeNum = total;
}
});
},
// getMessageList() {
// this.messageTimer = setInterval(() => {
// getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
// if (code === 200) {
// this.messageList = rows;
// this.noticeNum = total;
// if (total > 99) {
// clearInterval(this.messageTimer);
// }
// }
// });
// }, 120000);
// getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
// if (code === 200) {
// this.messageList = rows;
// this.noticeNum = total;
// }
// });
// },
/**
* @description: 消息中心查看更多事件
+10 -2
View File
@@ -1,11 +1,19 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2025-05-06 09:14:47
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-05-06 10:19:36
* @FilePath: \znxjxt-copy\src\layout\components\Sidebar\Logo.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/index">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
<router-link v-else key="expand" class="sidebar-logo-link" to="/index">
<img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link>
+1 -1
View File
@@ -74,7 +74,7 @@ export const constantRoutes = [
{
path: '',
component: Layout,
redirect: 'screen',
redirect: 'index',
children: [
{
path: 'index',
+10 -17
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-08 09:26:24
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-19 11:35:24
* @LastEditTime: 2025-05-14 15:42:37
* @FilePath: \znxjxt-ui\src\views\index.vue
* @Description: 系统首页
-->
@@ -10,16 +10,10 @@
<div class="app-container" v-loading="loading">
<fssm-scroll :showBar="false">
<div class="top-content">
<div
class="top-div"
:class="`top-div-${index}`"
v-for="(item, index) in topList"
:key="`top-div-${index}`"
>
<div class="top-div" :class="`top-div-${index}`" v-for="(item, index) in topList" :key="`top-div-${index}`">
<div class="name">{{ item.name }}</div>
<div class="value">
<span>{{ item.value }}</span
>{{ item.unit }}
<span>{{ item.value }}</span>{{ item.unit }}
</div>
</div>
</div>
@@ -31,14 +25,14 @@
<disease-index></disease-index>
</div>
</div>
<div class="bottom-content">
<!-- <div class="bottom-content">
<div class="road-content">
<road-index></road-index>
</div>
<div class="traffic-content">
<traffic-index></traffic-index>
</div>
</div>
</div> -->
</fssm-scroll>
</div>
</template>
@@ -79,10 +73,10 @@ export default {
.then(({ code, data }) => {
if (code === 200) {
this.topList = [
{ name: "路面病害总数", value: data.road, unit: "个" },
{ name: "交安事件总数 ", value: data.event, unit: "个" },
{ name: "桥隧病害总数", value: data.bridge, unit: "个" },
{ name: "绿化待处理问题数", value: data.green, unit: "个" },
{ name: "螺栓脱落总数", value: data.road, unit: "个" },
{ name: "护拦板检测总数 ", value: data.event, unit: "个" },
{ name: "轮廓标丢失总数", value: data.bridge, unit: "个" },
// { name: "绿化待处理问题数", value: data.green, unit: "个" },
];
}
})
@@ -151,7 +145,7 @@ export default {
.middle-content {
width: 100%;
height: 60%;
height: 80%;
display: flex;
justify-content: space-between;
@@ -189,4 +183,3 @@ export default {
}
}
</style>
+7 -5
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-08 09:26:24
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-05 11:15:48
* @LastEditTime: 2025-05-14 10:16:08
* @FilePath: \znxjxt-ui\src\views\login.vue
* @Description: 系统登录页
-->
@@ -10,7 +10,7 @@
<template>
<div class="login">
<div class="login-title">
<div class="mini-title"></div>
<div class="mini-title">智领未来</div>
<div class="middle-title">
<div>智能巡检系统</div>
<div><span>安全生产</span><span>可视化便捷</span></div>
@@ -184,7 +184,7 @@ export default {
this.$store
.dispatch("Login", this.loginForm)
.then(() => {
this.$router.push({ path: "/screen" }).catch(() => {});
this.$router.push({ path: "/index" }).catch(() => {});
})
.catch(() => {
this.loading = false;
@@ -209,16 +209,18 @@ export default {
background-size: cover;
.login-title {
width: 350px;
width: 450px;
height: 350px;
.mini-title {
width: 100%;
height: 15%;
padding-left: 4.5rem;
font-size: 1.4rem;
font-weight: 600;
background-image: url("../assets/images/login-title.png");
background-repeat: no-repeat;
background-size: 30% 55%;
background-size: 15% 55%;
}
.middle-title {
@@ -2,25 +2,49 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-20 11:58:33
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-03-10 11:27:58
* @LastEditTime: 2025-04-21 14:12:13
* @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\edit-dialog.vue
* @Description: 养护通知单编辑弹窗
-->
<template>
<div class="edit-dialog">
<el-form class="editForm" ref="editForm" :model="editForm" :rules="rules" label-width="8rem">
<el-form
class="editForm"
ref="editForm"
:model="editForm"
:rules="rules"
label-width="8rem"
>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="路段类型:" prop="diseRoadPosiType">
<el-select v-model="editForm.diseRoadPosiType" placeholder="请选择路段类型" clearable>
<el-option v-for="item in segmentTypeList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="editForm.diseRoadPosiType"
placeholder="请选择路段类型"
clearable
>
<el-option
v-for="item in segmentTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="病害成因:" prop="diseCauses">
<el-select v-model="editForm.diseCauses" placeholder="请选择病害成因" clearable>
<el-option v-for="item in causesList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="editForm.diseCauses"
placeholder="请选择病害成因"
clearable
>
<el-option
v-for="item in causesList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
@@ -33,17 +57,39 @@
</el-col> -->
<el-col :span="6">
<el-form-item label="所在路段:" prop="diseRoadPart">
<el-select v-model="editForm.diseRoadPart" placeholder="请选择所在路段" filterable remote clearable reserve-keyword
:filter-method="handleDiseRoadPart" @change="changeDiseRoadPart">
<el-option v-for="(item, index) in roadPartList" :key="`diseRoadPart-name-${index}`" :label="item.label"
:value="item.value"></el-option>
<el-select
v-model="editForm.diseRoadPart"
placeholder="请选择所在路段"
filterable
remote
clearable
reserve-keyword
:filter-method="handleDiseRoadPart"
@change="changeDiseRoadPart"
>
<el-option
v-for="(item, index) in roadPartList"
:key="`diseRoadPart-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="病害类型:" prop="diseFirstType">
<el-select v-model="editForm.diseFirstType" placeholder="请选择病害类型" clearable @change="changeDetailed">
<el-option v-for="item in diseFirstType" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="editForm.diseFirstType"
placeholder="请选择病害类型"
clearable
@change="changeDetailed"
>
<el-option
v-for="item in diseFirstType"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
@@ -51,83 +97,192 @@
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="病害二级类型:">
<el-select v-model="editForm.diseTypeDetailed" placeholder="请选择病害二级类型" filterable clearable>
<el-option v-for="item in diseTypeDetailedList" :key="item.value" :label="item.label"
:value="item.value" />
<el-select
v-model="editForm.diseTypeDetailed"
placeholder="请选择病害二级类型"
filterable
clearable
>
<el-option
v-for="item in diseTypeDetailedList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工区:" prop="matTaskAreaId">
<el-select v-model="editForm.matTaskAreaId" placeholder="请选择工区" filterable remote clearable reserve-keyword
:filter-method="handleMatTaskArea" @change="changeMatTaskArea">
<el-option v-for="(item, index) in taskAreaList" :key="`taskAreaList-name-${index}`" :label="item.label"
:value="item.value"></el-option>
<el-select
v-model="editForm.matTaskAreaId"
placeholder="请选择工区"
filterable
remote
clearable
reserve-keyword
:filter-method="handleMatTaskArea"
@change="changeMatTaskArea"
>
<el-option
v-for="(item, index) in taskAreaList"
:key="`taskAreaList-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="工作站:" prop="matTWorkStationId">
<el-select v-model="editForm.matTWorkStationId" placeholder="请选择工作站" filterable remote clearable
reserve-keyword :filter-method="handleMatWorkStation" @change="changeMatWorkStation">
<el-option v-for="(item, index) in matWorkStationList" :key="`WorkStationId-name-${index}`"
:label="item.label" :value="item.value"></el-option>
<el-select
v-model="editForm.matTWorkStationId"
placeholder="请选择工作站"
filterable
remote
clearable
reserve-keyword
:filter-method="handleMatWorkStation"
@change="changeMatWorkStation"
>
<el-option
v-for="(item, index) in matWorkStationList"
:key="`WorkStationId-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="车道:" prop="diseRoadLine">
<el-input v-model="editForm.diseRoadLine" placeholder="请填写车道" clearable>
<el-input
v-model="editForm.diseRoadLine"
placeholder="请填写车道"
clearable
>
</el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="6">
<el-form-item label="桥梁:" prop="connBridge" v-if="editForm.diseRoadPosiType !== '2'">
<el-select v-model="editForm.connBridge" placeholder="请选择桥梁" filterable remote clearable reserve-keyword
:filter-method="handleConnBridge" @change="changeConnBridge">
<el-option v-for="(item, index) in connBridgeList" :key="`connBridge-name-${index}`" :label="item.label"
:value="item.value"></el-option>
<el-form-item
label="桥梁:"
prop="connBridge"
v-if="editForm.diseRoadPosiType !== '2'"
>
<el-select
v-model="editForm.connBridge"
placeholder="请选择桥梁"
filterable
remote
clearable
reserve-keyword
:filter-method="handleConnBridge"
@change="changeConnBridge"
>
<el-option
v-for="(item, index) in connBridgeList"
:key="`connBridge-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="隧道:" prop="connTunnel" v-if="editForm.diseRoadPosiType !== '2'">
<el-select v-model="editForm.connTunnel" placeholder="请选择隧道" filterable remote clearable reserve-keyword
:filter-method="handleConnTunnel" @change="changeConnTunnel">
<el-option v-for="(item, index) in connTunnelList" :key="`connTunnel-name-${index}`" :label="item.label"
:value="item.value"></el-option>
<el-form-item
label="隧道:"
prop="connTunnel"
v-if="editForm.diseRoadPosiType !== '2'"
>
<el-select
v-model="editForm.connTunnel"
placeholder="请选择隧道"
filterable
remote
clearable
reserve-keyword
:filter-method="handleConnTunnel"
@change="changeConnTunnel"
>
<el-option
v-for="(item, index) in connTunnelList"
:key="`connTunnel-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="收费站:" prop="stationCode" v-if="editForm.diseRoadPosiType === '2'">
<el-select v-model="editForm.stationCode" placeholder="请选择收费站" filterable remote clearable reserve-keyword
:filter-method="handleStationCode" @change="changeStationCode">
<el-option v-for="(item, index) in stationCodeList" :key="`stationCode-name-${index}`" :label="item.label"
:value="item.value"></el-option>
<el-form-item
label="收费站:"
prop="stationCode"
v-if="editForm.diseRoadPosiType === '2'"
>
<el-select
v-model="editForm.stationCode"
placeholder="请选择收费站"
filterable
remote
clearable
reserve-keyword
:filter-method="handleStationCode"
@change="changeStationCode"
>
<el-option
v-for="(item, index) in stationCodeList"
:key="`stationCode-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="收费站位置:" prop="stationLocation" v-if="editForm.diseRoadPosiType === '2'">
<el-select v-model="editForm.stationLocation" placeholder="请选择收费站位置" clearable>
<el-option v-for="item in stationLocationList" :key="item.value" :label="item.label"
:value="item.value" />
<el-form-item
label="收费站位置:"
prop="stationLocation"
v-if="editForm.diseRoadPosiType === '2'"
>
<el-select
v-model="editForm.stationLocation"
placeholder="请选择收费站位置"
clearable
>
<el-option
v-for="item in stationLocationList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="方向:" prop="diseRoadDirec">
<el-select v-model="editForm.diseRoadDirec" placeholder="请选择方向" clearable>
<el-option v-for="item in roadDirectionList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="editForm.diseRoadDirec"
placeholder="请选择方向"
clearable
>
<el-option
v-for="item in roadDirectionList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="开始桩号:" prop="diseStartStake">
<el-input v-model="editForm.diseStartStake" placeholder="K0000+000" />
<el-input
v-model="editForm.diseStartStake"
placeholder="K0000+000"
/>
</el-form-item>
</el-col>
</el-row>
@@ -138,33 +293,81 @@
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="匝道类型:" prop="rampType" v-if="editForm.diseRoadPosiType === '3'">
<el-select v-model="editForm.rampType" placeholder="请选择匝道类型" clearable>
<el-option v-for="item in rampTypeList" :key="item.value" :label="item.label" :value="item.value" />
<el-form-item
label="匝道类型:"
prop="rampType"
v-if="editForm.diseRoadPosiType === '3'"
>
<el-select
v-model="editForm.rampType"
placeholder="请选择匝道类型"
clearable
>
<el-option
v-for="item in rampTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="匝道立交:" prop="rampInterchangeCode" v-if="editForm.diseRoadPosiType === '3'">
<el-select v-model="editForm.rampInterchangeCode" placeholder="请选择匝道立交" filterable remote clearable
reserve-keyword :filter-method="handleRampIntOrientation" @change="changeRampIntOrientation">
<el-option v-for="(item, index) in rampIntOrientationList" :key="`rampInterchangeCode-name-${index}`"
:label="item.label" :value="item.value"></el-option>
<el-form-item
label="匝道立交:"
prop="rampInterchangeCode"
v-if="editForm.diseRoadPosiType === '3'"
>
<el-select
v-model="editForm.rampInterchangeCode"
placeholder="请选择匝道立交"
filterable
remote
clearable
reserve-keyword
:filter-method="handleRampIntOrientation"
@change="changeRampIntOrientation"
>
<el-option
v-for="(item, index) in rampIntOrientationList"
:key="`rampInterchangeCode-name-${index}`"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="匝道立交方向:" prop="rampIntOrientation" v-if="editForm.diseRoadPosiType === '3'">
<el-select v-model="editForm.rampIntOrientation" placeholder="请选择匝道立交方向" clearable>
<el-option v-for="item in rampInterchangeCodeList" :key="item.value" :label="item.label"
:value="item.value" />
<el-form-item
label="匝道立交方向:"
prop="rampIntOrientation"
v-if="editForm.diseRoadPosiType === '3'"
>
<el-select
v-model="editForm.rampIntOrientation"
placeholder="请选择匝道立交方向"
clearable
>
<el-option
v-for="item in rampInterchangeCodeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24"><el-form-item label="详细说明:" prop="diseElaDecs">
<el-input v-model="editForm.diseElaDecs" type="textarea" :rows="3" placeholder="请输入内容" resize="none">
<el-col :span="24"
><el-form-item label="详细说明:" prop="diseElaDecs">
<el-input
v-model="editForm.diseElaDecs"
type="textarea"
:rows="3"
placeholder="请输入内容"
resize="none"
>
</el-input>
</el-form-item>
</el-col>
@@ -173,21 +376,50 @@
<el-card shadow="never">
<div slot="header" class="clearfix">
<span style="font-size: 1.2rem">病害列表</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="viewSelected">选择病害</el-button>
<el-button style="float: right; padding: 3px 1rem" type="text" v-if="mapTip"
@click="viewMapSelected(false)">地图查看</el-button>
<el-button style="float: right; padding: 3px 1rem" type="text" v-if="!mapTip"
@click="viewMapSelected(true)">列表查看</el-button>
<el-button
style="float: right; padding: 3px 0"
type="text"
@click="viewSelected"
>选择病害</el-button
>
<el-button
style="float: right; padding: 3px 1rem"
type="text"
v-if="mapTip"
@click="viewMapSelected(false)"
>地图查看</el-button
>
<el-button
style="float: right; padding: 3px 1rem"
type="text"
v-if="!mapTip"
@click="viewMapSelected(true)"
>列表查看</el-button
>
</div>
<div style="height: 33rem">
<!-- 列表 -->
<el-table v-if="mapTip" ref="roadTable" :data="checkedDiseaseList" :row-key="getRowKey" height="33rem"
style="width: 100%">
<el-table
v-if="mapTip"
ref="roadTable"
:data="checkedDiseaseList"
:row-key="getRowKey"
height="33rem"
style="width: 100%"
>
<!-- <el-table-column type="selection" :reserve-selection="true" width="55" align="center" /> -->
<el-table-column label="路段名称" align="center" prop="segmentName" />
<el-table-column label="采集时间" align="center" prop="createdTimeLocal">
<el-table-column
label="采集时间"
align="center"
prop="createdTimeLocal"
>
</el-table-column>
<el-table-column label="病害类型" align="center" prop="defectTypeName">
<el-table-column
label="病害类型"
align="center"
prop="defectTypeName"
>
</el-table-column>
<!-- <el-table-column label="病害状态" align="center" prop="state">
<template slot-scope="scope">
@@ -198,44 +430,89 @@
<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" />
<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>
scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}`
}}
</template>
</el-table-column>
<el-table-column label="病害面积" align="center" prop="targetArea" />
<el-table-column label="道路方向" align="center" prop="inspectDirection">
<el-table-column
label="道路方向"
align="center"
prop="inspectDirection"
>
<template slot-scope="scope">
<span>{{
scope.row.inspectDirection === "0" ? "上行" : "下行"
}}</span>
}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<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-delete" @click="handleDelete(scope.$index)">删除
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.$index)"
>删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 地图 -->
<fssm-map ref="diseaseMap" v-if="!mapTip" @map-zoom="getZoom" @feature-select="featureSelect"></fssm-map>
<fssm-map
ref="diseaseMap"
v-if="!mapTip"
@map-zoom="getZoom"
@feature-select="featureSelect"
></fssm-map>
</div>
</el-card>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button
type="primary"
@click="submitForm"
v-loading.fullscreen.lock="fullscreenLoading"
> </el-button
>
<el-button @click="cancel"> </el-button>
</div>
<!-- 查看图片大图 -->
<el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" append-to-body destroy-on-close
@close="imgCancel">
<el-dialog
title="查看图片"
:visible.sync="showImageDialog"
width="85rem"
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>
<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 class="rect-image">
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }}
@@ -244,15 +521,33 @@
病害类型
{{ currentImageItem.defectTypeName || "暂无数据" }}
病害面积{{ currentImageItem.targetArea }}平方米 病害长度{{
currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}` }} </div>
currentImageItem.targetLen * 1 <= 0
? "暂无数据"
: `${currentImageItem.targetLen}`
}}
</div>
</div>
</el-dialog>
<!-- 选择病害弹窗 -->
<el-dialog title="选择病害" :visible.sync="diseaseVisible" width="90%" append-to-body :close-on-click-modal="false"
destroy-on-close @close="diseaseCancel">
<disease-dialog v-if="diseaseVisible" :diseaseData="diseaseData" :checkedDiseaseList="checkedDiseaseList"
:segmentList="segmentList" :tableDefect="tableDefect" @cancel="diseaseCancel" @checkedList="getCheckedList" />
<el-dialog
title="选择病害"
:visible.sync="diseaseVisible"
width="90%"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="diseaseCancel"
>
<disease-dialog
v-if="diseaseVisible"
:diseaseData="diseaseData"
:checkedDiseaseList="checkedDiseaseList"
:segmentList="segmentList"
:tableDefect="tableDefect"
@cancel="diseaseCancel"
@checkedList="getCheckedList"
/>
</el-dialog>
</div>
</template>
@@ -291,7 +586,7 @@ export default {
// 传过来的表单信息
dialogItemObj: {
type: Object,
default: () => { },
default: () => {},
},
// 传过来的列表信息
dialogItem: {
@@ -427,7 +722,9 @@ export default {
// 选择病害弹窗显隐控制
diseaseVisible: false,
// 传选择病害弹窗数据
diseaseData: {}
diseaseData: {},
// 全屏加载
fullscreenLoading: false,
};
},
computed: {
@@ -506,9 +803,9 @@ export default {
diseRoadPart: [
{ required: true, message: "请选择所在路段", trigger: "change" },
],
diseElaDecs:[
{ required: true, message: "请填写详细说明", trigger: "blur" },
]
diseElaDecs: [
{ required: true, message: "请填写详细说明", trigger: "blur" },
],
};
},
isStakeStartRequired() {
@@ -529,10 +826,10 @@ export default {
this.handleDiseRoadPart(val.diseRoadPartName);
this.handleMatTaskArea(val.matTaskAreaIdName);
this.handleMatWorkStation(val.matTWorkStationIdName);
this.handleConnBridge(val.connBridgeName)
this.handleConnTunnel(val.connTunnelName)
this.handleStationCode(val.stationCodename)
this.handleRampIntOrientation(val.rampInterchangeName)
this.handleConnBridge(val.connBridgeName);
this.handleConnTunnel(val.connTunnelName);
this.handleStationCode(val.stationCodename);
this.handleRampIntOrientation(val.rampInterchangeName);
if (val.diseFirstType) {
this.changeDetailed(val.diseFirstType);
}
@@ -555,7 +852,7 @@ export default {
immediate: true,
},
},
mounted() { },
mounted() {},
methods: {
/**
* @description: 获取所在路段下拉数据
@@ -788,17 +1085,20 @@ export default {
submitForm() {
this.$refs.editForm.validate((valid) => {
if (valid) {
this.fullscreenLoading = true;
const defectId = this.checkedDiseaseList?.map((item) => item.id);
addMaintenanceNotice({ ...this.editForm, defectId }).then(
({ code, data }) => {
addMaintenanceNotice({ ...this.editForm, defectId })
.then(({ code, data }) => {
if (code === 200) {
this.$message.success("生成成功");
this.$emit("cancel");
} else {
this.$message.error(data);
}
}
);
})
.finally(() => {
this.fullscreenLoading = false;
});
}
});
},
@@ -926,9 +1226,10 @@ export default {
return new Style({
image: new Icon({
crossOrigin: "anonymous",
src: require(`@/assets/screen/index/${feature.getProperties().features[0].get("data")
.defectTypeName || "龟裂"
}.png`),
src: require(`@/assets/screen/index/${
feature.getProperties().features[0].get("data")
.defectTypeName || "龟裂"
}.png`),
// 图标缩放比例
scale: 0.5,
displacement: [0, 30],
@@ -997,7 +1298,7 @@ export default {
diseRoadPart: this.editForm.diseRoadPart,
diseStartStake: this.editForm.diseStartStake,
diseEndStake: this.editForm.diseEndStake,
}
};
this.diseaseVisible = true;
},
@@ -1018,7 +1319,7 @@ export default {
*/
diseaseCancel() {
this.diseaseVisible = false;
this.diseaseData = {}
this.diseaseData = {};
},
/**
@@ -1128,7 +1429,7 @@ export default {
color: #f01515;
}
>div {
> div {
margin: 0.5rem 0;
}
}
@@ -2,75 +2,156 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-20 11:58:33
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-03-10 10:46:02
* @LastEditTime: 2025-04-16 16:10:25
* @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\index.vue
* @Description: 养护通知单
-->
<template>
<div class="content">
<el-form :model="noticeForm" :rules="noticeFormRules" ref="noticeForm" size="small" :inline="true"
label-width="5rem">
<el-form
:model="noticeForm"
:rules="noticeFormRules"
ref="noticeForm"
size="small"
:inline="true"
label-width="5rem"
>
<el-form-item label="道路名称" prop="segmentId">
<el-select v-model="noticeForm.segmentId" placeholder="请选择路段" clearable filterable>
<el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="noticeForm.segmentId"
placeholder="请选择路段"
clearable
filterable
>
<el-option
v-for="item in segmentList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="采集时间" prop="dateTime">
<el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
<el-date-picker
v-model="dateTime"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
clearable
/>
</el-form-item>
<el-form-item label="病害类型" prop="paramsDefectType">
<el-cascader v-model="paramsDefectType" :options="tableDefect" :props="{
checkStrictly: true,
emitPath: true,
children: 'subTypes',
}" clearable></el-cascader>
<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="inspectDirection">
<el-select v-model="noticeForm.inspectDirection" placeholder="请选择" clearable>
<el-select
v-model="noticeForm.inspectDirection"
placeholder="请选择"
clearable
>
<el-option label="上行" value="0" />
<el-option label="下行" value="1" />
</el-select>
</el-form-item>
<el-form-item label="是否紧急" prop="urgentFlag">
<el-select v-model="noticeForm.urgentFlag" placeholder="请选择" clearable>
<el-option label="紧急" value="1" />
<el-select
v-model="noticeForm.urgentFlag"
placeholder="请选择"
clearable
>
<el-option label="紧急" value="0" />
<el-option label="不紧急" value="2" />
</el-select>
</el-form-item>
<el-form-item label="公里桩" prop="stakeRange">
<el-input v-model="noticeForm.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
<el-input
v-model="noticeForm.stakeStart"
placeholder="起始公里桩"
style="width: 10rem"
clearable
/>
<span style="margin: 0 5px">-</span>
<el-input v-model="noticeForm.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
<el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
<el-input
v-model="noticeForm.stakeEnd"
placeholder="终止公里桩"
style="width: 10rem"
clearable
/>
<el-tooltip
class="item"
effect="dark"
content="格式为K0000+000"
placement="top"
>
<i class="el-icon-info"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="病害长度" prop="lengthRange">
<el-input-number v-model="noticeForm.minLen" controls-position="right" placeholder="最小长度"
:min="0"></el-input-number>
<el-input-number
v-model="noticeForm.minLen"
controls-position="right"
placeholder="最小长度"
:min="0"
></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number v-model="noticeForm.maxLen" controls-position="right" placeholder="最大长度"
:min="0"></el-input-number>
<el-input-number
v-model="noticeForm.maxLen"
controls-position="right"
placeholder="最大长度"
:min="0"
></el-input-number>
</el-form-item>
<el-form-item label="病害面积" prop="areaRange">
<el-input-number v-model="noticeForm.minArea" controls-position="right" placeholder="最小面积"
:min="0"></el-input-number>
<el-input-number
v-model="noticeForm.minArea"
controls-position="right"
placeholder="最小面积"
:min="0"
></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number v-model="noticeForm.maxArea" controls-position="right" placeholder="最大面积"
:min="0"></el-input-number>
<el-input-number
v-model="noticeForm.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-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">新增
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增
</el-button>
</el-col>
<!-- <el-col :span="1.5">
@@ -78,12 +159,23 @@
@click="handleDelete(null)">删除
</el-button>
</el-col> -->
<el-col :span="8"><span style="font-size: 1.2rem">病害长度{{ lengthSum }}</span><span
style="margin-left: 1rem; font-size: 1.2rem">病害总面积{{ areaSum }}平方米</span></el-col>
<el-col :span="8"
><span style="font-size: 1.2rem">病害长度{{ lengthSum }}</span
><span style="margin-left: 1rem; font-size: 1.2rem"
>病害总面积{{ areaSum }}平方米</span
></el-col
>
</el-row>
<!-- 表格 -->
<el-table class="notice-table" ref="noticeTable" :data="noticeList" @selection-change="handleSelectionChange"
:row-key="getRowKey" v-loading="loading" style="width: 100%">
<el-table
class="notice-table"
ref="noticeTable"
:data="noticeList"
@selection-change="handleSelectionChange"
:row-key="getRowKey"
v-loading="loading"
style="width: 100%"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column type="index" label="序号"> </el-table-column>
<el-table-column label="路段名称" align="center" prop="segmentName" />
@@ -95,66 +187,137 @@
<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" />
<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>
{{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}` }}
</template>
</el-table-column>
<el-table-column label="病害面积" align="center" prop="targetArea" />
<el-table-column label="道路方向" align="center" prop="inspectDirection">
<template slot-scope="scope">
<span>{{
scope.row.inspectDirection === "0" ? "上行" : "下行"
}}</span>
}}</span>
</template>
</el-table-column>
<el-table-column label="是否紧急" align="center" prop="urgentFlag">
<template slot-scope="scope">
<el-button v-if="scope.row.urgentFlag === 1" type="danger" plain disabled>紧急</el-button>
<el-button v-if="scope.row.urgentFlag === 2" type="warning" plain disabled>不紧急</el-button>
<el-button
v-if="scope.row.urgentFlag === 0"
type="danger"
plain
disabled
>紧急</el-button
>
<el-button
v-if="scope.row.urgentFlag === 2"
type="warning"
plain
disabled
>不紧急</el-button
>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<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)">生成工单
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>生成工单
</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
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="90%" append-to-body :close-on-click-modal="false"
destroy-on-close @close="addCancel">
<edit-dialog v-if="addVisible" :causesList="causesList" :rampTypeList="rampTypeList"
:diseFirstType="diseFirstType" :stationLocationList="stationLocationList" :roadDirectionList="roadDirectionList"
:segmentTypeList="segmentTypeList" :segmentList="segmentList" :tableDefect="tableDefect"
:dialogItem="dialogItem" :dialogItemObj="dialogItemObj" :dialogMsg="dialogMsg" @cancel="addCancel" />
<el-dialog
title="生成表单"
:visible.sync="addVisible"
width="90%"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="addCancel"
>
<edit-dialog
v-if="addVisible"
:causesList="causesList"
:rampTypeList="rampTypeList"
:diseFirstType="diseFirstType"
:stationLocationList="stationLocationList"
:roadDirectionList="roadDirectionList"
:segmentTypeList="segmentTypeList"
:segmentList="segmentList"
:tableDefect="tableDefect"
:dialogItem="dialogItem"
:dialogItemObj="dialogItemObj"
:dialogMsg="dialogMsg"
@cancel="addCancel"
/>
</el-dialog>
<!-- 查看图片大图 -->
<el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" append-to-body destroy-on-close
@close="imgCancel">
<el-dialog
title="查看图片"
:visible.sync="showImageDialog"
width="85rem"
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>
<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 class="rect-image">
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }}
{{ currentImageItem.createdTimeLocal }}
起始桩号 {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号
{{ currentImageItem.stakeEnd || "暂无数据" }}
病害类型
{{ currentImageItem.defectTypeName || "暂无数据" }}
病害面积{{ currentImageItem.targetArea }}平方米 病害长度{{
currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}` }} </div>
currentImageItem.targetLen * 1 <= 0
? "暂无数据"
: `${currentImageItem.targetLen}`
}}
</div>
</div>
</el-dialog>
</div>
</template>
@@ -510,15 +673,17 @@ export default {
* @return {*}
*/
handleAdd() {
getMaintenanceDetail(this.checkIds).then(({ code, data, msg }) => {
if (code === 200) {
this.dialogItemObj = data ? data : {};
this.dialogMsg = msg;
getMaintenanceDetail(this.checkIds)
.then(({ code, data, msg }) => {
if (code === 200) {
this.dialogItemObj = data ? data : {};
this.dialogMsg = msg;
this.addVisible = true;
}
})
.catch(() => {
this.addVisible = true;
}
}).catch(() => {
this.addVisible = true;
})
});
},
/**
@@ -547,7 +712,7 @@ export default {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => { });
.catch(() => {});
},
/**
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2025-02-10 11:02:50
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-02-27 15:07:15
* @LastEditTime: 2025-04-16 10:43:54
* @FilePath: \znxjxt-ui\src\views\xj\document\view-notification\index.vue
* @Description: 单据-查看通知单页面
-->
@@ -107,7 +107,7 @@
</el-form-item>
<el-form-item label="是否紧急" prop="urgentFlag">
<el-select v-model="noticeForm.urgentFlag" placeholder="请选择" clearable>
<el-option label="紧急" value="1" />
<el-option label="紧急" value="0" />
<el-option label="不紧急" value="2" />
</el-select>
</el-form-item>
+518 -23
View File
@@ -2,60 +2,522 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2025-03-25 11:10:16
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-04-08 13:56:59
* @LastEditTime: 2025-05-15 17:11:29
* @FilePath: \znxjxt-ui\src\views\xj\inspection\diease-line\index.vue
* @Description: 地图展示病害-首页
* @Description: 护拦板检测-首页-910001
-->
<template>
<div class="diease-line-content">
<fssm-map class="map-diease-map" :popupType="'dieaseLine'"></fssm-map>
<div class="diease-form">
<el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
<el-form-item label="巡检任务" prop="segmentId">
<el-select v-model="queryParams.segmentId" placeholder="请选择巡检任务" filterable clearable>
<el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="桩号">
<el-input v-model="queryParams.stakeStart" placeholder="起始公里桩" style="width: 10rem" clearable />
<span style="margin: 0 5px">-</span>
<el-input v-model="queryParams.stakeEnd" placeholder="终止公里桩" style="width: 10rem" clearable />
<el-tooltip class="item" effect="dark" content="格式为K0000+000" placement="top">
<i class="el-icon-info"></i>
</el-tooltip>
</el-form-item>
<el-form-item label="护栏高度">
<el-input-number v-model="queryParams.minHei" controls-position="right" placeholder="最小高度"
:min="0"></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number v-model="queryParams.maxHei" controls-position="right" placeholder="最大高度"
:min="0"></el-input-number>
</el-form-item>
<el-form-item label="护栏状态">
<el-select v-model="queryParams.railStatus" placeholder="请选择护拦板高度状态" clearable>
<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-button type="primary" size="mini" @click="handleQuery">筛选</el-button>
<el-button size="mini" @click="handleCanel"> </el-button>
</el-form-item>
</el-form>
</div>
<div class="diease-container">
<div class="diease-left">
<!-- 列表 -->
<el-table ref="roadTable" v-loading="loading" height="500" :data="tableList" style="width: 100%">
<el-table-column label="巡检任务" align="center" prop="segmentName">
</el-table-column>
<el-table-column label="类型" align="center" prop="defectTypeName" />
<el-table-column label="桩号" align="center" prop="stakeStart" />
<el-table-column label="护拦杆高度" align="center" prop="hei">
</el-table-column>
<!-- <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-view" @click="showScreenImg(scope.row)">查看
</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, 50, 100, 200, 500]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
</el-pagination>
</div>
</div>
<div class="diease-right">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>护拦板高度展示</span>
</div>
<div class="card-item" ref="cardChart">
</div>
</el-card>
</div>
</div>
<!-- 查看图片大图 -->
<el-dialog title="查看图片" :visible.sync="showImageDialog" width="85rem" 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 class="rect-image">
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }}
起始桩号 {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号
{{ currentImageItem.stakeEnd || "暂无数据" }}
病害类型
{{ currentImageItem.defectTypeName || "暂无数据" }}
病害面积{{ currentImageItem.targetArea }}平方米 病害长度{{
currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}` }} </div>
</div>
</el-dialog>
</div>
</template>
<script>
import { getBarrierBoardList } from "@/api/xj/diseaseLine";
import FssmMap from "@/components/map/fssm-map.vue";
import { listDefect, getTaskList } from "@/api/xj/disease";
import * as echarts from "echarts";
export default {
name: "DieaseLine",
components: {
FssmMap,
},
data() {
return {
pointList: [],
lineList: [],
// 搜索表单
queryParams: {
// 道路名称
segmentId: "",
// 起始公里桩
stakeStart: "",
// 终止公里桩
stakeEnd: "",
// 最小高度
minHei: "0",
// 最大高度
maxHei: "100",
// 状态
railStatus:"0"
},
// 查询表单
searchForm: {},
// 巡检任务下拉
taskList: [],
// 护拦板高度状态下拉
statusList: [
{ label: "异常", value: "0" },
{ label: "正常", value: "1" },
],
// 表单规则
rules: {
segmentId: [
{ required: true, message: "请选择巡检任务", trigger: "change" },
],
},
// 列表加载状态
loading: false,
// 列表数据
tableList: [],
// 分页-列表总数
tableTotal: 0,
// 分页-页数页码
pagination: {
page: 1,
size: 10,
},
// echartX轴
xData: [],
// echartY轴
yData: [],
// 查看图片弹窗显隐控制
showImageDialog: false,
// 查看大图图片数据
currentImageItem: {},
// 图片病害位置信息
rects: [],
};
},
created() {
this.getMapPoint();
mounted() {
this.getTableList()
this.getTaskSelectList()
},
methods: {
/**
* @description: 获取地图点位数据
* @param {*}
* @return {*}
*/
getMapPoint() {
getBarrierBoardList({ page: 0, size: 100000 }).then(({ code, data }) => {
* @description: 查询巡检任务下拉数据
* @param {*} val
* @return {*}
*/
getTaskSelectList() {
getTaskList().then(({ code, data }) => {
if (code === 200) {
console.log(data, "dfdfdf");
this.taskList = data;
}
});
},
/**
* @description: 绘制地图点位
* @description: 获取表格数据
* @param {*}
* @return {*}
*/
drawMapPoint() {},
getTableList() {
// 处理日期范围
this.loading = true;
const params = {
...this.searchForm,
...this.pagination,
classType: "2",
defectType: "910001",
};
listDefect(params)
.then((response) => {
this.tableList = response.rows;
this.xData = response.rows.map((item) => {
return item.segmentName
});
this.yData = response.rows.map((item) => { return item.hei });
this.tableTotal = response.total;
this.loading = false;
this.drawChart()
})
.catch(() => {
this.loading = false;
});
},
/**
* @description: 绘制地图线段
* @description: 点击筛选事件
* @param {*}
* @return {*}
*/
drawMap() {},
handleQuery() {
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
this.pagination.page = 1;
this.getTableList();
},
/**
* @description: 点击重置事件事件
* @param {*}
* @return {*}
*/
handleCanel() {
this.queryParams = {
// 道路名称
segmentId: "",
// 起始公里桩
stakeStart: "",
// 终止公里桩
stakeEnd: "",
// 最小高度
minHei: "",
// 最大高度
maxHei: "",
};
this.searchForm = {}
this.pagination.page = 1;
this.getTableList();
},
/**
* @description: 切换分页
* @param {*} arg
* @return {*}
*/
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getTableList();
},
/**
* @description: 切换每条/页
* @param {*} arg
* @return {*}
*/
handleSizeChange(arg) {
this.pagination.size = arg;
this.getTableList();
},
/**
* @description: 绘制echart图
* @param {*}
* @return {*}
*/
drawChart() {
const chart = echarts.init(this.$refs.cardChart);
chart.setOption({
tooltip: {
trigger: 'axis',
color: '#fff',
fontSize: 14,
axisPointer: {
lineStyle: {
color: 'rgba(19,255,241,1)',
type: 'dashed',
width: 2
}
}
},
legend: {
right: 'center',
top: '5%',
itemWidth: 16,
itemHeight: 16,
itemGap: 25,
icon: 'stack',
color: '#E1E5E6'
},
grid: {
top: '16%',
right: '4%',
bottom: '4%',
left: '6%',
containLabel: true
},
xAxis: {
data: this.xData,
type: 'category',
boundaryGap: true,
axisLabel: {
color: '#B5C5D4',
fontSize: 12
},
axisLine: {
show: false
},
axisTick: {
show: false // 去除刻度线
}
},
yAxis: {
type: 'value',
axisTick: { show: false },
axisLine: {
show: false
},
axisLabel: {
color: '#B5C5D4',
fontSize: 12,
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: '#9EA6B4',
type: 'solid'
}
}
},
series: [
{
name: '护拦板高度',
smooth: true,
type: 'line',
// 填充颜色设置
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(26, 119, 221,.4)' // 渐变色的起始颜色
},
{
offset: 0.9,
color: 'rgba(26, 119, 221,0)' // 渐变线的结束颜色
}
],
false
),
shadowColor: 'rgba(0, 0, 0, 0.1)'
},
// 开始不显示拐点, 鼠标经过显示
showSymbol: false,
symbolSize: 4,
// 设置拐点颜色以及边框
itemStyle: {
// color: "rgba(241,162,42,1)",
color: 'rgba(26, 119, 221, 1)'
},
data: this.yData
},
{
name: '基准线',
type: 'line',
showSymbol: false,
markLine: {
symbol: 'none',
lineStyle: {
type: 'dashed',
color: '#FF1D00',
width: 1
},
label: {
show: true,
position: 'insideEndTop', // 文字位置,可选值有 'start', 'end', 'center'
padding: [0, 0, 0, 0],
// 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'
fontWeight: 'normal' // 文字粗细
},
data: [
{
yAxis: 20,
lineStyle: { color: '#FF4D4D' },
label: {
color: '#FF4D4D',
formatter: '下限值 '
}
}
]
}
},
{
name: '基准线',
type: 'line',
showSymbol: false,
markLine: {
symbol: 'none',
lineStyle: {
type: 'dashed',
color: '#FF1D00',
width: 1
},
label: {
show: true,
position: 'insideEndTop', // 文字位置,可选值有 'start', 'end', 'center'
padding: [0, 0, 0, 0],
// 'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'
fontWeight: 'normal' // 文字粗细
},
data: [
{
yAxis: 60,
lineStyle: { color: '#FF4D4D' },
label: {
color: '#FF4D4D',
formatter: '上限值 '
}
}
]
}
}
],
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: false,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgba(225,225,225,0.2)",
// 设置选中范围的填充颜色
fillerColor: "#ccc",
// 设置边框颜色
borderColor: "rgba(225,225,225,0.2)",
// 是否显示detail,即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 50,
// empty:当前数据窗口外的数据,被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "80%",
// 设置滚动条高度
height: 5,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 10,
// dataZoom-slider组件离容器下侧的距离
bottom: 0,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: true,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
})
window.addEventListener("resize", () => {
chart.resize();
});
},
/**
* @description: 打开查看图片弹窗
* @param {*} item
* @return {*}
*/
showScreenImg(item) {
this.currentImageItem = item;
this.showImageDialog = true;
},
/**
* @description: 图片位置信息获取
* @param {*}
* @return {*}
*/
updateRects() {
this.rects = [];
this.rectsItem = {};
const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
this.rects = [
{
left: rects[0],
top: rects[1],
width: rects[2],
height: rects[3],
},
];
},
/**
* @description: 关闭查看图片弹窗
* @param {*} val
* @return {*}
*/
imgCancel() {
this.showImageDialog = false;
this.currentImageItem = {};
this.rects = [];
},
},
};
</script>
@@ -66,9 +528,42 @@ export default {
height: calc(100vh - 5.3rem);
padding: 0.5rem;
.map-diease-map {
.diease-form {
width: 100%;
height: 100%;
height: 6%;
}
.diease-container {
width: 100%;
height: 94%;
display: flex;
.diease-left,
.diease-right {
width: 50%;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: 0 1rem;
}
.diease-right {
.card-item {
width: 100%;
height: 40rem;
}
}
}
}
/* 分页样式 */
.pagination-part {
width: 100%;
display: flex;
padding-top: 1rem;
justify-content: flex-end;
}
</style>
@@ -2,7 +2,7 @@
* @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 10:58:25
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-01-15 15:42:04
* @LastEditTime: 2025-05-15 16:37:41
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
* @Description: 巡检信息管理-病害管理
-->
@@ -19,27 +19,6 @@
<el-date-picker v-model="dateTime" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable />
</el-form-item>
<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="state">
<el-select
v-model="queryParams.state"
placeholder="请选择病害状态"
clearable
>
<el-option
v-for="item in defectStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item> -->
<el-form-item label="上下行" prop="inspectDirection">
<el-select v-model="queryParams.inspectDirection" placeholder="请选择" clearable>
<el-option label="上行" value="0" />
@@ -57,23 +36,10 @@
<el-form-item label="病害id" prop="id">
<el-input v-model="queryParams.id" placeholder="请填写病害id" clearable />
</el-form-item>
<el-form-item label="病害长度" prop="lengthRange">
<el-input-number v-model="queryParams.minLen" controls-position="right" placeholder="最小长度"
:min="0"></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number v-model="queryParams.maxLen" controls-position="right" placeholder="最大长度"
:min="0"></el-input-number>
</el-form-item>
<el-form-item label="快照id" prop="snapshotId">
<el-input v-model="queryParams.snapshotId" placeholder="请填写快照id" clearable />
</el-form-item>
<el-form-item label="病害面积" prop="areaRange">
<el-input-number v-model="queryParams.minArea" controls-position="right" placeholder="最小面积"
:min="0"></el-input-number>
<span style="margin: 0 5px">-</span>
<el-input-number v-model="queryParams.maxArea" controls-position="right" placeholder="最大面积"
:min="0"></el-input-number>
</el-form-item>
<el-form-item label="巡检任务" prop="taskId">
<el-select v-model="queryParams.taskId" placeholder="请选择巡检任务" filterable clearable>
<el-option v-for="item in taskList" :key="item.value" :label="item.label" :value="item.value" />
@@ -145,19 +111,14 @@
<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-column label="道路方向" align="center" prop="inspectDirection">
<template slot-scope="scope">
<span>{{
scope.row.inspectDirection === "0" ? "上行" : "下行"
}}</span>
}}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="viewDefect(scope.row)">查看
</el-button>
@@ -204,39 +165,14 @@
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24" v-if="dialogTitle != '添加缺陷'">
<el-form-item label="校验状态" prop="dataStatus">
<el-select v-model="form.dataStatus" placeholder="请选择校验状态" clearable>
<el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="dialogTitle === '添加缺陷' ? 24 : 12">
<el-form-item label="病害状态" prop="state">
<el-select
v-model="form.state"
placeholder="请选择病害状态"
clearable
>
<el-option
v-for="item in defectStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col> -->
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="开始桩号" prop="stakeStart">
<el-form-item label="开始桩号">
<el-input v-model="form.stakeStart" placeholder="请输入开始桩号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束桩号" prop="stakeEnd">
<el-form-item label="结束桩号">
<el-input v-model="form.stakeEnd" placeholder="请输入结束桩号" />
</el-form-item>
</el-col>
@@ -352,17 +288,23 @@
@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>
<template v-if="showRects">
<div v-for="(rect, index) in rects" :key="index" class="rect-overlay" :style="getRectStyle(rect)"></div>
</template>
<div class="rect-image">
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }}
起始桩号 {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号
{{ currentImageItem.stakeEnd || "暂无数据" }}
病害类型
{{ currentImageItem.defectTypeName || "暂无数据" }}
病害面积{{ currentImageItem.targetArea }}平方米 病害长度{{
currentImageItem.targetLen * 1 <= 0 ? "暂无数据" : `${currentImageItem.targetLen}` }} </div>
<div>
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }}
起始桩号 {{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号
{{ currentImageItem.stakeEnd || "暂无数据" }}
病害类型
{{ currentImageItem.defectTypeName || "暂无数据" }}
</div>
<div>
<el-button @click="showRects = !showRects" size="mini">切换标注状态</el-button>
</div>
</div>
</div>
</el-dialog>
</div>
</template>
@@ -453,8 +395,6 @@ export default {
dateTime: [],
// 巡检任务下拉数据
taskList: [],
// 病害类型级联下拉绑定
paramsDefectType: [],
// 新增/编辑表单参数
form: {
id: null,
@@ -553,6 +493,8 @@ export default {
showImageDialog: false,
// 查看大图片路径
currentImageItem: {},
// 是否展示图片标注
showRects: true,
// 图片病害位置信息
rects: [],
// 合并病害弹窗显隐控制
@@ -661,6 +603,8 @@ export default {
const params = {
...this.queryParams,
...this.pagination,
classType: "2",
defectType: "910003",
startTime: this.dateTime ? this.dateTime[0] : "",
endTime: this.dateTime ? this.dateTime[1] : "",
};
@@ -736,7 +680,6 @@ export default {
taskId: "",
};
this.pagination.page = 1;
this.paramsDefectType = [];
this.dateTime = [];
this.getList();
},
@@ -750,14 +693,6 @@ export default {
const phonereg = /^K\d{4}\+\d{3}$/;
if (this.queryParams.stakeStart) {
if (phonereg.test(this.queryParams.stakeStart)) {
this.queryParams.classType = this.paramsDefectType
? this.paramsDefectType[0]
: "";
this.queryParams.defectType = this.paramsDefectType
? this.paramsDefectType.length > 1
? this.paramsDefectType[1]
: ""
: "";
this.pagination.page = 1;
this.getList();
} else {
@@ -765,28 +700,12 @@ export default {
}
} else if (this.queryParams.stakeEnd) {
if (phonereg.test(this.queryParams.stakeEnd)) {
this.queryParams.classType = this.paramsDefectType
? this.paramsDefectType[0]
: "";
this.queryParams.defectType = this.paramsDefectType
? this.paramsDefectType.length > 1
? this.paramsDefectType[1]
: ""
: "";
this.pagination.page = 1;
this.getList();
} else {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else {
this.queryParams.classType = this.paramsDefectType
? this.paramsDefectType[0]
: "";
this.queryParams.defectType = this.paramsDefectType
? this.paramsDefectType.length > 1
? this.paramsDefectType[1]
: ""
: "";
this.pagination.page = 1;
this.getList();
}
@@ -1161,7 +1080,6 @@ export default {
getDetailsBySnapShotId(val).then(({ code, data }) => {
if (code === 200) {
this.viewForm = data;
console.log(data, "查看弹窗选择改变触发事件");
}
});
},
@@ -1182,8 +1100,6 @@ export default {
*/
showScreenImg(item) {
this.currentImageItem = item;
console.log(item, "ddddd");
this.showImageDialog = true;
},
@@ -1194,16 +1110,15 @@ export default {
*/
updateRects() {
this.rects = [];
this.rectsItem = {};
const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
this.rects = [
{
left: rects[0],
top: rects[1],
width: rects[2],
height: rects[3],
},
];
const rects = JSON.parse(this.currentImageItem?.rect)
this.rects = rects.map((item) => {
return {
left: item[0],
top: item[1],
width: item[2],
height: item[3],
}
})
},
/**
@@ -1343,6 +1258,8 @@ export default {
// 图片信息
.rect-image {
width: 90%;
display: flex;
justify-content: space-between;
position: absolute;
top: 0;
font-size: 1.2rem;
@@ -2,18 +2,18 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2025-04-10 16:44:08
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-04-10 16:50:40
* @LastEditTime: 2025-04-10 17:19:54
* @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\components\diease-view.vue
* @Description: 巡检信息-地图展示1
-->
<template>
<div class="view-diease">
<el-carousel arrow="always" :autoplay="false">
<el-carousel class="view-carousel" arrow="always" height="45rem" :autoplay="false">
<el-carousel-item
v-for="(item, index) in dislogItem"
:key="`carousel-${index}`"
>
<image :src="item.img" mode="scaleToFill" />
<img :src="item.img" mode="scaleToFill" />
</el-carousel-item>
</el-carousel>
</div>
@@ -37,4 +37,11 @@ export default {
</script>
<style lang="scss" scoped>
.view-carousel {
height: 45rem;
img {
height: 43rem;
}
}
</style>
+41 -99
View File
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2025-03-25 11:10:16
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2025-04-10 16:51:45
* @LastEditTime: 2025-05-15 15:36:20
* @FilePath: \znxjxt-ui\src\views\xj\inspection\map-diease\index.vue
* @Description: 地图展示筛选病害-首页
-->
@@ -10,106 +10,49 @@
<div class="map-diease-content">
<div class="diease-left">
<div class="diease-form">
<el-form
:model="queryParams"
:rules="rules"
ref="queryForm"
size="small"
:inline="true"
label-width="100px"
>
<el-form :model="queryParams" :rules="rules" ref="queryForm" size="small" :inline="true" label-width="100px">
<el-form-item label="道路名称" prop="segmentId">
<el-select
v-model="queryParams.segmentId"
placeholder="请选择路段"
filterable
clearable
>
<el-option
v-for="item in segmentList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
<el-select v-model="queryParams.segmentId" placeholder="请选择路段" filterable clearable>
<el-option v-for="item in segmentList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="">
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>筛选</el-button
>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">筛选</el-button>
</el-form-item>
</el-form>
</div>
<!-- 列表 -->
<el-table
ref="roadTable"
v-loading="loading"
:data="tableList"
style="width: 100%"
@row-dblclick="handleCurrentChange"
>
<el-table ref="roadTable" v-loading="loading" :data="tableList" style="width: 100%" @row-dblclick="handleDbClick">
<el-table-column label="路段名称" align="center" prop="segmentName">
</el-table-column>
<el-table-column label="类型" align="center" prop="defectTypeName" />
<el-table-column label="开始桩号" align="center" prop="stakeStart" />
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
<el-table-column
label="创建时间"
align="center"
prop="createdTimeLocal"
>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<el-table-column label="创建时间" align="center" prop="createdTimeLocal">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="viewMapPicture(scope.row)"
>查看
{{ scope.row.createdTimeLocal.replace("T", " ") }}
</template>
</el-table-column>
<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-view" @click="viewMapPicture(scope.row)">查看
</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 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>
</div>
<fssm-map
ref="mapDieaseMap"
class="map-diease-map"
:maxZoom="24"
@feature-select="featureSelect"
></fssm-map>
<fssm-map ref="mapDieaseMap" class="map-diease-map" :maxZoom="24"></fssm-map>
<!-- @feature-select="featureSelect" -->
<!-- 查看弹窗 -->
<el-dialog
title="查看"
:visible.sync="viewVisible"
width="80rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="viewCancel"
>
<el-dialog title="查看" :visible.sync="viewVisible" width="80rem" append-to-body :close-on-click-modal="false"
destroy-on-close @close="viewCancel">
<diease-view v-if="viewVisible" :dislogItem="dislogItem"></diease-view>
</el-dialog>
</div>
@@ -118,8 +61,7 @@
<script>
import { Feature } from "ol";
import { Point } from "ol/geom";
import { Style, Icon, Fill, Stroke, Circle, Text } from "ol/style";
import Cluster from "ol/source/Cluster";
import { Style, Icon } from "ol/style";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { getSegment, getDelineatorList } from "@/api/xj/mapDisease";
@@ -141,10 +83,6 @@ export default {
rules: {
maxLength: [
{ required: false, message: "请选择路段", trigger: "blur" },
{
pattern: /^\d+$/,
message: "请输入非负整数",
},
],
},
// 道路名称下拉数据
@@ -172,6 +110,10 @@ export default {
this.getSegmentList();
this.getTableList();
},
mounted() {
// 去除选择事件
this.$refs.mapDieaseMap.clearSelectInteraction();
},
methods: {
/**
* @description: 获取路段下拉数据
@@ -238,7 +180,7 @@ export default {
* @param {*} e
* @return {*}
*/
handleCurrentChange(e) {
handleDbClick(e) {
if (this.clusters) {
const map = this.$refs.mapDieaseMap.instance.get("map");
map.removeLayer(this.clusters);
@@ -252,22 +194,22 @@ export default {
flag: "nomal",
};
}),
...e.endCoordinates?.map((item) => {
return {
geometry: item,
flag: "green",
};
}),
...e.startCoordinates?.map((item) => {
return {
geometry: item,
flag: "green",
};
}),
{
geometry: e.endCoordinates,
flag: "green",
},
{
geometry: e.startCoordinates,
flag: "green",
},
].filter((item) => {
return item.geometry;
});
this.fitMapToPoints(e.defectLocation);
this.fitMapToPoints([
...e.defectLocation,
e.endCoordinates,
e.startCoordinates,
]);
this.drawPoint();
},
@@ -305,7 +247,7 @@ export default {
// 使用 fit 方法根据边界框计算最佳缩放级别
map.getView().fit(extent, {
duration: 500, // 动画持续时间
padding: [100, 100, 100, 100], // 边缘填充
padding: [400, 400, 400, 400], // 边缘填充
});
}
},
@@ -355,7 +297,7 @@ export default {
* @description: 点击地图点位
* @return {void}
*/
featureSelect(e) {},
featureSelect(e) { },
/**
* @description: 关闭查看图片弹窗
+1 -1
View File
@@ -7,7 +7,7 @@ function resolve(dir) {
const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || '智能巡检系统' // 网页标题
const name = process.env.VUE_APP_TITLE || '智领未来' // 网页标题
const port = process.env.port || process.env.npm_config_port || 80 // 端口