{{ dataTime }}
@@ -313,11 +321,7 @@
-
-
+
+ {{ scope.row.stakeStart }}
+
+
+
+
+ {{ scope.row.stakeEnd }}
+
+
![]()
-
+
{{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
-
+
+ {{ scope.row.targetArea }}
+
+
-
-
-
@@ -352,6 +338,8 @@ export default {
maxArea: undefined,
id: "",
snapshotId: "",
+ sortedFld: "",
+ sorted: "",
},
// 查询接收表单参数
searchForm: {},
@@ -384,8 +372,6 @@ export default {
currentImageItem: "",
// 图片病害位置信息
rects: [],
- // 影像模式弹窗显影控制
- showCheckImg: false,
};
},
created() {
@@ -395,7 +381,11 @@ export default {
this.getTableDefect();
},
methods: {
- /* 获取列表病害类型对应数据 */
+ /**
+ * @description: 获取列表病害类型对应数据
+ * @param {*}
+ * @return {*}
+ */
getTableDefect() {
getDefectList().then(({ code, data }) => {
if (code === 200) {
@@ -404,7 +394,11 @@ export default {
});
},
- /* 获取路段下拉数据 */
+ /**
+ * @description: 获取路段下拉数据
+ * @param {*}
+ * @return {*}
+ */
getSegmentList() {
getSegment().then(({ code, data }) => {
if (code === 200) {
@@ -413,8 +407,13 @@ export default {
});
},
- /* 获取列表行数据 */
+ /**
+ * @description: 获取列表行数据
+ * @param {*}
+ * @return {*}
+ */
getTableList() {
+ this.loading = true;
// 处理日期范围
const params = {
...this.searchForm,
@@ -435,7 +434,11 @@ export default {
});
},
- /* 点击搜索事件 */
+ /**
+ * @description: 点击搜索事件
+ * @param {*}
+ * @return {*}
+ */
handleQuery() {
const phonereg = /^K\d{4}\+\d{3}$/;
if (this.queryParams.stakeStart) {
@@ -485,7 +488,11 @@ export default {
}
},
- /* 点击重置事件 */
+ /**
+ * @description: 点击重置事件
+ * @param {*}
+ * @return {*}
+ */
resetQuery() {
this.queryParams = {
segmentName: "",
@@ -501,26 +508,53 @@ export default {
maxArea: undefined,
id: "",
snapshotId: "",
+ sortedFld: "",
+ sorted: "",
};
this.paramsDefectType = [];
this.searchForm = {};
this.dateTime = [];
this.getTableList();
+ this.$refs.defectTable.clearSort()
},
- /* 多选框选中数据 */
+ /**
+ * @description: 列表过滤事件
+ * @param {*}
+ * @return {*}
+ */
+ filterHandler(column) {
+ if (column.order) {
+ this.queryParams.sortedFld = column.prop;
+ this.queryParams.sorted = column.order === "ascending" ? "ASC" : "DESC";
+ this.handleQuery();
+ } else {
+ this.queryParams.sortedFld = "";
+ this.queryParams.sorted = "";
+ this.handleQuery();
+ }
+ },
+
+ /**
+ * @description: 多选框选中数据
+ * @param {*}
+ * @return {*}
+ */
handleSelectionChange(selection) {
this.checkIds = selection.map((item) => item.id);
this.multiple = !selection.length;
},
- /* 是病害/不是病害 */
+ /**
+ * @description: 是病害/不是病害
+ * @param {*}
+ * @return {*}
+ */
handleConfirm(value) {
mergeDefect({ status: value, snapShotIds: this.checkIds })
.then(({ code, msg }) => {
if (code === 200) {
this.checkIds = [];
- // this.$refs.defectTable.clearSelection()
this.$modal.msgSuccess("修改成功");
} else {
this.$modal.msgWarning(msg);
@@ -531,27 +565,32 @@ export default {
});
},
- /* 影像模式 */
- handleBatch() {
- this.showCheckImg = true;
- },
-
- /* 切换分页 */
+ /**
+ * @description: 切换分页
+ * @param {*}
+ * @return {*}
+ */
handleCurrentChange(arg) {
this.pagination.page = arg;
this.getTableList();
},
- /* 切换每条/页 */
+ /**
+ * @description: 切换每页条数
+ * @param {*}
+ * @return {*}
+ */
handleSizeChange(arg) {
this.pagination.size = arg;
this.getTableList();
},
- /* 打开查看图片弹窗 */
+ /**
+ * @description: 打开查看图片弹窗
+ * @param {*}
+ * @return {*}
+ */
showScreenImg(item, index) {
- // this.currentImageItem = item;
- // this.showImageDialog = true;
this.imageItem = {
...item,
index,
@@ -561,61 +600,16 @@ export default {
this.showImageDialog = true;
},
- /* 图片位置信息获取 */
- updateRects() {
- this.rects = [];
- this.rectsItem = {};
- const image = this.$refs.mainImage;
- const rects = this.currentImageItem?.rect?.split(",").map(Number) || [];
- this.rects = [
- {
- left: rects[0],
- top: rects[1],
- width: rects[2],
- height: rects[3],
- },
- ];
- // this.rectsItem = this.defectData[this.currentIndex];
- },
-
- /* 图片红框位置 */
- getRectStyle({ left, top, width, height }) {
- const image = this.$refs.mainImage;
- const container = this.$refs.imageContainer;
- if (!image || !container) return {};
-
- const scaleX = container.clientWidth / image.naturalWidth;
- const scaleY = container.clientHeight / image.naturalHeight;
- const scale = Math.min(scaleX, scaleY);
-
- const renderedWidth = image.naturalWidth * scale;
- const renderedHeight = image.naturalHeight * scale;
-
- const offsetX = (container.clientWidth - renderedWidth) / 2;
- const offsetY = (container.clientHeight - renderedHeight) / 2;
-
- return {
- position: "absolute",
- left: `${left * scale + offsetX}px`,
- top: `${top * scale + offsetY}px`,
- width: `${width * scale}px`,
- height: `${height * scale}px`,
- border: "2px solid #FF0000",
- boxSizing: "border-box",
- };
- },
-
- /* 关闭查看图片弹窗 */
+ /**
+ * @description: 关闭查看图片弹窗
+ * @param {*}
+ * @return {*}
+ */
imgCancel() {
this.showImageDialog = false;
this.currentImageItem = {};
this.rects = [];
},
-
- /* 关闭影像模式弹窗 */
- checkCancel() {
- this.showCheckImg = false;
- },
},
};
@@ -674,6 +668,7 @@ export default {
/* 修改弹窗样式 */
::v-deep .el-dialog {
background-color: transparent;
+ margin-top: 1vh !important;
}
::v-deep .el-dialog__header {
-
+
@@ -185,6 +231,10 @@ export default {
type: Object,
default: () => {},
},
+ searchForm: {
+ type: Object,
+ default: () => {},
+ },
segmentList: {
type: Array,
default: () => [],
@@ -212,8 +262,6 @@ export default {
loading: false,
// 表单绑定
imgForm: {
- // 点击详情传的id
- id: null,
// 路段名称
segmentId: "",
// 病害类型
@@ -222,6 +270,12 @@ export default {
stakeStart: "",
// 终止公里桩
stakeEnd: "",
+ minLen: undefined,
+ maxLen: undefined,
+ minArea: undefined,
+ maxArea: undefined,
+ sortedFld: "",
+ sorted: "",
},
// 病害类型下拉数据
defectTypeList: [],
@@ -235,6 +289,16 @@ export default {
rectItem: [],
// 图片病害框的颜色
colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
+ // 父元素的宽-自适应值
+ initWidth: 0,
+ // 父元素的高-自适应值
+ initHeight: 0,
+ // 容器宽
+ elWidth: 0,
+ // 容器高
+ elHeight: 0,
+ // 放大比例
+ scale: 1,
};
},
computed: {
@@ -278,7 +342,96 @@ export default {
created() {
this.getDefectType();
},
+ mounted() {},
+ mounted() {
+ this.initBodySize();
+ this.scrollInit();
+ window.addEventListener("keydown", throttle(this.handleKeydown, 100));
+ window.addEventListener("resize", this.updateRects);
+ },
methods: {
+ /**
+ * @description: 页面初始化
+ * @param {*}
+ * @return {*}
+ */
+ initBodySize() {
+ this.initWidth = this.$refs.imageView.clientWidth; // 拿到父元素宽
+ this.initHeight = this.initWidth * ((1080 * 0.31) / (1920 - 1080 * 0.02)); // 根据宽计算高实现自适应
+ this.elWidth = this.initWidth * (100 / (1920 / 1.2));
+ this.elHeight = this.initHeight * (100 / (1080 / 2.15));
+ },
+
+ /**
+ * @description: 滚轮事件
+ * @param {*}
+ * @return {*}
+ */
+ handleWeel(e) {
+ if (e.wheelDelta < 0) {
+ this.scale -= 0.25;
+ } else {
+ this.scale += 0.25;
+ }
+ if (this.scale >= 5.5) {
+ this.scale = 5.5;
+ return;
+ }
+ if (this.scale <= 1) {
+ this.scale = 1;
+ return;
+ }
+ this.elWidth = this.initWidth * (100 / (1920 / 1.2)) * this.zoom;
+ this.elHeight = this.initHeight * (100 / (1080 / 2)) * this.zoom;
+ // 调整滚动容器的尺寸
+ this.$nextTick(() => {
+ const container = this.$refs.imageContainer;
+ container.style.width = `${this.elWidth * this.scale}rem`;
+ container.style.height = `${this.elHeight * this.scale}rem`;
+ });
+ },
+
+ /**
+ * @description: 初始化鼠标拖动事件
+ * @param {*}
+ * @return {*}
+ */
+ scrollInit() {
+ // 获取要绑定事件的元素
+ const nav = this.$refs.imageView;
+ let flag; // 鼠标按下
+ let downX; // 鼠标点击的x下标
+ let downY;
+ let scrollLeft; // 当前元素滚动条的偏移量
+ let scrollTop; // 当前元素滚动条的偏移量
+ nav.addEventListener("mousedown", function (event) {
+ flag = true;
+ downX = event.clientX; // 获取到点击的x下标
+ downY = event.clientY;
+ scrollLeft = this.scrollLeft; // 获取当前元素滚动条的偏移量
+ scrollTop = this.scrollTop;
+ });
+ nav.addEventListener("mousemove", function (event) {
+ if (flag) {
+ // 判断是否是鼠标按下滚动元素区域
+ let moveX = event.clientX; // 获取移动的x轴
+ let moveY = event.clientY;
+ let scrollX = moveX - downX; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
+ let scrollY = moveY - downY; // 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离
+ this.scrollLeft = scrollLeft - scrollX; // 鼠标按下的滚动条偏移量减去当前鼠标的滑动距离
+ this.scrollTop = scrollTop - scrollY;
+ }
+ });
+ // 鼠标抬起停止拖动
+ nav.addEventListener("mouseup", function () {
+ flag = false;
+ });
+ // 鼠标离开元素停止拖动
+ nav.addEventListener("mouseleave", function (event) {
+ flag = false;
+ });
+ },
+
/**
* @description: 获取病害类型下拉数据
* @param {*}
@@ -303,7 +456,11 @@ export default {
this.currentIndex = val.index;
this.pageTip = val.params.page;
this.params = { ...val.params };
- this.imgForm.segmentId = val.segmentId;
+ this.imgForm = {
+ ...this.searchForm,
+ segmentId: this.searchForm.segmentName,
+ };
+
this.getList();
setTimeout(() => {
if (this.pageTip > 1) {
@@ -426,6 +583,12 @@ export default {
defectType: "",
stakeStart: "",
stakeEnd: "",
+ minLen: undefined,
+ maxLen: undefined,
+ minArea: undefined,
+ maxArea: undefined,
+ sortedFld: "",
+ sorted: "",
};
this.params = {
page: 1,
@@ -442,7 +605,8 @@ export default {
*/
showImage(index) {
this.currentIndex = index;
- const indexInfo = this.defectData[this.currentIndex].media.length - 1;
+ this.scale = 1;
+ const indexInfo = this.defectData[this.currentIndex]?.media.length - 1;
this.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
this.$nextTick(() => {
this.scrollToCurrentImage();
@@ -534,6 +698,7 @@ export default {
event.preventDefault();
if (this.currentIndex > 0) {
this.currentIndex--;
+ this.scale = 1;
const index = this.defectData[this.currentIndex].media.length - 1;
this.selectedThumbnail = index; // Reset when changing main images via keyboard
this.scrollToCurrentImage();
@@ -545,6 +710,7 @@ export default {
this.currentIndex === this.defectData.length - 1
? this.currentIndex
: this.currentIndex++;
+ this.scale = 1;
const index = this.defectData[this.currentIndex].media.length - 1;
this.selectedThumbnail = index; // Reset when changing main images via keyboard
this.scrollToCurrentImage();
@@ -673,10 +839,6 @@ export default {
}
},
},
- mounted() {
- window.addEventListener("keydown", throttle(this.handleKeydown, 100));
- window.addEventListener("resize", this.updateRects);
- },
beforeDestroy() {
window.removeEventListener("keydown", this.handleKeydown);
window.removeEventListener("resize", this.updateRects);
@@ -688,7 +850,7 @@ export default {
.app {
width: 100%;
// height: 54rem;
- height: calc(100vh - 7rem);
+ height: calc(100vh - 4rem);
display: flex;
flex-direction: row;
background-color: #2e3a46;
@@ -751,7 +913,7 @@ export default {
.toolbar {
width: 100%;
- height: 4rem;
+ height: 7rem;
display: flex;
align-items: center;
background-color: #333c42;
@@ -766,7 +928,7 @@ export default {
}
.el-select {
- width: 10rem;
+ width: 100%;
.el-input--small .el-input__inner {
color: #ffffff;
@@ -809,6 +971,14 @@ export default {
color: #ffffff;
background-color: #333c42;
}
+
+ .el-input-number {
+ .el-input-number__decrease,
+ .el-input-number__increase {
+ background: transparent;
+ color: #ffffff;
+ }
+ }
}
}
@@ -820,8 +990,38 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
- overflow: hidden;
+ overflow: auto;
+ &::-webkit-scrollbar {
+ display: none;
+ }
+}
+
+// 画框样式
+.rect-overlay {
+ position: absolute;
+ pointer-events: none;
+}
+
+.image-viewer {
+ // height: 43rem;
+ height: calc(100% - 12rem);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background-color: #22272b;
+ position: relative;
+
+ // 图片信息
+ .rect-image {
+ width: 90%;
+ position: absolute;
+ top: 0;
+ z-index: 1;
+ }
+
+ // 修改选择框样式
::v-deep .image-info {
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
@@ -829,57 +1029,33 @@ export default {
.el-checkbox__input.is-checked + .el-checkbox__label {
color: inherit;
font-size: 0.8rem;
+ line-height: 0.8rem;
}
.el-checkbox__label {
color: inherit;
font-size: 0.8rem;
+ line-height: 0.8rem;
}
}
-}
-.image-container img {
- max-width: 100%;
- max-height: 100%;
- object-fit: contain;
-}
-
-// 画框样式
-.rect-overlay {
- position: absolute;
-
- // pointer-events: none;
- // border: 2px solid red;
- &:hover {
- opacity: 0.7;
+ .view-content {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ position: relative;
}
- > div {
- cursor: pointer;
- white-space: nowrap;
- position: absolute;
- top: -1.2rem;
+ .view-content img {
+ max-width: 100%;
+ max-height: 100%;
+ pointer-events: none;
+ object-fit: contain;
}
}
-// 图片信息
-.rect-image {
- width: 90%;
- position: absolute;
- top: 0;
-}
-
-.image-viewer {
- // height: 43rem;
- height: calc(100% - 9rem);
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- background-color: #22272b;
- position: relative;
-}
-
+// 小图样式
.thumbnail-row {
width: 100%;
height: 5rem;
diff --git a/src/views/xj/inspection/confirmation-management/index.vue b/src/views/xj/inspection/confirmation-management/index.vue
index 441a2cf..2e75bcb 100644
--- a/src/views/xj/inspection/confirmation-management/index.vue
+++ b/src/views/xj/inspection/confirmation-management/index.vue
@@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-01 13:17:41
* @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-25 17:02:47
+ * @LastEditTime: 2024-12-26 16:02:14
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
* @Description: 巡检信息-病害确认
-->
@@ -200,6 +200,7 @@
v-loading="loading"
:data="confirmationtList"
@selection-change="handleSelectionChange"
+ @sort-change="filterHandler"
style="width: 100%"
>
+ ![Main Image]()
+ ![Main Image]()
+
-
-
- 采集时间:
- {{ new Date(item.createdTime).toLocaleString() }} 起始桩号:
- {{ item.stakeStart || "暂无数据" }} 终止桩号:
- {{ item.stakeEnd || "暂无数据" }}
- 病害类型:
- {{ item.defectTypeName || "暂无数据" }}
-
- 病害面积：{{ item.targetArea }}平方米 病害长度：{{
- item.targetLen * 1 <= 0 ? "暂无数据" : `${item.targetLen}米`
- }}
-
-
-
-
-
@@ -255,69 +288,22 @@
-
-
-
-
-