SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：大屏打点逻辑修改，病害日志新增时间选择，新增预警按钮

Browse Source
This commit is contained in:
SunTao 2024-11-19 14:18:57 +08:00
parent 52ffc09a42
commit d4d3662a44
10 changed files with 166 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/xj/screen/road-screen.js
View File

@ -11,7 +11,7 @@ import request from "@/utils/request";
// 路面状况排名接口
export function roadRankStatistics(query) {
return request({
url: "/bigscreen/getRoadStatistics",
url: "/bigscreen/v2/getRoadStatistics",
method: "get",
params: query,
});
@ -21,7 +21,7 @@ export function roadRankStatistics(query) {
// 附属设施分布接口
export function ancillaryList(query) {
return request({
url: "/bigscreen/getEquipmentScale",
url: "/bigscreen/v2/getEquipmentScale",
method: "get",
params: query,
});
@ -30,7 +30,7 @@ export function ancillaryList(query) {
// 附属设施分布累计路产数
export function ancillaryCount(query) {
return request({
url: "/bigscreen/getEquipmentCount",
url: "/bigscreen/v2/getEquipmentCount",
method: "get",
params: query,
});
@ -40,7 +40,7 @@ export function ancillaryCount(query) {
// 附属设施异常统计接口
export function anomalyList(query) {
return request({
url: "/bigscreen/getEquipmentAnomalyLog",
url: "/bigscreen/v2/getEquipmentAnomalyLog",
method: "get",
params: query,
});
@ -49,7 +49,7 @@ export function anomalyList(query) {
// 路产统计信息接口
export function roadStatisticList(query) {
return request({
url: "/bigscreen/getEquipmentStatistics",
url: "/bigscreen/v2/getEquipmentStatistics",
method: "get",
params: query,
});

BIN
src/assets/screen/road/ancillary-bottom-8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

21
src/layout/components/Navbar.vue
View File

@ -19,6 +19,7 @@
<div class="menu-return">
<i class="el-icon-data-analysis" @click="goBigScreen"></i>
</div>
<div class="header-news"><i class="el-icon-bell"></i></div>
<search id="header-search" class="right-menu-item" />
<screenfull id="screenfull" class="right-menu-item hover-effect" />
@ -95,8 +96,8 @@ export default {
},
methods: {
/* 点击跳转大屏页面 */
goBigScreen(){
this.$router.push("/screen")
goBigScreen() {
this.$router.push("/screen");
},
toggleSideBar() {
this.$store.dispatch("app/toggleSideBar");
@ -163,7 +164,7 @@ export default {
outline: none;
}
.menu-return {
.header-news {
height: 100%;
margin-right: 0.5rem;
@ -171,7 +172,19 @@ export default {
cursor: pointer;
font-size: 1.4rem;
line-height: 3.1rem;
font-weight: bold;
font-weight: 400;
}
}
.menu-return {
height: 100%;
margin-right: 1rem;
i {
cursor: pointer;
font-size: 1.4rem;
line-height: 3.1rem;
font-weight: 400;
}
}

4
src/views/big-screen/components/img-dialog.vue
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-11-14 16:44:42
* @LastEditTime: 2024-11-19 13:56:22
* @FilePath: \znxjxt-ui\src\views\big-screen\components\img-dialog.vue
* @Description: 大屏查看图片弹窗
-->
@ -68,7 +68,7 @@
<el-form-item label="病害类型">
<el-select
v-model="imgForm.defectType"
placeholder="请选择路段名称"
placeholder="请选择病害类型"
:popper-append-to-body="false"
clearable
>

68
src/views/big-screen/disease-components/traffic-log.vue
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-11-14 13:12:32
* @LastEditTime: 2024-11-19 13:52:47
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-log.vue
* @Description: 病害巡检-病害日志
-->
@ -37,25 +37,38 @@
<el-form-item class="form-item" label="公里桩" prop="stakeRange">
<el-input
v-model="trafficForm.stakeStart"
placeholder="起始公里桩"
style="width: 9rem"
placeholder="格式K0000+000"
style="width: 10rem"
clearable
/>
<span style="margin: 0 5px; color: #ffffff">-</span>
<el-input
v-model="trafficForm.stakeEnd"
placeholder="终止公里桩"
style="width: 9rem"
placeholder="格式K0000+000"
style="width: 9.5rem"
clearable
/>
<el-tooltip
<!-- <el-tooltip
class="item"
effect="dark"
content="格式为K0000+000"
placement="top"
>
<i :style="{ color: '#ffffff' }" class="el-icon-info"></i>
</el-tooltip>
</el-tooltip> -->
</el-form-item>
<el-form-item class="form-item" label="时间筛选" prop="dataTime">
<el-date-picker
v-model="dataTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
clearable
>
</el-date-picker>
</el-form-item>
<el-form-item class="form-item" label="病害类型" prop="defectType">
<el-select
@ -103,7 +116,7 @@
header-row-class-name="headerRow"
row-class-name="bodayRow"
style="width: 100%; background: none"
height="375"
height="85%"
>
<el-table-column prop="defectType" label="病害类型"> </el-table-column>
<el-table-column
@ -174,6 +187,8 @@ export default {
// 病害状态
state: "",
},
// 时间选择筛选
dataTime: [],
// 传接口的查询条件
searchForm: {},
// 道路名称下拉数据
@ -231,8 +246,28 @@ export default {
/* 点击搜索事件 */
handleQuery() {
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
this.getData();
const phonereg = /^K\d{4}\+\d{3}$/;
if (this.trafficForm.stakeStart) {
if (phonereg.test(this.trafficForm.stakeStart)) {
this.pagination.page = 1;
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
this.getData();
} else {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else if (this.trafficForm.stakeEnd) {
if (phonereg.test(this.trafficForm.stakeEnd)) {
this.pagination.page = 1;
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
this.getData();
} else {
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
}
} else {
this.pagination.page = 1;
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
this.getData();
}
},
/* 点击重置事件 */
@ -292,7 +327,7 @@ export default {
.traffic-form {
width: calc(100% - 0.5rem);
height: 30%;
height: 16rem;
padding: 0.5rem;
.form-item {
@ -301,7 +336,8 @@ export default {
::v-deep .el-form-item__content {
width: calc(100% - 5rem);
.el-select {
.el-select,
.el-date-editor {
width: 100%;
}
}
@ -315,6 +351,12 @@ export default {
color: #ffffff;
border-color: #47536f;
background-color: transparent;
// 修改时间选择器样式
.el-range-input {
color: #ffffff;
background-color: transparent;
}
}
::v-deep .el-select {
@ -403,7 +445,7 @@ export default {
::v-deep .traffic-table {
width: 100%;
height: 66%;
height: 57%;
padding: 0.5rem 0;
overflow: hidden;

17
src/views/big-screen/disease-components/traffic-statistic.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-21 10:06:24
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-18 13:47:54
* @LastEditTime: 2024-11-19 09:35:47
* @FilePath: \znxjxt-ui\src\views\big-screen\traffic-components\traffic-statistic.vue
* @Description: 病害巡检大屏-病害统计
-->
@ -232,21 +232,6 @@ export default {
// 鼠标悬浮具体数据显示
show: false,
position: "center",
formatter: (params) => {
return `{a|${params.percent.toFixed()}%}\n{b|${params.name}}`;
},
rich: {
a: {
fontFamily: "DouYu",
fontSize: 28,
color: "rgba(255, 183, 89, 0.8)",
},
b: {
fontFamily: "DinBm",
fontSize: 12,
color: "#ffffff",
},
},
},
emphasis: {
label: {

82
src/views/big-screen/index.vue
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-11-18 11:18:49
* @LastEditTime: 2024-11-19 14:16:56
* @FilePath: \znxjxt-ui\src\views\big-screen\index.vue
* @Description: 大屏首页
-->
@ -20,6 +20,7 @@
></iframe>
</div>
<div class="header-time">
<div class="header-news"><i class="el-icon-message-solid"></i></div>
<div class="header-data">{{ dataTime }}</div>
<div class="header-week">
<span>{{ weekTime }}</span>
@ -114,7 +115,11 @@
v-model="mapCareSelect"
popper-class="screen-index-cascader"
:options="dieaseOptions"
:props="{checkStrictly:true, emitPath: true, children: 'subTypes' }"
:props="{
checkStrictly: true,
emitPath: true,
children: 'subTypes',
}"
@change="getMapCare"
clearable
></el-cascader>
@ -212,6 +217,19 @@
class="rect-overlay"
:style="getScreenRectStyle(rect)"
></div>
<div class="rect-image">
采集时间:
{{ screenImage.createTime }} 起始桩号：
{{ screenImage.stakeStart || "暂无数据" }} 终止桩号：
{{ screenImage.stakeEnd || "暂无数据" }}
{{ `${this.elementDiv === "RoadScreen" ? "路产" : "病害"}类型：` }}
{{ screenImage.iconTypeName || "暂无数据" }}
<span v-if="this.elementDiv === 'DiseaseScreen'">
病害面积：{{ screenImage.targetArea }}平方米 病害长度：{{
screenImage.targetLen
}}米
</span>
</div>
</div>
</el-dialog>
</div>
@ -702,13 +720,11 @@ export default {
classType: value ? value[0] : "",
type: value ? (value.length > 1 ? value[1] : "") : "",
};
comppanyImg(data).then(
({ code, data }) => {
if (code === 200) {
this.mapCareList = data;
}
comppanyImg(data).then(({ code, data }) => {
if (code === 200) {
this.mapCareList = data;
}
);
});
},
/* 点击病害日志详情打开弹窗进行地图打点 */
@ -716,6 +732,9 @@ export default {
this.imgTitle = "查看";
this.imageItem = item;
this.imgVisible = true;
// 地图右上角多选按钮显示
this.getIconType();
this.showIconList = true;
// 地图打点\改变地图层级
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
@ -798,11 +817,7 @@ export default {
const point = new Point(element.geometry);
const feature = new Feature({
geometry: point,
data: {
iconType: element.iconType,
imageUrl: element.imageUrl,
rect: element.rect,
},
data: element,
// 自己设置一个标识
type: "icon",
});
@ -969,8 +984,17 @@ export default {
changeIconType(value) {
if (this.bottomTipClick !== value) {
this.bottomTipClick = value;
this.getIconType();
this.getCenterPiont();
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.clusters);
this.clusters = null;
// map.getView().setZoom(10);
// map.getView().setCenter([123.30297096718999, 41.87942945541742]);
});
// 地图右上角多选按钮隐藏
this.showIconList = false;
// this.getIconType();
// this.getCenterPiont();
}
},
@ -1182,16 +1206,22 @@ export default {
class: "one",
},
];
// 地图右上角多选按钮隐藏
this.showIconList = false;
// 图层恢复
this.mapZoom = "";
this.$nextTick(() => {
const map = this.$refs.roadMap.instance.get("map");
map.removeLayer(this.clusters);
this.clusters = null;
map.getView().setZoom(10);
map.getView().setCenter([123.30297096718999, 41.87942945541742]);
});
// 地图右上角多选按钮显示
this.getIconType();
this.showIconList = true;
// this.getIconType();
// this.showIconList = true;
// 进行地图打点
this.getCenterPiont();
// this.getCenterPiont();
this.getLinePoint();
}
}
@ -1496,6 +1526,12 @@ export default {
align-items: flex-end;
}
.header-news {
cursor: pointer;
font-size: 1.5rem;
color:red;
}
.header-data {
font-size: 1.8rem;
}
@ -1637,6 +1673,7 @@ export default {
width: 100%;
height: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
@ -1655,6 +1692,15 @@ export default {
}
}
// 图片信息
.rect-image {
width: 80%;
position: absolute;
top: 0;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
}
// 大屏下拉框样式
::v-deep .el-select {
width: 6.5rem;

12
src/views/big-screen/overview-components/inspection-vehicles.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-11-08 09:40:18
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-11-15 15:29:10
* @LastEditTime: 2024-11-19 13:32:51
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\inspection-vehicles.vue
* @Description: 总览大屏-巡检车辆
-->
@ -40,7 +40,7 @@
header-row-class-name="headerRow"
row-class-name="bodayRow"
style="width: 100%; background: none"
height="285"
height="85%"
>
<el-table-column prop="plateNo" label="车牌号码"> </el-table-column>
<el-table-column prop="status" label="状态"> </el-table-column>
@ -65,13 +65,9 @@
<span class="name">车辆状态:</span>
<span class="value">{{ scope.row.status }}</span>
</div>
<div>
<span class="name">网络连接:</span>
<span class="value"></span>
</div>
<div>
<span class="name">设备状态:</span>
<span class="value"></span>
<span class="value">{{ scope.row.status }}</span>
</div>
</div>
<el-button
@ -257,7 +253,7 @@ export default {
.inspection-top {
width: 100%;
height: 20%;
height: 6rem;
padding: 0.5rem;
display: flex;
justify-content: space-around;

23
src/views/big-screen/road-components/ancillary-facilities.vue
View File

@ -2,7 +2,7 @@
* @Author: SunTao 328867980@qq.com
* @Date: 2024-10-18 15:18:03
* @LastEditors: SunTao 328867980@qq.com
* @LastEditTime: 2024-10-25 16:27:10
* @LastEditTime: 2024-11-19 10:41:33
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\ancillary-facilities.vue
* @Description: 道路资产大屏-附属设施分布
-->
@ -128,7 +128,7 @@ export default {
.ancillary-bottom-0 {
background-image: url("../../../assets/screen/road/ancillary-bottom-0.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
@ -139,7 +139,7 @@ export default {
.ancillary-bottom-1 {
background-image: url("../../../assets/screen/road/ancillary-bottom-1.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
@ -150,7 +150,7 @@ export default {
.ancillary-bottom-2 {
background-image: url("../../../assets/screen/road/ancillary-bottom-2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
@ -161,7 +161,7 @@ export default {
.ancillary-bottom-3 {
background-image: url("../../../assets/screen/road/ancillary-bottom-3.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
@ -172,7 +172,7 @@ export default {
.ancillary-bottom-4 {
background-image: url("../../../assets/screen/road/ancillary-bottom-4.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
@ -181,20 +181,21 @@ export default {
}
.ancillary-bottom-5 {
background-image: url("../../../assets/screen/road/ancillary-bottom-5.png");
background-image: url("../../../assets/screen/road/ancillary-bottom-8.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
color: #3f84e3;
// color: #3f84e3;
color: #08afa3;
}
}
.ancillary-bottom-6 {
background-image: url("../../../assets/screen/road/ancillary-bottom-6.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {
@ -205,7 +206,7 @@ export default {
.ancillary-bottom-7 {
background-image: url("../../../assets/screen/road/ancillary-bottom-7.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-size: 100%;
background-position: 50%;
span {

10
src/views/big-screen/road-components/manage-maintain.vue
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-10-18 15:47:15
* @LastEditTime: 2024-11-19 09:54:43
* @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue
* @Description: 道路资产大屏-管养道路统计
-->
@ -60,9 +60,11 @@ export default {
width: 47%;
height: 100%;
padding-left: 3rem;
line-height: 5rem;
// line-height: 5rem;
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 1.5rem;
font-size: 1rem;
color: #aac6c7;
@ -78,7 +80,7 @@ export default {
background-image: url("../../../assets/screen/road/maintain-left.png");
background-repeat: no-repeat;
background-position: 100%;
background-size: 100% 65%;
background-size: 100%;
span {
background: linear-gradient(
@ -95,7 +97,7 @@ export default {
background-image: url("../../../assets/screen/road/maintain-right.png");
background-repeat: no-repeat;
background-position: 100%;
background-size: 100% 65%;
background-size: 100%;
span {
background: linear-gradient(