fix：修改病害类型下拉为级联
This commit is contained in:
parent
f27c2f7544
commit
e9ab4f4e31
32
src/App.vue
32
src/App.vue
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view/>
|
||||
<theme-picker/>
|
||||
<router-view />
|
||||
<theme-picker />
|
||||
</div>
|
||||
</template>
|
||||
<script src="https://api.tianditu.gov.cn/api?v=4.0&tk=c691040443c68cda625755c5c3e2acc3" type="text/javascript">
|
||||
@ -12,15 +12,19 @@ import ThemePicker from "@/components/ThemePicker";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {ThemePicker},
|
||||
components: { ThemePicker },
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
|
||||
titleTemplate: title => {
|
||||
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
|
||||
}
|
||||
}
|
||||
}
|
||||
title:
|
||||
this.$store.state.settings.dynamicTitle &&
|
||||
this.$store.state.settings.title,
|
||||
titleTemplate: (title) => {
|
||||
return title
|
||||
? `${title} - ${process.env.VUE_APP_TITLE}`
|
||||
: process.env.VUE_APP_TITLE;
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
@ -28,3 +32,13 @@ export default {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
input[aria-hidden="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,7 +11,8 @@ import request from "@/utils/request";
|
||||
// 查询列表病害类型
|
||||
export function getDefectList(params) {
|
||||
return request({
|
||||
url: "/metadata/defectType",
|
||||
// url: "/metadata/defectType",
|
||||
url: "/bigscreen/v2/getDefectTypesDrowDown",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
|
||||
@ -71,7 +71,9 @@ export function getSegment() {
|
||||
// 查询列表病害类型
|
||||
export function getDefectList(params) {
|
||||
return request({
|
||||
url: "/metadata/defectType",
|
||||
// 病害类型下拉
|
||||
// url: "/metadata/defectType",
|
||||
url: "/bigscreen/v2/getDefectTypesDrowDown",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
|
||||
@ -64,6 +64,14 @@ export function getRoadCondition(query) {
|
||||
});
|
||||
}
|
||||
|
||||
// 获取路况评定常数统计数据
|
||||
export function getRoadConditionLog(query) {
|
||||
return request({
|
||||
url: "/xj/home/getRoadConditionAssessmentLog",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取数据栏右上角选择数据接口
|
||||
export function selectTypeList(query) {
|
||||
@ -72,4 +80,13 @@ export function selectTypeList(query) {
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害类型分布与总数
|
||||
export function getTotalList(query) {
|
||||
return request({
|
||||
url: "/xj/home/getTotal",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
@ -1,18 +1,18 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询作业范围列表
|
||||
export function getScopeList(query) {
|
||||
export function getScopeList(params) {
|
||||
return request({
|
||||
url: "/api/v2/segment/list",
|
||||
method: "post",
|
||||
data: query,
|
||||
url: "/api/fence/list",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除作业范围
|
||||
export function deleteScope(query) {
|
||||
return request({
|
||||
url: "/api/v2/segment/delete",
|
||||
url: "/api/fence/delete",
|
||||
method: "delete",
|
||||
data: query,
|
||||
});
|
||||
@ -21,7 +21,7 @@ export function deleteScope(query) {
|
||||
// 新增作业范围
|
||||
export function addScope(query) {
|
||||
return request({
|
||||
url: "/api/v2/segment/add",
|
||||
url: "/api/fence/add",
|
||||
method: "post",
|
||||
data: query,
|
||||
});
|
||||
@ -30,7 +30,7 @@ export function addScope(query) {
|
||||
// 修改作业范围
|
||||
export function updateScope(query) {
|
||||
return request({
|
||||
url: "/api/v2/segment/update",
|
||||
url: "/api/fence/update",
|
||||
method: "put",
|
||||
data: query,
|
||||
});
|
||||
|
||||
@ -12,7 +12,7 @@ export function roadRankList(query) {
|
||||
// 病害趋势柱状图接口
|
||||
export function roadTrends(query) {
|
||||
return request({
|
||||
url: "/bigscreen/getHistoryDefect",
|
||||
url: "/bigscreen/v2/getHistoryDefect",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
@ -121,7 +121,7 @@ export function getVideoUrl(params) {
|
||||
// 关闭设备的上传视频流
|
||||
export function closeVideoUrl(params) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/colseAiotVideo",
|
||||
url: "/bigscreen/v2/closeAiotVideo",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
|
||||
@ -72,6 +72,15 @@ export function defeaseList(data) {
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害筛选病害日志路线下拉数据
|
||||
export function getDefectDropDown(params) {
|
||||
return request({
|
||||
url: "/xj/route/listDropDown",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害筛选弹窗路段下拉数据
|
||||
// export function getSegment(data) {
|
||||
// return request({
|
||||
|
||||
@ -17,15 +17,24 @@ export function getSegment() {
|
||||
});
|
||||
}
|
||||
|
||||
// 病害类型下拉数据
|
||||
// 病害类型级联下拉数据
|
||||
export function getDefectList(params) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getAllDefectType",
|
||||
// url: "/bigscreen/v2/getAllDefectType",
|
||||
url: "/bigscreen/v2/getDefectTypesDrowDown",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害类型下拉数据
|
||||
export function getDefectSelectList(params) {
|
||||
return request({
|
||||
url: "/bigscreen/v2/getAllDefectType",
|
||||
method: "get",
|
||||
params,
|
||||
});
|
||||
}
|
||||
|
||||
// 获取病害详细数据接口
|
||||
export function getCompareList(params) {
|
||||
|
||||
@ -18,11 +18,28 @@
|
||||
label-position="left"
|
||||
label-width="5rem"
|
||||
>
|
||||
<el-form-item class="form-item" label="道路名称" prop="segmentId">
|
||||
<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="请选择道路名称"
|
||||
placeholder="请选择路段"
|
||||
filterable
|
||||
clearable
|
||||
>
|
||||
@ -163,7 +180,7 @@
|
||||
|
||||
<script>
|
||||
import { emergencyData, DefectType } from "@/api/xj/screen/traffic-screen";
|
||||
import { getSegment } from "@/api/xj/screen/index";
|
||||
import { getSegment, getDefectDropDown } from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "TrafficLog",
|
||||
props: {
|
||||
@ -177,7 +194,9 @@ export default {
|
||||
return {
|
||||
// 查询表单绑定
|
||||
trafficForm: {
|
||||
// 道路名称
|
||||
// 路线名称
|
||||
routeId: "",
|
||||
// 路段名称
|
||||
segmentId: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
@ -191,7 +210,9 @@ export default {
|
||||
dataTime: [],
|
||||
// 传接口的查询条件
|
||||
searchForm: {},
|
||||
// 道路名称下拉数据
|
||||
// 路线名称下拉数据
|
||||
lineList: [],
|
||||
// 路段名称下拉数据
|
||||
segmentList: [],
|
||||
// 病害类型下拉数据
|
||||
eventType: [],
|
||||
@ -222,20 +243,54 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getSegmentList();
|
||||
this.getLineList();
|
||||
this.getAllDefectType();
|
||||
},
|
||||
methods: {
|
||||
/* 获取路段下拉数据 */
|
||||
getSegmentList() {
|
||||
getSegment().then(({ code, data }) => {
|
||||
/**
|
||||
* @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.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) {
|
||||
@ -244,13 +299,22 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击搜索事件 */
|
||||
/**
|
||||
* @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;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
|
||||
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("请按照格式填写公里桩进行修改");
|
||||
@ -258,23 +322,39 @@ export default {
|
||||
} else if (this.trafficForm.stakeEnd) {
|
||||
if (phonereg.test(this.trafficForm.stakeEnd)) {
|
||||
this.pagination.page = 1;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
|
||||
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;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.trafficForm));
|
||||
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: "",
|
||||
// 公里桩
|
||||
stakeStart: "",
|
||||
@ -284,10 +364,15 @@ export default {
|
||||
// 病害状态
|
||||
state: "",
|
||||
};
|
||||
this.dataTime = [];
|
||||
this.getData();
|
||||
},
|
||||
|
||||
/* 获取事件列表数据 */
|
||||
/**
|
||||
* @description: 获取事件列表数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getData() {
|
||||
const data = {
|
||||
classType: this.bottomTipClick,
|
||||
@ -302,7 +387,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 点击表格详情事件 */
|
||||
/**
|
||||
* @description: 点击表格详情事件
|
||||
* @param {*} item
|
||||
* @return {*}
|
||||
*/
|
||||
detailDefect(item) {
|
||||
this.$emit("imagePoint", {
|
||||
snapshotId: item.snapshotId,
|
||||
@ -311,7 +400,11 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 页码修改事件 */
|
||||
/**
|
||||
* @description: 页码修改事件
|
||||
* @param {*} age
|
||||
* @return {*}
|
||||
*/
|
||||
handleCurrentChange(age) {
|
||||
this.pagination.page = age;
|
||||
this.getData();
|
||||
@ -327,7 +420,7 @@ export default {
|
||||
|
||||
.traffic-form {
|
||||
width: calc(100% - 0.5rem);
|
||||
height: 16rem;
|
||||
height: 19rem;
|
||||
padding: 0.5rem;
|
||||
|
||||
.form-item {
|
||||
@ -445,7 +538,7 @@ export default {
|
||||
|
||||
::v-deep .traffic-table {
|
||||
width: 100%;
|
||||
height: 57%;
|
||||
height: 50%;
|
||||
padding: 0.5rem 0;
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
@ -1711,14 +1711,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
input[aria-hidden="true"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// 大屏消息弹出框样式
|
||||
.screen-message-popover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
|
||||
@ -42,19 +42,13 @@ export default {
|
||||
return item.date;
|
||||
});
|
||||
const yData1 = this.echartList.map((item) => {
|
||||
return item.A1000;
|
||||
return item.hulan;
|
||||
});
|
||||
// const yData2 = this.echartList.map((item) => {
|
||||
// return item.A2001;
|
||||
// });
|
||||
// const yData3 = this.echartList.map((item) => {
|
||||
// return item.A2000;
|
||||
// });
|
||||
const yData4 = this.echartList.map((item) => {
|
||||
return item.A0;
|
||||
const yData2 = this.echartList.map((item) => {
|
||||
return item.kengcao;
|
||||
});
|
||||
const yData5 = this.echartList.map((item) => {
|
||||
return item.A1;
|
||||
const yData3 = this.echartList.map((item) => {
|
||||
return item.sanluowu;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.trendsChart);
|
||||
chart.setOption({
|
||||
@ -139,7 +133,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "坑槽",
|
||||
name: "护栏缺损",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -167,66 +161,8 @@ export default {
|
||||
},
|
||||
data: yData1,
|
||||
},
|
||||
// {
|
||||
// name: "块状修补(沥青)",
|
||||
// type: "line",
|
||||
// smooth: true,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#08B4A6",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(8,180,166,0)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// color: "#08B4A6",
|
||||
// },
|
||||
// // 设置节点样式
|
||||
// showSymbol: false,
|
||||
// symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
// symbolSize: 10, // 节点大小
|
||||
// itemStyle: {
|
||||
// color: "#08B4A6",
|
||||
// },
|
||||
// data: yData2,
|
||||
// },
|
||||
// {
|
||||
// name: "条状修补(沥青)",
|
||||
// type: "line",
|
||||
// smooth: true,
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "#146fd7",
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(20, 111, 215,0)",
|
||||
// },
|
||||
// ]),
|
||||
// },
|
||||
// lineStyle: {
|
||||
// width: 1,
|
||||
// color: "#146fd7",
|
||||
// },
|
||||
// // 设置节点样式
|
||||
// showSymbol: false,
|
||||
// symbol: "circle", // 可以选择 circle, diamond, pin 等
|
||||
// symbolSize: 10, // 节点大小
|
||||
// itemStyle: {
|
||||
// color: "#146fd7",
|
||||
// },
|
||||
// data: yData3,
|
||||
// },
|
||||
{
|
||||
name: "横向裂缝",
|
||||
name: "坑槽",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -252,10 +188,10 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#08B4A6",
|
||||
},
|
||||
data: yData4,
|
||||
data: yData2,
|
||||
},
|
||||
{
|
||||
name: "纵向裂缝",
|
||||
name: "散落物",
|
||||
type: "line",
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
@ -281,7 +217,7 @@ export default {
|
||||
itemStyle: {
|
||||
color: "#994EFF",
|
||||
},
|
||||
data: yData5,
|
||||
data: yData3,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
|
||||
@ -30,7 +30,7 @@
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
clearable
|
||||
@click="getTableData"
|
||||
@click="getTableDataByCar"
|
||||
></el-button
|
||||
></template>
|
||||
</el-input>
|
||||
@ -193,7 +193,11 @@ export default {
|
||||
this.getTableData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取表格数据 */
|
||||
/**
|
||||
* @description: 获取表格数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getTableData() {
|
||||
this.timer = setInterval(() => {
|
||||
getCarList({ no: this.tableInput }).then(({ code, data }) => {
|
||||
@ -206,38 +210,58 @@ export default {
|
||||
});
|
||||
}, 5000);
|
||||
getCarList({ no: this.tableInput }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.carNum = data.total;
|
||||
this.tableTotal = data.total;
|
||||
this.onlineNum = data.online;
|
||||
this.inspectionTableData = data.rows;
|
||||
}
|
||||
});
|
||||
if (code === 200) {
|
||||
this.carNum = data.total;
|
||||
this.tableTotal = data.total;
|
||||
this.onlineNum = data.online;
|
||||
this.inspectionTableData = data.rows;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 表格详情事件 */
|
||||
/**
|
||||
* @description: 根据车牌号获取表格数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getTableDataByCar() {
|
||||
clearInterval(this.timer);
|
||||
this.getTableData();
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 表格详情事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
detailDefect(val) {},
|
||||
|
||||
/* 表格跟车事件 */
|
||||
/**
|
||||
* @description: 表格跟车事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
followCar(val) {
|
||||
this.followTitle = "跟车详情";
|
||||
this.showCarVisible = true;
|
||||
},
|
||||
|
||||
/* 表格视频事件 */
|
||||
/**
|
||||
* @description: 表格视频事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
videoDelete(val) {
|
||||
this.dialogItem = val;
|
||||
this.viewTitle = "视频查看";
|
||||
this.showViewVisible = true;
|
||||
},
|
||||
|
||||
/* 页码修改事件 */
|
||||
// handleCurrentChange(arg) {
|
||||
// this.pagination.page = arg;
|
||||
// this.getTableData();
|
||||
// },
|
||||
|
||||
/* 关闭跟车弹窗事件 */
|
||||
/**
|
||||
* @description: 关闭跟车弹窗事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
followCancel() {
|
||||
this.followTitle = "";
|
||||
this.showCarVisible = false;
|
||||
@ -245,7 +269,11 @@ export default {
|
||||
closeWebsocket();
|
||||
},
|
||||
|
||||
/* 关闭视频弹窗事件 */
|
||||
/**
|
||||
* @description: 关闭视频弹窗事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
viewCancel() {
|
||||
this.viewTitle = "";
|
||||
this.showViewVisible = false;
|
||||
|
||||
@ -14,11 +14,17 @@
|
||||
<div class="left">
|
||||
<div>
|
||||
<div class="name">病害识别总数</div>
|
||||
<div class="value"><span>57875</span>个</div>
|
||||
<div class="value">
|
||||
<span>{{ total }}</span
|
||||
>个
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="name">新增病害数</div>
|
||||
<div class="value"><span>57875</span>个</div>
|
||||
<div class="value">
|
||||
<span>{{ newTotal }}</span
|
||||
>个
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
@ -53,7 +59,7 @@
|
||||
import FssmScroll from "@/components/scroll/fssm-scroll.vue";
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getDefectLog } from "@/api/xj/index/index";
|
||||
import { getDefectLog, getTotalList } from "@/api/xj/index/index";
|
||||
export default {
|
||||
name: "DiseaseIndex",
|
||||
components: {
|
||||
@ -65,6 +71,10 @@ export default {
|
||||
diseaseType: "",
|
||||
// 下拉框数据
|
||||
diseaseOptions: [],
|
||||
// 病害总数
|
||||
total: 0,
|
||||
// 新增病害数
|
||||
newTotal: 0,
|
||||
// 新增病害统计数据
|
||||
statisticsData: [],
|
||||
// 病害类型颜色盘
|
||||
@ -79,6 +89,21 @@ export default {
|
||||
"#62CFFF",
|
||||
"#6A9BFF",
|
||||
"#B38EFF",
|
||||
"#3678FF",
|
||||
"#F8A74E",
|
||||
"#04DAD7",
|
||||
"#00D669",
|
||||
"#8448FF",
|
||||
"#F6D566",
|
||||
"#00B1FF",
|
||||
"#62CFFF",
|
||||
"#6A9BFF",
|
||||
"#B38EFF",
|
||||
"#3678FF",
|
||||
"#F8A74E",
|
||||
"#04DAD7",
|
||||
"#00D669",
|
||||
"#8448FF",
|
||||
],
|
||||
// 病害类型分布数据
|
||||
distributionList: [],
|
||||
@ -86,53 +111,57 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getChartData();
|
||||
this.getBottomData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取echart图数据 */
|
||||
/**
|
||||
* @description: 获取上部分echart图数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getChartData() {
|
||||
getDefectLog().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.statisticsData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawStatisticsChart();
|
||||
// this.drawDistributionChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 获取底部echart图数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getBottomData() {
|
||||
getTotalList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.total = data.total;
|
||||
this.newTotal = data.today;
|
||||
let all = 0;
|
||||
this.distributionList = data.data.map((item) => {
|
||||
all += item.value;
|
||||
return {
|
||||
value: item.value,
|
||||
name: item.label,
|
||||
rate: `${((item.value / data.total) * 100).toFixed(0)}%`,
|
||||
};
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.drawDistributionChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
this.distributionList = [
|
||||
{
|
||||
value: 15461,
|
||||
name: "纵向裂缝",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: "块状裂缝",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 6546,
|
||||
name: "龟裂",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 2718,
|
||||
name: "坑槽",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1704,
|
||||
name: "车辙",
|
||||
rate: "10%",
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
name: "沉陷",
|
||||
rate: "10%",
|
||||
},
|
||||
];
|
||||
},
|
||||
/* 绘制新增病害统计echart图 */
|
||||
|
||||
/**
|
||||
* @description: 绘制新增病害统计echart图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawStatisticsChart() {
|
||||
if (this.$refs.statisticsChart) {
|
||||
const xData = this.statisticsData.map((item) => {
|
||||
@ -265,7 +294,12 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
/* 绘制病害类型分布图 */
|
||||
|
||||
/**
|
||||
* @description: 绘制病害类型分布图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawDistributionChart() {
|
||||
if (this.$refs.distributionChart) {
|
||||
const chart = echarts.init(this.$refs.distributionChart);
|
||||
@ -445,7 +479,7 @@ export default {
|
||||
.distribution-legnd {
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
padding: 2.6rem 2rem 2rem 2rem;
|
||||
padding: 2.5rem 0;
|
||||
|
||||
.scroll-box {
|
||||
display: flex;
|
||||
|
||||
@ -87,6 +87,9 @@ export default {
|
||||
return item.label;
|
||||
});
|
||||
const y1Data = this.roadChartData.map((item) => {
|
||||
return item.total;
|
||||
});
|
||||
const y2Data = this.roadChartData.map((item) => {
|
||||
return item.value;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.roadChart);
|
||||
@ -174,7 +177,7 @@ export default {
|
||||
borderRadius: [3, 3, 0, 0],
|
||||
color: "#38C8D8",
|
||||
},
|
||||
data: [20, 30, 35, 45, 55, 65, 75, 85, 95],
|
||||
data: y2Data,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
</el-table-column>
|
||||
<el-table-column prop="bridgePerKm" label="桥隧病害数(个/km)">
|
||||
</el-table-column>
|
||||
<el-table-column prop="greenPerKm" label="绿化病害数(个/km)">
|
||||
<el-table-column prop="greenPerKm" label="绿化问题数(个/km)">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
@ -44,7 +44,11 @@
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
// 接口
|
||||
import { getRoadCondition, selectTypeList } from "@/api/xj/index/index";
|
||||
import {
|
||||
getRoadCondition,
|
||||
getRoadConditionLog,
|
||||
selectTypeList,
|
||||
} from "@/api/xj/index/index";
|
||||
export default {
|
||||
name: "TrafficIndex",
|
||||
data() {
|
||||
@ -55,14 +59,21 @@ export default {
|
||||
itemSelect: "",
|
||||
// 路况表格数据
|
||||
trafficTableData: [],
|
||||
// echart数据
|
||||
trafficEchartData: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTableData();
|
||||
this.getSelect();
|
||||
this.getLogData();
|
||||
},
|
||||
methods: {
|
||||
/* 获取数据栏右上角选项数据 */
|
||||
/**
|
||||
* @description: 获取数据栏右上角选项数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getSelect() {
|
||||
selectTypeList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
@ -71,16 +82,24 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 右上角单选改变事件 */
|
||||
changeRadio(){
|
||||
this.getTableData()
|
||||
/**
|
||||
* @description: 右上角单选改变事件
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
changeRadio() {
|
||||
this.getTableData();
|
||||
this.getLogData();
|
||||
},
|
||||
|
||||
/* 获取表格数据 */
|
||||
/**
|
||||
* @description: 获取表格数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getTableData() {
|
||||
getRoadCondition({ type: this.itemSelect }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
console.log(data, "ggg");
|
||||
this.trafficTableData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawTrafficChart();
|
||||
@ -88,19 +107,48 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 绘制柱状图 */
|
||||
|
||||
/**
|
||||
* @description: 获取echart数据
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
getLogData() {
|
||||
getRoadConditionLog({ type: this.itemSelect }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.trafficEchartData = data;
|
||||
this.$nextTick(() => {
|
||||
this.drawTrafficChart();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 绘制柱状图
|
||||
* @param {*}
|
||||
* @return {*}
|
||||
*/
|
||||
drawTrafficChart() {
|
||||
if (this.$refs.trafficChart) {
|
||||
const xData = this.trafficEchartData.map((item) => {
|
||||
return item.name;
|
||||
});
|
||||
const y1Data = this.trafficEchartData.map((item) => {
|
||||
return item.road;
|
||||
});
|
||||
const y2Data = this.trafficEchartData.map((item) => {
|
||||
return item.event;
|
||||
});
|
||||
const y3Data = this.trafficEchartData.map((item) => {
|
||||
return item.bridge;
|
||||
});
|
||||
const y4Data = this.trafficEchartData.map((item) => {
|
||||
return item.green;
|
||||
});
|
||||
const chart = echarts.init(this.$refs.trafficChart);
|
||||
chart.setOption({
|
||||
color: ["#388BD8", "#04DAD7"],
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
color: ["#388BD8", "#04DAD7", "#F8A74E", "#8448FF"],
|
||||
title: [
|
||||
// 中心比例
|
||||
{
|
||||
@ -128,18 +176,7 @@ export default {
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
data: [
|
||||
"1月",
|
||||
"2月",
|
||||
"3月",
|
||||
"4月",
|
||||
"5月",
|
||||
"6月",
|
||||
"7月",
|
||||
"8月",
|
||||
"9月",
|
||||
"10月",
|
||||
],
|
||||
data: xData,
|
||||
type: "category",
|
||||
axisTick: {
|
||||
show: false, //隐藏X轴刻度
|
||||
@ -175,7 +212,7 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "病害修补数量",
|
||||
name: "路面病害数",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
@ -191,10 +228,10 @@ export default {
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: [400, 600, 1400, 1700, 400, 600, 400, 600, 1400, 1700],
|
||||
data: y1Data,
|
||||
},
|
||||
{
|
||||
name: "病害数量",
|
||||
name: "交安病害数",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
@ -210,7 +247,90 @@ export default {
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: [40, 500, 1500, 700, 40, 500, 40, 500, 1500, 700],
|
||||
data: y3Data,
|
||||
},
|
||||
{
|
||||
name: "桥隧病害数",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#F8A74E",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff",
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: y4Data,
|
||||
},
|
||||
{
|
||||
name: "绿化问题数",
|
||||
type: "line",
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#8448FF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ffffff",
|
||||
},
|
||||
]),
|
||||
},
|
||||
data: y2Data,
|
||||
},
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
// 设置滚动条的隐藏与显示
|
||||
show: false,
|
||||
// 设置滚动条类型
|
||||
type: "slider",
|
||||
// 设置背景颜色
|
||||
backgroundColor: "rgba(225,225,225,0.2)",
|
||||
// 设置选中范围的填充颜色
|
||||
fillerColor: "#ccc",
|
||||
// 设置边框颜色
|
||||
borderColor: "rgba(225,225,225,0.2)",
|
||||
// 是否显示detail，即拖拽时候显示详细数值信息
|
||||
showDetail: false,
|
||||
// 数据窗口范围的起始数值
|
||||
startValue: 0,
|
||||
// 数据窗口范围的结束数值（一页显示多少条数据）
|
||||
endValue: 6,
|
||||
// empty：当前数据窗口外的数据，被设置为空。
|
||||
// 即不会影响其他轴的数据范围
|
||||
filterMode: "empty",
|
||||
// 设置滚动条宽度，相对于盒子宽度
|
||||
width: "80%",
|
||||
// 设置滚动条高度
|
||||
height: 5,
|
||||
// 设置滚动条显示位置
|
||||
left: "center",
|
||||
// 是否锁定选择区域（或叫做数据窗口）的大小
|
||||
zoomLoxk: true,
|
||||
// 控制手柄的尺寸
|
||||
handleSize: 10,
|
||||
// dataZoom-slider组件离容器下侧的距离
|
||||
bottom: 0,
|
||||
},
|
||||
{
|
||||
// 没有下面这块的话，只能拖动滚动条，
|
||||
// 鼠标滚轮在区域内不能控制外部滚动条
|
||||
type: "inside",
|
||||
// 滚轮是否触发缩放
|
||||
zoomOnMouseWheel: false,
|
||||
// 鼠标滚轮触发滚动
|
||||
moveOnMouseMove: true,
|
||||
moveOnMouseWheel: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
@ -47,19 +47,16 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="3rem" label="类型">
|
||||
<el-select
|
||||
<el-cascader
|
||||
v-model="imgForm.defectType"
|
||||
placeholder="请选择路段名称"
|
||||
:style="{ width: '8rem' }"
|
||||
:options="tableDefect"
|
||||
:props="{
|
||||
checkStrictly: false,
|
||||
emitPath: false,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="公里桩">
|
||||
<el-input
|
||||
@ -159,10 +156,14 @@ import {
|
||||
mergeDefect,
|
||||
listDefect,
|
||||
} from "@/api/xj/confirmation";
|
||||
import { getItemTypes } from "@/api/xj/screen/index";
|
||||
export default {
|
||||
name: "ImageDialog",
|
||||
props: {},
|
||||
props: {
|
||||
tableDefect: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 左侧图片数据
|
||||
@ -179,8 +180,6 @@ export default {
|
||||
},
|
||||
// 路段下拉数据
|
||||
roadTypeList: [],
|
||||
// 病害类型下拉数据
|
||||
defectTypeList: [],
|
||||
// 病害状态下拉选项
|
||||
defectStatus: [],
|
||||
// 分页绑定
|
||||
@ -211,7 +210,6 @@ export default {
|
||||
},
|
||||
created() {
|
||||
this.getSegmentList();
|
||||
this.getDefectType();
|
||||
this.getDefectStatusList();
|
||||
},
|
||||
mounted() {
|
||||
@ -230,15 +228,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
getDefectType() {
|
||||
getItemTypes({ type: "defect" }).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.defectTypeList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 查询病害状态下拉数据 */
|
||||
getDefectStatusList() {
|
||||
getDefectStatus().then(({ data, code }) => {
|
||||
@ -261,15 +250,13 @@ export default {
|
||||
|
||||
/* 获取左侧图片列表 */
|
||||
getList() {
|
||||
console.log(11);
|
||||
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.imgForm,
|
||||
...this.params,
|
||||
};
|
||||
listDefect(data)
|
||||
.then(({ code,rows }) => {
|
||||
.then(({ code, rows }) => {
|
||||
if (code === 200) {
|
||||
this.defectData = rows;
|
||||
this.loading = false;
|
||||
@ -414,7 +401,7 @@ export default {
|
||||
// 滚动高度+容器高度 滚动区域高度
|
||||
const sidebar = this.$refs.sidebar;
|
||||
if (
|
||||
sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 18 &&
|
||||
sidebar.scrollTop + sidebar.clientHeight >= sidebar.scrollHeight - 15 &&
|
||||
!this.loading
|
||||
) {
|
||||
this.loadMoreImages();
|
||||
@ -449,6 +436,7 @@ export default {
|
||||
/* 键盘事件 */
|
||||
handleKeydown(event) {
|
||||
if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
if (this.currentIndex > 0) {
|
||||
this.currentIndex--;
|
||||
this.selectedThumbnail = 0; // Reset when changing main images via keyboard
|
||||
@ -456,6 +444,7 @@ export default {
|
||||
this.updateRects();
|
||||
}
|
||||
} else if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
if (this.currentIndex <= this.defectData.length - 1) {
|
||||
this.currentIndex === this.defectData.length - 1
|
||||
? this.currentIndex
|
||||
|
||||
@ -42,19 +42,17 @@
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害类型" prop="defectType">
|
||||
<el-select
|
||||
v-model="queryParams.defectType"
|
||||
placeholder="请选择病害类型"
|
||||
<el-form-item label="病害类型" prop="paramsDefectType">
|
||||
<el-cascader
|
||||
v-model="paramsDefectType"
|
||||
:options="tableDefect"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
emitPath: true,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tableDefect"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害状态" prop="state">
|
||||
<el-select
|
||||
@ -224,10 +222,7 @@
|
||||
<span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害类型" align="center" prop="defectType">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ filterDefect(scope.row.defectType) }}</span>
|
||||
</template>
|
||||
<el-table-column label="病害类型" align="center" prop="defectTypeName">
|
||||
</el-table-column>
|
||||
<el-table-column label="病害状态" align="center" prop="state">
|
||||
<template slot-scope="scope">
|
||||
@ -315,7 +310,10 @@
|
||||
destroy-on-close
|
||||
@close="checkCancel"
|
||||
>
|
||||
<image-dialog></image-dialog>
|
||||
<image-dialog
|
||||
v-if="showCheckImg"
|
||||
:tableDefect="tableDefect"
|
||||
></image-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -337,6 +335,7 @@ export default {
|
||||
// 搜索表单参数
|
||||
queryParams: {
|
||||
segmentName: "",
|
||||
classType: "",
|
||||
defectType: "",
|
||||
state: "",
|
||||
inspectDirection: "",
|
||||
@ -352,6 +351,8 @@ export default {
|
||||
},
|
||||
// 查询接收表单参数
|
||||
searchForm: {},
|
||||
// 病害类型绑定
|
||||
paramsDefectType: [],
|
||||
// 采集时间绑定
|
||||
dateTime: [],
|
||||
// 列表病害状态数据
|
||||
@ -420,17 +421,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 过滤列表病害类型 */
|
||||
filterDefect(value) {
|
||||
let a = null;
|
||||
[a] = this.tableDefect.filter((item) => {
|
||||
return item.value === value;
|
||||
});
|
||||
if (a) {
|
||||
return a.label;
|
||||
}
|
||||
},
|
||||
|
||||
/* 过滤列表病害状态 */
|
||||
filterState(value) {
|
||||
let a = null;
|
||||
@ -469,6 +459,14 @@ export default {
|
||||
const phonereg = /^K\d{4}\+\d{3}$/;
|
||||
if (this.queryParams.stakeStart) {
|
||||
if (phonereg.test(this.queryParams.stakeStart)) {
|
||||
this.queryParams.classType = this.paramsDefectType
|
||||
? this.paramsDefectType[0]
|
||||
: "";
|
||||
this.queryParams.defectType = this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "";
|
||||
this.pagination.page = 1;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getTableList();
|
||||
@ -477,6 +475,14 @@ export default {
|
||||
}
|
||||
} else if (this.queryParams.stakeEnd) {
|
||||
if (phonereg.test(this.queryParams.stakeEnd)) {
|
||||
this.queryParams.classType = this.paramsDefectType
|
||||
? this.paramsDefectType[0]
|
||||
: "";
|
||||
this.queryParams.defectType = this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "";
|
||||
this.pagination.page = 1;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getTableList();
|
||||
@ -484,6 +490,14 @@ export default {
|
||||
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
|
||||
}
|
||||
} else {
|
||||
this.queryParams.classType = this.paramsDefectType
|
||||
? this.paramsDefectType[0]
|
||||
: "";
|
||||
this.queryParams.defectType = this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "";
|
||||
this.pagination.page = 1;
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.queryParams));
|
||||
this.getTableList();
|
||||
@ -507,6 +521,7 @@ export default {
|
||||
id: "",
|
||||
snapshotId: "",
|
||||
};
|
||||
this.paramsDefectType = [];
|
||||
this.searchForm = {};
|
||||
this.dateTime = [];
|
||||
this.getTableList();
|
||||
|
||||
@ -50,18 +50,16 @@
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="病害类型" prop="defectType">
|
||||
<el-select
|
||||
v-model="mergeForm.defectType"
|
||||
placeholder="请选择病害类型"
|
||||
<el-cascader
|
||||
v-model="paramsDefectType"
|
||||
:options="tableDefect"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
emitPath: true,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tableDefect"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -145,10 +143,7 @@
|
||||
<span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害类型" align="center" prop="defectType">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ filterDefect(scope.row.defectType) }}</span>
|
||||
</template>
|
||||
<el-table-column label="病害类型" align="center" prop="defectTypeName">
|
||||
</el-table-column>
|
||||
<el-table-column label="病害状态" align="center" prop="state">
|
||||
<template slot-scope="scope">
|
||||
@ -263,6 +258,7 @@ export default {
|
||||
// 道路名称绑定
|
||||
segmentName: "",
|
||||
// 病害类型绑定
|
||||
classType: "",
|
||||
defectType: "",
|
||||
// 公里桩绑定
|
||||
stakeStart: "",
|
||||
@ -274,6 +270,8 @@ export default {
|
||||
},
|
||||
// 查询表单绑定
|
||||
searchForm: {},
|
||||
// 病害类型绑定
|
||||
paramsDefectType: [],
|
||||
// 采集时间绑定
|
||||
dateTime: [],
|
||||
// 列表数据绑定
|
||||
@ -327,7 +325,16 @@ export default {
|
||||
|
||||
/* 搜索事件 */
|
||||
handleQuery() {
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.mergeForm));
|
||||
const data = {
|
||||
...this.mergeForm,
|
||||
classType: this.paramsDefectType ? this.paramsDefectType[0] : "",
|
||||
defectType: this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "",
|
||||
};
|
||||
this.searchForm = JSON.parse(JSON.stringify(data));
|
||||
this.getList();
|
||||
},
|
||||
|
||||
@ -339,6 +346,8 @@ export default {
|
||||
segmentName: "",
|
||||
// 病害类型绑定
|
||||
defectType: "",
|
||||
classType: "",
|
||||
type: "",
|
||||
// 公里桩绑定
|
||||
stakeStart: "",
|
||||
stakeEnd: "",
|
||||
|
||||
@ -42,19 +42,17 @@
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害类型" prop="defectType">
|
||||
<el-select
|
||||
v-model="queryParams.defectType"
|
||||
placeholder="请选择病害类型"
|
||||
<el-form-item label="病害类型" prop="paramsDefectType">
|
||||
<el-cascader
|
||||
v-model="paramsDefectType"
|
||||
:options="tableDefect"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
emitPath: true,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tableDefect"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害状态" prop="state">
|
||||
<el-select
|
||||
@ -259,10 +257,7 @@
|
||||
<span>{{ new Date(scope.row.createdTime).toLocaleString() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="病害类型" align="center" prop="defectType">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ filterDefect(scope.row.defectType) }}</span>
|
||||
</template>
|
||||
<el-table-column label="病害类型" align="center" prop="defectTypeName">
|
||||
</el-table-column>
|
||||
<el-table-column label="病害状态" align="center" prop="state">
|
||||
<template slot-scope="scope">
|
||||
@ -395,18 +390,16 @@
|
||||
</el-col>
|
||||
<el-col :span="12" v-if="dialogTitle === '添加缺陷'">
|
||||
<el-form-item label="病害类型" prop="defectType">
|
||||
<el-select
|
||||
<el-cascader
|
||||
v-model="form.defectType"
|
||||
placeholder="请选择病害类型"
|
||||
:options="tableDefect"
|
||||
:props="{
|
||||
checkStrictly: false,
|
||||
emitPath: false,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tableDefect"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -580,7 +573,7 @@
|
||||
</p>
|
||||
<p>路段名称：{{ viewForm.segmentName }}</p>
|
||||
<!-- <p>病害坐标：{{ viewForm.geometry.coordinates }}</p> -->
|
||||
<p>病害类型：{{ filterDefect(viewForm.defectType) }}</p>
|
||||
<p>病害类型：{{ viewForm.defectTypeName }}</p>
|
||||
<p>病害长度：{{ viewForm.targetLen }} 米</p>
|
||||
<p>病害id：{{ viewForm.id }}</p>
|
||||
<p>快照id：{{ viewForm.snapshotId }}</p>
|
||||
@ -720,6 +713,7 @@ export default {
|
||||
size: 10,
|
||||
segmentName: "",
|
||||
defectType: "",
|
||||
classType: "",
|
||||
taskId: "",
|
||||
state: "",
|
||||
inspectDirection: "",
|
||||
@ -733,7 +727,10 @@ export default {
|
||||
id: "",
|
||||
snapshotId: "",
|
||||
},
|
||||
// 日期范围
|
||||
dateTime: [],
|
||||
// 病害类型级联下拉绑定
|
||||
paramsDefectType: [],
|
||||
// 新增/编辑表单参数
|
||||
form: {
|
||||
id: null,
|
||||
@ -875,21 +872,6 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 过滤列表病害类型
|
||||
* @param {*} value
|
||||
* @return {*}
|
||||
*/
|
||||
filterDefect(value) {
|
||||
let a = null;
|
||||
[a] = this.tableDefect.filter((item) => {
|
||||
return item.value === value;
|
||||
});
|
||||
if (a) {
|
||||
return a.label;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* @description: 过滤列表病害状态
|
||||
* @param {*} value
|
||||
@ -1017,7 +999,8 @@ export default {
|
||||
page: 1,
|
||||
size: 10,
|
||||
segmentName: "",
|
||||
defectType: [],
|
||||
defectType: "",
|
||||
classType: "",
|
||||
taskId: "",
|
||||
state: "",
|
||||
inspectDirection: "",
|
||||
@ -1031,6 +1014,7 @@ export default {
|
||||
id: "",
|
||||
snapshotId: "",
|
||||
};
|
||||
this.paramsDefectType = [];
|
||||
this.dateTime = [];
|
||||
this.getList();
|
||||
},
|
||||
@ -1044,6 +1028,14 @@ export default {
|
||||
const phonereg = /^K\d{4}\+\d{3}$/;
|
||||
if (this.queryParams.stakeStart) {
|
||||
if (phonereg.test(this.queryParams.stakeStart)) {
|
||||
this.queryParams.classType = this.paramsDefectType
|
||||
? this.paramsDefectType[0]
|
||||
: "";
|
||||
this.queryParams.defectType = this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "";
|
||||
this.queryParams.page = 1;
|
||||
this.getList();
|
||||
} else {
|
||||
@ -1051,12 +1043,28 @@ export default {
|
||||
}
|
||||
} else if (this.queryParams.stakeEnd) {
|
||||
if (phonereg.test(this.queryParams.stakeEnd)) {
|
||||
this.queryParams.classType = this.paramsDefectType
|
||||
? this.paramsDefectType[0]
|
||||
: "";
|
||||
this.queryParams.defectType = this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "";
|
||||
this.queryParams.page = 1;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$modal.msgWarning("请按照格式填写公里桩进行修改");
|
||||
}
|
||||
} else {
|
||||
this.queryParams.classType = this.paramsDefectType
|
||||
? this.paramsDefectType[0]
|
||||
: "";
|
||||
this.queryParams.defectType = this.paramsDefectType
|
||||
? this.paramsDefectType.length > 1
|
||||
? this.paramsDefectType[1]
|
||||
: ""
|
||||
: "";
|
||||
this.queryParams.page = 1;
|
||||
this.getList();
|
||||
}
|
||||
@ -1410,6 +1418,7 @@ export default {
|
||||
changeView(val) {
|
||||
getDetailsBySnapShotId(val).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.viewForm = data;
|
||||
console.log(data, "查看弹窗选择改变触发事件");
|
||||
}
|
||||
});
|
||||
|
||||
@ -98,7 +98,7 @@ export default {
|
||||
image: new Icon({
|
||||
crossOrigin: "anonymous",
|
||||
src: require(`@/assets/screen/index/${
|
||||
this.mapLogeList[element.defectType]
|
||||
this.mapLogeList[element.iconType]
|
||||
}.png`),
|
||||
// size: [40, 40],
|
||||
scale: 0.5, // 图标缩放比例
|
||||
@ -186,6 +186,7 @@ export default {
|
||||
},
|
||||
//坐标轴刻度标签
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
show: true,
|
||||
color: "#616367",
|
||||
},
|
||||
|
||||
@ -41,19 +41,18 @@
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="病害类型">
|
||||
<el-select
|
||||
v-model="surfaceForm.defectType"
|
||||
placeholder="请选择病害类型"
|
||||
clearable
|
||||
<el-form-item label="病害类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in defectTypeList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-cascader
|
||||
v-model="surfaceForm.defectType"
|
||||
:options="defectTypeList"
|
||||
:props="{
|
||||
checkStrictly: false,
|
||||
emitPath: false,
|
||||
children: 'subTypes',
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="">
|
||||
<el-button
|
||||
@ -133,7 +132,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSegment, getDefectList, getCompareList } from "@/api/xj/surface";
|
||||
import {
|
||||
getSegment,
|
||||
getDefectList,
|
||||
getDefectSelectList,
|
||||
getCompareList,
|
||||
} from "@/api/xj/surface";
|
||||
import SurfaceMap from "./components/surface-map.vue";
|
||||
export default {
|
||||
name: "Surface",
|
||||
@ -181,6 +185,7 @@ export default {
|
||||
created() {
|
||||
this.getSegmentList();
|
||||
this.getDefectTypeList();
|
||||
this.getDefectTypeSelect();
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
@ -193,11 +198,19 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
/* 获取病害类型级联下拉数据 */
|
||||
getDefectTypeList() {
|
||||
getDefectList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.defectTypeList = data;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/* 获取病害类型下拉数据 */
|
||||
getDefectTypeSelect() {
|
||||
getDefectSelectList().then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
data.forEach((item) => {
|
||||
this.mapLogeList[item.value] = item.label;
|
||||
});
|
||||
@ -252,10 +265,7 @@ export default {
|
||||
this.dialogImgLeft = item.data;
|
||||
if (Object.keys(this.surfaceListRight).length > 0) {
|
||||
const rightImg = this.surfaceListRight.data.filter((it) => {
|
||||
if (it.snapshotId === item.data.snapshotId) {
|
||||
return it;
|
||||
}
|
||||
return [];
|
||||
return it.snapshotId === item.data.snapshotId && it;
|
||||
});
|
||||
this.dialogImgRight = rightImg[0];
|
||||
}
|
||||
@ -267,10 +277,7 @@ export default {
|
||||
this.dialogImgRight = item.data;
|
||||
if (Object.keys(this.surfaceListLeft).length > 0) {
|
||||
const leftImg = this.surfaceListLeft.data.filter((it) => {
|
||||
if (it.snapshotId === item.data.snapshotId) {
|
||||
return it;
|
||||
}
|
||||
return [];
|
||||
return it.snapshotId === item.data.snapshotId && it;
|
||||
});
|
||||
this.dialogImgLeft = leftImg[0];
|
||||
}
|
||||
|
||||
@ -203,6 +203,7 @@ export default {
|
||||
getScopeList(params).then(({ code, data }) => {
|
||||
if (code === 200) {
|
||||
this.sectionList = data.rows;
|
||||
this.tableTotal = data.total;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
* @LastEditors: SunTao 328867980@qq.com
|
||||
* @LastEditTime: 2024-10-17 11:24:08
|
||||
* @FilePath: \znxjxt-ui\src\views\xj\route\route-terminal\components\terminal-add.vue
|
||||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||||
* @Description: 路线管理-终端管理新增弹窗
|
||||
-->
|
||||
<template>
|
||||
<div class="add-content">
|
||||
@ -36,8 +36,8 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="作业范围" prop="areas">
|
||||
<!-- <el-col :span="12">
|
||||
<el-form-item label="作业范围" >
|
||||
<el-select
|
||||
v-model="dialogForm.areas"
|
||||
placeholder="请选择作业范围"
|
||||
@ -52,8 +52,8 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
</el-col> -->
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
@ -66,7 +66,7 @@
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="bottom-map">
|
||||
<!-- <div class="bottom-map">
|
||||
<fssm-map
|
||||
@endEoordinate="geteoordinate"
|
||||
:editCoordinates="editCoordinates"
|
||||
@ -74,7 +74,7 @@
|
||||
:showZoom="false"
|
||||
:showDraw="false"
|
||||
></fssm-map>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
|
||||
@ -120,6 +120,7 @@
|
||||
@close="addCancel"
|
||||
>
|
||||
<terminal-add
|
||||
v-if="addVisible"
|
||||
:dialogItem="dialogItem"
|
||||
@addCancel="addCancel"
|
||||
></terminal-add>
|
||||
@ -171,12 +172,21 @@ export default {
|
||||
this.getTableList();
|
||||
},
|
||||
methods: {
|
||||
/* 点击搜索事件 */
|
||||
/**
|
||||
* @description: 点击搜索事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleQuery() {
|
||||
this.searchForm = JSON.parse(JSON.stringify(this.sectionForm));
|
||||
this.getTableList();
|
||||
},
|
||||
/* 点击重置事件 */
|
||||
|
||||
/**
|
||||
* @description: 点击重置事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
resetQuery() {
|
||||
this.sectionForm = {
|
||||
// segmentCode: "",
|
||||
@ -185,7 +195,12 @@ export default {
|
||||
this.searchForm = {};
|
||||
this.getTableList();
|
||||
},
|
||||
/* 获取列表数据 */
|
||||
|
||||
/**
|
||||
* @description: 获取列表数据
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
getTableList() {
|
||||
const params = {
|
||||
...this.searchForm,
|
||||
@ -197,7 +212,12 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
/* 点击新增 */
|
||||
|
||||
/**
|
||||
* @description: 点击新增
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
handleAdd() {
|
||||
this.addTitle = "新增设备";
|
||||
this.dialogItem = {
|
||||
@ -205,15 +225,30 @@ export default {
|
||||
};
|
||||
this.addVisible = true;
|
||||
},
|
||||
/* 列表选择改变事件 */
|
||||
|
||||
/**
|
||||
* @description: 列表选择改变事件
|
||||
* @param {*} selection
|
||||
* @return {*}
|
||||
*/
|
||||
handleSelectionChange(selection) {
|
||||
this.checkIds = selection.map((item) => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
/* 列表查看事件 */
|
||||
|
||||
/**
|
||||
* @description: 列表查看事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
viewTable() {},
|
||||
/* 列表修改事件 */
|
||||
|
||||
/**
|
||||
* @description: 列表修改事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
editTable() {
|
||||
this.addTitle = "修改设备";
|
||||
this.dialogItem = {
|
||||
@ -221,7 +256,12 @@ export default {
|
||||
};
|
||||
this.addVisible = true;
|
||||
},
|
||||
/* 列表删除/批量删除事件 */
|
||||
|
||||
/**
|
||||
* @description: 列表删除/批量删除事件
|
||||
* @param {*} row
|
||||
* @return {*}
|
||||
*/
|
||||
deleteTable(row) {
|
||||
const checkIds = row ? [row.id] : this.checkIds;
|
||||
if (!checkIds.length) {
|
||||
@ -240,17 +280,32 @@ export default {
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
/* 切换分页 */
|
||||
|
||||
/**
|
||||
* @description: 切换分页
|
||||
* @param {*} arg
|
||||
* @return {*}
|
||||
*/
|
||||
handleCurrentChange(arg) {
|
||||
this.pagination.page = arg;
|
||||
this.getTableList();
|
||||
},
|
||||
/* 切换每条/页 */
|
||||
|
||||
/**
|
||||
* @description: 切换每条/页
|
||||
* @param {*} arg
|
||||
* @return {*}
|
||||
*/
|
||||
handleSizeChange(arg) {
|
||||
this.pagination.size = arg;
|
||||
this.getTableList();
|
||||
},
|
||||
/* 关闭弹窗事件 */
|
||||
|
||||
/**
|
||||
* @description: 关闭弹窗事件
|
||||
* @param {*} val
|
||||
* @return {*}
|
||||
*/
|
||||
addCancel() {
|
||||
this.addTitle = "";
|
||||
this.dialogItem = {};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user