438 lines
14 KiB
Vue
438 lines
14 KiB
Vue
<script lang="ts">
|
||
export default {
|
||
name: "patrolreport", // 巡视报告
|
||
};
|
||
</script>
|
||
<script setup lang="ts">
|
||
import Page from '@/components/Pagination/page.vue'
|
||
import { ref, onMounted, nextTick } from "vue";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import { getdata, DelData, exportExcel, getword, uploadTaskTodoById } from "@/api/patrolreport";
|
||
import { getSubstationBayByArea } from "@/api/task";
|
||
import { getDeviceByType } from "@/api/device";
|
||
import { getArea } from "@/api/monitordevice";
|
||
import Viewfile from '@/components/Viewfile/index.vue'
|
||
import { downloadFile } from '@/utils/index';
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import moment from 'moment'
|
||
const userStore = useUserStore();
|
||
//表格所需参数
|
||
const taskName = ref()
|
||
const date: any = ref([])
|
||
const info: any = ref({
|
||
size: 10,
|
||
current: 1,
|
||
stationCode: userStore.stationCode,
|
||
startDate: '',
|
||
endDate: '',
|
||
taskName: '',
|
||
type: '',
|
||
bayId: '',
|
||
areaId:'',
|
||
patrolType:'',
|
||
})
|
||
const total = ref()
|
||
const treeloading = ref(false)
|
||
//表格数据
|
||
const tableData: any = ref([])
|
||
const InspectionType: any = ref([])
|
||
const interval: any = ref([])
|
||
const area: any = ref([])
|
||
const xunshi: any = ref([])
|
||
function getData(val: any) {
|
||
info.value.taskName = taskName.value
|
||
if (date.value.length != 0) {
|
||
info.value.startDate = date.value[0]
|
||
info.value.endDate = date.value[1]
|
||
}
|
||
|
||
treeloading.value = true
|
||
const params = {
|
||
dictcode: 'InspectionType'
|
||
}
|
||
getDeviceByType(params).then((res: any) => {
|
||
InspectionType.value = res.data
|
||
});
|
||
getDeviceByType({dictcode:'PatrolEquipmentType'}).then((res: any) => {
|
||
xunshi.value = res.data
|
||
});
|
||
getSubstationBayByArea({ stationCode: userStore.stationCode }).then((res: any) => {
|
||
interval.value = res.data
|
||
})
|
||
getArea({ stationCode: userStore.stationCode }).then((res: any) => {
|
||
area.value = res.data
|
||
})
|
||
info.value['status'] = val
|
||
getdata(info.value).then((res: any) => {
|
||
treeloading.value = false
|
||
tableData.value = res.data.records
|
||
info.value.size = res.data.size
|
||
info.value.current = res.data.current
|
||
total.value = res.data.total
|
||
})
|
||
}
|
||
function currency(list: any, itemcode: any) {
|
||
let dictname = ''
|
||
list.forEach((element: any) => {
|
||
if (element.itemcode == itemcode) {
|
||
dictname = element.dictname
|
||
}
|
||
})
|
||
return dictname
|
||
}
|
||
//重置
|
||
function resetting() {
|
||
taskName.value = ''
|
||
date.value = []
|
||
let endDate = moment(new Date()).format('YYYY-MM-DD')
|
||
const now = new Date(endDate)
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth();
|
||
const day = now.getDate();
|
||
let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
|
||
date.value = [startDate, endDate]
|
||
info.value.type = ''
|
||
info.value.bayId = ''
|
||
|
||
getData(1)
|
||
}
|
||
//表格多选事件
|
||
const multipleSelection = ref([])
|
||
const handleSelectionChange = (val: any) => {
|
||
multipleSelection.value = val
|
||
}
|
||
//定义弹窗文字
|
||
const notificationText = ref('')
|
||
const index = ref()
|
||
const taskTodoId = ref()
|
||
//弹窗确定事件
|
||
function sure(index: any, taskTodoId: any) {
|
||
if (index == 0) {
|
||
const params = {
|
||
taskTodoId: taskTodoId
|
||
}
|
||
DelData(params).then((res: any) => {
|
||
if (res.code != 1) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "删除成功",
|
||
});
|
||
getData(0)
|
||
}
|
||
})
|
||
} else if (index == 1) {
|
||
// 上报
|
||
}
|
||
}
|
||
//多选删除
|
||
function delData() {
|
||
const idList: any = ref([])
|
||
multipleSelection.value.forEach((res: any) => {
|
||
idList.value.push(res.taskTodoId)
|
||
})
|
||
ElMessageBox.confirm("确定删除选中的巡视任务吗？", "提示信息", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(() => {
|
||
const params = {
|
||
taskTodoId: idList.value.toString()
|
||
}
|
||
DelData(params).then((res: any) => {
|
||
if (res.code != 1) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "删除成功",
|
||
});
|
||
getData(0)
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {
|
||
|
||
})
|
||
}
|
||
//多选上报
|
||
function Escalation() {
|
||
treeloading.value = true
|
||
const idList: any = ref([])
|
||
multipleSelection.value.forEach((res: any) => {
|
||
idList.value.push(res.taskTodoId)
|
||
})
|
||
uploadTaskTodoById({ taskTodoId: idList.value.toString() }).then((res: any) => {
|
||
if (res.code == 0) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "上报成功"
|
||
});
|
||
treeloading.value = false
|
||
}else{
|
||
treeloading.value = false
|
||
}
|
||
})
|
||
|
||
}
|
||
//删除
|
||
function delOneData(row: any) {
|
||
ElMessageBox.confirm("确定删除此巡视点位吗？", "提示信息", {
|
||
confirmButtonText: "确定",
|
||
cancelButtonText: "取消",
|
||
type: "warning",
|
||
}).then(() => {
|
||
const params = {
|
||
taskTodoId: row.taskTodoId
|
||
}
|
||
DelData(params).then((res: any) => {
|
||
if (res.code != 1) {
|
||
ElMessage({
|
||
type: "success",
|
||
message: "删除成功",
|
||
});
|
||
getData(0)
|
||
}
|
||
})
|
||
})
|
||
.catch(() => {})
|
||
}
|
||
//查看报告
|
||
const ViewfileUrl = ref("")
|
||
const title = ref('')
|
||
const isViewfile = ref(false)
|
||
function viewReport(row: any) {
|
||
title.value = row.taskName
|
||
ViewfileUrl.value = userStore.webApiBaseUrl + '/patroltasks/task-todo/exportTaskTodo?taskTodoId=' + row.taskTodoId
|
||
isViewfile.value = true
|
||
}
|
||
function CloseView() {
|
||
isViewfile.value = false
|
||
}
|
||
// 导出
|
||
function leadingOut(row: any) {
|
||
let params = {
|
||
taskTodoId: row.taskTodoId
|
||
};
|
||
treeloading.value = true
|
||
exportExcel(params).then((response: any) => {
|
||
treeloading.value = false
|
||
downloadFile(response, '巡视结果报告', 'docx')
|
||
}).catch(() => {
|
||
treeloading.value = false
|
||
});
|
||
}
|
||
onMounted(() => {
|
||
let endDate = moment(new Date()).format('YYYY-MM-DD')
|
||
const now = new Date(endDate)
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth();
|
||
const day = now.getDate();
|
||
let startDate = moment(new Date(year, month - 1, day)).format('YYYY-MM-DD')
|
||
date.value = [startDate, endDate]
|
||
getData(1)
|
||
})
|
||
</script>
|
||
<template>
|
||
<div style="padding:0 15px ;">
|
||
<div style="width:100%;height:17px"></div>
|
||
<div class="rightNav">
|
||
<div style="position: relative;display: flex;align-items: center; justify-content: space-between;">
|
||
<div style="display: flex;align-items: center;">
|
||
<div class="screenHomepage "><el-input v-model="taskName"
|
||
placeholder="请输入任务名称" @clear="getData(1)" @keyup.enter="getData(1)" clearable style="width: 170px;" /></div>
|
||
<div class="screenHomepage selType">
|
||
<el-select :teleported="false" :popper-append-to-body="false" v-model="info.type" class="m-2 selType"
|
||
placeholder="任务类型" @change="getData(1)" clearable>
|
||
<el-option v-for="item in InspectionType" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||
</el-select>
|
||
</div>
|
||
<div class="screenHomepage selType">
|
||
<el-select :teleported="false" :popper-append-to-body="false" v-model="info.bayId" class="m-2 selType"
|
||
placeholder="间隔" @change="getData(1)" clearable>
|
||
<el-option v-for="item in interval" :key="item.bayId" :label="item.bayName" :value="item.bayId" />
|
||
</el-select>
|
||
</div>
|
||
<div class="screenHomepage selType">
|
||
<el-select :teleported="false" :popper-append-to-body="false" v-model="info.areaId" class="m-2 selType"
|
||
placeholder="设备区域" @change="getData(1)" clearable>
|
||
<el-option v-for="item in area" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
|
||
</el-select>
|
||
</div><div class="screenHomepage selType">
|
||
<el-select :teleported="false" :popper-append-to-body="false" v-model="info.patrolType" class="m-2 selType"
|
||
placeholder="设备类型" @change="getData(1)" clearable>
|
||
<el-option v-for="item in xunshi" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||
</el-select>
|
||
</div>
|
||
<div style="margin-left: 10px;" class="screenHomepage">
|
||
<span style="font-size: 14px !important;color: #fff;">审核时间：</span>
|
||
<el-date-picker style="width: 300px;" v-model="date" type="daterange" range-separator="至"
|
||
start-placeholder="开始时间" popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||
end-placeholder="结束时间" :clearable="false" @change="getData(1)" />
|
||
</div>
|
||
<el-button class="searchButton" type="primary" @click="getData(1)">搜索</el-button>
|
||
<el-button class="searchButton" type="primary" @click="resetting()">重置</el-button>
|
||
</div>
|
||
<div>
|
||
<el-button class="searchButton" type="primary" @click="Escalation()" :disabled="multipleSelection.length == 0">上报</el-button>
|
||
<el-button class="searchButton" type="primary" @click="delData" :disabled="multipleSelection.length == 0">删除</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div style="position: relative;"> -->
|
||
<el-table :data="tableData" v-loading="treeloading"
|
||
style="width: 100%;margin:auto;position: relative;margin: 5px 0; height:calc(78vh); overflow: auto "
|
||
:header-cell-style="tableBg" stripe
|
||
@selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="30" align="center" />
|
||
<el-table-column type="index" align="center" label="序号" width="50px" />
|
||
<el-table-column prop="taskName" label="任务名称" />
|
||
<el-table-column prop="type" label="任务类型" width="140px">
|
||
<template #default="scope">
|
||
<span>{{ currency(InspectionType, scope.row.type) }}</span>
|
||
<!-- <span v-if="scope.row.type == 1">例行巡视</span>
|
||
<span v-else-if="scope.row.type == 2">特殊巡视</span>
|
||
<span v-else-if="scope.row.type == 3">专项巡视</span>
|
||
<span v-else-if="scope.row.type == 4">自定义巡视</span>
|
||
<span v-else>--</span> -->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="deviceSumnum" label="巡视点位总数量" align="center" />
|
||
<el-table-column label="巡视结果" align="center">
|
||
<template #default="scope" >
|
||
<span>成功：{{ scope.row.result.successCount }}；</span><span>失败：{{ scope.row.result.failCount }}</span><br />
|
||
<span>正常：{{ scope.row.result.normalCount }}；</span><span style="color: #FF3300;">异常：{{
|
||
scope.row.result.abnormalCount }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="startTime" label="巡视开始时间" />
|
||
<el-table-column prop="endTime" label="巡视结束时间" />
|
||
<el-table-column prop="cexamineUserName" label="审核人" width="100px"/>
|
||
<el-table-column prop="examineDate" label="审核时间" width="170px" align="center" />
|
||
<el-table-column label="操作" width="120px" align="center">
|
||
<template #default="scope">
|
||
<div style="display: flex;justify-content: space-around;align-items: center;">
|
||
<!-- <div class="button-style" @click="viewReport(scope.row)">查看报告</div> -->
|
||
<!-- <div class="button-style" @click="leadingOut(scope.row)">导出</div> -->
|
||
<!-- <div class="button-style" @click="delOneData(scope.row)">删除</div> -->
|
||
<img title="查看报告" src="@/assets/tableIcon/u6143.png" alt="" style="cursor: pointer;" @click="viewReport(scope.row)">
|
||
<img title="导出" src="@/assets/tableIcon/ht_daoc.png" alt="" style="cursor: pointer;" @click="leadingOut(scope.row)">
|
||
<img title="删除" src="@/assets/tableIcon/ht_sc.png" alt="" style="cursor: pointer;" @click="delOneData(scope.row)">
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div style="display: flex;justify-content: center;margin-top: 5px;">
|
||
<Page style="position: relative;z-index: 100;" :total="total" v-model:size="info.size"
|
||
v-model:current="info.current" @pagination="getData(1)"></Page>
|
||
</div>
|
||
<Viewfile v-if="isViewfile" :showTime="true" :title="title" :url="ViewfileUrl" :type="'docx'" :clientHeight="600"
|
||
@update="CloseView" />
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
</template>
|
||
<style scoped lang="scss">
|
||
.imgbg {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.searchButton {
|
||
// border: #059a67 solid 1px;
|
||
// background-color: #08503a;
|
||
// color: #00F9A2;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
|
||
|
||
.rightNav {
|
||
width: 100%;
|
||
height: calc(89vh);
|
||
// background-color: #131a25;
|
||
border: none;
|
||
border-radius: 3px;
|
||
padding: 10px 15px 0px;
|
||
box-sizing: border-box;
|
||
background: url(@/assets/navigation/ty_1614x988.png) ;
|
||
background-size: 100% 100%;
|
||
|
||
}
|
||
|
||
// 弹窗
|
||
.el-overlay {
|
||
position: fixed;
|
||
z-index: 2023;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 2000;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
overflow: auto;
|
||
|
||
.notification {
|
||
width: 400px;
|
||
height: 240px;
|
||
position: relative;
|
||
margin-left: 50%;
|
||
margin-top: 25%;
|
||
transform: translate(-50%, -50%);
|
||
|
||
.notification-title {
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 180px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.notification-body {
|
||
position: absolute;
|
||
bottom: 15px;
|
||
left: 0;
|
||
right: 0;
|
||
}
|
||
}
|
||
}
|
||
//按钮样式
|
||
|
||
.three-button {
|
||
width: 111px;
|
||
height: 41px;
|
||
background: url('@/assets/patrolmonitor/anniiu5.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-size: 14px;
|
||
color: #009BFF;
|
||
border: none;
|
||
|
||
:deep(.el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover) {
|
||
color: #009BFF !important;
|
||
background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
border: none !important;
|
||
}
|
||
|
||
&:focus {
|
||
color: #009BFF;
|
||
background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
&:hover {
|
||
border: none !important;
|
||
background: url('@/assets/patrolmonitor/anniiu6.png') no-repeat;
|
||
background-size: 100% 100%;
|
||
color: #009BFF;
|
||
}
|
||
}
|
||
</style>
|
||
|