fix:去除地图鼠标事件,增加节流库,修改消息中心,不同分辨率适配修改

This commit is contained in:
SunTao 2024-12-09 15:35:13 +08:00
parent a089404b02
commit 1f2662dc23
17 changed files with 357 additions and 437 deletions

View File

@ -54,6 +54,7 @@
"js-beautify": "1.13.0",
"js-cookie": "3.0.1",
"jsencrypt": "3.0.0-rc.1",
"lodash": "^4.17.21",
"nprogress": "0.2.0",
"ol": "^6.5.0",
"openlayers": "^4.6.5",

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-14 10:46:23
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-04 09:16:07
* @LastEditTime: 2024-12-09 15:13:56
* @FilePath: \znxjxt-ui\src\components\map\fssm-map.vue
* @Description: 公共地图
-->
@ -337,25 +337,25 @@ export default {
}
});
//
map.on("pointermove", (e) => {
const feature = map.forEachFeatureAtPixel(
map.getEventPixel(e.originalEvent),
(mapFeature) => {
return mapFeature;
}
);
// 线
if (feature) {
if (feature.getGeometry()?.getType() === "Point") {
map.getTargetElement().style.cursor = "pointer";
this.$emit("pointer-move", feature);
} else {
map.getTargetElement().style.cursor = "auto";
}
} else {
map.getTargetElement().style.cursor = "auto";
}
});
// map.on("pointermove", (e) => {
// const feature = map.forEachFeatureAtPixel(
// map.getEventPixel(e.originalEvent),
// (mapFeature) => {
// return mapFeature;
// }
// );
// // 线
// if (feature) {
// if (feature.getGeometry()?.getType() === "Point") {
// map.getTargetElement().style.cursor = "pointer";
// this.$emit("pointer-move", feature);
// } else {
// map.getTargetElement().style.cursor = "auto";
// }
// } else {
// map.getTargetElement().style.cursor = "auto";
// }
// });
//
map.on("moveend", (e) => {
const zoom = map.getView().getZoom().toFixed(); //

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-22 15:30:25
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-06 15:47:24
* @LastEditTime: 2024-12-09 10:29:47
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
* @Description: 大屏查看图片弹窗
-->
@ -192,6 +192,7 @@ import {
getItemTypes,
getMediaIndex,
} from "@/api/xj/screen/index";
import throttle from "lodash/throttle";
export default {
name: "ImgDialog",
props: {
@ -316,7 +317,7 @@ export default {
* @return {*}
*/
getSegmentList() {
getSegment().then(({ code, data }) => {
getSegment({ routeId: "" }).then(({ code, data }) => {
if (code === 200) {
this.roadTypeList = data;
}
@ -736,11 +737,11 @@ export default {
},
},
mounted() {
window.addEventListener("keydown", this.handleKeydown);
window.addEventListener("keydown", throttle(this.handleKeydown, 100));
window.addEventListener("resize", this.updateRects);
},
beforeDestroy() {
window.removeEventListener("keydown", this.handleKeydown);
window.removeEventListener("keydown",this.handleKeydown);
window.removeEventListener("resize", this.updateRects);
},
};

View File

@ -1,216 +0,0 @@
<!--
* @Author: SunTao 328867980@qq.com
* @Date: 2024-12-06 16:21:07
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-06 17:27:08
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-screen-dialog.vue
* @Description: 图片弹窗
-->
<template>
<div class="content">
<div class="left-list">
<div class="sidebar">
<infinite-loading
direction="top"
@infinite="infiniteHandlerTop"
></infinite-loading>
<img
v-for="(item, index) in defectData"
:key="`${item.id}-${index}`"
:src="item.url"
:alt="'Image ' + (index + 1)"
@click="showImage(index)"
:class="{ selected: currentIndex === index }"
/>
<infinite-loading
direction="bottom"
@infinite="infiniteHandler"
></infinite-loading>
</div>
</div>
</div>
</template>
<script>
import InfiniteLoading from "vue-infinite-loading";
import {
defeaseList,
getSegment,
getItemTypes,
getMediaIndex,
} from "@/api/xj/screen/index";
export default {
name: "ImgScreenDialog",
components: { InfiniteLoading },
props: {
bottomTipClick: {
type: String,
default: "",
},
imageItem: {
type: Object,
default: () => {},
},
},
data() {
return {
//
defectData: [],
// index
currentIndex: 0,
//
params: {
page: 1,
size: 10,
},
};
},
created() {
// this.getList();
// this.infiniteHandler();
},
methods: {
/**
* @description: 向上加载数据
* @param {*}
* @return {*}
*/
infiniteHandlerTop($state) {
if (this.params.page >= 2) {
const data = {
classType: this.bottomTipClick,
...this.imgForm,
...this.params,
};
defeaseList(data)
.then(({ code, data }) => {
if (code === 200) {
this.params.page -= 1;
this.defectData.unshift(...data.aim);
$state.loaded();
} else {
$state.complete();
}
})
.finally(() => {
this.showImage(this.currentIndex);
});
}
},
/**
* @description: 向下加载更多图片
* @param {*}
* @return {*}
*/
infiniteHandler($state) {
const data = {
classType: this.bottomTipClick,
...this.imgForm,
...this.params,
};
defeaseList(data)
.then(({ code, data }) => {
if (code === 200) {
this.params.page += 1;
this.defectData.push(...data.aim);
$state.loaded();
} else {
$state.complete();
}
})
.finally(() => {
this.showImage(this.currentIndex);
});
},
/**
* @description: 中间显示图片
* @param {*} index
* @return {*}
*/
showImage(index) {},
},
};
</script>
<style lang="scss" scoped>
.content {
width: 100%;
// height: 54rem;
height: calc(100vh - 3rem);
display: flex;
flex-direction: row;
background-color: #2e3a46;
}
.left-list {
width: 16rem;
height: 100%;
.img-top {
width: 100%;
height: 2.5rem;
display: flex;
justify-content: center;
.img-top-div {
cursor: pointer;
width: 30%;
height: 90%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #00aaff;
border-radius: 4px;
color: #ffffff;
}
.img-top-div-click {
background-color: rgb(69, 91, 140);
}
}
.sidebar {
width: 15.5rem;
height: calc(100% - 2.5rem);
// height: 815px;
background-color: #1f292e;
padding: 10px;
overflow-y: auto;
}
.sidebar::-webkit-scrollbar {
width: 8px;
}
.sidebar::-webkit-scrollbar-track {
background: #2e3a46;
border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb {
background: #444c51;
border-radius: 10px;
}
.sidebar::-webkit-scrollbar-thumb:hover {
background: #00aaff;
}
.sidebar img {
width: 100%;
margin-bottom: 5px;
cursor: pointer;
border-radius: 3px;
transition: transform 0.2s, border 0.2s;
box-sizing: border-box;
}
.sidebar img.selected {
border: 3px solid #00aaff;
transform: scale(1.05);
}
}
</style>

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 11:56:02
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-06 16:23:54
* @LastEditTime: 2024-12-09 09:25:57
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
* @Description: 病害巡检-病害日志
-->
@ -146,11 +146,7 @@
label="路段名称"
>
</el-table-column>
<el-table-column
show-overflow-tooltip
prop="companyName"
label="所属"
>
<el-table-column show-overflow-tooltip prop="companyName" label="所属">
</el-table-column>
<el-table-column prop="state" label="病害状态">
<template slot-scope="scope">
@ -256,6 +252,7 @@ export default {
this.getData();
this.getLineList();
this.getAllDefectType();
this.getSegmentList();
},
methods: {
/**
@ -277,12 +274,8 @@ export default {
* @return {*}
*/
chengeLine(val) {
if (val) {
this.getSegmentList(val);
} else {
this.trafficForm.segmentId = "";
this.segmentList = [];
}
this.trafficForm.segmentId = "";
this.getSegmentList(val);
},
/**

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 09:59:32
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 17:30:29
* @LastEditTime: 2024-12-09 11:39:11
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
* @Description: 病害巡检大屏-今日巡查
-->
@ -650,7 +650,7 @@ export default {
.right-sum {
cursor: pointer;
width: 100%;
height: 4rem;
height: 45%;
display: flex;
padding-left: 1rem;
justify-content: center;
@ -661,7 +661,6 @@ export default {
background-size: 100%;
background-position: 100% 50%;
color: #aac6c7;
font-size: 0.9rem;
span {
margin-right: 0.5rem;

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-17 11:34:00
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 14:22:25
* @LastEditTime: 2024-12-09 10:52:43
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@ -22,16 +22,36 @@
<div class="header-time">
<!-- 消息中心 -->
<div class="header-news">
<el-popover placement="bottom-end" width="400" popper-class="screen-message-popover" trigger="hover">
<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)">
<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.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">
@ -48,7 +68,12 @@
</fssm-scroll>
</div>
<div class="message-footer">
<el-button @click="handleMessageClick" icon="el-icon-d-arrow-right" type="text">查看更多</el-button>
<el-button
@click="handleMessageClick"
icon="el-icon-d-arrow-right"
type="text"
>查看更多</el-button
>
</div>
</div>
<i slot="reference" class="el-icon-message-solid">
@ -68,30 +93,58 @@
</div>
<div class="screen-middle">
<div class="screen-left">
<module-block v-for="(item, index) in leftModuleList" :key="`left-module-list-${index}`" :width="item.width"
:height="item.height" :title="item.title" :class="item.class">
<module-block
v-for="(item, index) in leftModuleList"
:key="`left-module-list-${index}`"
:width="item.width"
:height="item.height"
:title="item.title"
:class="item.class"
>
<template>
<component :select="item.select" :is="item.component" :bottomTipClick="bottomTipClick"></component>
<component
:select="item.select"
:is="item.component"
:bottomTipClick="bottomTipClick"
></component>
</template>
<template slot="operation" v-if="item.selectIsShow">
<el-radio-group class="screen-checkBox" v-model="item.select">
<el-radio-button v-for="(item, index) in selectTypeArr" :label="item.value"
:key="`left-screen-${index}`">{{ item.label }}</el-radio-button>
<el-radio-button
v-for="(item, index) in selectTypeArr"
:label="item.value"
:key="`left-screen-${index}`"
>{{ item.label }}</el-radio-button
>
</el-radio-group>
</template>
</module-block>
</div>
<div class="screen-right">
<module-block v-for="(item, index) in rightModuleList" :key="`right-module-list-${index}`" :width="item.width"
:height="item.height" :title="item.title" :class="item.class">
<module-block
v-for="(item, index) in rightModuleList"
:key="`right-module-list-${index}`"
:width="item.width"
:height="item.height"
:title="item.title"
:class="item.class"
>
<template>
<component :select="item.select" :is="item.component" :bottomTipClick="bottomTipClick"
@imagePoint="getimagePoint"></component>
<component
:select="item.select"
:is="item.component"
:bottomTipClick="bottomTipClick"
@imagePoint="getimagePoint"
></component>
</template>
<template slot="operation" v-if="item.selectIsShow">
<el-radio-group class="screen-checkBox" v-model="item.select">
<el-radio-button v-for="(item, index) in selectTypeArr" :label="item.value"
:key="`right-screen-${index}`">{{ item.label }}</el-radio-button>
<el-radio-button
v-for="(item, index) in selectTypeArr"
:label="item.value"
:key="`right-screen-${index}`"
>{{ item.label }}</el-radio-button
>
</el-radio-group>
</template>
</module-block>
@ -101,9 +154,12 @@
<div class="road-checkBox" v-if="showIconList">
<fssm-scroll class="road-scroll">
<el-checkbox-group v-model="iconType" @change="handleChecked">
<el-checkbox v-for="(item, index) in iconTypeList" :label="item.value" :key="`check-${index}`">{{
item.label
}}</el-checkbox>
<el-checkbox
v-for="(item, index) in iconTypeList"
:label="item.value"
:key="`check-${index}`"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</fssm-scroll>
</div>
@ -115,22 +171,40 @@
<!-- 图背景下选择框 -->
<div class="map-image-select">
病害类型筛选
<el-cascader v-model="mapCareSelect" popper-class="screen-index-cascader" :options="dieaseOptions" :props="{
checkStrictly: true,
emitPath: true,
children: 'subTypes',
}" @change="getMapCare" clearable></el-cascader>
<el-cascader
v-model="mapCareSelect"
popper-class="screen-index-cascader"
:options="dieaseOptions"
:props="{
checkStrictly: true,
emitPath: true,
children: 'subTypes',
}"
@change="getMapCare"
clearable
></el-cascader>
</div>
<div class="map-care">
<div class="map-care-div" :class="`map-care-div-${item.status}`" v-for="(item, index) in mapCareList"
:key="`map-care-${index}`" :style="{ left: item.left, top: item.top }">
<div
class="map-care-div"
:class="`map-care-div-${item.status}`"
v-for="(item, index) in mapCareList"
:key="`map-care-${index}`"
:style="{ left: item.left, top: item.top }"
>
<span>{{ item.name }}</span>
</div>
</div>
</div>
<!-- 地图 -->
<fssm-map v-if="elementDiv !== 'OverviewScreen'" ref="roadMap" :showChange="true"
:controlStyle="{ top: '10%', left: '26%' }" @feature-select="featureSelect" @map-zoom="getZoom"></fssm-map>
<fssm-map
v-if="elementDiv !== 'OverviewScreen'"
ref="roadMap"
:showChange="true"
:controlStyle="{ top: '10%', left: '26%' }"
@feature-select="featureSelect"
@map-zoom="getZoom"
></fssm-map>
<!-- @map-moveend="mapMoveend" -->
</div>
</div>
@ -138,33 +212,72 @@
<!-- 病害巡检4种类型按钮 -->
<div class="footer-change-map">
<template v-if="elementDiv === 'DiseaseScreen'">
<div class="change-map-div" :class="bottomTipClick === item.click ? 'change-map-click' : ''"
v-for="(item, index) in changeMapBtn" :key="`btn-${index}`" @click="changeIconType(item.click)">
<div
class="change-map-div"
:class="bottomTipClick === item.click ? 'change-map-click' : ''"
v-for="(item, index) in changeMapBtn"
:key="`btn-${index}`"
@click="changeIconType(item.click)"
>
{{ item.name }}
</div>
</template>
</div>
<!-- 切换3种导航栏按钮 -->
<div class="footer-change-vue">
<div :class="elementDiv === item.component
? `change-vue-click-${item.component}`
: `change-vue-${item.component}`
" v-for="(item, index) in elementList" :key="`footer-${index}`" @click="changeElement(item)"></div>
<div
:class="
elementDiv === item.component
? `change-vue-click-${item.component}`
: `change-vue-${item.component}`
"
v-for="(item, index) in elementList"
:key="`footer-${index}`"
@click="changeElement(item)"
></div>
</div>
</div>
<!-- 详情图片弹窗 -->
<el-dialog :title="imgTitle" :visible.sync="imgVisible" width="95rem" append-to-body fullscreen
:close-on-click-modal="false" destroy-on-close @close="imgCancel">
<img-dialog v-if="imgTitle === '查看'" :imageItem="imageItem" :bottomTipClick="bottomTipClick"></img-dialog>
<el-dialog
:title="imgTitle"
:visible.sync="imgVisible"
width="95rem"
append-to-body
fullscreen
:close-on-click-modal="false"
destroy-on-close
@close="imgCancel"
>
<img-dialog
v-if="imgTitle === '查看'"
:imageItem="imageItem"
:bottomTipClick="bottomTipClick"
></img-dialog>
</el-dialog>
<!-- 查看点位图片弹窗 -->
<el-dialog title="查看点位" :visible.sync="showImageDialog" width="90rem" append-to-body :close-on-click-modal="false"
destroy-on-close @close="screenImgCancel">
<el-dialog
title="查看点位"
:visible.sync="showImageDialog"
width="90rem"
append-to-body
:close-on-click-modal="false"
destroy-on-close
@close="screenImgCancel"
>
<div class="view-image-container" ref="imageContainer">
<img :src="screenImage.imageUrl" alt="Main Image" ref="mainImage" @load="updateScreenRects" />
<div v-for="(rect, index) in screenRects" :key="index" class="rect-overlay" :style="getScreenRectStyle(rect)">
</div>
<img
:src="screenImage.imageUrl"
alt="Main Image"
ref="mainImage"
@load="updateScreenRects"
/>
<div
v-for="(rect, index) in screenRects"
:key="index"
class="rect-overlay"
:style="getScreenRectStyle(rect)"
></div>
<div class="rect-image">
采集时间:
{{ screenImage.createTime }} 起始桩号
@ -174,7 +287,11 @@
{{ screenImage.iconTypeName || "暂无数据" }}
<span v-if="this.elementDiv === 'DiseaseScreen'">
病害面积{{ screenImage.targetArea }}平方米 病害长度{{
screenImage.targetLen * 1 <= 0 ? "暂无数据" : `${screenImage.targetLen}` }} </span>
screenImage.targetLen * 1 <= 0
? "暂无数据"
: `${screenImage.targetLen}`
}}
</span>
</div>
</div>
</el-dialog>
@ -392,7 +509,7 @@ export default {
this.getMessageList();
this.handleMessage();
},
mounted() { },
mounted() {},
methods: {
/**
* @description: 获取当前时间
@ -439,14 +556,14 @@ export default {
getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
if (code === 200) {
this.messageList = rows;
this.noticeNum = total
this.noticeNum = total;
}
});
}, 5000);
getNoticeList({ read: 1 }).then(({ code, rows, total }) => {
if (code === 200) {
this.messageList = rows;
this.noticeNum = total
this.noticeNum = total;
}
});
// this.messageList = [
@ -704,10 +821,11 @@ export default {
return new Style({
image: new Icon({
crossOrigin: "anonymous",
src: require(`@/assets/screen/index/${this.mapLogeList[
feature.getProperties().features[0].get("data").iconType
]
}.png`),
src: require(`@/assets/screen/index/${
this.mapLogeList[
feature.getProperties().features[0].get("data").iconType
]
}.png`),
//
scale: 0.6,
displacement: [0, 30],
@ -1304,7 +1422,7 @@ export default {
border: none;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #1cb6ff;
}
}
@ -1329,7 +1447,7 @@ export default {
border: none;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
color: #1cb6ff;
}
}
@ -1458,7 +1576,8 @@ export default {
}
::v-deep .baseLayerClass {
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg) brightness(80%) saturate(550%);
filter: grayscale(200%) invert(200%) sepia(50%) hue-rotate(175deg)
brightness(80%) saturate(550%);
}
}
}
@ -1489,7 +1608,7 @@ export default {
display: flex;
color: #89c5e8;
>div {
> div {
margin: 0 0.5rem;
display: flex;
align-items: flex-end;
@ -1578,12 +1697,12 @@ export default {
justify-content: center;
align-items: center;
>div {
> div {
height: 100%;
width: 37.5%;
}
>div:nth-child(2) {
> div:nth-child(2) {
height: 100%;
width: 25%;
}
@ -1660,7 +1779,7 @@ export default {
.view-image-container {
position: relative;
width: 100%;
height: 80%;
height: 50rem;
display: flex;
flex-direction: column;
align-items: center;

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 09:42:49
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 17:13:16
* @LastEditTime: 2024-12-09 11:42:55
* @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
* @Description: 总览大屏-今日巡查
-->
@ -658,41 +658,12 @@ export default {
}
}
// .right-rate {
// width: 100%;
// height: 45%;
// padding-left: 1rem;
// display: flex;
// justify-content: center;
// line-height: 3rem;
// background-image: url("~@/assets/screen/disease/right-rate.png");
// background-repeat: no-repeat;
// background-size: 100%;
// background-position: 100% 50%;
// color: #aac6c7;
// span {
// font-size: 1.2rem;
// font-weight: 800;
// font-family: "DouYu";
// margin-right: 0.5rem;
// background: linear-gradient(
// to bottom,
// #ffffff,
// #e9bc5c
// ); /* ff0000ffff00*/
// background-clip: text; /**/
// -webkit-text-fill-color: transparent; /**/
// }
// }
.right-rate {
width: 100%;
height: 45%;
display: flex;
align-items: center;
font-family: "DouYu";
font-size: 0.9rem;
.up {
color: #ff2e2e;

View File

@ -109,7 +109,7 @@ export default {
display: flex;
justify-content: center;
flex-direction: column;
padding-left: 3.5rem;
padding-left: 13%;
font-size: 0.8rem;
span {
@ -216,4 +216,3 @@ export default {
}
}
</style>

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 15:15:04
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-19 09:54:43
* @LastEditTime: 2024-12-09 11:47:49
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue
* @Description: 道路资产大屏-管养道路统计
-->

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:23:44
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-18 17:45:39
* @LastEditTime: 2024-12-09 11:53:20
* @FilePath: \znxjxt-ui\src\views\index-components\road-index.vue
* @Description: 首页-公路资产
-->
@ -329,7 +329,7 @@ export default {
// width: 24%;
width: 28%;
height: 40%;
padding: 0 0.5rem 0 3.5rem;
padding: 0 0.5rem 0 7%;
margin: 0.4rem 0;
display: flex;
align-items: center;

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-29 15:30:35
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-04 09:56:31
* @LastEditTime: 2024-12-09 11:54:48
* @FilePath: \znxjxt-ui\src\views\index-components\traffic-index.vue
* @Description: 首页-路况评定
-->
@ -19,7 +19,7 @@
</div>
</div>
<div class="traffic-table">
<el-table :data="trafficTableData" style="width: 100%" height="180">
<el-table :data="trafficTableData" style="width: 100%" height="95%">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="name" show-overflow-tooltip label="名称">
</el-table-column>

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-20 11:58:33
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 15:03:52
* @LastEditTime: 2024-12-09 09:34:17
* @FilePath: \znxjxt-ui\src\views\xj\inspection-warn\warning-center\index.vue
* @Description: 预警中心-信息中心
-->
@ -10,41 +10,89 @@
<template>
<div class="content">
<!-- 搜索表单 -->
<el-form :model="warnForm" ref="queryForm" size="small" :inline="true" label-width="5rem">
<el-form
:model="warnForm"
ref="queryForm"
size="small"
:inline="true"
label-width="5rem"
>
<!-- <el-form-item label="消息类型" prop="type">
<el-select v-model="warnForm.type" placeholder="请选择消息类型" filterable clearable>
<el-option v-for="item in deviceList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item> -->
<el-form-item label="时间" prop="dateTime">
<el-date-picker v-model="dateTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable />
<el-date-picker
v-model="dateTime"
type="datetimerange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
clearable
/>
</el-form-item>
<el-form-item label="阅读状态" prop="read">
<el-select v-model="warnForm.read" placeholder="请选择阅读状态" clearable>
<el-option v-for="item in readStatusList" :key="item.value" :label="item.label" :value="item.value" />
<el-select
v-model="warnForm.read"
placeholder="请选择阅读状态"
clearable
>
<el-option
v-for="item in readStatusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
<el-button
type="primary"
icon="el-icon-search"
size="mini"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-check" size="mini" @click="handleRead"
v-hasPermi="['system:defect:add']">全部已读
<el-button
type="primary"
plain
icon="el-icon-check"
size="mini"
@click="handleRead"
v-hasPermi="['system:defect:add']"
>全部已读
</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
@click="handleDelete(null)" v-hasPermi="['system:defect:remove']">批量删除
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete(null)"
v-hasPermi="['system:defect:remove']"
>批量删除
</el-button>
</el-col>
</el-row>
<!-- 导航栏 -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane v-for="(item, index) in editableTabs" :key="`tabs-${index}`" :label="item.title" :name="item.code">
<el-tab-pane
v-for="(item, index) in editableTabs"
:key="`tabs-${index}`"
:label="item.title"
:name="item.code"
>
<!-- 标签页头 -->
<span slot="label">
<!-- <i
@ -52,35 +100,81 @@
style="color: #67c23a"
class="el-icon-success"
></i> -->
<i v-if="item.code === 'REMIND'" style="color: #e6a23c" class="el-icon-info"></i>
<i v-if="item.code === 'WARNING'" style="color: #909399" class="el-icon-warning"></i>
<i
v-if="item.code === 'REMIND'"
style="color: #e6a23c"
class="el-icon-info"
></i>
<i
v-if="item.code === 'WARNING'"
style="color: #909399"
class="el-icon-warning"
></i>
<!-- <i
v-if="item.title === '错误'"
style="color: #f56c6c"
class="el-icon-error"
></i
> -->
{{ item.title }}({{ item.count }})</span>
{{ item.title }}({{ item.count }})</span
>
<!-- 表格 -->
<el-table ref="warningTable" :data="warningList" v-loading="loading" style="width: 100%"
@current-change="handleTableChange" @selection-change="handleSelectionChange">
<el-table
ref="warningTable"
:data="warningList"
v-loading="loading"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
<el-table-column width="180" label="时间" align="center" prop="createdTime">
<el-table-column
width="180"
label="时间"
align="center"
prop="createdTime"
>
<template slot-scope="scope">
<span :class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`">{{ scope.row.createdTime }}</span>
<span
@click="handleTableChange(scope.row)"
:class="`${scope.row.readStatus === 1 ? 'table-index' : ''}`"
>{{ scope.row.createdTime }}</span
>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="消息标题" width="150" align="center" prop="title">
<el-table-column
show-overflow-tooltip
label="消息标题"
width="150"
align="center"
prop="title"
>
<template slot-scope="scope">
<span @click="handleTableChange(scope.row)">{{
scope.row.title
}}</span>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip label="消息内容" align="left" prop="content">
<el-table-column
show-overflow-tooltip
label="消息内容"
align="left"
prop="content"
>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<div class="pagination-part">
<el-pagination background :current-page.sync="pagination.page" @current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]" :page-size.sync="pagination.size" @size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper" :total="tableTotal">
<el-pagination
background
:current-page.sync="pagination.page"
@current-change="handleCurrentChange"
:page-sizes="[10, 20, 30, 40]"
:page-size.sync="pagination.size"
@size-change="handleSizeChange"
layout="total, sizes, prev, pager, next, jumper"
:total="tableTotal"
>
</el-pagination>
</div>
</el-tab-pane>
@ -94,7 +188,7 @@ import {
getWarningNav,
markNoticeRead,
noticeReadAll,
deleteNotice
deleteNotice,
} from "@/api/xj/inspection/center";
export default {
name: "WarningCenter",
@ -269,7 +363,7 @@ export default {
this.getList();
this.$refs.warningTable.clearSelection();
})
.catch(() => { });
.catch(() => {});
},
/**

View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-01 13:17:41
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-12-05 09:24:59
* @LastEditTime: 2024-12-09 10:33:28
* @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\index.vue
* @Description: 巡检信息-病害确认
-->
@ -54,20 +54,6 @@
clearable
></el-cascader>
</el-form-item>
<el-form-item label="病害状态" prop="state">
<el-select
v-model="queryParams.state"
placeholder="请选择病害状态"
clearable
>
<el-option
v-for="item in defectStatus"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="上下行" prop="inspectDirection">
<el-select
v-model="queryParams.inspectDirection"
@ -224,11 +210,6 @@
</el-table-column>
<el-table-column label="病害类型" align="center" prop="defectTypeName">
</el-table-column>
<el-table-column label="病害状态" align="center" prop="state">
<template slot-scope="scope">
<span>{{ filterState(scope.row.state) }}</span>
</template>
</el-table-column>
<el-table-column label="校验状态" align="center" prop="dataStatus">
<template slot-scope="scope">
<span>{{
@ -319,7 +300,6 @@
import {
getDefectList,
getSegment,
getDefectStatus,
listDefect,
mergeDefect,
} from "@/api/xj/confirmation";
@ -356,8 +336,6 @@ export default {
tableDefect: [],
//
segmentList: [],
//
defectStatus: [],
//
confirmationtList: [],
//
@ -386,7 +364,6 @@ export default {
created() {
this.getTableDefect();
this.getSegmentList();
this.getDefectStatusList();
this.getTableList();
this.getTableDefect();
},
@ -409,26 +386,6 @@ export default {
});
},
/* 查询病害状态下拉数据 */
getDefectStatusList() {
getDefectStatus().then(({ data, code }) => {
if (code === 200) {
this.defectStatus = data;
}
});
},
/* 过滤列表病害状态 */
filterState(value) {
let a = null;
[a] = this.defectStatus.filter((item) => {
return item.value === value;
});
if (a) {
return a.label;
}
},
/* 获取列表行数据 */
getTableList() {
//

View File

@ -21,6 +21,7 @@
<el-select
v-model="queryParams.segmentName"
placeholder="请选择路段"
filterable
clearable
>
<el-option

View File

@ -21,6 +21,7 @@
<el-select
v-model="queryParams.segmentName"
placeholder="请选择道路名称"
filterable
clearable
>
<el-option

View File

@ -94,9 +94,9 @@
<el-table-column label="巡检终点" align="center" prop="stakeEnd" />
<el-table-column label="车牌号码" align="center" prop="plateNo">
</el-table-column>
<el-table-column label="病害数" align="defectCount" prop="plateNo">
<el-table-column label="病害数" align="center" prop="defectCount">
</el-table-column>
<el-table-column label="新增病害数" align="newDefectCount" prop="plateNo">
<el-table-column label="新增病害数" align="center" prop="newDefectCount">
</el-table-column>
<el-table-column label="任务id" align="center" prop="extId" />
<el-table-column