fix：修改屏幕适配文件报错，修改消息中心，修改病害确认弹窗，病害确认增加排序
This commit is contained in:
parent
9a0faec3c6
commit
2b9983e374
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=1eb44fae5b9dc454442b322e9a41d233" type="text/javascript"></script>
|
<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 charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
<meta name="renderer" content="webkit">
|
<meta name="renderer" content="webkit">
|
||||||
|
|||||||
@ -19,13 +19,79 @@
|
|||||||
<div class="menu-return right-menu-item">
|
<div class="menu-return right-menu-item">
|
||||||
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
|
||||||
</div>
|
</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" />
|
<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" />
|
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||||
</el-tooltip>
|
</el-tooltip> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-dropdown
|
<el-dropdown
|
||||||
@ -62,7 +128,9 @@ import SizeSelect from "@/components/SizeSelect";
|
|||||||
import Search from "@/components/HeaderSearch";
|
import Search from "@/components/HeaderSearch";
|
||||||
import RuoYiGit from "@/components/RuoYi/Git";
|
import RuoYiGit from "@/components/RuoYi/Git";
|
||||||
import RuoYiDoc from "@/components/RuoYi/Doc";
|
import RuoYiDoc from "@/components/RuoYi/Doc";
|
||||||
|
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||||
|
// 接口
|
||||||
|
import { getNoticeList } from "@/api/xj/screen/index";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
@ -73,6 +141,7 @@ export default {
|
|||||||
Search,
|
Search,
|
||||||
RuoYiGit,
|
RuoYiGit,
|
||||||
RuoYiDoc,
|
RuoYiDoc,
|
||||||
|
FssmScroll,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters(["sidebar", "avatar", "device"]),
|
...mapGetters(["sidebar", "avatar", "device"]),
|
||||||
@ -93,6 +162,19 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 预警中心数据条数
|
||||||
|
noticeNum: 0,
|
||||||
|
// 预警中心消息数据
|
||||||
|
messageList: [],
|
||||||
|
// 预警中心定时器
|
||||||
|
messageTimer: null,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getMessageList();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/* 点击跳转大屏页面 */
|
/* 点击跳转大屏页面 */
|
||||||
goBigScreen() {
|
goBigScreen() {
|
||||||
@ -114,6 +196,49 @@ export default {
|
|||||||
})
|
})
|
||||||
.catch(() => {});
|
.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>
|
</script>
|
||||||
@ -163,7 +288,8 @@ export default {
|
|||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-return {
|
.menu-return,
|
||||||
|
.header-news {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
|
|
||||||
@ -171,6 +297,32 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
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>
|
||||||
|
|
||||||
|
<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 {
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__label {
|
.el-checkbox__label {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -76,9 +76,17 @@
|
|||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div class="num">{{ noticeNum }}</div>
|
||||||
</i>
|
</i> -->
|
||||||
</el-popover>
|
</el-popover>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-data">{{ dataTime }}</div>
|
<div class="header-data">{{ dataTime }}</div>
|
||||||
@ -313,11 +321,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 总览地图 -->
|
<!-- 总览地图 -->
|
||||||
<fssm-map
|
<fssm-map ref="overViewMap" v-if="showMap"> </fssm-map>
|
||||||
ref="overViewMap"
|
|
||||||
v-if="showMap"
|
|
||||||
>
|
|
||||||
</fssm-map>
|
|
||||||
<!-- 病害巡检、道路资产地图 -->
|
<!-- 病害巡检、道路资产地图 -->
|
||||||
<fssm-map
|
<fssm-map
|
||||||
v-if="elementDiv !== 'OverviewScreen' && !showMap"
|
v-if="elementDiv !== 'OverviewScreen' && !showMap"
|
||||||
@ -1100,7 +1104,7 @@ export default {
|
|||||||
center,
|
center,
|
||||||
duration: 500,
|
duration: 500,
|
||||||
});
|
});
|
||||||
map.getView().fit(extent,{
|
map.getView().fit(extent, {
|
||||||
duration: 500,
|
duration: 500,
|
||||||
padding: [80, 500, 80, 500], // 边缘填充（可选）
|
padding: [80, 500, 80, 500], // 边缘填充（可选）
|
||||||
});
|
});
|
||||||
@ -1113,7 +1117,7 @@ export default {
|
|||||||
center,
|
center,
|
||||||
duration: 500,
|
duration: 500,
|
||||||
});
|
});
|
||||||
map.getView().fit(extent,{
|
map.getView().fit(extent, {
|
||||||
duration: 500,
|
duration: 500,
|
||||||
padding: [80, 500, 80, 500], // 边缘填充（可选）
|
padding: [80, 500, 80, 500], // 边缘填充（可选）
|
||||||
});
|
});
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-18 10:19:56
|
* @Date: 2024-10-18 10:19:56
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @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
|
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\disease-current.vue
|
||||||
* @Description: 总览大屏-病害三维饼图
|
* @Description: 总览大屏-病害三维饼图
|
||||||
-->
|
-->
|
||||||
@ -492,7 +492,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
width: 6rem;
|
width: 4rem;
|
||||||
padding-left: 0.3rem;
|
padding-left: 0.3rem;
|
||||||
color: #aac6c7;
|
color: #aac6c7;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -502,7 +502,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.rate {
|
.rate {
|
||||||
width: 2.5rem;
|
width: 3rem;
|
||||||
color: #808c9f;
|
color: #808c9f;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
* @Author: SunTao 328867980@qq.com
|
* @Author: SunTao 328867980@qq.com
|
||||||
* @Date: 2024-10-22 15:30:25
|
* @Date: 2024-10-22 15:30:25
|
||||||
* @LastEditors: SunTao 328867980@qq.com
|
* @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
|
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
|
||||||
* @Description: 大屏查看图片弹窗
|
* @Description: 大屏查看图片弹窗
|
||||||
-->
|
-->
|
||||||
@ -30,8 +30,10 @@
|
|||||||
ref="imgForm"
|
ref="imgForm"
|
||||||
size="small"
|
size="small"
|
||||||
:inline="true"
|
:inline="true"
|
||||||
label-width="6rem"
|
label-width="5rem"
|
||||||
>
|
>
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="7">
|
||||||
<el-form-item label="路段名称">
|
<el-form-item label="路段名称">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="imgForm.segmentId"
|
v-model="imgForm.segmentId"
|
||||||
@ -48,7 +50,8 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="7">
|
||||||
<el-form-item label="病害类型">
|
<el-form-item label="病害类型">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="imgForm.defectType"
|
v-model="imgForm.defectType"
|
||||||
@ -64,7 +67,8 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="10">
|
||||||
<el-form-item label="公里桩">
|
<el-form-item label="公里桩">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="imgForm.stakeStart"
|
v-model="imgForm.stakeStart"
|
||||||
@ -80,6 +84,44 @@
|
|||||||
clearable
|
clearable
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</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
|
<el-button
|
||||||
type="primary"
|
type="primary"
|
||||||
class="btn-submit"
|
class="btn-submit"
|
||||||
@ -90,22 +132,12 @@
|
|||||||
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
||||||
>重置</el-button
|
>重置</el-button
|
||||||
>
|
>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
</el-form>
|
</el-form>
|
||||||
</div>
|
</div>
|
||||||
<!-- 图片展示 -->
|
<!-- 图片展示 -->
|
||||||
<div class="image-viewer">
|
<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">
|
<div class="rect-image">
|
||||||
<el-checkbox-group
|
<el-checkbox-group
|
||||||
v-model="checkedRect"
|
v-model="checkedRect"
|
||||||
@ -131,12 +163,26 @@
|
|||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</div>
|
</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
|
<img
|
||||||
:src="currentImage"
|
:src="currentImage"
|
||||||
alt="Main Image"
|
alt="Main Image"
|
||||||
ref="mainImage"
|
ref="mainImage"
|
||||||
@load="updateRects"
|
@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>
|
||||||
</div>
|
</div>
|
||||||
<!-- 小图展示 -->
|
<!-- 小图展示 -->
|
||||||
@ -185,6 +231,10 @@ export default {
|
|||||||
type: Object,
|
type: Object,
|
||||||
default: () => {},
|
default: () => {},
|
||||||
},
|
},
|
||||||
|
searchForm: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {},
|
||||||
|
},
|
||||||
segmentList: {
|
segmentList: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: () => [],
|
default: () => [],
|
||||||
@ -212,8 +262,6 @@ export default {
|
|||||||
loading: false,
|
loading: false,
|
||||||
// 表单绑定
|
// 表单绑定
|
||||||
imgForm: {
|
imgForm: {
|
||||||
// 点击详情传的id
|
|
||||||
id: null,
|
|
||||||
// 路段名称
|
// 路段名称
|
||||||
segmentId: "",
|
segmentId: "",
|
||||||
// 病害类型
|
// 病害类型
|
||||||
@ -222,6 +270,12 @@ export default {
|
|||||||
stakeStart: "",
|
stakeStart: "",
|
||||||
// 终止公里桩
|
// 终止公里桩
|
||||||
stakeEnd: "",
|
stakeEnd: "",
|
||||||
|
minLen: undefined,
|
||||||
|
maxLen: undefined,
|
||||||
|
minArea: undefined,
|
||||||
|
maxArea: undefined,
|
||||||
|
sortedFld: "",
|
||||||
|
sorted: "",
|
||||||
},
|
},
|
||||||
// 病害类型下拉数据
|
// 病害类型下拉数据
|
||||||
defectTypeList: [],
|
defectTypeList: [],
|
||||||
@ -235,6 +289,16 @@ export default {
|
|||||||
rectItem: [],
|
rectItem: [],
|
||||||
// 图片病害框的颜色
|
// 图片病害框的颜色
|
||||||
colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
colorList: ["#FFFFFF", "#07E8E2", "#DD9F18", "#994EFF", "#08B4A6"],
|
||||||
|
// 父元素的宽-自适应值
|
||||||
|
initWidth: 0,
|
||||||
|
// 父元素的高-自适应值
|
||||||
|
initHeight: 0,
|
||||||
|
// 容器宽
|
||||||
|
elWidth: 0,
|
||||||
|
// 容器高
|
||||||
|
elHeight: 0,
|
||||||
|
// 放大比例
|
||||||
|
scale: 1,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -278,7 +342,96 @@ export default {
|
|||||||
created() {
|
created() {
|
||||||
this.getDefectType();
|
this.getDefectType();
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
|
mounted() {
|
||||||
|
this.initBodySize();
|
||||||
|
this.scrollInit();
|
||||||
|
window.addEventListener("keydown", throttle(this.handleKeydown, 100));
|
||||||
|
window.addEventListener("resize", this.updateRects);
|
||||||
|
},
|
||||||
methods: {
|
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: 获取病害类型下拉数据
|
* @description: 获取病害类型下拉数据
|
||||||
* @param {*}
|
* @param {*}
|
||||||
@ -303,7 +456,11 @@ export default {
|
|||||||
this.currentIndex = val.index;
|
this.currentIndex = val.index;
|
||||||
this.pageTip = val.params.page;
|
this.pageTip = val.params.page;
|
||||||
this.params = { ...val.params };
|
this.params = { ...val.params };
|
||||||
this.imgForm.segmentId = val.segmentId;
|
this.imgForm = {
|
||||||
|
...this.searchForm,
|
||||||
|
segmentId: this.searchForm.segmentName,
|
||||||
|
};
|
||||||
|
|
||||||
this.getList();
|
this.getList();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (this.pageTip > 1) {
|
if (this.pageTip > 1) {
|
||||||
@ -426,6 +583,12 @@ export default {
|
|||||||
defectType: "",
|
defectType: "",
|
||||||
stakeStart: "",
|
stakeStart: "",
|
||||||
stakeEnd: "",
|
stakeEnd: "",
|
||||||
|
minLen: undefined,
|
||||||
|
maxLen: undefined,
|
||||||
|
minArea: undefined,
|
||||||
|
maxArea: undefined,
|
||||||
|
sortedFld: "",
|
||||||
|
sorted: "",
|
||||||
};
|
};
|
||||||
this.params = {
|
this.params = {
|
||||||
page: 1,
|
page: 1,
|
||||||
@ -442,7 +605,8 @@ export default {
|
|||||||
*/
|
*/
|
||||||
showImage(index) {
|
showImage(index) {
|
||||||
this.currentIndex = 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.selectedThumbnail = indexInfo; // Reset to the first thumbnail when changing the main item
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.scrollToCurrentImage();
|
this.scrollToCurrentImage();
|
||||||
@ -534,6 +698,7 @@ export default {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (this.currentIndex > 0) {
|
if (this.currentIndex > 0) {
|
||||||
this.currentIndex--;
|
this.currentIndex--;
|
||||||
|
this.scale = 1;
|
||||||
const index = this.defectData[this.currentIndex].media.length - 1;
|
const index = this.defectData[this.currentIndex].media.length - 1;
|
||||||
this.selectedThumbnail = index; // Reset when changing main images via keyboard
|
this.selectedThumbnail = index; // Reset when changing main images via keyboard
|
||||||
this.scrollToCurrentImage();
|
this.scrollToCurrentImage();
|
||||||
@ -545,6 +710,7 @@ export default {
|
|||||||
this.currentIndex === this.defectData.length - 1
|
this.currentIndex === this.defectData.length - 1
|
||||||
? this.currentIndex
|
? this.currentIndex
|
||||||
: this.currentIndex++;
|
: this.currentIndex++;
|
||||||
|
this.scale = 1;
|
||||||
const index = this.defectData[this.currentIndex].media.length - 1;
|
const index = this.defectData[this.currentIndex].media.length - 1;
|
||||||
this.selectedThumbnail = index; // Reset when changing main images via keyboard
|
this.selectedThumbnail = index; // Reset when changing main images via keyboard
|
||||||
this.scrollToCurrentImage();
|
this.scrollToCurrentImage();
|
||||||
@ -673,10 +839,6 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
|
||||||
window.addEventListener("keydown", throttle(this.handleKeydown, 100));
|
|
||||||
window.addEventListener("resize", this.updateRects);
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
window.removeEventListener("keydown", this.handleKeydown);
|
window.removeEventListener("keydown", this.handleKeydown);
|
||||||
window.removeEventListener("resize", this.updateRects);
|
window.removeEventListener("resize", this.updateRects);
|
||||||
@ -688,7 +850,7 @@ export default {
|
|||||||
.app {
|
.app {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// height: 54rem;
|
// height: 54rem;
|
||||||
height: calc(100vh - 7rem);
|
height: calc(100vh - 4rem);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
background-color: #2e3a46;
|
background-color: #2e3a46;
|
||||||
@ -751,7 +913,7 @@ export default {
|
|||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 4rem;
|
height: 7rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #333c42;
|
background-color: #333c42;
|
||||||
@ -766,7 +928,7 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.el-select {
|
.el-select {
|
||||||
width: 10rem;
|
width: 100%;
|
||||||
|
|
||||||
.el-input--small .el-input__inner {
|
.el-input--small .el-input__inner {
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
@ -809,6 +971,14 @@ export default {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
background-color: #333c42;
|
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;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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 {
|
::v-deep .image-info {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
@ -829,57 +1029,33 @@ export default {
|
|||||||
.el-checkbox__input.is-checked + .el-checkbox__label {
|
.el-checkbox__input.is-checked + .el-checkbox__label {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
line-height: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-checkbox__label {
|
.el-checkbox__label {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
|
line-height: 0.8rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.image-container img {
|
.view-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view-content img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
|
pointer-events: none;
|
||||||
object-fit: contain;
|
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;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 图片信息
|
// 小图样式
|
||||||
.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 {
|
.thumbnail-row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5rem;
|
height: 5rem;
|
||||||
|
|||||||
@ -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-25 17:02:47
|
* @LastEditTime: 2024-12-26 16:02:14
|
||||||
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
|
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
|
||||||
* @Description: 巡检信息-病害确认
|
* @Description: 巡检信息-病害确认
|
||||||
-->
|
-->
|
||||||
@ -200,6 +200,7 @@
|
|||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="confirmationtList"
|
:data="confirmationtList"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
|
@sort-change="filterHandler"
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
>
|
>
|
||||||
<el-table-column type="selection" width="55" align="center" />
|
<el-table-column type="selection" width="55" align="center" />
|
||||||
@ -222,8 +223,26 @@
|
|||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column label="开始桩号" align="center" prop="stakeStart" />
|
<el-table-column
|
||||||
<el-table-column label="结束桩号" align="center" prop="stakeEnd" />
|
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">
|
<el-table-column label="病害图片" align="center" prop="media">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<img
|
<img
|
||||||
@ -233,12 +252,26 @@
|
|||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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">
|
<template slot-scope="scope">
|
||||||
{{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
|
{{ scope.row.targetLen * 1 <= 0 ? "" : `${scope.row.targetLen}米` }}
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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>
|
</el-table>
|
||||||
<!-- 分页组件 -->
|
<!-- 分页组件 -->
|
||||||
<div class="pagination-part">
|
<div class="pagination-part">
|
||||||
@ -255,69 +288,22 @@
|
|||||||
</el-pagination>
|
</el-pagination>
|
||||||
</div>
|
</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
|
<el-dialog
|
||||||
title="详情"
|
title="详情"
|
||||||
:visible.sync="showImageDialog"
|
:visible.sync="showImageDialog"
|
||||||
width="85rem"
|
width="73%"
|
||||||
append-to-body
|
append-to-body
|
||||||
:close-on-click-modal="false"
|
:close-on-click-modal="false"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
@close="imgCancel"
|
@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>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -352,6 +338,8 @@ export default {
|
|||||||
maxArea: undefined,
|
maxArea: undefined,
|
||||||
id: "",
|
id: "",
|
||||||
snapshotId: "",
|
snapshotId: "",
|
||||||
|
sortedFld: "",
|
||||||
|
sorted: "",
|
||||||
},
|
},
|
||||||
// 查询接收表单参数
|
// 查询接收表单参数
|
||||||
searchForm: {},
|
searchForm: {},
|
||||||
@ -384,8 +372,6 @@ export default {
|
|||||||
currentImageItem: "",
|
currentImageItem: "",
|
||||||
// 图片病害位置信息
|
// 图片病害位置信息
|
||||||
rects: [],
|
rects: [],
|
||||||
// 影像模式弹窗显影控制
|
|
||||||
showCheckImg: false,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
@ -395,7 +381,11 @@ export default {
|
|||||||
this.getTableDefect();
|
this.getTableDefect();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
/* 获取列表病害类型对应数据 */
|
/**
|
||||||
|
* @description: 获取列表病害类型对应数据
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
getTableDefect() {
|
getTableDefect() {
|
||||||
getDefectList().then(({ code, data }) => {
|
getDefectList().then(({ code, data }) => {
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
@ -404,7 +394,11 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 获取路段下拉数据 */
|
/**
|
||||||
|
* @description: 获取路段下拉数据
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
getSegmentList() {
|
getSegmentList() {
|
||||||
getSegment().then(({ code, data }) => {
|
getSegment().then(({ code, data }) => {
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
@ -413,8 +407,13 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 获取列表行数据 */
|
/**
|
||||||
|
* @description: 获取列表行数据
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
getTableList() {
|
getTableList() {
|
||||||
|
this.loading = true;
|
||||||
// 处理日期范围
|
// 处理日期范围
|
||||||
const params = {
|
const params = {
|
||||||
...this.searchForm,
|
...this.searchForm,
|
||||||
@ -435,7 +434,11 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 点击搜索事件 */
|
/**
|
||||||
|
* @description: 点击搜索事件
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
handleQuery() {
|
handleQuery() {
|
||||||
const phonereg = /^K\d{4}\+\d{3}$/;
|
const phonereg = /^K\d{4}\+\d{3}$/;
|
||||||
if (this.queryParams.stakeStart) {
|
if (this.queryParams.stakeStart) {
|
||||||
@ -485,7 +488,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 点击重置事件 */
|
/**
|
||||||
|
* @description: 点击重置事件
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
resetQuery() {
|
resetQuery() {
|
||||||
this.queryParams = {
|
this.queryParams = {
|
||||||
segmentName: "",
|
segmentName: "",
|
||||||
@ -501,26 +508,53 @@ export default {
|
|||||||
maxArea: undefined,
|
maxArea: undefined,
|
||||||
id: "",
|
id: "",
|
||||||
snapshotId: "",
|
snapshotId: "",
|
||||||
|
sortedFld: "",
|
||||||
|
sorted: "",
|
||||||
};
|
};
|
||||||
this.paramsDefectType = [];
|
this.paramsDefectType = [];
|
||||||
this.searchForm = {};
|
this.searchForm = {};
|
||||||
this.dateTime = [];
|
this.dateTime = [];
|
||||||
this.getTableList();
|
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) {
|
handleSelectionChange(selection) {
|
||||||
this.checkIds = selection.map((item) => item.id);
|
this.checkIds = selection.map((item) => item.id);
|
||||||
this.multiple = !selection.length;
|
this.multiple = !selection.length;
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 是病害/不是病害 */
|
/**
|
||||||
|
* @description: 是病害/不是病害
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
handleConfirm(value) {
|
handleConfirm(value) {
|
||||||
mergeDefect({ status: value, snapShotIds: this.checkIds })
|
mergeDefect({ status: value, snapShotIds: this.checkIds })
|
||||||
.then(({ code, msg }) => {
|
.then(({ code, msg }) => {
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
this.checkIds = [];
|
this.checkIds = [];
|
||||||
// this.$refs.defectTable.clearSelection()
|
|
||||||
this.$modal.msgSuccess("修改成功");
|
this.$modal.msgSuccess("修改成功");
|
||||||
} else {
|
} else {
|
||||||
this.$modal.msgWarning(msg);
|
this.$modal.msgWarning(msg);
|
||||||
@ -531,27 +565,32 @@ export default {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 影像模式 */
|
/**
|
||||||
handleBatch() {
|
* @description: 切换分页
|
||||||
this.showCheckImg = true;
|
* @param {*}
|
||||||
},
|
* @return {*}
|
||||||
|
*/
|
||||||
/* 切换分页 */
|
|
||||||
handleCurrentChange(arg) {
|
handleCurrentChange(arg) {
|
||||||
this.pagination.page = arg;
|
this.pagination.page = arg;
|
||||||
this.getTableList();
|
this.getTableList();
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 切换每条/页 */
|
/**
|
||||||
|
* @description: 切换每页条数
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
handleSizeChange(arg) {
|
handleSizeChange(arg) {
|
||||||
this.pagination.size = arg;
|
this.pagination.size = arg;
|
||||||
this.getTableList();
|
this.getTableList();
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 打开查看图片弹窗 */
|
/**
|
||||||
|
* @description: 打开查看图片弹窗
|
||||||
|
* @param {*}
|
||||||
|
* @return {*}
|
||||||
|
*/
|
||||||
showScreenImg(item, index) {
|
showScreenImg(item, index) {
|
||||||
// this.currentImageItem = item;
|
|
||||||
// this.showImageDialog = true;
|
|
||||||
this.imageItem = {
|
this.imageItem = {
|
||||||
...item,
|
...item,
|
||||||
index,
|
index,
|
||||||
@ -561,61 +600,16 @@ export default {
|
|||||||
this.showImageDialog = true;
|
this.showImageDialog = true;
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 图片位置信息获取 */
|
/**
|
||||||
updateRects() {
|
* @description: 关闭查看图片弹窗
|
||||||
this.rects = [];
|
* @param {*}
|
||||||
this.rectsItem = {};
|
* @return {*}
|
||||||
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",
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
/* 关闭查看图片弹窗 */
|
|
||||||
imgCancel() {
|
imgCancel() {
|
||||||
this.showImageDialog = false;
|
this.showImageDialog = false;
|
||||||
this.currentImageItem = {};
|
this.currentImageItem = {};
|
||||||
this.rects = [];
|
this.rects = [];
|
||||||
},
|
},
|
||||||
|
|
||||||
/* 关闭影像模式弹窗 */
|
|
||||||
checkCancel() {
|
|
||||||
this.showCheckImg = false;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
@ -674,6 +668,7 @@ export default {
|
|||||||
/* 修改弹窗样式 */
|
/* 修改弹窗样式 */
|
||||||
::v-deep .el-dialog {
|
::v-deep .el-dialog {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
margin-top: 1vh !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-dialog__header {
|
::v-deep .el-dialog__header {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user