700 lines
17 KiB
Vue
700 lines
17 KiB
Vue
<!--
|
|
* @Author: SunTao 328867980@qq.com
|
|
* @Date: 2024-11-08 11:56:02
|
|
* @LastEditors: SunTao 328867980@qq.com
|
|
* @LastEditTime: 2024-12-06 15:57:02
|
|
* @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-log.vue
|
|
* @Description: 病害巡检-病害日志
|
|
-->
|
|
<template>
|
|
<div class="content">
|
|
<!-- 搜索表单 -->
|
|
<div class="traffic-form">
|
|
<el-form
|
|
:model="trafficForm"
|
|
ref="trafficForm"
|
|
size="small"
|
|
:inline="true"
|
|
label-position="left"
|
|
label-width="5rem"
|
|
>
|
|
<el-form-item class="form-item" label="路线名称" prop="routeId">
|
|
<el-select
|
|
v-model="trafficForm.routeId"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择路线"
|
|
filterable
|
|
clearable
|
|
@change="chengeLine"
|
|
>
|
|
<el-option
|
|
v-for="item in lineList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="form-item" label="路段名称" prop="segmentId">
|
|
<el-select
|
|
v-model="trafficForm.segmentId"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择路段"
|
|
filterable
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in segmentList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="form-item" label="上下行" prop="inspectDirection">
|
|
<el-select
|
|
v-model="trafficForm.inspectDirection"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择上下行"
|
|
clearable
|
|
>
|
|
<el-option label="上行" value="0" />
|
|
<el-option label="下行" value="1" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="form-item" label="公里桩" prop="stakeRange">
|
|
<el-input
|
|
v-model="trafficForm.stakeStart"
|
|
placeholder="格式K0000+000"
|
|
style="width: 10rem"
|
|
clearable
|
|
/>
|
|
<span style="margin: 0 5px; color: #ffffff">-</span>
|
|
<el-input
|
|
v-model="trafficForm.stakeEnd"
|
|
placeholder="格式K0000+000"
|
|
style="width: 9.5rem"
|
|
clearable
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item class="form-item" label="时间筛选" prop="dateTime">
|
|
<el-date-picker
|
|
v-model="dateTime"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
format="yyyy-MM-dd"
|
|
value-format="yyyy-MM-dd"
|
|
clearable
|
|
popper-class="traffic-log-date-time"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item class="form-item" label="病害类型" prop="defectType">
|
|
<el-select
|
|
v-model="trafficForm.defectType"
|
|
:popper-append-to-body="false"
|
|
placeholder="请选择病害类型"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in eventType"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item class="form-item" label="病害状态" prop="state">
|
|
<el-select
|
|
v-model="trafficForm.state"
|
|
:popper-append-to-body="false"
|
|
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>
|
|
</div>
|
|
<div class="form-btn">
|
|
<el-button class="btn-submit" size="mini" @click="handleQuery"
|
|
>搜索</el-button
|
|
>
|
|
<el-button class="btn-cancel" size="mini" @click="resetQuery"
|
|
>重置</el-button
|
|
>
|
|
</div>
|
|
<div class="traffic-table">
|
|
<el-table
|
|
:data="emergencyList"
|
|
header-row-class-name="headerRow"
|
|
row-class-name="bodayRow"
|
|
style="width: 100%; background: none"
|
|
height="85%"
|
|
>
|
|
<el-table-column prop="defectType" label="病害类型"> </el-table-column>
|
|
<el-table-column
|
|
prop="segmentName"
|
|
show-overflow-tooltip
|
|
label="路段名称"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
show-overflow-tooltip
|
|
prop="companyName"
|
|
label="所属公司"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column prop="state" label="病害状态">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.state === "2" ? "已修复" : "未修复" }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="pci" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
slot="reference"
|
|
size="mini"
|
|
type="text"
|
|
@click="detailDefect(scope.row)"
|
|
>详情
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<!-- 分页组件 -->
|
|
<div class="pagination-part">
|
|
<el-pagination
|
|
background
|
|
:pager-count="5"
|
|
:current-page.sync="pagination.page"
|
|
@current-change="handleCurrentChange"
|
|
:page-sizes="[10, 20, 30, 40]"
|
|
:page-size.sync="pagination.size"
|
|
layout="prev, pager, next"
|
|
:total="tableTotal"
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
|
|
import { getSegment, getDefectDropDown } from "@/api/xj/screen/index";
|
|
export default {
|
|
name: "TrafficLog",
|
|
props: {
|
|
// 病害巡检中4种类型点击绑定
|
|
bottomTipClick: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 查询表单绑定
|
|
trafficForm: {
|
|
// 路线名称
|
|
routeId: "",
|
|
// 路段名称
|
|
segmentId: "",
|
|
// 上下行
|
|
inspectDirection: "",
|
|
// 公里桩
|
|
stakeStart: "",
|
|
stakeEnd: "",
|
|
// 病害类型
|
|
defectType: "",
|
|
// 病害状态
|
|
state: "",
|
|
},
|
|
// 时间选择筛选
|
|
dateTime: [],
|
|
// 传接口的查询条件
|
|
searchForm: {},
|
|
// 路线名称下拉数据
|
|
lineList: [],
|
|
// 路段名称下拉数据
|
|
segmentList: [],
|
|
// 病害类型下拉数据
|
|
eventType: [],
|
|
// 病害状态下拉数据
|
|
defectStatus: [
|
|
{ label: "已修复", value: "2" },
|
|
{ label: "未修复", value: "1" },
|
|
],
|
|
// 事件列表
|
|
emergencyList: [],
|
|
// 分页数据绑定
|
|
pagination: {
|
|
page: 1,
|
|
size: 10,
|
|
},
|
|
// 分页总数
|
|
tableTotal: 0,
|
|
};
|
|
},
|
|
watch: {
|
|
bottomTipClick: {
|
|
handler() {
|
|
this.trafficForm.defectType = "";
|
|
this.getAllDefectType();
|
|
this.getData();
|
|
},
|
|
},
|
|
},
|
|
created() {
|
|
this.getData();
|
|
this.getLineList();
|
|
this.getAllDefectType();
|
|
},
|
|
methods: {
|
|
/**
|
|
* @description: 获取路线下拉数据
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
getLineList() {
|
|
getDefectDropDown().then(({ code, data }) => {
|
|
if (code === 200) {
|
|
this.lineList = data;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @description: 路线名称下拉框改变事件
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
chengeLine(val) {
|
|
if (val) {
|
|
this.getSegmentList(val);
|
|
} else {
|
|
this.trafficForm.segmentId = "";
|
|
this.segmentList = [];
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @description: 获取路段下拉数据
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
getSegmentList(val) {
|
|
getSegment({ routeId: val }).then(({ code, data }) => {
|
|
if (code === 200) {
|
|
this.segmentList = data;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @description: 获取病害类型下拉数据
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
getAllDefectType() {
|
|
DefectType({ classType: this.bottomTipClick }).then(({ code, data }) => {
|
|
if (code === 200) {
|
|
this.eventType = data;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @description: 点击搜索事件
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
handleQuery() {
|
|
const phonereg = /^K\d{4}\+\d{3}$/;
|
|
if (this.trafficForm.stakeStart) {
|
|
if (phonereg.test(this.trafficForm.stakeStart)) {
|
|
this.pagination.page = 1;
|
|
const data = {
|
|
...this.trafficForm,
|
|
startTime: this.dateTime ? this.dateTime[0] : "",
|
|
endTime: this.dateTime ? this.dateTime[1] : "",
|
|
};
|
|
this.searchForm = JSON.parse(JSON.stringify(data));
|
|
this.getData();
|
|
} else {
|
|
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
|
|
}
|
|
} else if (this.trafficForm.stakeEnd) {
|
|
if (phonereg.test(this.trafficForm.stakeEnd)) {
|
|
this.pagination.page = 1;
|
|
const data = {
|
|
...this.trafficForm,
|
|
startTime: this.dateTime ? this.dateTime[0] : "",
|
|
endTime: this.dateTime ? this.dateTime[1] : "",
|
|
};
|
|
this.searchForm = JSON.parse(JSON.stringify(data));
|
|
this.getData();
|
|
} else {
|
|
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
|
|
}
|
|
} else {
|
|
this.pagination.page = 1;
|
|
const data = {
|
|
...this.trafficForm,
|
|
startTime: this.dateTime ? this.dateTime[0] : "",
|
|
endTime: this.dateTime ? this.dateTime[1] : "",
|
|
};
|
|
this.searchForm = JSON.parse(JSON.stringify(data));
|
|
this.getData();
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @description: 点击重置事件
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
resetQuery() {
|
|
this.searchForm = {};
|
|
this.trafficForm = {
|
|
// 路线名称
|
|
routeId: "",
|
|
// 路段名称
|
|
segmentId: "",
|
|
// 上下行
|
|
inspectDirection: "",
|
|
// 公里桩
|
|
stakeStart: "",
|
|
stakeEnd: "",
|
|
// 病害类型
|
|
defectType: "",
|
|
// 病害状态
|
|
state: "",
|
|
};
|
|
this.dateTime = [];
|
|
this.segmentList = [];
|
|
this.getData();
|
|
},
|
|
|
|
/**
|
|
* @description: 获取事件列表数据
|
|
* @param {*}
|
|
* @return {*}
|
|
*/
|
|
getData() {
|
|
const data = {
|
|
classType: this.bottomTipClick,
|
|
...this.searchForm,
|
|
...this.pagination,
|
|
};
|
|
emergencyData(data).then(({ code, data }) => {
|
|
if (code === 200) {
|
|
this.emergencyList = data.rows;
|
|
this.tableTotal = data.total;
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @description: 点击表格详情事件
|
|
* @param {*} item
|
|
* @return {*}
|
|
*/
|
|
detailDefect(item) {
|
|
this.$emit("imagePoint", {
|
|
snapshotId: item.snapshotId,
|
|
segmentId: item.segmentId,
|
|
tablePoint: [item.coordinates[0], item.coordinates[1]],
|
|
});
|
|
},
|
|
|
|
/**
|
|
* @description: 页码修改事件
|
|
* @param {*} age
|
|
* @return {*}
|
|
*/
|
|
handleCurrentChange(age) {
|
|
this.pagination.page = age;
|
|
this.getData();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.traffic-form {
|
|
width: calc(100% - 0.5rem);
|
|
height: 22rem;
|
|
padding: 0.5rem;
|
|
|
|
.form-item {
|
|
width: 100%;
|
|
|
|
::v-deep .el-form-item__content {
|
|
width: calc(100% - 5rem);
|
|
|
|
.el-select,
|
|
.el-date-editor {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-form-item__label {
|
|
color: #ffffff;
|
|
}
|
|
|
|
// 修改时间选择器样式
|
|
// 修改时间中间 至 颜色
|
|
::v-deep .el-input__inner .el-range-separator {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
color: #ffffff;
|
|
border-color: #47536f;
|
|
background-color: transparent;
|
|
|
|
// 修改时间选择器样式
|
|
.el-range-input {
|
|
color: #ffffff;
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-select {
|
|
width: 6.5rem;
|
|
|
|
.el-input .el-select__caret {
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.el-input--medium .el-input__inner {
|
|
height: 1.5rem;
|
|
background-color: transparent;
|
|
color: #89c5e8;
|
|
border-color: #6991cd;
|
|
}
|
|
|
|
.el-select-dropdown {
|
|
background-color: #102649;
|
|
border-color: #08204f;
|
|
|
|
.el-scrollbar {
|
|
.el-select-dropdown__wrap {
|
|
.el-scrollbar__view {
|
|
.el-select-dropdown__item {
|
|
color: #aaabb8;
|
|
}
|
|
|
|
.el-select-dropdown__item:hover {
|
|
background-color: #2b4c7e;
|
|
}
|
|
|
|
.el-select-dropdown__item.selected {
|
|
background-color: #2b4c7e;
|
|
}
|
|
|
|
.el-select-dropdown__item.hover {
|
|
background-color: #2b4c7e;
|
|
}
|
|
}
|
|
|
|
.el-select-dropdown__list {
|
|
background-color: #102649;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-btn {
|
|
height: 4%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.traffic-title {
|
|
width: 100%;
|
|
height: 7%;
|
|
display: flex;
|
|
align-items: center;
|
|
// border: 1px solid #0b7ecf;
|
|
color: #e6fcfe;
|
|
font-size: 0.9rem;
|
|
padding: 0 0.5rem;
|
|
background-image: url("~@/assets/screen/traffic/emergency-top.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 90%;
|
|
background-position: 50% 100%;
|
|
|
|
.emergency-type {
|
|
width: 30%;
|
|
}
|
|
|
|
.emergency-name {
|
|
width: 30%;
|
|
}
|
|
|
|
.emergency-status {
|
|
width: 30%;
|
|
}
|
|
|
|
.emergency-operation {
|
|
width: 10%;
|
|
}
|
|
}
|
|
|
|
::v-deep .traffic-table {
|
|
width: 100%;
|
|
height: 42%;
|
|
padding: 0.5rem 0;
|
|
overflow: hidden;
|
|
|
|
// 表格最下方border
|
|
.el-table::before {
|
|
background-color: transparent;
|
|
}
|
|
|
|
// 隐藏滚动条
|
|
.el-table__body-wrapper::-webkit-scrollbar {
|
|
/*width: 0;宽度为0隐藏*/
|
|
width: 0;
|
|
}
|
|
|
|
// 表头行
|
|
.headerRow {
|
|
background: url("~@/assets/screen/traffic/emergency-top.png") no-repeat;
|
|
background-size: 100%;
|
|
|
|
th {
|
|
color: #ffffff;
|
|
background: none;
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
// 表格行
|
|
.bodayRow {
|
|
color: #ffffff;
|
|
background: none;
|
|
|
|
&:nth-child(2n) {
|
|
background: #113463;
|
|
}
|
|
|
|
// 表格内下划线
|
|
td {
|
|
// border-color: transparent;
|
|
border-bottom: 1px dashed rgb(115, 115, 116);
|
|
}
|
|
|
|
// 去除鼠标移动高亮
|
|
&:hover > td {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.el-table__cell {
|
|
padding: 0.2rem 0;
|
|
}
|
|
}
|
|
|
|
/* 分页样式 */
|
|
.pagination-part {
|
|
width: 100%;
|
|
display: flex;
|
|
padding-top: 0.5rem;
|
|
justify-content: flex-end;
|
|
|
|
::v-deep .el-pagination {
|
|
color: #ffffff;
|
|
|
|
.btn-prev,
|
|
.btn-next {
|
|
background-color: #6481aa;
|
|
}
|
|
}
|
|
|
|
::v-deep .el-pager li {
|
|
background: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 按钮样式
|
|
.btn-submit {
|
|
background-color: transparent;
|
|
background-image: url("~@/assets/screen/index/btn-submit.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 50%;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
|
|
&:active {
|
|
color: #0d9ee2;
|
|
}
|
|
}
|
|
|
|
.btn-cancel {
|
|
background-color: transparent;
|
|
background-image: url("~@/assets/screen/index/btn-cancel.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: 50%;
|
|
border-color: transparent;
|
|
color: #ffffff;
|
|
|
|
&:active {
|
|
color: #0d9ee2;
|
|
}
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.traffic-log-date-time {
|
|
// 修改弹出的日历背景色
|
|
.el-picker-panel__body {
|
|
background-color: #102649;
|
|
}
|
|
|
|
// 修改中间那条线
|
|
.el-date-range-picker__content.is-left {
|
|
border-right: 1px solid #374985;
|
|
}
|
|
|
|
// 修改日期样式
|
|
.el-date-table td span {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
// 修改星期样式
|
|
.el-date-table th {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
// 修改日期选择器头部样式
|
|
.el-date-range-picker__header {
|
|
color: #c0c0c0;
|
|
}
|
|
|
|
// 修改弹出层边框颜色
|
|
.el-picker-panel {
|
|
border: 1px solid #374985 !important; // 替换 #your-color-code 为你想要的颜色代码
|
|
}
|
|
}
|
|
</style>
|