SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改病害对比图片显示问题，修改大屏地图显示最佳层级，修改增加查看图片放大信息

Browse Source
This commit is contained in:
SunTao 2024-12-24 16:18:30 +08:00
parent cdfbc4cb9b
commit 1f93df8130
9 changed files with 144 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/assets/screen/index/护栏缺损.png → src/assets/screen/index/护栏损坏.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

15
src/views/big-screen/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-24 11:20:36
* @LastEditTime: 2024-12-24 15:58:07
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@ -316,7 +316,6 @@
<!-- 总览地图 -->
<fssm-map
ref="overViewMap"
:centerPoint="overViewMapPoint"
v-if="showMap"
>
</fssm-map>
@ -324,7 +323,7 @@
<fssm-map
v-if="elementDiv !== 'OverviewScreen' && !showMap"
ref="roadMap"
:showChange="true"
:showChange="false"
:controlStyle="{ top: '20%', left: '26%' }"
@feature-select="featureSelect"
@map-zoom="getZoom"
@ -837,8 +836,8 @@ export default {
*/
showMapByCompany(val) {
this.companyId = val.id;
this.overViewMapPoint = [val.lon * 1, val.lat * 1];
this.showMap = true;
// this.overViewMapPoint = [val.lon * 1, val.lat * 1];
this.getLinePoint();
this.changeOrder(this.workOrderType);
},
@ -1102,6 +1101,10 @@ export default {
center,
duration: 500,
});
map.getView().fit(extent,{
duration: 500,
padding: [80, 500, 80, 500], // 边缘填充（可选）
});
});
} else {
this.$nextTick(() => {
@ -1111,6 +1114,10 @@ export default {
center,
duration: 500,
});
map.getView().fit(extent,{
duration: 500,
padding: [80, 500, 80, 500], // 边缘填充（可选）
});
});
}
this.isCenterCalculated = true;

5
src/views/xj/inspection/confirmation-management/components/image-dialog.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-01 17:25:06
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-17 09:42:12
* @LastEditTime: 2024-12-24 15:43:51
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\components\image-dialog.vue
* @Description: 病害确认-影像模式弹窗
-->
@ -109,8 +109,7 @@
{{ new Date(rectsItem.createdTime).toLocaleString() }} 起始桩号:
{{ rectsItem.stakeStart || "暂无数据" }} 终止桩号:
{{ rectsItem.stakeEnd || "暂无数据" }}
病害类型：{{ rectsItem.defectTypeName || "暂无数据" }} 路产状态:
{{ filterState(rectsItem.state) }}
病害类型：{{ rectsItem.defectTypeName || "暂无数据" }}
</div>
<div
class="view-content"

28
src/views/xj/inspection/confirmation-management/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-01 13:17:41
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-12 10:06:52
* @LastEditTime: 2024-12-24 16:01:10
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
* @Description: 巡检信息-病害确认
-->
@ -258,7 +258,7 @@
<el-dialog
title="查看图片"
:visible.sync="showImageDialog"
width="75rem"
width="85rem"
destroy-on-close
@close="imgCancel"
>
@ -275,6 +275,19 @@
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>
@ -608,6 +621,7 @@ export default {
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
@ -624,4 +638,14 @@ export default {
pointer-events: none;
border: 2px solid red;
}
// 图片信息
.rect-image {
width: 90%;
position: absolute;
top: 0;
font-size: 1.2rem;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>

34
src/views/xj/inspection/disease-management/index.vue
View File

@ -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: 2024-12-06 15:08:38
* @LastEditTime: 2024-12-24 15:57:52
* @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
* @Description: 巡检信息管理-病害管理
-->
@ -558,9 +558,7 @@
<p>病害类型：{{ viewForm.defectTypeName }}</p>
<p>
病害长度：{{
viewForm.targetLen * 1 < 0
? ""
: `${viewForm.targetLen}米`
viewForm.targetLen * 1 < 0 ? "" : `${viewForm.targetLen}米`
}}
</p>
<p>病害id：{{ viewForm.id }}</p>
@ -617,7 +615,7 @@
<el-dialog
title="查看图片"
:visible.sync="showImageDialog"
width="75rem"
width="85rem"
append-to-body
destroy-on-close
@close="imgCancel"
@ -635,6 +633,19 @@
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>
@ -1426,6 +1437,8 @@ export default {
*/
showScreenImg(item) {
this.currentImageItem = item;
console.log(item, "ddddd");
this.showImageDialog = true;
},
@ -1561,6 +1574,7 @@ export default {
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
@ -1577,4 +1591,14 @@ export default {
pointer-events: none;
border: 2px solid red;
}
// 图片信息
.rect-image {
width: 90%;
position: absolute;
top: 0;
font-size: 1.2rem;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>

44
src/views/xj/inspection/road-management/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-11 15:14:16
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-02 11:09:10
* @LastEditTime: 2024-12-24 15:37:29
* @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
* @Description: 巡检信息-路产管理
-->
@ -176,27 +176,6 @@
>删除
</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="warning"
plain
icon="el-icon-download"
size="mini"
@click="handleExport"
>导出
</el-button>
</el-col> -->
<!-- <el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit-outline"
size="mini"
:disabled="multiple"
@click="handleUpdateBatch"
>批量确认
</el-button>
</el-col> -->
</el-row>
<!-- 列表 -->
<el-table
@ -345,7 +324,7 @@
<el-dialog
title="查看图片"
:visible.sync="showImageDialog"
width="75rem"
width="85rem"
append-to-body
destroy-on-close
@close="imgCancel"
@ -363,6 +342,14 @@
class="rect-overlay"
:style="getRectStyle(rect)"
></div>
<div class="rect-image">
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }} 起始桩号：
{{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号：
{{ currentImageItem.stakeEnd || "暂无数据" }}
路产类型：
{{ filterDefect(currentImageItem.equipmentType)|| "暂无数据" }}
</div>
</div>
</el-dialog>
</div>
@ -900,6 +887,7 @@ export default {
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
@ -916,4 +904,14 @@ export default {
pointer-events: none;
border: 2px solid red;
}
// 图片信息
.rect-image {
width: 90%;
position: absolute;
top: 0;
font-size: 1.2rem;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
</style>

51
src/views/xj/inspection/surface-management/components/surface-map.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 14:49:21
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-07 16:47:49
* @LastEditTime: 2024-12-24 16:09:46
* @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
* @Description: 路面病害管理-地图组件
-->
@ -98,7 +98,7 @@ export default {
image: new Icon({
crossOrigin: "anonymous",
src: require(`@/assets/screen/index/${
this.mapLogeList[element.iconType]
this.mapLogeList[element.iconType]||"龟裂"
}.png`),
// size: [40, 40],
scale: 0.5, // 图标缩放比例
@ -237,6 +237,51 @@ export default {
type: "bar",
},
],
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: 10,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "80%",
// 设置滚动条高度
height: 5,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 10,
// dataZoom-slider组件离容器下侧的距离
bottom: 0,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
],
});
window.addEventListener("resize", () => {
chart.resize();
@ -294,4 +339,4 @@ export default {
}
}
}
</style>
</style>

6
src/views/xj/inspection/surface-management/index.vue
View File

@ -23,6 +23,7 @@
v-model="surfaceForm.segmentId"
placeholder="请选择道路名称"
clearable
filterable
>
<el-option
v-for="item in segmentList"
@ -41,8 +42,7 @@
>
</el-date-picker>
</el-form-item>
<el-form-item label="病害类型"
>
<el-form-item label="病害类型">
<el-cascader
v-model="surfaceForm.defectType"
:options="defectTypeList"
@ -428,4 +428,4 @@ export default {
}
}
}
</style>
</style>

8
src/views/xj/inspection/task-management/index.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 09:48:43
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-06 17:19:25
* @LastEditTime: 2024-12-24 16:01:02
* @FilePath: \znxjxt-ui\src\views\xj\inspection\task-management\index.vue
* @Description: 巡检管理-巡检任务
-->
@ -112,13 +112,13 @@
@click="viewDefect(scope.row)"
>查看
</el-button>
<el-button
<!-- <el-button
size="mini"
type="text"
icon="el-icon-refresh-right"
@click="handleRetrace(scope.row)"
>回顾
</el-button>
</el-button> -->
<el-button
style="margin-left: 0.5rem"
size="mini"
@ -148,7 +148,7 @@
<el-dialog
title="查看新增病害"
:visible.sync="viewVisible"
width="80rem"
width="85rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close