fix：修改屏幕适配文件报错，修改消息中心，修改病害确认弹窗，病害确认增加排序
This commit is contained in:
parent
9a0faec3c6
commit
2b9983e374
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=1eb44fae5b9dc454442b322e9a41d233" type="text/javascript"></script>
|
||||
|
||||
<script src="./lib-flexible.js"></script>
|
||||
<script src="/lib-flexible.js"></script>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="renderer" content="webkit">
|
||||
|
||||
@ -19,13 +19,79 @@
|
||||
<div class="menu-return right-menu-item">
|
||||
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
||||
</div>
|
||||
<search id="header-search" class="right-menu-item" />
|
||||
|
||||
<!-- <search id="header-search" class="right-menu-item" /> -->
|
||||
<div class="header-news">
|
||||
<el-popover
|
||||
placement="bottom-end"
|
||||
width="400"
|
||||
popper-class="screen-message-popover"
|
||||
trigger="hover"
|
||||
>
|
||||
<div class="screen-message-content">
|
||||
<div class="message-content">
|
||||
<fssm-scroll style="max-height: 12rem">
|
||||
<div
|
||||
class="message-item"
|
||||
v-for="(item, index) in messageList"
|
||||
:key="`message-item-${index}`"
|
||||
>
|
||||
<div
|
||||
class="item-top"
|
||||
@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"
|
||||
class="el-icon-info"
|
||||
></i>
|
||||
<i
|
||||
v-if="item.notificationType === 'WARNING'"
|
||||
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>
|
||||
</div>
|
||||
<div class="carNo">
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
</fssm-scroll>
|
||||
</div>
|
||||
<div class="message-footer">
|
||||
<el-button
|
||||
@click="handleMessageClick"
|
||||
icon="el-icon-d-arrow-right"
|
||||
type="text"
|
||||
>查看更多</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<el-badge
|
||||
slot="reference"
|
||||
:value="noticeNum"
|
||||
:max="99"
|
||||
class="item"
|
||||
>
|
||||
<i class="el-icon-bell">
|
||||
<!-- <div class="num">{{ noticeNum }}</div> -->
|
||||
</i>
|
||||
</el-badge>
|
||||
</el-popover>
|
||||
</div>
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
</el-tooltip> -->
|
||||
</template>
|
||||
|
||||
<el-dropdown
|
||||
@ -62,7 +128,9 @@ import SizeSelect from "@/components/SizeSelect";
|
||||
import Search from "@/components/HeaderSearch";
|
||||
import RuoYiGit from "@/components/RuoYi/Git";
|
||||
import RuoYiDoc from "@/components/RuoYi/Doc";
|
||||
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
// 接口
|
||||
import { getNoticeList } from "@/api/xj/screen/index";
|
||||
export default {
|
||||
components: {
|
||||
Breadcrumb,
|
||||
@ -73,6 +141,7 @@ export default {
|
||||
Search,
|
||||
RuoYiGit,
|
||||
RuoYiDoc,
|
||||
FssmScroll,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["sidebar", "avatar", "device"]),
|
||||
@ -93,6 +162,19 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 预警中心数据条数
|
||||
noticeNum: 0,
|
||||
// 预警中心消息数据
|
||||
messageList: [],
|
||||
// 预警中心定时器
|
||||
messageTimer: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getMessageList();
|
||||
},
|
||||
methods: {
|
||||
/* 点击跳转大屏页面 */
|
||||
goBigScreen() {
|
||||
@ -114,6 +196,49 @@ export default {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取消息中心数据
|
||||
* @return {void}
|
||||
*/
|
||||
getMessageList() {
|
||||
this.messageTimer = setInterval(() => {
|
||||
getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
|
||||
if (code === 200) {
|
||||
this.messageList = rows;
|
||||
this.noticeNum = total;
|
||||
}
|
||||
});
|
||||
}, 5000);
|
||||
getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
|
||||
if (code === 200) {
|
||||
this.messageList = rows;
|
||||
this.noticeNum = total;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 消息中心查看更多事件
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessageClick() {
|
||||
this.$router.push("/inspection_warn/warning-center");
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 消息中心点击具体数据事件
|
||||
* @return {*}
|
||||
*/
|
||||
handleMessageItemClick(value) {
|
||||
this.$router.push({
|
||||
name: "Warning-center",
|
||||
params: { title: value },
|
||||
});
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.messageTimer);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -163,7 +288,8 @@ export default {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.menu-return {
|
||||
.menu-return,
|
||||
.header-news {
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
|
||||
@ -171,6 +297,32 @@ export default {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
// 消息中心样式
|
||||
.header-news {
|
||||
i {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
|
||||
// .num {
|
||||
// min-width: 0.9rem;
|
||||
// position: absolute;
|
||||
// top: -0.2rem;
|
||||
// right: -0.5rem;
|
||||
// padding: 0.2rem;
|
||||
// font-size: 0.6rem;
|
||||
// border-radius: 0.5rem;
|
||||
// color: #ffffff;
|
||||
// background-color: red;
|
||||
// }
|
||||
}
|
||||
|
||||
::v-deep .el-badge__content {
|
||||
top: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -218,3 +370,50 @@ export default {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 大屏消息弹出框样式
|
||||
.screen-message-popover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border: none;
|
||||
|
||||
.screen-message-content {
|
||||
width: 100%;
|
||||
color: #ffffff;
|
||||
|
||||
.message-content {
|
||||
width: 100%;
|
||||
max-height: 12rem;
|
||||
|
||||
.message-item {
|
||||
padding: 0.5rem 0;
|
||||
border-bottom: 1px dashed rgb(115, 115, 116);
|
||||
|
||||
.item-top {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
&:hover {
|
||||
span {
|
||||
color: rgb(113, 179, 255);
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
|
||||
.item-content {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -892,11 +892,13 @@ export default {
|
||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||
color: inherit;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
|
||||
.el-checkbox__label {
|
||||
color: inherit;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -76,9 +76,17 @@
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<i slot="reference" class="el-icon-message-solid">
|
||||
<el-badge
|
||||
slot="reference"
|
||||
:value="noticeNum"
|
||||
:max="99"
|
||||
class="item"
|
||||
>
|
||||
<i class="el-icon-message-solid"> </i>
|
||||
</el-badge>
|
||||
<!-- <i slot="reference" class="el-icon-message-solid">
|
||||
<div class="num">{{ noticeNum }}</div>
|
||||
</i>
|
||||
</i> -->
|
||||
</el-popover>
|
||||
</div>
|
||||
<div class="header-data">{{ dataTime }}</div>
|
||||
@ -313,11 +321,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 总览地图 -->
|
||||
<fssm-map
|
||||
ref="overViewMap"
|
||||
v-if="showMap"
|
||||
>
|
||||
</fssm-map>
|
||||
<fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
|
||||
<!-- 病害巡检、道路资产地图 -->
|
||||
<fssm-map
|
||||
v-if="elementDiv !== 'OverviewScreen' && !showMap"
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-18 10:19:56
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-23 09:59:12
|
||||
* @LastEditTime: 2024-12-26 16:44:24
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
|
||||
* @Description: 总览大屏-病害三维饼图
|
||||
-->
|
||||
@ -492,7 +492,7 @@ export default {
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 6rem;
|
||||
width: 4rem;
|
||||
padding-left: 0.3rem;
|
||||
color: #aac6c7;
|
||||
white-space: nowrap;
|
||||
@ -502,7 +502,7 @@ export default {
|
||||
}
|
||||
|
||||
.rate {
|
||||
width: 2.5rem;
|
||||
width: 3rem;
|
||||
color: #808c9f;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @Author: SunTao 328867980@qq.com
|
||||
* @Date: 2024-10-22 15:30:25
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-12-25 16:22:03
|
||||
* @LastEditTime: 2024-12-26 15:41:56
|
||||
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||
* @Description: 大屏查看图片弹窗
|
||||
-->
|
||||
@ -30,8 +30,10 @@
|
||||
ref="imgForm"
|
||||
size="small"
|
||||
:inline="true"
|
||||
label-width="6rem"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="7">
|
||||
<el-form-item label="路段名称">
|
||||
<el-select
|
||||
v-model="imgForm.segmentId"
|
||||
@ -48,7 +50,8 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-form-item label="病害类型">
|
||||
<el-select
|
||||
v-model="imgForm.defectType"
|
||||
@ -64,7 +67,8 @@
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-form-item label="公里桩">
|
||||
<el-input
|
||||
v-model="imgForm.stakeStart"
|
||||
@ -80,6 +84,44 @@
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="9">
|
||||
<el-form-item label="病害长度">
|
||||
<el-input-number
|
||||
v-model="imgForm.minLen"
|
||||
controls-position="right"
|
||||
placeholder="最小长度"
|
||||
:min="0"
|
||||
></el-input-number>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input-number
|
||||
v-model="imgForm.maxLen"
|
||||
controls-position="right"
|
||||
placeholder="最大长度"
|
||||
:min="0"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="9">
|
||||
<el-form-item label="病害面积">
|
||||
<el-input-number
|
||||
v-model="imgForm.minArea"
|
||||
controls-position="right"
|
||||
placeholder="最小面积"
|
||||
:min="0"
|
||||
></el-input-number>
|
||||
<span style="margin: 0 5px">-</span>
|
||||
<el-input-number
|
||||
v-model="imgForm.maxArea"
|
||||
controls-position="right"
|
||||
placeholder="最大面积"
|
||||
:min="0"
|
||||
></el-input-number>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-button
|
||||
type="primary"
|
||||
class="btn-submit"
|
||||
@ -90,22 +132,12 @@
|
||||
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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 :style="{ color: colorList[index] }" class="rect-overlay-text">
|
||||
目标详情>>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rect-image">
|
||||
<el-checkbox-group
|
||||
v-model="checkedRect"
|
||||
@ -131,12 +163,26 @@
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="image-container" ref="imageView">
|
||||
<div
|
||||
class="view-content"
|
||||
ref="imageContainer"
|
||||
@mousewheel="handleWeel"
|
||||
:style="`width:${elWidth}rem;height:${elHeight}rem;transform: scale(${scale});transform-origin: top left`"
|
||||
>
|
||||
<img
|
||||
:src="currentImage"
|
||||
alt="Main Image"
|
||||
ref="mainImage"
|
||||
@load="updateRects"
|
||||
/>
|
||||
<div
|
||||
class="rect-overlay"
|
||||
v-for="(item, index) in checkedRectList"
|
||||
:key="`rect-overlay-${index}`"
|
||||
:style="getRectStyle(item.rectPosition, index)"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 小图展示 -->
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
> div {
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: -1.2rem;
|
||||
line-height: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 图片信息
|
||||
.rect-image {
|
||||
width: 90%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.image-viewer {
|
||||
// height: 43rem;
|
||||
height: calc(100% - 9rem);
|
||||
.view-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #22272b;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.view-content img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
pointer-events: none;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
// 小图样式
|
||||
.thumbnail-row {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
|
||||
@ -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%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
@ -222,8 +223,26 @@
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="开始桩号" align="center" prop="stakeStart" />
|
||||
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
|
||||
<el-table-column
|
||||
label="开始桩号"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
prop="stake_start"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.stakeStart }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="结束桩号"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
prop="stake_end"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.stakeEnd }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害图片" align="center" prop="media">
|
||||
<template slot-scope="scope">
|
||||
<img
|
||||
@ -233,12 +252,26 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害长度" align="center" prop="targetLen">
|
||||
<el-table-column
|
||||
label="病害长度"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
prop="target_len"
|
||||
>
|
||||
<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="病害面积"
|
||||
sortable="custom"
|
||||
align="center"
|
||||
prop="target_area"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.targetArea }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- 分页组件 -->
|
||||
<div class="pagination-part">
|
||||
@ -255,69 +288,22 @@
|
||||
</el-pagination>
|
||||
</div>
|
||||
|
||||
<!-- 查看图片大图 -->
|
||||
<!-- <el-dialog
|
||||
title="查看图片"
|
||||
:visible.sync="showImageDialog"
|
||||
width="85rem"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<div class="image-container" v-if="showImageDialog" 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> -->
|
||||
|
||||
<!-- 影像模式弹窗 -->
|
||||
<el-dialog
|
||||
title="影像模式"
|
||||
:visible.sync="showCheckImg"
|
||||
width="85rem"
|
||||
destroy-on-close
|
||||
:close-on-click-modal="false"
|
||||
@close="checkCancel"
|
||||
>
|
||||
<image-dialog
|
||||
v-if="showCheckImg"
|
||||
:tableDefect="tableDefect"
|
||||
></image-dialog>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 详情图片弹窗 -->
|
||||
<el-dialog
|
||||
title="详情"
|
||||
:visible.sync="showImageDialog"
|
||||
width="85rem"
|
||||
width="73%"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
destroy-on-close
|
||||
@close="imgCancel"
|
||||
>
|
||||
<img-dialog v-if="showImageDialog" :segmentList="segmentList" :imageItem="imageItem"></img-dialog>
|
||||
<img-dialog
|
||||
v-if="showImageDialog"
|
||||
:segmentList="segmentList"
|
||||
:imageItem="imageItem"
|
||||
:searchForm="searchForm"
|
||||
></img-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -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;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -674,6 +668,7 @@ export default {
|
||||
/* 修改弹窗样式 */
|
||||
::v-deep .el-dialog {
|
||||
background-color: transparent;
|
||||
margin-top: 1vh !important;
|
||||
}
|
||||
|
||||
::v-deep .el-dialog__header {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user