fix：修改部分逻辑
This commit is contained in:
parent
8448cbd22c
commit
b91bb4a173
@ -105,7 +105,7 @@ store.watch(
|
||||
() => store.getters.token,
|
||||
(newToken) => {
|
||||
if (newToken) {
|
||||
wsService.connect(`ws://192.168.1.188:8080/websocket?token=${newToken}`);
|
||||
wsService.connect(`ws://localhost:8080/websocket?token=${newToken}`);
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-19 13:56:22
|
||||
* @LastEditTime: 2024-12-05 10:00:51
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
@ -11,144 +11,65 @@
|
||||
<div class="app">
|
||||
<div class="left-list">
|
||||
<div class="img-top">
|
||||
<div
|
||||
class="img-top-div"
|
||||
:class="labelCheck === 'aim' ? 'img-top-div-click' : ''"
|
||||
@click.stop="changeImgType('aim')"
|
||||
>
|
||||
<div class="img-top-div" :class="labelCheck === 'aim' ? 'img-top-div-click' : ''"
|
||||
@click.stop="changeImgType('aim')">
|
||||
目标维度
|
||||
</div>
|
||||
<div
|
||||
class="img-top-div"
|
||||
:class="labelCheck === 'aria' ? 'img-top-div-click' : ''"
|
||||
@click.stop="changeImgType('aria')"
|
||||
>
|
||||
<div class="img-top-div" :class="labelCheck === 'aria' ? 'img-top-div-click' : ''"
|
||||
@click.stop="changeImgType('aria')">
|
||||
空间维度
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar" 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 }"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<div class="main-content">
|
||||
<!-- 搜索表单 -->
|
||||
<div class="toolbar">
|
||||
<el-form
|
||||
:model="imgForm"
|
||||
ref="imgForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form :model="imgForm" ref="imgForm" size="small" :inline="true" label-width="5rem">
|
||||
<el-form-item label="路段名称">
|
||||
<el-select
|
||||
v-model="imgForm.segmentId"
|
||||
placeholder="请选择路段名称"
|
||||
:popper-append-to-body="false"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in roadTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="imgForm.segmentId" placeholder="请选择路段名称" :popper-append-to-body="false" filterable
|
||||
clearable>
|
||||
<el-option v-for="item in roadTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="病害类型">
|
||||
<el-select
|
||||
v-model="imgForm.defectType"
|
||||
placeholder="请选择病害类型"
|
||||
:popper-append-to-body="false"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="imgForm.defectType" placeholder="请选择病害类型" :popper-append-to-body="false" clearable>
|
||||
<el-option v-for="item in defectTypeList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="公里桩">
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
placeholder="起始公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="imgForm.stakeStart" placeholder="起始公里桩" style="width: 8rem" clearable />
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input
|
||||
v-model="imgForm.stakeEnd"
|
||||
placeholder="终止公里桩"
|
||||
style="width: 8rem"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="imgForm.stakeEnd" placeholder="终止公里桩" style="width: 8rem" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="imgForm.state"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择病害状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectStatus"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="imgForm.state" :popper-append-to-body="false" placeholder="请选择病害状态" clearable>
|
||||
<el-option v-for="item in defectStatus" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="btn-submit"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button type="primary" class="btn-submit" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery">重置</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
<!-- 图片展示 -->
|
||||
<div class="image-viewer">
|
||||
<div class="image-container" ref="imageContainer">
|
||||
<div
|
||||
class="rect-overlay"
|
||||
v-for="(item, index) in checkedRectList"
|
||||
:key="`rect-overlay-${index}`"
|
||||
:style="getRectStyle(item.rectPosition, index)"
|
||||
@click="clickImage(item)"
|
||||
>
|
||||
<div class="rect-overlay" v-for="(item, index) in checkedRectList" :key="`rect-overlay-${index}`"
|
||||
:style="getRectStyle(item.rectPosition, index)" @click="clickImage(item)">
|
||||
<div :style="{ color: colorList[index] }" class="rect-overlay-text">
|
||||
目标详情>>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rect-image">
|
||||
<el-checkbox-group
|
||||
v-model="checkedRect"
|
||||
@change="handleCheckedRectChange"
|
||||
>
|
||||
<el-checkbox
|
||||
class="image-info"
|
||||
v-for="(item, index) in rectItem"
|
||||
:label="item.id"
|
||||
:key="`image-info-${index}`"
|
||||
:style="{ color: colorList[index] }"
|
||||
>采集时间:
|
||||
<el-checkbox-group v-model="checkedRect" @change="handleCheckedRectChange">
|
||||
<el-checkbox class="image-info" v-for="(item, index) in rectItem" :label="item.id"
|
||||
:key="`image-info-${index}`" :style="{ color: colorList[index] }">采集时间:
|
||||
{{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
|
||||
{{ item.stakeStart || "暂无数据" }} 终止桩号:
|
||||
{{ item.stakeEnd || "暂无数据" }}
|
||||
@ -160,24 +81,14 @@
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<img
|
||||
:src="currentImage"
|
||||
alt="Main Image"
|
||||
ref="mainImage"
|
||||
@load="updateRects"
|
||||
/>
|
||||
<img :src="currentImage" alt="Main Image" ref="mainImage" @load="updateRects" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
<div class="thumbnail-row">
|
||||
<img
|
||||
v-for="(mediaItem, index) in currentThumbnails"
|
||||
:key="'thumb-' + index"
|
||||
:src="mediaItem.img"
|
||||
:alt="'Thumb ' + (index + 1)"
|
||||
@click="showThumbnailImage(index)"
|
||||
:class="{ selected: selectedThumbnail === index }"
|
||||
/>
|
||||
<img v-for="(mediaItem, index) in currentThumbnails" :key="'thumb-' + index" :src="mediaItem.img"
|
||||
:alt="'Thumb ' + (index + 1)" @click="showThumbnailImage(index)"
|
||||
:class="{ selected: selectedThumbnail === index }" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -199,7 +110,7 @@ export default {
|
||||
},
|
||||
imageItem: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
default: () => { },
|
||||
},
|
||||
},
|
||||
data() {
|
||||
@ -254,11 +165,16 @@ export default {
|
||||
pageTip: 1,
|
||||
// 图片病害位置红框信息
|
||||
rectItem: [],
|
||||
// 图片病害框的颜色
|
||||
colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 当前展示的图片url
|
||||
/**
|
||||
* @description: 当前展示的图片url
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
currentImage() {
|
||||
if (
|
||||
this.defectData.length > 0 &&
|
||||
@ -269,7 +185,12 @@ export default {
|
||||
return this.defectData[this.currentIndex].items[index].img;
|
||||
}
|
||||
},
|
||||
// 下方小列表数据
|
||||
|
||||
/**
|
||||
* @description: 下方小列表数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
currentThumbnails() {
|
||||
return this.defectData[this.currentIndex]?.items || [];
|
||||
},
|
||||
@ -293,7 +214,11 @@ export default {
|
||||
this.getDefectType();
|
||||
},
|
||||
methods: {
|
||||
/* 获取路段下拉数据 */
|
||||
/**
|
||||
* @description: 获取路段下拉数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -302,7 +227,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
/**
|
||||
* @description: 获取病害类型下拉数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getDefectType() {
|
||||
getItemTypes({ classType: this.bottomTipClick }).then(
|
||||
({ code, data }) => {
|
||||
@ -313,7 +242,11 @@ export default {
|
||||
);
|
||||
},
|
||||
|
||||
/* 根据传回来的快照id查图片详细数据 */
|
||||
/**
|
||||
* @description: 根据传回来的快照id查图片详细数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getMediaBySnapshotid() {
|
||||
getMediaIndex({
|
||||
classType: this.bottomTipClick,
|
||||
@ -330,7 +263,12 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 切换维度事件 */
|
||||
|
||||
/**
|
||||
* @description: 切换维度事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
changeImgType(type) {
|
||||
if (this.labelCheck != type) {
|
||||
this.labelCheck = type;
|
||||
@ -348,7 +286,12 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 向下获取图片列表 */
|
||||
|
||||
/**
|
||||
* @description: 向下获取图片列表
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getList() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
@ -370,14 +313,17 @@ export default {
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
// this.showImage(this.currentIndex);
|
||||
})
|
||||
.catch(() => {
|
||||
this.showImage(this.currentIndex);
|
||||
this.loading = false;
|
||||
});
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
/* 向上获取列表数据 */
|
||||
/**
|
||||
* @description: 向上获取列表数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getListTop() {
|
||||
this.loading = true;
|
||||
const data = {
|
||||
@ -403,7 +349,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击搜索事件 */
|
||||
/**
|
||||
* @description: 点击搜索事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
handleQuery() {
|
||||
const stakeReg = /^K\d{4}\+\d{3}$/;
|
||||
if (this.imgForm.stakeStart) {
|
||||
@ -447,7 +397,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 重置事件 */
|
||||
/**
|
||||
* @description: 重置事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
resetQuery() {
|
||||
this.defectData = [];
|
||||
this.ariaList = [];
|
||||
@ -467,7 +421,11 @@ export default {
|
||||
this.showImage(0);
|
||||
},
|
||||
|
||||
/* 左侧点击图片事件 */
|
||||
/**
|
||||
* @description: 左侧点击图片事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
showImage(index) {
|
||||
// if (this.currentIndex === this.defectData.length - 1) {
|
||||
// this.loadMoreBottomImages();
|
||||
@ -482,13 +440,21 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击下方小列表 */
|
||||
/**
|
||||
* @description: 点击下方小列表
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
showThumbnailImage(index) {
|
||||
this.selectedThumbnail = index;
|
||||
this.updateRects();
|
||||
},
|
||||
|
||||
/* 使图片展示在父级容器可视区域 */
|
||||
/**
|
||||
* @description: 使图片展示在父级容器可视区域
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
scrollToCurrentImage() {
|
||||
if (this.$refs.sidebar) {
|
||||
const sidebarImages = this.$refs.sidebar.querySelectorAll("img");
|
||||
@ -502,11 +468,17 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 滚动触发事件 */
|
||||
/**
|
||||
* @description: 滚动触发事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
handleScroll(e) {
|
||||
const sidebar = this.$refs.sidebar;
|
||||
// 滚动到顶加载数据
|
||||
if (e.target.scrollTop < 1 && this.pageTip > 1 && !this.loading) {
|
||||
console.log(e.target.scrollTop, 'dererere');
|
||||
|
||||
if (e.target.scrollTop < 20 && this.pageTip > 1 && !this.loading) {
|
||||
this.loadMoreTopImages();
|
||||
}
|
||||
|
||||
@ -523,13 +495,21 @@ export default {
|
||||
// }
|
||||
},
|
||||
|
||||
/* 向下加载更多图片方法 */
|
||||
/**
|
||||
* @description: 向下加载更多图片方法
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
loadMoreBottomImages() {
|
||||
this.params.page += 1;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/* 向上加载更多图片 */
|
||||
/**
|
||||
* @description: 向上加载更多图片
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
loadMoreTopImages() {
|
||||
this.pageTip -= 1;
|
||||
this.params.page -= 1;
|
||||
@ -537,7 +517,11 @@ export default {
|
||||
this.getListTop();
|
||||
},
|
||||
|
||||
/* 点击目标详情/空间维度事件 */
|
||||
/**
|
||||
* @description: 点击目标详情/空间维度事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
clickImage(item) {
|
||||
if (this.labelCheck === "aim") {
|
||||
this.labelCheck = "aria";
|
||||
@ -552,7 +536,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 键盘事件 */
|
||||
/**
|
||||
* @description: 键盘事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
handleKeydown(event) {
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
@ -618,7 +606,11 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
/* 图片红框位置 */
|
||||
/**
|
||||
* @description: 图片红框位置
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getRectStyle([left, top, width, height], index) {
|
||||
const image = this.$refs.mainImage;
|
||||
const container = this.$refs.imageContainer;
|
||||
@ -697,6 +689,7 @@ export default {
|
||||
.sidebar {
|
||||
width: 15.5rem;
|
||||
height: calc(100% - 2.5rem);
|
||||
// height: 815px;
|
||||
background-color: #1f292e;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
@ -771,12 +764,14 @@ export default {
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
.el-select-dropdown__item {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.el-select-dropdown__item:hover {
|
||||
background-color: #2b4c7e;
|
||||
}
|
||||
@ -819,7 +814,7 @@ export default {
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
.el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: inherit;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
@ -840,13 +835,14 @@ export default {
|
||||
// 画框样式
|
||||
.rect-overlay {
|
||||
position: absolute;
|
||||
|
||||
// pointer-events: none;
|
||||
// border: 2px solid red;
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> div {
|
||||
>div {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 11:56:02
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-03 09:45:06
|
||||
* @LastEditTime: 2024-12-04 17:33:58
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
|
||||
* @Description: 病害巡检-病害日志
|
||||
-->
|
||||
@ -10,138 +10,60 @@
|
||||
<div class="content">
|
||||
<!-- 搜索表单 -->
|
||||
<div class="traffic-form">
|
||||
<el-form
|
||||
:model="trafficForm"
|
||||
ref="trafficForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-position="left"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form :model="trafficForm" ref="trafficForm" size="small" :inline="true" label-position="left"
|
||||
label-width="5rem">
|
||||
<el-form-item class="form-item" label="路线名称" prop="routeId">
|
||||
<el-select
|
||||
v-model="trafficForm.routeId"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择路线"
|
||||
filterable
|
||||
clearable
|
||||
@change="chengeLine"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="trafficForm.routeId" :popper-append-to-body="false" placeholder="请选择路线" filterable
|
||||
clearable @change="chengeLine">
|
||||
<el-option v-for="item in lineList" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="路段名称" prop="segmentId">
|
||||
<el-select
|
||||
v-model="trafficForm.segmentId"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择路段"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in segmentList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="trafficForm.segmentId" :popper-append-to-body="false" 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 class="form-item" label="上下行" prop="inspectDirection">
|
||||
<el-select v-model="trafficForm.inspectDirection" :popper-append-to-body="false" placeholder="请选择上下行"
|
||||
clearable>
|
||||
<el-option label="上行" value="0" />
|
||||
<el-option label="下行" value="1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="公里桩" prop="stakeRange">
|
||||
<el-input
|
||||
v-model="trafficForm.stakeStart"
|
||||
placeholder="格式K0000+000"
|
||||
style="width: 10rem"
|
||||
clearable
|
||||
/>
|
||||
<el-input v-model="trafficForm.stakeStart" placeholder="格式K0000+000" style="width: 10rem" clearable />
|
||||
<span style="margin: 0 5px; color: #ffffff">-</span>
|
||||
<el-input
|
||||
v-model="trafficForm.stakeEnd"
|
||||
placeholder="格式K0000+000"
|
||||
style="width: 9.5rem"
|
||||
clearable
|
||||
/>
|
||||
<!-- <el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="格式为K0000+000"
|
||||
placement="top"
|
||||
>
|
||||
<i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
|
||||
</el-tooltip> -->
|
||||
<el-input v-model="trafficForm.stakeEnd" placeholder="格式K0000+000" style="width: 9.5rem" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="时间筛选" prop="dateTime">
|
||||
<el-date-picker
|
||||
v-model="dateTime"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
clearable
|
||||
>
|
||||
|
||||
<el-date-picker v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" clearable
|
||||
popper-class="traffic-log-date-time">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="病害类型" prop="defectType">
|
||||
<el-select
|
||||
v-model="trafficForm.defectType"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择病害类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in eventType"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="trafficForm.defectType" :popper-append-to-body="false" placeholder="请选择病害类型" clearable>
|
||||
<el-option v-for="item in eventType" :key="item.value" :label="item.label" :value="item.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="form-item" label="病害状态" prop="state">
|
||||
<el-select
|
||||
v-model="trafficForm.state"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择病害状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectStatus"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
<el-select v-model="trafficForm.state" :popper-append-to-body="false" 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>
|
||||
</div>
|
||||
<div class="form-btn">
|
||||
<el-button class="btn-submit" size="mini" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button class="btn-submit" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery">重置</el-button>
|
||||
</div>
|
||||
<div class="traffic-table">
|
||||
<el-table
|
||||
:data="emergencyList"
|
||||
header-row-class-name="headerRow"
|
||||
row-class-name="bodayRow"
|
||||
style="width: 100%; background: none"
|
||||
height="85%"
|
||||
>
|
||||
<el-table :data="emergencyList" header-row-class-name="headerRow" row-class-name="bodayRow"
|
||||
style="width: 100%; background: none" height="85%">
|
||||
<el-table-column prop="defectType" label="病害类型"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="segmentName"
|
||||
width="180"
|
||||
:show-overflow-tooltip="true"
|
||||
label="路段名称"
|
||||
>
|
||||
<el-table-column prop="segmentName" width="180" :show-overflow-tooltip="true" label="路段名称">
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="病害状态">
|
||||
<template slot-scope="scope">
|
||||
@ -150,28 +72,16 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="pci" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
slot="reference"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="detailDefect(scope.row)"
|
||||
>详情
|
||||
<el-button slot="reference" size="mini" type="text" @click="detailDefect(scope.row)">详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
<el-pagination
|
||||
background
|
||||
:pager-count="5"
|
||||
:current-page.sync="pagination.page"
|
||||
@current-change="handleCurrentChange"
|
||||
:page-sizes="[10, 20, 30, 40]"
|
||||
:page-size.sync="pagination.size"
|
||||
layout="prev, pager, next"
|
||||
:total="tableTotal"
|
||||
>
|
||||
<el-pagination background :pager-count="5" :current-page.sync="pagination.page"
|
||||
@current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size"
|
||||
layout="prev, pager, next" :total="tableTotal">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
@ -198,6 +108,8 @@ export default {
|
||||
routeId: "",
|
||||
// 路段名称
|
||||
segmentId: "",
|
||||
// 上下行
|
||||
inspectDirection: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
@ -269,6 +181,7 @@ export default {
|
||||
if (val) {
|
||||
this.getSegmentList(val);
|
||||
} else {
|
||||
this.trafficForm.segmentId = "";
|
||||
this.segmentList = [];
|
||||
}
|
||||
},
|
||||
@ -356,6 +269,8 @@ export default {
|
||||
routeId: "",
|
||||
// 路段名称
|
||||
segmentId: "",
|
||||
// 上下行
|
||||
inspectDirection: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
@ -421,7 +336,7 @@ export default {
|
||||
|
||||
.traffic-form {
|
||||
width: calc(100% - 0.5rem);
|
||||
height: 19rem;
|
||||
height: 22rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.form-item {
|
||||
@ -439,6 +354,13 @@ export default {
|
||||
::v-deep .el-form-item__label {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
// 修改时间选择器样式
|
||||
// 修改时间中间 至 颜色
|
||||
::v-deep .el-input__inner .el-range-separator {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::v-deep .el-input__inner {
|
||||
@ -470,6 +392,7 @@ export default {
|
||||
.el-select-dropdown {
|
||||
background-color: #102649;
|
||||
border-color: #08204f;
|
||||
|
||||
.el-scrollbar {
|
||||
.el-select-dropdown__wrap {
|
||||
.el-scrollbar__view {
|
||||
@ -539,7 +462,7 @@ export default {
|
||||
|
||||
::v-deep .traffic-table {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
height: 42%;
|
||||
padding: 0.5rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
@ -582,7 +505,7 @@ export default {
|
||||
}
|
||||
|
||||
// 去除鼠标移动高亮
|
||||
&:hover > td {
|
||||
&:hover>td {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@ -600,6 +523,7 @@ export default {
|
||||
|
||||
::v-deep .el-pagination {
|
||||
color: #ffffff;
|
||||
|
||||
.btn-prev,
|
||||
.btn-next {
|
||||
background-color: #6481aa;
|
||||
@ -642,3 +566,37 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.traffic-log-date-time {
|
||||
|
||||
// 修改弹出的日历背景色
|
||||
.el-picker-panel__body{
|
||||
background-color: #102649;
|
||||
}
|
||||
|
||||
// 修改中间那条线
|
||||
.el-date-range-picker__content.is-left{
|
||||
border-right: 1px solid #374985;
|
||||
}
|
||||
|
||||
// 修改日期样式
|
||||
.el-date-table td span{
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
// 修改星期样式
|
||||
.el-date-table th{
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
// 修改日期选择器头部样式
|
||||
.el-date-range-picker__header{
|
||||
color: #c0c0c0;
|
||||
}
|
||||
|
||||
// 修改弹出层边框颜色
|
||||
.el-picker-panel {
|
||||
border: 1px solid #374985 !important; // 替换 #your-color-code 为你想要的颜色代码
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-15 13:14:03
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-04 09:48:03
|
||||
* @LastEditTime: 2024-12-04 16:22:36
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
|
||||
* @Description: 总览大屏-巡检车辆-跟车弹窗
|
||||
-->
|
||||
@ -56,6 +56,7 @@ export default {
|
||||
*/
|
||||
handleMessage() {
|
||||
this.$ws.on("message", (itemMessage) => {
|
||||
console.log(itemMessage,'itemMessage');
|
||||
if (itemMessage.type === "carPosition") {
|
||||
if (this.carPointList.includes(itemMessage.data.entityId)) {
|
||||
// 获取当前位置和目标位置
|
||||
@ -104,11 +105,11 @@ export default {
|
||||
} else {
|
||||
this.carPointList.push(itemMessage.data.entityId);
|
||||
this.drawCarMapPoint(itemMessage.data);
|
||||
// 修改当前地图中心点
|
||||
if (this.dialogItem.extId === itemMessage.data.entityId) {
|
||||
this.$nextTick(() => {
|
||||
const map = this.$refs.carMap.instance.get("map");
|
||||
map.getView().setCenter(itemMessage.data.location);
|
||||
map.getView().setZoom(17)
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -117,7 +118,7 @@ export default {
|
||||
this.drawDefectMapPoint(itemMessage.data);
|
||||
} else {
|
||||
const feature = new Feature({
|
||||
geometry: new Point(itemMessage.geometry.coordinates),
|
||||
geometry: new Point(itemMessage.data.geometry.coordinates),
|
||||
data: itemMessage,
|
||||
type: "defectPoint",
|
||||
});
|
||||
@ -126,7 +127,7 @@ export default {
|
||||
new Style({
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: require(`@/assets/screen/index/${itemMessage.defecttype}.png`),
|
||||
src: require(`@/assets/screen/index/${itemMessage.data.defecttype}.png`),
|
||||
// 图标缩放比例
|
||||
scale: 0.5,
|
||||
}),
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-08 09:40:18
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-04 09:41:55
|
||||
* @LastEditTime: 2024-12-04 16:20:31
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
|
||||
* @Description: 总览大屏-巡检车辆
|
||||
-->
|
||||
@ -84,6 +84,7 @@
|
||||
</el-popover>
|
||||
|
||||
<el-button
|
||||
:disabled="scope.row.aiotStatus !== '在线'"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="followCar(scope.row)"
|
||||
@ -91,6 +92,7 @@
|
||||
>跟车
|
||||
</el-button>
|
||||
<el-button
|
||||
:disabled="scope.row.aiotStatus !== '在线'"
|
||||
size="mini"
|
||||
type="text"
|
||||
@click="videoDelete(scope.row)"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-11-01 13:17:41
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-05 09:23:11
|
||||
* @LastEditTime: 2024-12-05 09:24:59
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
|
||||
* @Description: 巡检信息-病害确认
|
||||
-->
|
||||
@ -101,7 +101,7 @@
|
||||
<i class="el-icon-info"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item label="预警标识" prop="warningFlag">
|
||||
<!-- <el-form-item label="预警标识" prop="warningFlag">
|
||||
<el-select
|
||||
v-model="queryParams.warningFlag"
|
||||
placeholder="请选择"
|
||||
@ -110,7 +110,7 @@
|
||||
<el-option label="是" :value="1" />
|
||||
<el-option label="否" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="病害长度" prop="lengthRange">
|
||||
<el-input-number
|
||||
v-model="queryParams.minLen"
|
||||
@ -257,13 +257,6 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害面积" align="center" prop="targetArea" />
|
||||
<el-table-column label="预警标识" align="center" prop="warningFlag">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.warningFlag === 1 ? 'danger' : 'success'">
|
||||
{{ scope.row.warningFlag === 1 ? "是" : "否" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
@ -543,6 +536,7 @@ export default {
|
||||
.then(({ code, msg }) => {
|
||||
if (code === 200) {
|
||||
this.checkIds = [];
|
||||
// this.$refs.defectTable.clearSelection()
|
||||
this.$modal.msgSuccess("修改成功");
|
||||
} else {
|
||||
this.$modal.msgWarning(msg);
|
||||
|
||||
@ -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 10:58:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-11-18 16:36:05
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management .vue
|
||||
* @LastEditTime: 2024-12-04 11:00:07
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
|
||||
* @Description: 巡检信息管理-病害管理
|
||||
-->
|
||||
<template>
|
||||
@ -68,7 +68,7 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="上下行" prop="inspectDirection">
|
||||
<el-form-item label="上下行" prop="inspectDirection">
|
||||
<el-select
|
||||
v-model="queryParams.inspectDirection"
|
||||
placeholder="请选择"
|
||||
@ -77,9 +77,9 @@
|
||||
<el-option label="上行" value="0" />
|
||||
<el-option label="下行" value="1" />
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="预警标识" prop="warningFlag">
|
||||
<!-- <el-form-item label="预警标识" prop="warningFlag">
|
||||
<el-select
|
||||
v-model="queryParams.warningFlag"
|
||||
placeholder="请选择"
|
||||
@ -88,7 +88,7 @@
|
||||
<el-option label="是" :value="1" />
|
||||
<el-option label="否" :value="0" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="公里桩" prop="stakeRange">
|
||||
<el-input
|
||||
v-model="queryParams.stakeStart"
|
||||
@ -134,6 +134,13 @@
|
||||
: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"
|
||||
@ -149,14 +156,6 @@
|
||||
: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="taskId">
|
||||
<el-select
|
||||
v-model="queryParams.taskId"
|
||||
@ -275,11 +274,11 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害面积" align="center" prop="targetArea" />
|
||||
<el-table-column label="预警标识" align="center" prop="warningFlag">
|
||||
<el-table-column label="道路方向" align="center" prop="inspectDirection">
|
||||
<template slot-scope="scope">
|
||||
<el-tag :type="scope.row.warningFlag === 1 ? 'danger' : 'success'">
|
||||
{{ scope.row.warningFlag === 1 ? "是" : "否" }}
|
||||
</el-tag>
|
||||
<span>{{
|
||||
scope.row.inspectDirection === "0" ? "上行" : "下行"
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user