You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1159 lines
32 KiB
1159 lines
32 KiB
<template>
|
|
<!--任务详情 -->
|
|
<CardBox class="card-page page-content">
|
|
<div class="page-container">
|
|
<div class="page-left">
|
|
<div class="img-title">{{ selectPointInfo.pointName }}</div>
|
|
<div
|
|
class="img-box"
|
|
v-if="
|
|
selectPointInfo.imgType !== '1' && selectPointInfo.imgType !== 1
|
|
"
|
|
>
|
|
<!-- 增加正样本 -->
|
|
<div class="img-wrap-box" v-if="selectPointInfo.imageNormalUrlPath">
|
|
<div class="img-header-box" style="background-color: #0e3749">
|
|
<div class="img-header-left">正样本</div>
|
|
</div>
|
|
<AsyncImage
|
|
class="img-wrap"
|
|
fit="contain"
|
|
:src="selectPointInfo.imageNormalUrlPath"
|
|
:supportPreview="false"
|
|
@click="
|
|
onImagePreviewClicked(selectPointInfo.imageNormalUrlPath, false)
|
|
"
|
|
></AsyncImage>
|
|
</div>
|
|
<!-- 结束 -->
|
|
<div class="img-wrap-box" v-if="selectPointInfo.img">
|
|
<div class="img-header-box">
|
|
<div class="img-header-left">初筛分析</div>
|
|
<div class="img-header-right">
|
|
{{
|
|
`结果：${
|
|
selectPointInfo.filterDesc
|
|
? selectPointInfo.filterDesc
|
|
: "--"
|
|
}`
|
|
}}
|
|
</div>
|
|
</div>
|
|
<AsyncImage
|
|
class="img-wrap"
|
|
fit="contain"
|
|
:src="selectPointInfo.img"
|
|
:supportPreview="false"
|
|
@click="onImagePreviewClicked(selectPointInfo.img, false)"
|
|
></AsyncImage>
|
|
</div>
|
|
<div class="img-wrap-box" v-if="selectPointInfo.imgAnalyse">
|
|
<div class="img-header-box">
|
|
<div class="img-header-left">
|
|
{{
|
|
selectPointInfo.algType == "meter" ? "表计识别" : "模型分析"
|
|
}}
|
|
</div>
|
|
<div class="img-header-right">
|
|
结果：{{ getAnalyResult(selectPointInfo) }}
|
|
</div>
|
|
</div>
|
|
<AsyncImage
|
|
class="img-wrap"
|
|
fit="contain"
|
|
:src="selectPointInfo.imgAnalyse"
|
|
:supportPreview="false"
|
|
@click="onImagePreviewClicked(selectPointInfo.imgAnalyse, false)"
|
|
></AsyncImage>
|
|
</div>
|
|
</div>
|
|
<!-- 红外画框 -->
|
|
<div class="img-box" v-else>
|
|
<div class="img-wrap-box">
|
|
<div class="img-header-box">
|
|
<div class="img-header-left">红外测温</div>
|
|
<div class="img-header-right">
|
|
结果：{{ getAnalyResult(selectPointInfo) }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="img-wrap"
|
|
v-if="selectPointInfo.filter == 0"
|
|
@dblclick="
|
|
onImagePreviewClicked(selectPointInfo.imgAnalyse, true)
|
|
"
|
|
>
|
|
<AsyncImageFrame
|
|
class="img-wrap"
|
|
fit="contain"
|
|
:src="selectPointInfo.imgAnalyse"
|
|
:supportPreview="false"
|
|
></AsyncImageFrame>
|
|
</div>
|
|
<div
|
|
class="img-wrap"
|
|
v-else-if="selectPointInfo.filter == 1"
|
|
@dblclick="onImagePreviewClicked(selectPointInfo.img, true)"
|
|
>
|
|
<AsyncImageFrame
|
|
class="img-wrap"
|
|
fit="contain"
|
|
:src="selectPointInfo.img"
|
|
:supportPreview="false"
|
|
></AsyncImageFrame>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 红外画框结束 -->
|
|
<div class="img-footer">
|
|
<div class="img-footer-time">
|
|
采集时间：{{ selectPointInfo.patrolTime }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-right">
|
|
<!-- 基本信息 - 标题和内容在同一行 -->
|
|
<div class="title-row">
|
|
<div class="title-wrap">基本信息</div>
|
|
<div class="info-items">
|
|
<div class="info-item">
|
|
<span class="info-label">任务名称：</span>
|
|
<span class="info-value">{{ baseInfo.taskName || "--" }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">任务类型：</span>
|
|
<span class="info-value">{{
|
|
baseInfo.patrolTypeText || "--"
|
|
}}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">执行时间：</span>
|
|
<span class="info-value">{{ baseInfo.startTime || "--" }}</span>
|
|
</div>
|
|
<div class="info-item info-item-right">
|
|
<span class="info-label">耗时：</span>
|
|
<span class="info-value">{{ baseInfo.duration || "--" }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 结果信息区域 - 使用 taskInfo.summary 数据 -->
|
|
<div class="title-row">
|
|
<div class="title-wrap">结果信息</div>
|
|
<div class="info-items" v-if="hasSummaryData">
|
|
<div class="info-item">
|
|
<span class="info-label">基本总点位：</span>
|
|
<span class="info-value">{{ summaryData.totalPoint }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">已巡检：</span>
|
|
<span class="info-value">{{ summaryData.executedPoint }}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">未巡检：</span>
|
|
<span class="info-value">{{ summaryData.unexecutedPoint }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="query-box">
|
|
<el-form
|
|
class="result-query-box"
|
|
:model="queryParams"
|
|
ref="queryForm"
|
|
:inline="true"
|
|
>
|
|
<el-form-item label="点位名称">
|
|
<!-- 使用 el-autocomplete 替代 el-select -->
|
|
<el-autocomplete
|
|
v-model="queryParams.pointName"
|
|
:fetch-suggestions="querySearch"
|
|
placeholder="请输入或选择点位名称"
|
|
size="small"
|
|
clearable
|
|
style="width: 300px"
|
|
popper-class="custom-autocomplete-popper"
|
|
@select="handleSelectPointName"
|
|
@input="handleInputPointName"
|
|
@clear="handleClearPointName"
|
|
@keyup.enter.native="handleSearchClick"
|
|
ref="pointNameAutocomplete"
|
|
>
|
|
<template slot-scope="{ item }">
|
|
<span>{{ item.value }}</span>
|
|
</template>
|
|
</el-autocomplete>
|
|
</el-form-item>
|
|
<el-form-item label="点位状态">
|
|
<el-select
|
|
v-model="queryParams.pointStatus"
|
|
filterable
|
|
size="small"
|
|
clearable
|
|
placeholder="请选择状态"
|
|
style="width: 189px"
|
|
@change="handleSelectPointStatus"
|
|
@blur="handleBlurPointStatus"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in searchSourceData.listPointStatus"
|
|
:key="'pointStatus_' + index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="异常置顶">
|
|
<el-switch
|
|
v-model="queryParams.abnormal"
|
|
active-color="#247382"
|
|
inactive-color="#101d29"
|
|
:active-value="1"
|
|
:inactive-value="0"
|
|
@change="handleQuery"
|
|
:loading="loading"
|
|
>
|
|
</el-switch>
|
|
</el-form-item>
|
|
<el-form-item label-width="90px" label="">
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="small"
|
|
@click="handleSearchClick"
|
|
:loading="loading"
|
|
>搜索</el-button
|
|
>
|
|
<el-button
|
|
class="detail-reset-btn"
|
|
icon="el-icon-refresh"
|
|
size="small"
|
|
@click="resetQuery"
|
|
>重置</el-button
|
|
>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-download"
|
|
size="small"
|
|
@click="exportData"
|
|
:loading="loading"
|
|
>导出</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
|
|
<!-- 表格区域 - 点位名称、状态、纠偏三列 -->
|
|
<div class="table-card" ref="pointTableRef">
|
|
<el-table
|
|
class="card-table"
|
|
:data="pointDataList"
|
|
:height="tableHeight"
|
|
v-loading="loading"
|
|
@row-click="onPointTableRowClicked"
|
|
:row-class-name="setCurrentRowClassName"
|
|
border
|
|
:stripe="false"
|
|
>
|
|
<!-- 序号列 -->
|
|
<el-table-column
|
|
label="序号"
|
|
type="index"
|
|
width="50"
|
|
align="center"
|
|
:index="getIndex"
|
|
/>
|
|
<!-- 点位名称列 -->
|
|
<el-table-column
|
|
label="点位名称"
|
|
align="center"
|
|
prop="pointName"
|
|
min-width="150"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.pointName || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
label="读数"
|
|
align="center"
|
|
prop="resValue"
|
|
v-if="baseInfo.algName != 'correction'"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.filterDesc == '图片异常'">--</span>
|
|
<span v-else>{{
|
|
scope.row.algType &&
|
|
(scope.row.algType.includes("infra") ||
|
|
scope.row.algType === "meter" ||
|
|
scope.row.algType === "gis_meter" ||
|
|
scope.row.algType === "gis_meter2" ||
|
|
scope.row.algType === "correction" ||
|
|
scope.row.algType === "switch" ||
|
|
scope.row.algType === "isolator" ||
|
|
scope.row.algType === "xb")
|
|
? scope.row.resValue
|
|
: "--"
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 状态列 -->
|
|
<el-table-column
|
|
label="状态"
|
|
align="center"
|
|
prop="pointStatus"
|
|
min-width="120"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div
|
|
v-if="scope.row.pointStatus == 0"
|
|
class="point-danger"
|
|
style="color: #e93b3b"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #e93b3b"
|
|
></span>
|
|
异常
|
|
</div>
|
|
<div
|
|
v-else-if="scope.row.pointStatus == 1"
|
|
class="point-success"
|
|
style="color: #3CA600"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #3CA600"
|
|
></span>
|
|
正常
|
|
</div>
|
|
<div
|
|
v-else-if="scope.row.pointStatus == 2"
|
|
class="point-danger"
|
|
style="color: #e93b3b"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #e93b3b"
|
|
></span>
|
|
待人工确认
|
|
</div>
|
|
<div
|
|
v-else-if="scope.row.pointStatus == 3"
|
|
class="point-success"
|
|
style="color: #3CA600"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #3CA600"
|
|
></span>
|
|
忽略
|
|
</div>
|
|
<div
|
|
v-else-if="scope.row.pointStatus == 4"
|
|
class="point-danger"
|
|
style="color: #e93b3b"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #e93b3b"
|
|
></span>
|
|
跟踪
|
|
</div>
|
|
<div
|
|
v-else-if="scope.row.pointStatus == 5"
|
|
class="point-danger"
|
|
style="color: #e93b3b"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #e93b3b"
|
|
></span>
|
|
确认
|
|
</div>
|
|
<div
|
|
v-else-if="scope.row.pointStatus == 6"
|
|
class="point-danger"
|
|
style="color: #e93b3b"
|
|
>
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #e93b3b"
|
|
></span>
|
|
缺陷
|
|
</div>
|
|
<div v-else class="point-default" style="color: #7f8c9a">
|
|
<span
|
|
class="status-dot"
|
|
style="background-color: #7f8c9a"
|
|
></span>
|
|
--
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- 纠偏列 -->
|
|
<el-table-column
|
|
label="纠偏"
|
|
align="center"
|
|
width="120"
|
|
v-if="baseInfo.algName == 'correction'"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
v-if="
|
|
scope.row.resStatus === 3 || scope.row.resStatus === '3'
|
|
"
|
|
size="small"
|
|
type="primary"
|
|
@click.stop="getCorrection(scope.row)"
|
|
>纠偏</el-button
|
|
>
|
|
<AsyncImage
|
|
v-else-if="
|
|
scope.row.resStatus === 4 || scope.row.resStatus === '4'
|
|
"
|
|
class="table-img"
|
|
:src="scope.row.originalValue"
|
|
:supportPreview="false"
|
|
@click="onImagePreviewClicked(scope.row.originalValue)"
|
|
></AsyncImage>
|
|
<span v-else class="no-data">无需纠偏</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<CardPagination
|
|
v-show="pointTotal > 0"
|
|
:total="pointTotal"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getPointList"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<el-dialog
|
|
title="图片预览"
|
|
:visible.sync="showPreviewImages"
|
|
:close-on-click-modal="false"
|
|
:close-on-press-escape="false"
|
|
:destroy-on-close="true"
|
|
custom-class="card-dialog card-page task-image-preview-dialog"
|
|
width="90%"
|
|
append-to-body
|
|
>
|
|
<!-- 根据 isInfrared 判断使用哪个预览组件 -->
|
|
<ImagePreviewZoomTemperature
|
|
v-if="showPreviewImages && isInfraredPreview"
|
|
:imageUrls="showImgesUrls"
|
|
:selectImgPosition="previewImagePos"
|
|
:showTemperatureTool="true"
|
|
:imageName="currentImageName"
|
|
/>
|
|
<ImagePreviewZoom
|
|
v-else-if="showPreviewImages && !isInfraredPreview"
|
|
:imageUrls="showImgesUrls"
|
|
:selectImgPosition="previewImagePos"
|
|
:showTemperatureTool="false"
|
|
/>
|
|
</el-dialog>
|
|
</CardBox>
|
|
</template>
|
|
|
|
<script>
|
|
import CardBox from "../components/cardBox.vue";
|
|
import CardPagination from "../components/CardPagination/index.vue";
|
|
import debounce from "lodash.debounce";
|
|
import { taskInfoList, taskInfoExport } from "@/api/videosMonitor/index";
|
|
import { taskCorrection } from "@/api/screen/screen";
|
|
import ImagePreviewZoom from "@/views/cards/components/ImagePreviewZoom/index.vue";
|
|
import ImagePreviewZoomTemperature from "@/views/cards/components/ImagePreviewZoomTemperature/index.vue";
|
|
import { getPatrolPointName } from "@/api/analysis/index";
|
|
import moment from "moment";
|
|
|
|
export default {
|
|
name: "InspectionTaskDetail",
|
|
components: {
|
|
CardBox,
|
|
CardPagination,
|
|
ImagePreviewZoom,
|
|
ImagePreviewZoomTemperature,
|
|
},
|
|
props: {
|
|
info: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
currentImageName: "",
|
|
isInfraredPreview: false,
|
|
searchSourceData: {
|
|
listPointName: [],
|
|
listPointStatus: [],
|
|
},
|
|
baseInfo: {
|
|
taskName: "",
|
|
patrolTypeText: "",
|
|
startTime: "",
|
|
duration: "",
|
|
algName: "",
|
|
},
|
|
taskInfo: null,
|
|
tableHeight: null,
|
|
pointDataList: [],
|
|
loading: true,
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 20,
|
|
pointName: null,
|
|
pointStatus: null,
|
|
abnormal: 0,
|
|
taskPatrolledId: null,
|
|
posType: null,
|
|
lineId: null,
|
|
},
|
|
pointTotal: 0,
|
|
showPreviewImages: false,
|
|
showImgesUrls: [],
|
|
previewImagePos: 0,
|
|
selectPointInfo: {},
|
|
summaryData: {
|
|
totalPoint: 0,
|
|
executedPoint: 0,
|
|
unexecutedPoint: 0,
|
|
},
|
|
hasSummaryData: false,
|
|
};
|
|
},
|
|
created() {
|
|
if (!this.info) {
|
|
this.taskInfo = JSON.parse(sessionStorage.getItem("selectInfo"));
|
|
} else {
|
|
this.taskInfo = this.info;
|
|
}
|
|
|
|
this.parseSummaryFromTaskInfo();
|
|
|
|
this.setTableHeight = debounce(this.setTableHeight, 300);
|
|
window.addEventListener("resize", this.setTableHeight);
|
|
this.queryParams.taskPatrolledId = this.taskInfo.taskPatrolledId;
|
|
this.queryParams.posType = this.taskInfo.posType;
|
|
this.queryParams.lineId = this.taskInfo.lineId;
|
|
this.getPointList();
|
|
this.initBaseInfo();
|
|
},
|
|
mounted() {
|
|
this.setTableHeight();
|
|
this.fnGetPatrolPointName();
|
|
},
|
|
destroyed() {
|
|
this.setTableHeight.cancel();
|
|
window.removeEventListener("resize", this.setTableHeight);
|
|
},
|
|
methods: {
|
|
parseSummaryFromTaskInfo() {
|
|
this.hasSummaryData = false;
|
|
this.summaryData = {
|
|
totalPoint: 0,
|
|
executedPoint: 0,
|
|
unexecutedPoint: 0,
|
|
};
|
|
|
|
if (this.taskInfo && this.taskInfo.summary) {
|
|
try {
|
|
let summaryObj;
|
|
if (typeof this.taskInfo.summary === "string") {
|
|
summaryObj = JSON.parse(this.taskInfo.summary);
|
|
} else {
|
|
summaryObj = this.taskInfo.summary;
|
|
}
|
|
|
|
if (summaryObj && typeof summaryObj === "object") {
|
|
const hasValidData =
|
|
summaryObj.totalPoint !== undefined ||
|
|
summaryObj.executedPoint !== undefined ||
|
|
summaryObj.unexecutedPoint !== undefined;
|
|
|
|
if (hasValidData) {
|
|
this.summaryData = {
|
|
totalPoint:
|
|
summaryObj.totalPoint !== undefined
|
|
? summaryObj.totalPoint
|
|
: 0,
|
|
executedPoint:
|
|
summaryObj.executedPoint !== undefined
|
|
? summaryObj.executedPoint
|
|
: 0,
|
|
unexecutedPoint:
|
|
summaryObj.unexecutedPoint !== undefined
|
|
? summaryObj.unexecutedPoint
|
|
: 0,
|
|
};
|
|
this.hasSummaryData = true;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("解析 taskInfo.summary 失败：", error);
|
|
this.hasSummaryData = false;
|
|
}
|
|
}
|
|
},
|
|
|
|
calculateDuration(startTime, endTime) {
|
|
if (!startTime || !endTime) {
|
|
return "--";
|
|
}
|
|
try {
|
|
const start = moment(startTime);
|
|
const end = moment(endTime);
|
|
const durationMinutes = end.diff(start, "minutes");
|
|
if (durationMinutes < 0) {
|
|
return "--";
|
|
}
|
|
return `${durationMinutes}分钟`;
|
|
} catch (error) {
|
|
console.error("计算耗时出错:", error);
|
|
return "--";
|
|
}
|
|
},
|
|
|
|
initBaseInfo() {
|
|
let patrolTypeText = "";
|
|
const patrolType = Number(this.taskInfo.patrolType);
|
|
switch (patrolType) {
|
|
case 1:
|
|
patrolTypeText = "例行巡视";
|
|
break;
|
|
case 2:
|
|
patrolTypeText = "特殊巡视";
|
|
break;
|
|
case 3:
|
|
patrolTypeText = "专项巡视";
|
|
break;
|
|
case 4:
|
|
patrolTypeText = "自定义巡视";
|
|
break;
|
|
case 5:
|
|
patrolTypeText = "联动任务";
|
|
break;
|
|
case 6:
|
|
patrolTypeText = "静默任务";
|
|
break;
|
|
default:
|
|
patrolTypeText = "--";
|
|
}
|
|
|
|
const duration = this.calculateDuration(
|
|
this.taskInfo.startTime,
|
|
this.taskInfo.endTime
|
|
);
|
|
|
|
this.baseInfo = {
|
|
taskName: this.taskInfo.taskName || "--",
|
|
patrolTypeText: patrolTypeText,
|
|
startTime: this.taskInfo.startTime || "--",
|
|
duration: duration,
|
|
algName: this.taskInfo.algName,
|
|
};
|
|
},
|
|
|
|
// el-autocomplete 的查询方法
|
|
querySearch(queryString, cb) {
|
|
const list = this.searchSourceData.listPointName || [];
|
|
|
|
// 如果输入为空，返回所有建议
|
|
if (!queryString || queryString.trim() === '') {
|
|
const results = list.map(item => ({ value: item }));
|
|
cb(results);
|
|
return;
|
|
}
|
|
|
|
// 过滤匹配的建议
|
|
const results = list
|
|
.filter(item => item.toLowerCase().includes(queryString.toLowerCase()))
|
|
.map(item => ({ value: item }));
|
|
|
|
cb(results);
|
|
},
|
|
|
|
// 输入事件 - 用户输入时触发
|
|
handleInputPointName(value) {
|
|
// 直接更新 queryParams，允许用户自由编辑
|
|
if (value === null || value === undefined || value === '') {
|
|
this.queryParams.pointName = null;
|
|
} else {
|
|
this.queryParams.pointName = value;
|
|
}
|
|
},
|
|
|
|
// 选择事件 - 从下拉列表选择时触发
|
|
handleSelectPointName(item) {
|
|
// item 是选中的对象，包含 value 属性
|
|
const value = item && item.value ? item.value : item;
|
|
|
|
if (value && value.trim() !== '') {
|
|
this.queryParams.pointName = value;
|
|
console.log("选中的点位名称:", value);
|
|
// 执行查询
|
|
this.handleQuery();
|
|
}
|
|
},
|
|
|
|
// 清除事件
|
|
handleClearPointName() {
|
|
this.queryParams.pointName = null;
|
|
// 执行查询
|
|
this.$nextTick(() => {
|
|
this.handleQuery();
|
|
});
|
|
},
|
|
|
|
// 搜索按钮点击
|
|
handleSearchClick() {
|
|
// 直接使用 queryParams.pointName 的值
|
|
this.handleQuery();
|
|
},
|
|
|
|
handleSelectPointStatus(value) {
|
|
this.queryParams.pointStatus = value;
|
|
this.handleQuery();
|
|
},
|
|
handleBlurPointStatus() {
|
|
this.handleQuery();
|
|
},
|
|
|
|
setCurrentRowClassName({ row }) {
|
|
return row.lineId === this.selectPointInfo.lineId ? "current-row" : "";
|
|
},
|
|
|
|
fnGetPatrolPointName() {
|
|
const params = {
|
|
taskPatrolledId: this.queryParams.taskPatrolledId,
|
|
posType: this.queryParams.posType,
|
|
lineId: this.queryParams.lineId,
|
|
};
|
|
getPatrolPointName(params).then((res) => {
|
|
this.searchSourceData.listPointName = res.data?.listPointName || [];
|
|
this.searchSourceData.listPointStatus = res.data?.listPointStatus || [];
|
|
});
|
|
},
|
|
|
|
getIndex(index) {
|
|
return (
|
|
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
|
|
);
|
|
},
|
|
|
|
getAnalyResult(info) {
|
|
const specialAlgTypes = [
|
|
"meter",
|
|
"infra 1800",
|
|
"infra yu3",
|
|
"infra_camera",
|
|
"infra_camera_reverse",
|
|
"infrared2",
|
|
"gis_meter",
|
|
"gis_meter2",
|
|
];
|
|
const resValueStatuses = [1, 4, 5];
|
|
const status = Number(info.pointStatus);
|
|
if (info.algType === "switch") {
|
|
return info.resValue ? info.resValue : "--";
|
|
}
|
|
if (info.algType === "infrared") {
|
|
if (resValueStatuses.includes(status)) {
|
|
return info.resValue ? info.resValue : "--";
|
|
} else {
|
|
return info.filterDesc ? info.filterDesc : "--";
|
|
}
|
|
}
|
|
|
|
if (specialAlgTypes.includes(info.algType)) {
|
|
if (resValueStatuses.includes(status)) {
|
|
return info.resValue ? info.resValue : "--";
|
|
} else {
|
|
return info.desc ? info.desc : "--";
|
|
}
|
|
}
|
|
|
|
return info.desc ? info.desc : "--";
|
|
},
|
|
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.getPointList();
|
|
},
|
|
|
|
resetQuery() {
|
|
this.queryParams.pointName = null;
|
|
this.queryParams.pointStatus = null;
|
|
this.fnGetPatrolPointName();
|
|
this.handleQuery();
|
|
},
|
|
|
|
exportData() {
|
|
this.download(
|
|
"patrol/task/taskInfoExport",
|
|
{ ...this.queryParams },
|
|
`任务详情_${new Date().getTime()}.xlsx`
|
|
);
|
|
},
|
|
|
|
getPointList() {
|
|
this.loading = true;
|
|
taskInfoList(this.queryParams)
|
|
.then((res) => {
|
|
this.pointDataList = res.rows || [];
|
|
this.pointTotal = res.total || 0;
|
|
if (this.pointDataList.length > 0 && !this.selectPointInfo.lineId) {
|
|
this.selectPointInfo = this.pointDataList[0];
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
getCorrection(row) {
|
|
this.loading = true;
|
|
const data = {
|
|
pointId: row.pointId,
|
|
lineId: row.lineId,
|
|
taskPatrolId: row.taskPatrolId,
|
|
};
|
|
taskCorrection(data)
|
|
.then(() => {
|
|
this.$modal.msgSuccess("纠偏成功");
|
|
this.getPointList();
|
|
})
|
|
.catch(() => {
|
|
this.$modal.msgError("纠偏失败");
|
|
this.loading = false;
|
|
});
|
|
},
|
|
|
|
onPointTableRowClicked(row) {
|
|
this.selectPointInfo = row;
|
|
},
|
|
|
|
setTableHeight() {
|
|
if (this.$refs.pointTableRef) {
|
|
this.tableHeight = this.$refs.pointTableRef.clientHeight - 40;
|
|
}
|
|
},
|
|
|
|
onImagePreviewClicked(imgUrl, isInfrared = false) {
|
|
if (!imgUrl) return;
|
|
this.previewImagePos = 0;
|
|
this.showImgesUrls = [imgUrl];
|
|
this.isInfraredPreview = isInfrared;
|
|
this.showPreviewImages = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.page-container {
|
|
height: 100%;
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
::v-deep .card-box-title-box {
|
|
display: none !important;
|
|
}
|
|
.page-left {
|
|
flex: 1;
|
|
width: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #091318;
|
|
padding: 0 15px;
|
|
.img-title {
|
|
font-family: PingFang SC;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
color: #ffffff;
|
|
padding: 10px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.img-title:before {
|
|
content: "";
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 10px;
|
|
background-image: url("../assets/icon-title-1.png");
|
|
background-size: cover;
|
|
}
|
|
.img-box {
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
.img-wrap-box {
|
|
flex: 1;
|
|
height: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.img-header-box {
|
|
display: flex;
|
|
height: 35px;
|
|
align-items: center;
|
|
background-color: rgba(39, 129, 65, 0.7);
|
|
padding: 0 10px;
|
|
.img-header-left {
|
|
color: #fff;
|
|
}
|
|
.img-header-right {
|
|
flex: 1;
|
|
text-align: right;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.img-wrap {
|
|
flex: 1;
|
|
height: 0;
|
|
background-color: #0b2e3e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
::v-deep .el-image__error {
|
|
background-color: #0b2e3e;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.img-footer {
|
|
padding: 10px 0;
|
|
color: #d5e3e5;
|
|
display: flex;
|
|
.img-footer-time {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
.page-right {
|
|
flex: 4;
|
|
width: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.title-row {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
padding-bottom: 15px;
|
|
.title-wrap {
|
|
font-family: PingFang SC;
|
|
font-weight: bold;
|
|
font-size: 14px;
|
|
color: #40e5f0;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
.title-wrap:before {
|
|
content: "";
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 10px;
|
|
background-image: url("../assets/icon-title-2.png");
|
|
background-size: cover;
|
|
}
|
|
.info-items {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 24px;
|
|
flex: 1;
|
|
.info-item {
|
|
display: flex;
|
|
align-items: baseline;
|
|
.info-label {
|
|
color: #7f8c9a;
|
|
font-size: 14px;
|
|
margin-right: 8px;
|
|
}
|
|
.info-value {
|
|
color: #e1f5fe;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
.info-item-right {
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.query-box {
|
|
margin-bottom: 15px;
|
|
.result-query-box {
|
|
::v-deep .el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.table-card {
|
|
flex: 1;
|
|
height: 0;
|
|
::v-deep .el-card__body {
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.status-dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.point-danger,
|
|
.point-success,
|
|
.point-default {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.table-img {
|
|
width: 40px;
|
|
height: 40px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.no-data {
|
|
color: #7f8c9a;
|
|
}
|
|
|
|
// el-autocomplete 样式
|
|
::v-deep .el-autocomplete {
|
|
width: 189px;
|
|
|
|
.el-input__inner {
|
|
background-color: #1a2530 !important;
|
|
border-color: #34495e !important;
|
|
color: #c6d3ec !important;
|
|
|
|
&::placeholder {
|
|
color: #7b8ca8 !important;
|
|
}
|
|
}
|
|
|
|
.el-input__suffix {
|
|
color: #c6d3ec !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .current-row {
|
|
background-color: #124451 !important;
|
|
td {
|
|
background-color: #124451 !important;
|
|
border-color: #1a5969 !important;
|
|
}
|
|
&:hover td {
|
|
background-color: #165666 !important;
|
|
}
|
|
}
|
|
|
|
::v-deep .card-table {
|
|
.el-table__row.current-row {
|
|
color: #e1f5fe;
|
|
.cell {
|
|
color: #e1f5fe;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detail-reset-btn,
|
|
.detail-reset-btn:hover,
|
|
.detail-reset-btn:focus {
|
|
border: 1px solid transparent !important;
|
|
background:
|
|
linear-gradient(#01016b, #01016b) padding-box,
|
|
linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
|
|
color: #43c0ff !important;
|
|
}
|
|
</style>
|
|
|
|
<!-- 全局样式：用于 el-autocomplete 下拉菜单 -->
|
|
<style lang="scss">
|
|
.task-image-preview-dialog {
|
|
height: 90vh;
|
|
margin-top: 5vh !important;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
.el-dialog__header {
|
|
flex: 0 0 63px;
|
|
}
|
|
|
|
.el-dialog__body {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: auto;
|
|
padding: 12px;
|
|
overflow: hidden;
|
|
|
|
> .card-page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.custom-autocomplete-popper {
|
|
background-color: #222f3e !important;
|
|
border: 1px solid #34495e !important;
|
|
border-radius: 4px !important;
|
|
|
|
.el-scrollbar {
|
|
.el-scrollbar__view {
|
|
li {
|
|
background-color: #222f3e !important;
|
|
color: #c6d3ec !important;
|
|
font-size: 14px;
|
|
padding: 0 20px;
|
|
height: 34px;
|
|
line-height: 34px;
|
|
|
|
&:hover {
|
|
background-color: #2c3e50 !important;
|
|
}
|
|
|
|
&.highlighted {
|
|
background-color: #1a5969 !important;
|
|
color: #40e5f0 !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.popper__arrow {
|
|
border-bottom-color: #34495e !important;
|
|
|
|
&::after {
|
|
border-bottom-color: #222f3e !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|