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

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

View File

Before

Width:  |  Height:  |  Size: 3.6 KiB

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

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

View File

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

View File

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

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 * @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 * @Date: 2024-10-08 10:58:25
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\xj\inspection\disease-management\index.vue
* @Description: 巡检信息管理-病害管理 * @Description: 巡检信息管理-病害管理
--> -->
@ -558,9 +558,7 @@
<p>病害类型{{ viewForm.defectTypeName }}</p> <p>病害类型{{ viewForm.defectTypeName }}</p>
<p> <p>
病害长度{{ 病害长度{{
viewForm.targetLen * 1 < 0 viewForm.targetLen * 1 < 0 ? "" : `${viewForm.targetLen}`
? ""
: `${viewForm.targetLen}`
}} }}
</p> </p>
<p>病害id{{ viewForm.id }}</p> <p>病害id{{ viewForm.id }}</p>
@ -617,7 +615,7 @@
<el-dialog <el-dialog
title="查看图片" title="查看图片"
:visible.sync="showImageDialog" :visible.sync="showImageDialog"
width="75rem" width="85rem"
append-to-body append-to-body
destroy-on-close destroy-on-close
@close="imgCancel" @close="imgCancel"
@ -635,6 +633,19 @@
class="rect-overlay" class="rect-overlay"
:style="getRectStyle(rect)" :style="getRectStyle(rect)"
></div> ></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> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -1426,6 +1437,8 @@ export default {
*/ */
showScreenImg(item) { showScreenImg(item) {
this.currentImageItem = item; this.currentImageItem = item;
console.log(item, "ddddd");
this.showImageDialog = true; this.showImageDialog = true;
}, },
@ -1561,6 +1574,7 @@ export default {
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
@ -1577,4 +1591,14 @@ export default {
pointer-events: none; pointer-events: none;
border: 2px solid red; 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> </style>

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-11 15:14:16 * @Date: 2024-10-11 15:14:16
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\xj\inspection\road-management\index.vue
* @Description: 巡检信息-路产管理 * @Description: 巡检信息-路产管理
--> -->
@ -176,27 +176,6 @@
>删除 >删除
</el-button> </el-button>
</el-col> </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-row>
<!-- 列表 --> <!-- 列表 -->
<el-table <el-table
@ -345,7 +324,7 @@
<el-dialog <el-dialog
title="查看图片" title="查看图片"
:visible.sync="showImageDialog" :visible.sync="showImageDialog"
width="75rem" width="85rem"
append-to-body append-to-body
destroy-on-close destroy-on-close
@close="imgCancel" @close="imgCancel"
@ -363,6 +342,14 @@
class="rect-overlay" class="rect-overlay"
:style="getRectStyle(rect)" :style="getRectStyle(rect)"
></div> ></div>
<div class="rect-image">
采集时间:
{{ new Date(currentImageItem.createdTime).toLocaleString() }} 起始桩号
{{ currentImageItem.stakeStart || "暂无数据" }} 终止桩号
{{ currentImageItem.stakeEnd || "暂无数据" }}
路产类型
{{ filterDefect(currentImageItem.equipmentType)|| "暂无数据" }}
</div>
</div> </div>
</el-dialog> </el-dialog>
</div> </div>
@ -900,6 +887,7 @@ export default {
width: 100%; width: 100%;
height: 80%; height: 80%;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
@ -916,4 +904,14 @@ export default {
pointer-events: none; pointer-events: none;
border: 2px solid red; 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> </style>

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com * @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 14:49:21 * @Date: 2024-10-14 14:49:21
* @LastEditors: SunTao 328867980@qq.com * @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 * @FilePath: \znxjxt-ui\src\views\xj\inspection\surface-management\components\surface-map.vue
* @Description: 路面病害管理-地图组件 * @Description: 路面病害管理-地图组件
--> -->
@ -98,7 +98,7 @@ export default {
image: new Icon({ image: new Icon({
crossOrigin: "anonymous", crossOrigin: "anonymous",
src: require(`@/assets/screen/index/${ src: require(`@/assets/screen/index/${
this.mapLogeList[element.iconType] this.mapLogeList[element.iconType]||"龟裂"
}.png`), }.png`),
// size: [40, 40], // size: [40, 40],
scale: 0.5, // scale: 0.5, //
@ -237,6 +237,51 @@ export default {
type: "bar", 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", () => { window.addEventListener("resize", () => {
chart.resize(); chart.resize();
@ -294,4 +339,4 @@ export default {
} }
} }
} }
</style> </style>

View File

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

View File

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