Merge remote-tracking branch 'origin/master'
This commit is contained in:
weitang
commit
94b13ac2f7
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,297 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "NoHomologousAnalysis", // 非同源对比分析
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
|
||||
import { getNonHomologousAnalysis } from '@/api/NoHomologousAnalysis';
|
||||
|
||||
import { getMainEquipment, getBayType, getDeviceByType, } from "@/api/device";
|
||||
import moment from 'moment'
|
||||
const userStore = useUserStore();
|
||||
//获取表格数据
|
||||
//表格所需参数
|
||||
const date: any = ref([])
|
||||
const queryInfo: any = ref({
|
||||
stationCode: userStore.stationCode,
|
||||
taskName: "",
|
||||
mainDeviceName: "",
|
||||
componentName: "",
|
||||
recognitionType: "",
|
||||
})
|
||||
//表格数据
|
||||
const tableData: any = ref([])
|
||||
const interval: any = ref([])
|
||||
function getData() {
|
||||
let params: any = {
|
||||
stationCode: queryInfo.value.stationCode,
|
||||
taskName: queryInfo.value.taskName,
|
||||
mainDeviceName: queryInfo.value.mainDeviceName,
|
||||
componentName: queryInfo.value.componentName,
|
||||
recognitionType: queryInfo.value.recognitionType,
|
||||
}
|
||||
if (date.value) {
|
||||
params.startDate = date.value[0]
|
||||
params.endDate = date.value[1]
|
||||
}
|
||||
getNonHomologousAnalysis(params).then((res: any) => {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
for (let j = 0; j < res.data[i].resultList.length; j++) {
|
||||
res.data[i].resultList[j].smallFilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].resultList[j].defectFilePath)
|
||||
res.data[i].resultList[j].FilePathList = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].resultList[j].defectFilePath)
|
||||
res.data[i].resultList[j].tempfilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].resultList[j].filePath)
|
||||
res.data[i].resultList[j].srcList = [userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data[i].resultList[j].filePath)]
|
||||
}
|
||||
}
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
//重置
|
||||
function resetting() {
|
||||
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]
|
||||
queryInfo.value = {
|
||||
stationCode: userStore.stationCode,
|
||||
taskName: "",
|
||||
mainDeviceName: "",
|
||||
componentName: "",
|
||||
recognitionType: "",
|
||||
}
|
||||
|
||||
getData()
|
||||
}
|
||||
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()
|
||||
notification()
|
||||
})
|
||||
function notification() {
|
||||
// 识别类型
|
||||
recognition_type.value = []
|
||||
getDeviceByType({ dictcode: 'recognition_type' }).then((res: any) => {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
if (res.data[i].itemcode == '1' || res.data[i].itemcode == '2' || res.data[i].itemcode == '4') {
|
||||
recognition_type.value.push(res.data[i])
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
//识别类型
|
||||
const recognition_type = ref()
|
||||
</script>
|
||||
<template>
|
||||
<div style="padding: 60px 15px 10px;">
|
||||
<div class="main">
|
||||
<div style="height:45px;display: flex;align-items: center; justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div style="margin-right:10px;" class="screenHomepage">
|
||||
<el-input v-model="queryInfo.taskName" placeholder="请输入任务名称" @clear="getData" @keyup.enter="getData" clearable
|
||||
style="width: 170px;" />
|
||||
</div>
|
||||
<div style="margin-right:10px;" class="screenHomepage">
|
||||
<el-input v-model="queryInfo.mainDeviceName" placeholder="请输入主设备" @clear="getData" @keyup.enter="getData"
|
||||
clearable style="width: 170px;" />
|
||||
</div>
|
||||
<div class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.componentName" placeholder="请输入部件" @clear="getData" @keyup.enter="getData"
|
||||
clearable style="width: 170px;" />
|
||||
</div>
|
||||
<div class="screenHomepage">
|
||||
<el-select :teleported="false" :popper-append-to-body="false" v-model="queryInfo.recognitionType"
|
||||
class="mx-[10px] selType" placeholder="识别类型" @change="getData" clearable>
|
||||
<el-option v-for="item in recognition_type" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div style=" " class="screenHomepage">
|
||||
<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" />
|
||||
</div>
|
||||
<el-button class="searchButton" @click="getData">搜索</el-button>
|
||||
<el-button class="searchButton" @click="resetting()">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightNav">
|
||||
<el-scrollbar>
|
||||
<div class="listbox" v-for="(item, index) in tableData" :key="'a' + index">
|
||||
<div style="display: flex;align-items: center;margin-bottom: 15px;">
|
||||
<div class="NoHomologousAnalysis-title">{{ item.taskName }}</div>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<div class="listinformation" v-for="(items, indexs) in item.resultList" :key="'b' + indexs">
|
||||
<div style="width: 50px;text-align: center;">01</div>
|
||||
<div
|
||||
style="min-width: calc(100vw - 250px);display: flex;align-items: center;justify-content: space-between;">
|
||||
<div class="listname" style="width:18%">所属设备：{{ items.mainDeviceName }}</div>
|
||||
<div class="listname" style="width:15%">所属部件：{{ items.componentName }}</div>
|
||||
<div class="listname" style="width:27%">摄像机名称：{{ items.patroldeviceName }}</div>
|
||||
<div class="listname" style="width: 150px;">识别结果：
|
||||
<span v-if="items.valueType == 'meter' || items.valueType == 'infrared'">
|
||||
<span v-if="items.analysisResult == '异常'" style="color: red;font-size: 16px;font-weight: bold;"> {{
|
||||
items.value }} {{ items.unit }}</span>
|
||||
<span v-else> {{ items.value }} {{ items.unit }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="items.conf != null && items.conf != ''">{{ items.conf }}</span>
|
||||
<span v-else>--</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="listname" style="width: 150px;">分析结论：
|
||||
<span v-if="items.analysisResult == '正常'" style="color: rgb(0, 249, 162)">正常</span>
|
||||
<span v-if="items.analysisResult == '异常'"
|
||||
style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
|
||||
<span v-if="items.analysisResult == '设备检修'" style="color: rgb(0, 153, 255)">设备检修</span>
|
||||
<span v-if="items.analysisResult == '采集失败'" style="color: rgb(0, 153, 255)">采集失败</span>
|
||||
<span v-if="items.analysisResult == '识别失败'" style="color: rgb(0, 153, 255)">识别失败</span>
|
||||
<span v-if="items.analysisResult == '失败'" style="color: rgb(255, 189, 0)">失败</span>
|
||||
<span v-if="items.analysisResult == '成功'" style="color: rgb(0, 249, 162)">成功</span>
|
||||
<span v-if="items.analysisResult == '' || items.analysisResult == null">--</span>
|
||||
</div>
|
||||
<div class="listname" style="width: 60px;text-align: center;">
|
||||
<el-image v-if="items.defectFilePath != undefined && items.defectFilePath != ''"
|
||||
style="width: 30px; height: 30px;margin:auto" :src="items.smallFilePath" :zoom-rate="1.2"
|
||||
:preview-src-list="items.FilePathList" :preview-teleported="true" fit="cover" /><el-image
|
||||
v-else-if="items.filePath != undefined && items.filePath != ''"
|
||||
style="width: 30px; height: 30px;margin:auto" :src="items.tempfilePath" :zoom-rate="1.2"
|
||||
:preview-src-list="items.srcList" :preview-teleported="true" fit="cover" />
|
||||
<span v-else>--</span>
|
||||
</div>
|
||||
<div class="listname" style="width: 240px;">巡视时间：{{ items.patroldeviceDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 123px;
|
||||
height: 125px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
color: #FFFFFF;font-size: 16px;">
|
||||
差值：<span v-if="item.difference != null && item.difference != '' && item.difference <= item.alertvalue"
|
||||
style="color:#FFBD00;font-size: 20px;">{{ item.difference }}</span>
|
||||
<span v-if="item.difference != null && item.difference != '' && item.difference > item.alertvalue"
|
||||
style="color:red;font-size: 20px;">{{ item.difference }}</span>
|
||||
<span v-if="item.difference == null || item.difference == '' > item.alertvalue"
|
||||
style="font-size: 20px;">--</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tableData.length==0" class="none">暂无数据</div>
|
||||
</el-scrollbar>
|
||||
</div></div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100%;
|
||||
background: url(@/assets/\monitorsystem/xqfx_bj.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.searchButton {
|
||||
border: #009bff solid 1px;
|
||||
background-color: #009bff;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.rightNav {
|
||||
width: 100%;
|
||||
height: calc(100vh - 260px);
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
background: url(@/assets/MenuIcon/xsyue_bj.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent !important;
|
||||
box-shadow: (0 0 0 1px #225b7e) inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__wrap) {
|
||||
background-color: #17212e !important;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.listbox {
|
||||
width: 100%;
|
||||
height: 195px;
|
||||
border: 1px solid #2a3d4d;
|
||||
border-radius: 4px;
|
||||
background: #17212e;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.NoHomologousAnalysis-title {
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.listinformation {
|
||||
width: calc(100vw - 210px);
|
||||
height: 60px;
|
||||
margin-right: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: #ffffff;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
.listname {
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.listinformation:hover {
|
||||
border: 1px solid #009bff;
|
||||
}
|
||||
}
|
||||
.none{
|
||||
width: 100%;
|
||||
height: 195px;
|
||||
line-height: 195px;
|
||||
border: 1px solid #2a3d4d;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,346 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "NoInPhaseAnalysis", // 非同相对比分析
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { getDeviceByType } from "@/api/device";
|
||||
import { getNonCoherentAnalysis } from '@/api/NoHomologousAnalysis';
|
||||
|
||||
import moment from 'moment'
|
||||
const userStore = useUserStore();
|
||||
//获取表格数据
|
||||
//表格所需参数
|
||||
const queryInfo: any = ref({
|
||||
stationCode: userStore.stationCode,
|
||||
taskName: "",
|
||||
mainDeviceName: "",
|
||||
componentName: "",
|
||||
recognitionType: "",
|
||||
})
|
||||
const taskName = ref()
|
||||
const date: any = ref([])
|
||||
const info: any = ref({
|
||||
size: 10,
|
||||
current: 1,
|
||||
stationCode: userStore.stationCode,
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
taskName: '',
|
||||
type: '',
|
||||
bayId: ''
|
||||
})
|
||||
const treeloading = ref(false)
|
||||
//表格数据
|
||||
const tableData: any = ref([])
|
||||
function getData() {
|
||||
let params: any = {
|
||||
stationCode: queryInfo.value.stationCode,
|
||||
taskName: queryInfo.value.taskName,
|
||||
mainDeviceName: queryInfo.value.mainDeviceName,
|
||||
componentName: queryInfo.value.componentName,
|
||||
recognitionType: queryInfo.value.recognitionType,
|
||||
}
|
||||
if (date.value) {
|
||||
params.startDate = date.value[0]
|
||||
params.endDate = date.value[1]
|
||||
}
|
||||
getNonCoherentAnalysis(params).then((res: any) => {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
for (let j = 0; j < res.data[i].taskResultList.length; j++) {
|
||||
res.data[i].taskResultList[j].smallFilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].taskResultList[j].defectFilePath)
|
||||
res.data[i].taskResultList[j].FilePathList = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].taskResultList[j].defectFilePath)
|
||||
res.data[i].taskResultList[j].tempfilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].taskResultList[j].filePath)
|
||||
res.data[i].taskResultList[j].srcList = [userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data[i].taskResultList[j].filePath)]
|
||||
}
|
||||
}
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
//重置
|
||||
function resetting() {
|
||||
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]
|
||||
queryInfo.value = {
|
||||
stationCode: userStore.stationCode,
|
||||
taskName: "",
|
||||
mainDeviceName: "",
|
||||
componentName: "",
|
||||
recognitionType: "",
|
||||
}
|
||||
|
||||
getData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
notification()
|
||||
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]
|
||||
|
||||
nextTick(() => {
|
||||
getData()
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
const DevicePhase: any = ref([])
|
||||
function notification() {
|
||||
// 识别类型
|
||||
recognition_type.value = []
|
||||
getDeviceByType({ dictcode: 'recognition_type' }).then((res: any) => {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
if (res.data[i].itemcode == '1' || res.data[i].itemcode == '2' || res.data[i].itemcode == '4') {
|
||||
recognition_type.value.push(res.data[i])
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
getDeviceByType({ dictcode: 'DevicePhase' }).then((res: any) => {
|
||||
DevicePhase.value = res.data
|
||||
|
||||
})
|
||||
}
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
//识别类型
|
||||
const recognition_type = ref()
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div style="padding: 60px 15px 10px;">
|
||||
<div class="main">
|
||||
<div style="height:45px;position: relative;display: flex;align-items: center; justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div style="margin-right:10px;" class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.taskName" placeholder="请输入任务名称" @clear="getData" @keyup.enter="getData" clearable
|
||||
style="width: 170px;" />
|
||||
</div>
|
||||
<div style="margin-right:10px;" class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.mainDeviceName" placeholder="请输入主设备" @clear="getData" @keyup.enter="getData"
|
||||
clearable style="width: 170px;" />
|
||||
</div>
|
||||
<div style="margin-right:10px;" class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.componentName" placeholder="请输入部件" @clear="getData" @keyup.enter="getData"
|
||||
clearable style="width: 170px;" />
|
||||
</div>
|
||||
<div class="screenHomepage selType">
|
||||
<el-select :teleported="false" :popper-append-to-body="false" v-model="queryInfo.recognitionType"
|
||||
class="mr-[10px] selType" placeholder="识别类型" @change="getData" clearable>
|
||||
<el-option v-for="item in recognition_type" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="screenHomepage">
|
||||
<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" />
|
||||
</div>
|
||||
<el-button class="searchButton" @click="getData">搜索</el-button>
|
||||
<el-button class="searchButton" @click="resetting()">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightNav">
|
||||
<el-scrollbar>
|
||||
<div class="listbox" v-for="(item, index) in tableData" :key="'a' + index">
|
||||
<div style="display: flex;align-items: center;margin-bottom: 15px;">
|
||||
<div class="NoHomologousAnalysis-line"></div>
|
||||
<div class="NoHomologousAnalysis-title">{{ item.name }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="listinformationheader">
|
||||
<div style="width: 80px;text-align: center;">序号</div>
|
||||
<div class="listname" style="width:60px">相位</div>
|
||||
<div
|
||||
style="min-width: calc(100vw - 735px);display: flex;align-items: center;justify-content: space-between;">
|
||||
<div class="listname" style="width:33.3%">设备名称</div>
|
||||
<div class="listname" style="width:33.3%">部件名称</div>
|
||||
<div class="listname" style="width:33.3%">摄像机名称</div>
|
||||
</div>
|
||||
<div class="listname" style="min-width: 150px;">巡视结果</div>
|
||||
<div class="listname" style="min-width: 150px;">巡视结论</div>
|
||||
<div class="listname" style="min-width: 80px;text-align: center;">巡视图片</div>
|
||||
<div class="listname" style="min-width: 180px;">巡视时间</div>
|
||||
</div>
|
||||
<div class="listinformation" v-for="(items, indexs) in item.taskResultList" :key="'b' + indexs">
|
||||
<div style="width: 80px;text-align: center;">{{ '0' + (indexs + 1) }}</div>
|
||||
<div class="listname" style="width:60px">
|
||||
<span>{{ currency(DevicePhase, items.phase) }}</span>
|
||||
</div>
|
||||
<div
|
||||
style="min-width: calc(100vw - 735px);display: flex;align-items: center;justify-content: space-between;">
|
||||
<div class="listname" style="width:33.3%">{{ items.mainDeviceName }}</div>
|
||||
<div class="listname" style="width:33.3%">{{ items.componentName }}</div>
|
||||
<div class="listname" style="width:33.3%">{{ items.patroldeviceName }}</div>
|
||||
</div>
|
||||
<div class="listname" style="min-width: 150px;">
|
||||
<span v-if="items.valueType == 'meter' || items.valueType == 'infrared'">
|
||||
<span v-if="items.analysisResult == '异常'" style="color: red;font-size: 16px;font-weight: bold;"> {{
|
||||
items.value }} {{ items.unit }}</span>
|
||||
<span v-else style="color: #00F9A2;"> {{ items.value }} {{ items.unit }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="items.conf != null && items.conf != ''" style="color: #00F9A2;">{{ items.conf }}</span>
|
||||
<span v-else>--</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="listname" style="min-width: 150px;">
|
||||
<span v-if="items.analysisResult == '正常'" style="color: rgb(0, 249, 162)">正常</span>
|
||||
<span v-if="items.analysisResult == '异常'"
|
||||
style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
|
||||
<span v-if="items.analysisResult == '设备检修'" style="color: rgb(0, 153, 255)">设备检修</span>
|
||||
<span v-if="items.analysisResult == '采集失败'" style="color: rgb(0, 153, 255)">采集失败</span>
|
||||
<span v-if="items.analysisResult == '识别失败'" style="color: rgb(0, 153, 255)">识别失败</span>
|
||||
<span v-if="items.analysisResult == '失败'" style="color: rgb(255, 189, 0)">失败</span>
|
||||
<span v-if="items.analysisResult == '成功'" style="color: rgb(0, 249, 162)">成功</span>
|
||||
<span v-if="items.analysisResult == '' || items.analysisResult == null">--</span>
|
||||
</div>
|
||||
<div class="listname" style="min-width: 80px;text-align: center;">
|
||||
<el-image v-if="items.defectFilePath != undefined && items.defectFilePath != ''"
|
||||
style="width: 30px; height: 30px;margin:auto" :src="items.smallFilePath" :zoom-rate="1.2"
|
||||
:preview-src-list="items.FilePathList" :preview-teleported="true" fit="cover" /><el-image
|
||||
v-else-if="items.filePath != undefined && items.filePath != ''"
|
||||
style="width: 30px; height: 30px;margin:auto" :src="items.tempfilePath" :zoom-rate="1.2"
|
||||
:preview-src-list="items.srcList" :preview-teleported="true" fit="cover" />
|
||||
<span v-else>--</span>
|
||||
</div>
|
||||
<div class="listname" style="min-width: 180px;">{{ items.patroldeviceDate }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tableData.length == 0" class="none">暂无数据</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100%;
|
||||
background: url(@/assets/\monitorsystem/xqfx_bj.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
border: #009bff solid 1px;
|
||||
background-color: #009bff;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.rightNav {
|
||||
width: 100%;
|
||||
height: calc(100vh - 260px);
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
position: relative;
|
||||
background: url(@/assets/MenuIcon/xsyue_bj.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent !important;
|
||||
box-shadow: (0 0 0 1px #225b7e) inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__wrap) {
|
||||
background-color: #17212e !important;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.listbox {
|
||||
width: 100%;
|
||||
border: 1px solid #2a3d4d;
|
||||
border-radius: 4px;
|
||||
background: #17212e;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.NoHomologousAnalysis-title {
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.listinformationheader {
|
||||
width: calc(100vw - 80px);
|
||||
height: 44px;
|
||||
margin-right: 10px;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
color: #B5D7FF;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
margin-bottom: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
.listname {
|
||||
padding: 0 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.listinformation {
|
||||
width: calc(100vw - 80px);
|
||||
height: 44px;
|
||||
margin-right: 10px;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
border: 1px solid transparent;
|
||||
|
||||
.listname {
|
||||
padding: 0 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.listinformation:hover {
|
||||
border: 1px solid #009bff;
|
||||
}
|
||||
}
|
||||
|
||||
.none {
|
||||
width: 100%;
|
||||
height: 195px;
|
||||
line-height: 195px;
|
||||
border: 1px solid #2a3d4d;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
}</style>
|
||||
@ -1,417 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "NoInPhaseAnalysis", // 趋势变化对比分析
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import Page from '@/components/Pagination/page.vue'
|
||||
import { ref, onMounted, } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import moment from 'moment'
|
||||
import * as echarts from 'echarts';
|
||||
import { getTrendChangeDeviceList, getTrendChangeAnalysisList } from '@/api/NoHomologousAnalysis';
|
||||
|
||||
const userStore = useUserStore();
|
||||
//获取表格数据
|
||||
//表格所需参数
|
||||
const date: any = ref([])
|
||||
const total: any = ref(0)
|
||||
const tableRowClassName = ({
|
||||
row,
|
||||
rowIndex,
|
||||
}: {
|
||||
row: any
|
||||
rowIndex: number
|
||||
}) => {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return 'warning-row'
|
||||
} else if (rowIndex % 2 === 1) {
|
||||
return 'success-row'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
const dataloading = ref(false)
|
||||
const queryInfo: any = ref({
|
||||
stationCode: userStore.stationCode,
|
||||
size: 10,
|
||||
current: 1,
|
||||
deviceName: "",
|
||||
mainDeviceName: "",
|
||||
componentName: "",
|
||||
recognitionType: "",
|
||||
})
|
||||
const tableData: any = ref([])
|
||||
function getData() {
|
||||
let params: any = {
|
||||
stationCode: queryInfo.value.stationCode,
|
||||
deviceName: queryInfo.value.deviceName,
|
||||
mainDeviceName: queryInfo.value.mainDeviceName,
|
||||
componentName: queryInfo.value.componentName,
|
||||
recognitionType: queryInfo.value.recognitionType,
|
||||
size: queryInfo.value.size,
|
||||
current: queryInfo.value.current
|
||||
}
|
||||
if (date.value) {
|
||||
params.startDate = date.value[0]
|
||||
params.endDate = date.value[1]
|
||||
}
|
||||
getTrendChangeDeviceList(params).then((res: any) => {
|
||||
dataloading.value = false
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
})
|
||||
}
|
||||
//重置
|
||||
function resetting() {
|
||||
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]
|
||||
queryInfo.value = {
|
||||
stationCode: userStore.stationCode,
|
||||
size: 10,
|
||||
current: 1,
|
||||
deviceName: "",
|
||||
mainDeviceName: "",
|
||||
componentName: "",
|
||||
recognitionType: "",
|
||||
}
|
||||
getData()
|
||||
}
|
||||
function returnClick(row: any) {
|
||||
isMap.value = false
|
||||
myChart = null
|
||||
}
|
||||
function viewClick(row: any) {
|
||||
isMap.value = true
|
||||
let params: any = {
|
||||
deviceId: row.deviceId
|
||||
}
|
||||
if (date.value) {
|
||||
params.startDate = date.value[0]
|
||||
params.endDate = date.value[1]
|
||||
}
|
||||
getTrendChangeAnalysisList(params).then((res: any) => {
|
||||
contrastInfo.value = {
|
||||
deviceName: row.deviceName,
|
||||
max: res.data.max,
|
||||
min: res.data.min,
|
||||
difference: res.data.difference,
|
||||
}
|
||||
option.value.xAxis.data = []
|
||||
option.value.series[0].data = []
|
||||
option.value.xAxis.data = res.data.date
|
||||
option.value.series[0].data = res.data.deviceList
|
||||
|
||||
option.value.series[0].markLine.data[0].yAxis = Number(res.data.lowerValue)
|
||||
option.value.series[0].markLine.data[1].yAxis = Number(res.data.upperValue)
|
||||
|
||||
option.value.visualMap.pieces[0].min = Number(res.data.lowerValue)
|
||||
option.value.visualMap.pieces[0].max = Number(res.data.upperValue)
|
||||
setTimeout(() => {
|
||||
myChart = echarts.init(document.getElementById("myChartId") as HTMLDivElement);
|
||||
myChart.setOption(option.value)
|
||||
}, 50)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
let myChart: any = null
|
||||
const option: any = ref({
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: '20',
|
||||
left: '50',
|
||||
right: '50',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: [],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(202,237,255,1)',
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 16,
|
||||
color: '#FFCC00'
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
show: true,
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true, //是否显示刻度线
|
||||
lineStyle: {
|
||||
color: 'rgba(202,237,255,1)',
|
||||
type: 'solid',
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [],
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
symbolSize: 10,
|
||||
markLine: {
|
||||
silent: true,
|
||||
lineStyle: {
|
||||
color: 'red'
|
||||
},
|
||||
data: [
|
||||
|
||||
{
|
||||
yAxis: 0.15
|
||||
},
|
||||
{
|
||||
yAxis: 0.35
|
||||
}
|
||||
]
|
||||
}
|
||||
}],
|
||||
visualMap:
|
||||
{
|
||||
type: 'piecewise',
|
||||
show: false,
|
||||
dimension: 1,
|
||||
seriesIndex: 0,
|
||||
pieces: [
|
||||
{
|
||||
// 不指定 min，表示 min 为无限大（-Infinity）。
|
||||
min: 0.15, // 没有设置最小值，表明当前范围 [-Infinity, max] 变色
|
||||
max: 0.35,
|
||||
color: 'blue'
|
||||
}
|
||||
],
|
||||
outOfRange: { // 在选中范围外 的视觉元素，这里设置在正常范围内的图形颜色
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
// visualMap: {
|
||||
// top: 50,
|
||||
// right: 10,
|
||||
// pieces: [
|
||||
// {
|
||||
// gt: 0,
|
||||
// lte: 50,
|
||||
// color: '#93CE07'
|
||||
// },
|
||||
// {
|
||||
// gt: 50,
|
||||
// lte: 100,
|
||||
// color: '#FBDB0F'
|
||||
// },
|
||||
// {
|
||||
// gt: 100,
|
||||
// lte: 150,
|
||||
// color: '#FC7D02'
|
||||
// },
|
||||
// {
|
||||
// gt: 150,
|
||||
// lte: 200,
|
||||
// color: '#FD0100'
|
||||
// },
|
||||
// {
|
||||
// gt: 200,
|
||||
// lte: 300,
|
||||
// color: '#AA069F'
|
||||
// },
|
||||
// {
|
||||
// gt: 300,
|
||||
// color: '#AC3B2A'
|
||||
// }
|
||||
// ],
|
||||
// outOfRange: {
|
||||
// color: '#999'
|
||||
// }
|
||||
// },
|
||||
})
|
||||
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()
|
||||
|
||||
window.onresize = function () { // 自适应大小
|
||||
if (myChart != null) {
|
||||
myChart.resize();
|
||||
}
|
||||
|
||||
};
|
||||
})
|
||||
const isMap = ref(false)
|
||||
const contrastInfo: any = ref({})
|
||||
</script>
|
||||
<template>
|
||||
<div style="padding: 60px 15px 10px;">
|
||||
<div class="main">
|
||||
<div style="height:45px;position: relative;display: flex;align-items: center; justify-content: space-between;"
|
||||
v-if="isMap == false">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div style="margin-right:10px ;" class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.deviceName" placeholder="请输入点位名称" @clear="getData" @keyup.enter="getData" clearable
|
||||
style="width: 170px;" />
|
||||
</div>
|
||||
<div style="margin-right:10px;" class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.mainDeviceName" placeholder="请输入主设备" @clear="getData" @keyup.enter="getData"
|
||||
clearable style="width: 170px;" />
|
||||
</div>
|
||||
<div style="margin-right:10px;" class="screenHomepage ">
|
||||
<el-input v-model="queryInfo.componentName" placeholder="请输入部件" @clear="getData" @keyup.enter="getData"
|
||||
clearable style="width: 170px;" />
|
||||
</div>
|
||||
<div class="screenHomepage">
|
||||
<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" />
|
||||
</div>
|
||||
<el-button class="searchButton" @click="getData">搜索</el-button>
|
||||
<el-button class="searchButton" @click="resetting()">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rightNav" v-if="isMap == false">
|
||||
<el-table :data="tableData" :row-class-name="tableRowClassName" class="PatrolMonitoring" v-loading="dataloading"
|
||||
style="width: 100%;margin:auto;position: relative;height:calc(100% - 35px); overflow: auto "
|
||||
:header-cell-style="{ background: '#253b51', color: '#B5D7FF', height: '43px' }">
|
||||
<el-table-column type="index" align="center" label="序号" width="80px" />
|
||||
<el-table-column prop="deviceName" label="点位名称" />
|
||||
<el-table-column prop="mainDeviceName" label="主设备名称" />
|
||||
<el-table-column prop="componentName" label="部件名称" />
|
||||
<el-table-column label="操作" width="200px" align="center">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<div class="button-style" @click="viewClick(scope.row)">查看详情</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="display: flex;justify-content: center;margin-top: 10px;">
|
||||
<Page style="position: relative;z-index: 100;" :total="total" v-model:size="queryInfo.size" :jumper="'hide'"
|
||||
v-model:current="queryInfo.current" @pagination="getData"></Page>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightNav" style="height:calc(100vh - 205px);padding-top: 0;margin-top:0;" v-else>
|
||||
<div
|
||||
style="display: flex;align-items: center;justify-content: space-between; flex-wrap: wrap;padding-bottom: 10px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div class="NoInPhaseAnalysis-title">分析结果</div>
|
||||
</div>
|
||||
<div class="button-style" @click="returnClick">返回</div>
|
||||
</div>
|
||||
<img src="@/assets/monitorsystem/xqfx_bj1.png" style="margin-bottom: 20px;" alt="">
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;justify-content:space-between ;padding: 0 40px;">
|
||||
<div style="font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #FFFFFF;
|
||||
font-size: 24px;">
|
||||
{{ contrastInfo.deviceName }}
|
||||
</div>
|
||||
<div style="font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;">
|
||||
<span>最大值：</span>
|
||||
<span style="font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #FF3300;">{{ contrastInfo.max }}</span>
|
||||
<span style="padding-left: 40px;">最小值：</span>
|
||||
<span style="font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
color: #00F9A2;">{{ contrastInfo.min }}</span>
|
||||
<span style="padding-left: 40px;">差值：</span>
|
||||
<span style="font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 28px;">{{ contrastInfo.difference }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="myChartId" style="width: 100%;height:calc(100% - 85px);"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.main {
|
||||
width: 100%;
|
||||
background: url(@/assets/\monitorsystem/xqfx_bj.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
.searchButton {
|
||||
border: #009bff solid 1px;
|
||||
background-color: #009bff;
|
||||
color: #fff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.rightNav {
|
||||
width: 100%;
|
||||
height: calc(100vh - 260px);
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-table__body-wrapper) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
--el-table-row-hover-bg-color: transparent !important;
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-bg-color: transparent !important;
|
||||
}
|
||||
|
||||
:deep(.el-table__empty-text) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: transparent !important;
|
||||
box-shadow: (0 0 0 1px #225b7e) inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__inner) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
:deep(.el-select-dropdown__wrap) {
|
||||
background-color: #17212e !important;
|
||||
}
|
||||
|
||||
:deep(.el-date-editor .el-range-input) {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.NoInPhaseAnalysis-title {
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -1,926 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "dataanalysis", // 数据对比分析
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { getSubstationMainDeviceTree, getDeviceByMainDevice, getAnalysisCurve, getTaskResultList, exportTaskResultList, previewTaskResultList } from "@/api/dataanalysis/index";
|
||||
import { getDeviceByType } from "@/api/device";
|
||||
import { Search } from '@element-plus/icons-vue'
|
||||
import * as echarts from 'echarts';
|
||||
import moment from 'moment'
|
||||
import { downloadFile } from '@/utils/index';
|
||||
import Page from '@/components/Pagination/page.vue'
|
||||
import Viewfile from '@/components/Viewfile/index.vue'
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
const userStore = useUserStore();
|
||||
function getData() {
|
||||
getInit()
|
||||
}
|
||||
const mainDeviceName = ref("")
|
||||
const treeData: any = ref([])
|
||||
function getInit() {
|
||||
const params = {
|
||||
stationCode: userStore.stationCode,
|
||||
mainDeviceName: mainDeviceName.value
|
||||
}
|
||||
getSubstationMainDeviceTree(params).then((res: any) => {
|
||||
treeData.value = res.data
|
||||
})
|
||||
}
|
||||
function resetting() {
|
||||
queryInfo.value.meterType = MeterType.value
|
||||
queryInfo.value.recognitionType = recognitionType.value
|
||||
queryInfo.value.current = 1
|
||||
queryInfo.value.size = 10
|
||||
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')
|
||||
dateArr.value = [startDate, endDate]
|
||||
getByMainDevice()
|
||||
}
|
||||
const dateArr: any = ref([])
|
||||
const queryInfo: any = ref({
|
||||
meterType: "",
|
||||
recognitionType: "",
|
||||
current: 1, // 当前页
|
||||
size: 10, // 页大小
|
||||
})
|
||||
function getByMainDevice() { // 获取巡视点位
|
||||
tableData.value = []
|
||||
const params = {
|
||||
mainDeviceId: mainDeviceId.value.join(','),
|
||||
meterType: queryInfo.value.meterType,
|
||||
recognitionType: queryInfo.value.recognitionType,
|
||||
startDate: "",
|
||||
endDate: ""
|
||||
}
|
||||
if (dateArr.value != null && dateArr.value.length != 0) {
|
||||
params.startDate = dateArr.value[0]
|
||||
params.endDate = dateArr.value[1]
|
||||
}
|
||||
if (mainDeviceId.value.length == 0) {
|
||||
deviceId.value = []
|
||||
pointList.value = []
|
||||
myChart.clear()
|
||||
return
|
||||
}
|
||||
getDeviceByMainDevice(params).then((res: any) => {
|
||||
paramChart.value.xAxis.data = []
|
||||
paramChart.value.series = []
|
||||
paramChart.value.legend.data = []
|
||||
if (res != undefined && res.code == '0') {
|
||||
let deviceIds: any = []
|
||||
for (let i = 0; i < deviceId.value.length; i++) {
|
||||
for (let j = 0; j < res.data.length; j++) {
|
||||
if (deviceId.value[i] == res.data[j].deviceId) {
|
||||
deviceIds.push(deviceId.value[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
deviceId.value = deviceIds
|
||||
if (deviceId.value.length != 0) {
|
||||
Eacherstable(deviceId.value)
|
||||
getResultData()
|
||||
} else {
|
||||
myChart.clear()
|
||||
}
|
||||
pointList.value = res.data
|
||||
} else {
|
||||
deviceId.value = []
|
||||
pointList.value = []
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
interface Tree {
|
||||
id: string
|
||||
label: string
|
||||
children?: Tree[]
|
||||
}
|
||||
const defaultprops = {
|
||||
label: "mainDeviceName",
|
||||
}
|
||||
|
||||
const currentNodeKey = ref("")
|
||||
const MeterTypeList: any = ref([]) // 表计类型
|
||||
const recognitionType: any = ref("") // 表计类型
|
||||
const MeterType: any = ref("") // 识别类型
|
||||
const recognitionTypeList: any = ref([]) // 识别类型
|
||||
function getDict() {
|
||||
const paramstype = {
|
||||
dictcode: 'recognition_type'
|
||||
}
|
||||
getDeviceByType(paramstype).then((res: any) => {
|
||||
recognitionTypeList.value = []
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
if (res.data[i].custom1 == '数值分析') {
|
||||
recognitionTypeList.value.push(res.data[i])
|
||||
}
|
||||
}
|
||||
if (recognitionTypeList.value[0].itemcode != undefined) {
|
||||
queryInfo.value.recognitionType = recognitionTypeList.value[0].itemcode
|
||||
recognitionType.value = recognitionTypeList.value[0].itemcode
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
const paramstypes = {
|
||||
dictcode: 'MeterType'
|
||||
}
|
||||
getDeviceByType(paramstypes).then((res: any) => {
|
||||
MeterTypeList.value = res.data
|
||||
queryInfo.value.meterType = res.data[0].itemcode
|
||||
MeterType.value = MeterTypeList.value[0].itemcode
|
||||
})
|
||||
getDeviceByType({ dictcode: 'exportFields' }).then((res: any) => {
|
||||
for (let i = 0; i < res.data.length; i++)
|
||||
checkList.value.push(res.data[i].itemcode + '-' + res.data[i].dictname)
|
||||
keyData.value = res.data
|
||||
})
|
||||
}
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
function handleNodeClick(data: Tree, node: any) {
|
||||
}
|
||||
const handleCheckChange = (
|
||||
data: Tree,
|
||||
checked: boolean,
|
||||
indeterminate: boolean
|
||||
) => {
|
||||
}
|
||||
|
||||
const mainDeviceId: any = ref([])
|
||||
function currentChecked(nodeObj: any, SelectedObj: any) {
|
||||
mainDeviceId.value = []
|
||||
let ids = SelectedObj.checkedKeys.concat(SelectedObj.halfCheckedKeys) as any[]
|
||||
for (let i = 0; i < ids.length; i++) {
|
||||
if (ids[i] != undefined) {
|
||||
mainDeviceId.value.push(ids[i])
|
||||
}
|
||||
}
|
||||
getByMainDevice()
|
||||
}
|
||||
const checkAll = ref(false)
|
||||
const isIndeterminate = ref(false)
|
||||
const pointList: any = ref([])
|
||||
const handleCheckAllChange = (val: boolean) => {
|
||||
deviceId.value = val ? pointList : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
let myChart: any = null
|
||||
|
||||
let paramChart: any = ref({
|
||||
legend: {
|
||||
data: [],
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#ffffff',
|
||||
},
|
||||
},
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
// saveAsImage: {}
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",//Y轴内容文字颜色
|
||||
},
|
||||
},
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {//y轴文字的配置
|
||||
textStyle: {
|
||||
color: "#ffffff",//Y轴内容文字颜色
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
series: [],
|
||||
})
|
||||
function dateChang() {
|
||||
getByMainDevice()
|
||||
}
|
||||
const deviceId: any = ref([])
|
||||
const handlecheckedPointChange = (value: any) => {
|
||||
deviceId.value = value
|
||||
|
||||
Eacherstable(value)
|
||||
getResultData()
|
||||
// const checkedCount = value.length
|
||||
// checkAll.value = checkedCount === pointList.length
|
||||
// isIndeterminate.value = checkedCount > 0 && checkedCount < pointList.length
|
||||
}
|
||||
function Eacherstable(deviceId: any) {
|
||||
paramChart.value.xAxis.data = []
|
||||
paramChart.value.series = []
|
||||
paramChart.value.legend.data = []
|
||||
if (deviceId.length == 0) {
|
||||
return
|
||||
}
|
||||
const params = {
|
||||
deviceId: deviceId.join(","),
|
||||
startDate: "",
|
||||
endDate: ""
|
||||
}
|
||||
if (dateArr.value != null && dateArr.value.length != 0) {
|
||||
params.startDate = dateArr.value[0]
|
||||
params.endDate = dateArr.value[1]
|
||||
}
|
||||
getAnalysisCurve(params).then((res: any) => {
|
||||
myChart.clear()
|
||||
paramChart.value.xAxis.data = []
|
||||
paramChart.value.series = []
|
||||
paramChart.value.legend.data = []
|
||||
paramChart.value.xAxis.data = res.data.date
|
||||
for (let i = 0; i < res.data.device.length; i++) {
|
||||
|
||||
paramChart.value.legend.data.push(res.data.device[i].name)
|
||||
paramChart.value.series.push({
|
||||
name: res.data.device[i].name,
|
||||
type: 'line',
|
||||
data: res.data.device[i].values
|
||||
})
|
||||
}
|
||||
myChart.setOption(paramChart.value);
|
||||
})
|
||||
// 绘制图表
|
||||
}
|
||||
const navActive = ref(0)
|
||||
function navClick(index: any) {
|
||||
navActive.value = index
|
||||
|
||||
if (navActive.value == 0) {
|
||||
setTimeout(() => {
|
||||
myChart.resize();
|
||||
}, 100)
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
const dataloading = ref(false)
|
||||
const tableData: any = ref([])
|
||||
const total = ref()
|
||||
function getResultData() { // 数据对比分析列表
|
||||
queryInfo.value.startDate = ""
|
||||
queryInfo.value.endDate = ""
|
||||
if (dateArr.value != null && dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
const params = {
|
||||
deviceId: deviceId.value.join(","),
|
||||
startDate: queryInfo.value.startDate,
|
||||
endDate: queryInfo.value.endDate,
|
||||
current: queryInfo.value.current,
|
||||
size: queryInfo.value.size,
|
||||
}
|
||||
tableData.value = []
|
||||
if (deviceId.value.length == 0) {
|
||||
return
|
||||
}
|
||||
dataloading.value = true
|
||||
getTaskResultList(params).then((res: any) => {
|
||||
dataloading.value = false
|
||||
for (let i = 0; i < res.data.records.length; i++) {
|
||||
if (res.data.records[i].smallFilePath != null) {
|
||||
res.data.records[i].smallFilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
res.data.records[i].srcList = [userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)]
|
||||
|
||||
res.data.records[i].defectFilePath = userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
} else {
|
||||
res.data.records[i].smallFilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data.records[i].filePath)
|
||||
res.data.records[i].srcList = [userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data.records[i].filePath)]
|
||||
|
||||
res.data.records[i].defectFilePath = userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data.records[i].filePath)
|
||||
}
|
||||
|
||||
}
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
}).catch(() => {
|
||||
dataloading.value = false
|
||||
})
|
||||
}
|
||||
//控制行变色
|
||||
const tableRowClassName = ({
|
||||
row,
|
||||
rowIndex,
|
||||
}: {
|
||||
row: any
|
||||
rowIndex: number
|
||||
}) => {
|
||||
if (rowIndex % 2 === 0) {
|
||||
return 'warning-row'
|
||||
} else if (rowIndex % 2 === 1) {
|
||||
return 'success-row'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
const isImgBox = ref(false)
|
||||
const ImgPath = ref("")
|
||||
function imgClick(row: any) {
|
||||
ImgPath.value = row
|
||||
isImgBox.value = true
|
||||
}
|
||||
const ViewfileUrl = ref("")
|
||||
const isViewfile = ref(false)
|
||||
const previewTaskData = ref([])
|
||||
function viewReport() {
|
||||
|
||||
isViewfile.value = true
|
||||
if (dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
|
||||
let params = {
|
||||
deviceId: deviceId.value.join(","),
|
||||
startDate: queryInfo.value.startDate,
|
||||
endDate: queryInfo.value.endDate
|
||||
}
|
||||
previewTaskResultList(params).then((res: any) => {
|
||||
|
||||
previewTaskData.value = res.data
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
if (res.data[i].smallFilePath != null) {
|
||||
res.data[i].smallFilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].defectFilePath)
|
||||
res.data[i].srcList = [userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data[i].defectFilePath)]
|
||||
|
||||
res.data[i].defectFilePath = userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data[i].defectFilePath)
|
||||
} else {
|
||||
res.data[i].smallFilePath = userStore.webApiBaseUrl + "/previewimage?size=small&filename=" + encodeURI(res.data[i].filePath)
|
||||
res.data[i].srcList = [userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data[i].filePath)]
|
||||
|
||||
res.data[i].defectFilePath = userStore.webApiBaseUrl + "/previewimage?filename=" + encodeURI(res.data[i].filePath)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}).catch(() => {
|
||||
});
|
||||
if (dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
ViewfileUrl.value = userStore.webApiBaseUrl +
|
||||
|
||||
'/patroltasks/task-todo/exportTaskResultList?deviceId=' + deviceId.value.join(",")
|
||||
+ '&startDate=' + queryInfo.value.startDate
|
||||
+ '&endDate=' + queryInfo.value.endDate
|
||||
+ '¤t=' + queryInfo.value.current
|
||||
+ '&size=9999'
|
||||
|
||||
}
|
||||
function CloseView() {
|
||||
isViewfile.value = false
|
||||
}
|
||||
// 导出
|
||||
function leadingOut() {
|
||||
if (dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
|
||||
let params = {
|
||||
deviceId: deviceId.value.join(","),
|
||||
startDate: queryInfo.value.startDate,
|
||||
endDate: queryInfo.value.endDate,
|
||||
current: queryInfo.value.current,
|
||||
size: queryInfo.value.size,
|
||||
exportFields: checkList.value.join(",")
|
||||
}
|
||||
exportTaskResultList(params).then((response: any) => {
|
||||
downloadFile(response, '警告信息', 'xlsx')
|
||||
}).catch(() => {
|
||||
});
|
||||
}
|
||||
function handleClose() {
|
||||
isViewfile.value = false
|
||||
}
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
const oBox = document.getElementById('telescopicids')
|
||||
const leftid: any = document.getElementById('richleft')
|
||||
const rightid: any = document.getElementById('richright')
|
||||
|
||||
const idbox: any = document.getElementById('richboxid')
|
||||
let X: any, oBoxW: any, oBoxW1: any
|
||||
if (oBox) {
|
||||
oBox.onmousedown = (ev) => {
|
||||
var elem = document.createElement('div')
|
||||
elem.style.cssText = 'position:absolute;top: 0;width:100%;height:100%;z-index:9999;cursor:w-resize'
|
||||
elem.id = 'newMask'
|
||||
document.body.appendChild(elem)
|
||||
var oEvent = ev || event
|
||||
X = oEvent.clientX
|
||||
oBoxW = leftid.offsetWidth
|
||||
oBoxW1 = rightid.offsetWidth
|
||||
// // 鼠标移动
|
||||
document.onmousemove = (ev) => {
|
||||
var oEvent = ev || event
|
||||
var XX = oEvent.clientX
|
||||
leftid.style.width = 100 / ((idbox.offsetWidth - 20) / (oBoxW + (XX - X))) + '%'
|
||||
rightid.style.width = 100 / ((idbox.offsetWidth - 20) / (oBoxW1 + (X - XX))) + '%'
|
||||
myChart.resize();
|
||||
}
|
||||
// 鼠标移开
|
||||
document.onmouseup = (ev) => {
|
||||
var newMask: any = document.getElementById('newMask')
|
||||
if (newMask) {
|
||||
newMask.parentNode.removeChild(newMask)
|
||||
}
|
||||
document.onmousedown = null
|
||||
document.onmousemove = null
|
||||
// basicsId.style.cursor = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
}, 100)
|
||||
|
||||
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')
|
||||
dateArr.value = [startDate, endDate]
|
||||
getDict()
|
||||
getInit()
|
||||
|
||||
myChart = echarts.init(document.getElementById("myChartId") as HTMLDivElement);
|
||||
window.onresize = function () { // 自适应大小
|
||||
myChart.resize();
|
||||
};
|
||||
|
||||
})
|
||||
const keyData: any = ref([])
|
||||
const checkList: any = ref([])
|
||||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="el-overlay" v-if="isImgBox">
|
||||
<div class="notification">
|
||||
<img style="position:absolute;top: 15px;right: 20px;cursor:pointer;" src="@/assets/MenuIcon/u523.png" alt=""
|
||||
@click="isImgBox = false">
|
||||
<div class="notification-title">图片预览</div>
|
||||
<div style="
|
||||
width: 100%;
|
||||
height: 860px;display: flex;align-items: center;justify-content: center;">
|
||||
<img :src="ImgPath" alt="" style="max-width:1150px ;max-height: 800px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="richboxid" class="dataanalysis-box">
|
||||
<div id="richleft" class="dataanalysis-left">
|
||||
<div class="stationboard-box-title">
|
||||
<div>设备列表</div>
|
||||
</div>
|
||||
<el-input v-model="mainDeviceName" :suffix-icon="Search" clearable placeholder="主设备名称" @clear="getData()"
|
||||
@keyup.enter="getData()" style="margin-left:13px;width: 100%;margin-top:10px;" class="dataanalysis-input" />
|
||||
|
||||
<el-scrollbar style="margin-left:20px ;margin-top:10px ;" height="100%">
|
||||
<el-tree :data="treeData" :props="defaultprops" show-checkbox default-expand-all
|
||||
@check-change="handleCheckChange" @check="currentChecked" :current-node-key="currentNodeKey"
|
||||
node-key="mainDeviceId">
|
||||
<template #default="{ node }">
|
||||
<span>{{ node.data.name }}</span>
|
||||
<span>{{ node.label }}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div id="telescopicids" class="telescopicidsbgcolor"
|
||||
style="margin-left: 8px; width: 4px;height: 100%; cursor:w-resize; z-index:99"></div>
|
||||
<div id="richright" class="dataanalysis-right">
|
||||
<div style="height:37px;position: relative;display: flex;align-items: center; justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;" class="screenHomepage">
|
||||
<el-select class="mr-2 selType" v-model="queryInfo.recognitionType"
|
||||
placeholder="识别类型" @change="getByMainDevice" :teleported="false" :popper-append-to-body="false">
|
||||
<el-option v-for="item in recognitionTypeList" :key="item.id" :label="item.dictname"
|
||||
:value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-select class="mr-2 selType" v-model="queryInfo.meterType" placeholder="表计类型"
|
||||
@change="getByMainDevice" :teleported="false" :popper-append-to-body="false">
|
||||
<el-option v-for="item in MeterTypeList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始时间"
|
||||
popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间"
|
||||
style="max-width: 370px;" @change="dateChang" :clearable="false" />
|
||||
<el-button class="searchButton" @click="getByMainDevice">搜索</el-button>
|
||||
<el-button class="searchButton" @click="resetting">重置</el-button>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<el-button class="searchButton" @click="viewReport" :disabled="deviceId.length == 0">查看报告</el-button>
|
||||
<div>
|
||||
<el-popover placement="bottom" :width="60" trigger="click" popper-class="checkbox-group">
|
||||
<template #reference>
|
||||
<el-button :disabled="tableData.length == 0" class="searchButton">导出</el-button>
|
||||
</template>
|
||||
<el-checkbox-group v-model="checkList">
|
||||
<el-checkbox v-for="city in keyData" :key="city.itemcode + '-' + city.dictname"
|
||||
:label="city.itemcode + '-' + city.dictname">{{ city.dictname }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<el-button @click="leadingOut" style="margin-left: 20px;margin-top: 10px;">确定导出</el-button>
|
||||
</el-popover>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataanalysis-top">
|
||||
<div class="stationboard-box-title">
|
||||
<div>巡视点位</div>
|
||||
</div>
|
||||
<div style="padding: 0 20px;">
|
||||
<el-checkbox-group v-model="deviceId" :max="10" @change="handlecheckedPointChange">
|
||||
<el-checkbox v-for="city in pointList" :key="city.deviceId" :label="city.deviceId">{{ city.deviceName
|
||||
}}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dataanalysis-bottom">
|
||||
<div class="stationboard-box-title !h-[50px]" style="justify-content: space-between;flex-wrap: wrap;">
|
||||
<div style="display: flex;align-items: center;margin-top: 4px;">
|
||||
<div>分析结果</div>
|
||||
</div>
|
||||
<div style="display: flex;margin-right: 20px;">
|
||||
<div class="nav-list" :class="{ 'nav-active': navActive == 0 }" @click="navClick(0)">分析曲线</div>
|
||||
<div class="nav-list" :class="{ 'nav-active': navActive == 1 }" @click="navClick(1)">分析列表</div>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<img src="@/assets/monitorsystem/xsfx_bj2.png" alt="" style="width: 100%;" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 0 15px;height:calc(100% - 61px);">
|
||||
<div v-show="navActive == 0" id="myChartId" style="width: 100%;height:calc(100%);"></div>
|
||||
<el-table v-if="navActive == 1" row-key="id" :data="tableData" :row-class-name="tableRowClassName"
|
||||
class="PatrolMonitoring" v-loading="dataloading" element-loading-background="rgb(11, 40, 34)"
|
||||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 40px); overflow: auto "
|
||||
:header-cell-style="{ background: '#253b51', color: '#B5D7FF', height: '43px' }">
|
||||
<el-table-column type="index" align="center" label="序号" width="60px" />
|
||||
<el-table-column prop="areaName" label="区域名称" min-width="120px" />
|
||||
<el-table-column prop="bayName" label="间隔名称" min-width="120px" />
|
||||
<el-table-column prop="patroldeviceName" label="设备名称" min-width="120px" />
|
||||
<el-table-column prop="componentName" label="部件名称" min-width="120px" />
|
||||
<el-table-column prop="deviceName" label="巡视点位" min-width="120px" />
|
||||
<el-table-column prop="time" label="巡视时间" width="170px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.time != undefined && scope.row.time != ''">{{ scope.row.time }}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="巡视结果" width="120px">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.valueType == 'meter' || scope.row.valueType == 'infrared'">
|
||||
<span v-if="scope.row.analysisResult == '异常'" style="color: red;font-size: 16px;font-weight: bold;">
|
||||
{{ scope.row.value }} {{ scope.row.unit }}</span>
|
||||
<span v-else> {{ scope.row.value }} {{ scope.row.unit }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="scope.row.conf != null && scope.row.conf != ''">{{ scope.row.conf }}</span>
|
||||
<span v-else>--</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="desc" label="识别类型" width="140px">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.desc != null && scope.row.desc != ''">{{ scope.row.desc }}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="analysisResult" label="巡视结论" width="100px">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.analysisResult == '正常'" style="color: rgb(0, 155, 255, 1)">正常</span>
|
||||
<span v-if="scope.row.analysisResult == '异常'"
|
||||
style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
|
||||
<span v-if="scope.row.analysisResult == '设备检修'" style="color: rgb(0, 153, 255)">设备检修</span>
|
||||
<span v-if="scope.row.analysisResult == '失败'" style="color: rgb(255, 189, 0)">失败</span>
|
||||
<span v-if="scope.row.analysisResult == '截图失败'" style="color: rgb(255, 189, 0)">截图失败</span>
|
||||
<span v-if="scope.row.analysisResult == '成功'" style="color: rgb(0, 155, 255, 1)">成功</span>
|
||||
<span v-if="scope.row.analysisResult == '' || scope.row.analysisResult == null">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="defectFilePath" label="巡视图片" width="90px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image v-if="scope.row.filePath" style="width: 30px; height: 30px;margin:auto"
|
||||
:src="scope.row.smallFilePath" :zoom-rate="1.2" :preview-src-list="scope.row.srcList"
|
||||
:preview-teleported="true" fit="cover" />
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="display: flex;justify-content: center;">
|
||||
<Page v-if="navActive == 1" style="position: relative;z-index: 100;" :total="total"
|
||||
v-model:size="queryInfo.size" :jumper="'hide'" v-model:current="queryInfo.current"
|
||||
@pagination="getResultData()"></Page>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog width="1200px" class="viewItemFileDialog" :title="'数据对比分析报告'" v-model='isViewfile'
|
||||
:before-close="handleClose" :close-on-click-modal="false" :close-on-press-escape="false" draggable>
|
||||
<el-table :data="previewTaskData" class="previewTaskTable" border v-loading="dataloading"
|
||||
element-loading-background="rgb(11, 40, 34)"
|
||||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100vh - 140px); overflow: auto "
|
||||
:header-cell-style="{ height: '35px' }">
|
||||
<el-table-column prop="areaName" label="区域名称" min-width="100px" align="center" />
|
||||
<el-table-column prop="bayName" label="间隔名称" min-width="100px" align="center" />
|
||||
<el-table-column prop="patroldeviceName" label="设备名称" min-width="120px" align="center" />
|
||||
<el-table-column prop="componentName" label="部件名称" min-width="100px" align="center" />
|
||||
<el-table-column prop="deviceName" label="巡视点位" min-width="120px" align="center" />
|
||||
<!-- <el-table-column prop="deviceName" label="巡视结果" min-width="120px" align="center"/>
|
||||
<el-table-column prop="deviceName" label="识别类型" min-width="120px" align="center"/>
|
||||
<el-table-column prop="deviceName" label="巡视结论" min-width="120px" align="center"/>
|
||||
<el-table-column prop="deviceName" label="巡视时间" min-width="120px" align="center"/>
|
||||
<el-table-column prop="deviceName" label="巡视图片" min-width="100px" align="center"/>
|
||||
-->
|
||||
<el-table-column prop="value" label="巡视结果" min-width="120px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.valueType == 'meter' || scope.row.valueType == 'infrared'">
|
||||
<span v-if="scope.row.analysisResult == '异常'"> {{ scope.row.value }} {{ scope.row.unit }}</span>
|
||||
<span v-else> {{ scope.row.value }} {{ scope.row.unit }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="scope.row.conf != null && scope.row.conf != ''">{{ scope.row.conf }}</span>
|
||||
<span v-else>--</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="desc" label="识别类型" min-width="120px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.desc != null && scope.row.desc != ''">{{ scope.row.desc }}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="analysisResult" label="巡视结论" min-width="100px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.analysisResult == '正常'">正常</span>
|
||||
<span v-if="scope.row.analysisResult == '异常'">异常</span>
|
||||
<span v-if="scope.row.analysisResult == '设备检修'">设备检修</span>
|
||||
<span v-if="scope.row.analysisResult == '失败'">失败</span>
|
||||
<span v-if="scope.row.analysisResult == '截图失败'">截图失败</span>
|
||||
<span v-if="scope.row.analysisResult == '成功'">成功</span>
|
||||
<span v-if="scope.row.analysisResult == '' || scope.row.analysisResult == null">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="time" label="巡视时间" min-width="90px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.time != undefined && scope.row.time != ''">{{ scope.row.time }}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
|
||||
<el-table-column prop="defectFilePath" label="巡视图片" min-width="120px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image v-if="scope.row.filePath" style="width: 30px; height: 30px;margin:auto"
|
||||
:src="scope.row.smallFilePath" :zoom-rate="1.2" :preview-src-list="scope.row.srcList"
|
||||
:preview-teleported="true" fit="cover" />
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
<!-- <Viewfile v-if="isViewfile" :title="'数据对比分析报告'" :showTime="true" :url="ViewfileUrl" :type="'xlsx'" :clientHeight="600" @update="CloseView"/> -->
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.dataanalysis-box {
|
||||
padding: 60px 15px 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 100px);
|
||||
|
||||
.telescopicidsbgcolor {
|
||||
background: #009BFF;
|
||||
}
|
||||
|
||||
.telescopicidsbgcolor:hover {
|
||||
background: #4bb7ff !important;
|
||||
}
|
||||
.searchButton {
|
||||
border: #009BFF solid 1px;
|
||||
background-color: #009BFF;
|
||||
color: #ffffff;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background: transparent;
|
||||
box-shadow: 0 0 0 1px #225b7e inset;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper:hover) {
|
||||
box-shadow: 0 0 0 1px #225b7e inset;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper .el-input__icon) {
|
||||
color: #225b7e;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content) {
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.dataanalysis-left {
|
||||
width: 261px;
|
||||
min-width: 261px;
|
||||
height: 100%;
|
||||
background: url(@/assets/monitorsystem/spjk_lbbj.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
padding-right: 30px;
|
||||
|
||||
:deep(.is-checked >.el-tree-node__content) {
|
||||
background-color: transparent !important;
|
||||
color: #009BFF;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node.is-current .el-tree-node__content:hover) {
|
||||
background-color: transparent !important;
|
||||
color: #009BFF;
|
||||
}
|
||||
|
||||
:deep(.el-tree-node__content:hover) {
|
||||
color: #009BFF;
|
||||
}
|
||||
|
||||
:deep(.el-scrollbar) {
|
||||
height: calc(100% - 106px);
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
--el-tree-node-hover-bg-color: transparent;
|
||||
--el-tree-text-color: rgb(0, 155, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.dataanalysis-right {
|
||||
width: calc(100vw - 261px);
|
||||
height: 100%;
|
||||
margin-left: 8px
|
||||
}
|
||||
|
||||
.stationboard-box-title {
|
||||
font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dataanalysis-top {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: url(@/assets/monitorsystem/xsfx_bj1.png);
|
||||
background-size: 100% 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.dataanalysis-bottom {
|
||||
width: 100%;
|
||||
height: calc(100% - 197px);
|
||||
background: url(@/assets/monitorsystem/xsfx_bj.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
:deep(.el-table) {
|
||||
background: transparent !important;
|
||||
--el-table-row-hover-bg-color: transparent !important;
|
||||
--el-table-border-color: transparent !important;
|
||||
--el-table-current-row-bg-color: transparent !important;
|
||||
--el-table-header-bg-color: transparent !important;
|
||||
--el-table-fixed-box-shadow: transparent !important;
|
||||
--el-table-bg-color: transparent !important;
|
||||
--el-table-tr-bg-color: transparent !important;
|
||||
--el-table-expanded-cell-bg-color: transparent !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
:deep(.success-row) {
|
||||
background-color: rgba(255, 255, 255, 0.047) !important;
|
||||
}
|
||||
|
||||
|
||||
.nav-list {
|
||||
width: 80px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background: url(@/assets/monitorsystem/xsri_qh.png);
|
||||
background-size: 100% 100%;
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
cursor: pointer;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.nav-active {
|
||||
background: url(@/assets/monitorsystem/xsri_qh1.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: 1200px;
|
||||
height: 900px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
background: url(@/assets/monitorsystem/xsri_yltu.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.notification-title {
|
||||
text-align: center;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.previewTaskTable {
|
||||
:deep(.el-table__cell) {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
:deep(.cell) {
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,535 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "abnormaldevice", // 异常点位查询
|
||||
};
|
||||
</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 { getAbnormalDeviceList,exportAbnormalDevice } from "@/api/abnormaldevice";
|
||||
import { getSubstationNaviTree } from "@/api/makeTask";
|
||||
import { getDeviceByType } from "@/api/device";
|
||||
import { downloadFile } from '@/utils/index';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { getTreeData } from "@/api/equipment";
|
||||
import moment from 'moment'
|
||||
const userStore = useUserStore();
|
||||
//左侧树形控件
|
||||
interface Tree {
|
||||
[x: string]: any;
|
||||
label: string;
|
||||
children?: Tree[];
|
||||
}
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "name"
|
||||
};
|
||||
// 查询参数
|
||||
const queryInfo:any = ref({
|
||||
|
||||
current: 1, // 当前页
|
||||
size:10, // 页大小
|
||||
stationCode: userStore.stationCode,
|
||||
taskName: '', // 任务名称
|
||||
deviceName: '', // 点位
|
||||
patroldeviceName: '', // 设备
|
||||
componentName: '', // 部件名称
|
||||
recognitionType: '', // 识别类型
|
||||
status: '', // 巡视结论
|
||||
startDate: '', // 开始时间
|
||||
endDate: '',// 结束时间
|
||||
})
|
||||
//获取表格数据
|
||||
//表格所需参数
|
||||
const dateArr: any = ref([])
|
||||
const total = ref(0)
|
||||
const treeloading = ref(false)
|
||||
//表格数据
|
||||
const tableData: any = ref([])
|
||||
const vMove = {
|
||||
mounted(el: any) {
|
||||
el.onmousedown = function (e: any) {
|
||||
var init = e.clientX;
|
||||
var parent: any = document.getElementById("IntelligentlinkageLeft");
|
||||
const initWidth: any = parent.offsetWidth;
|
||||
document.onmousemove = function (e) {
|
||||
var end = e.clientX;
|
||||
var newWidth = end - init + initWidth;
|
||||
parent.style.width = newWidth + "px";
|
||||
};
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
function getData() {
|
||||
queryInfo.value.startDate = ""
|
||||
queryInfo.value.endDate = ""
|
||||
if (dateArr.value != null && dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
|
||||
tableloading.value = true
|
||||
getAbnormalDeviceList(queryInfo.value).then((res: any) => {
|
||||
tableloading.value = false
|
||||
for(let i = 0 ;i<res.data.records.length;i++){
|
||||
if(res.data.records[i].smallFilePath != null){
|
||||
res.data.records[i].smallFilePath = userStore.webApiBaseUrl +"/previewimage?size=small&filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
res.data.records[i].srcList = [userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)]
|
||||
|
||||
res.data.records[i].defectFilePath = userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
}else{
|
||||
res.data.records[i].smallFilePath = userStore.webApiBaseUrl +"/previewimage?size=small&filename=" + encodeURI(res.data.records[i].filePath)
|
||||
res.data.records[i].srcList = [userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].filePath)]
|
||||
|
||||
res.data.records[i].defectFilePath = userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].filePath)
|
||||
}
|
||||
|
||||
}
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
queryInfo.value.size = res.data.size
|
||||
queryInfo.value.current = res.data.current
|
||||
}).catch(()=>{
|
||||
tableloading.value = false
|
||||
})
|
||||
}
|
||||
//重置
|
||||
function resetting() {
|
||||
queryInfo.value = {
|
||||
current: 1, // 当前页
|
||||
size:10, // 页大小
|
||||
stationCode: userStore.stationCode,
|
||||
taskName: '', // 任务名称
|
||||
deviceName: '', // 点位
|
||||
patroldeviceName: '', // 设备
|
||||
componentName: '', // 部件名称
|
||||
recognitionType: '', // 识别类型
|
||||
status: '',
|
||||
startDate: '', // 开始时间
|
||||
endDate: '',// 结束时间
|
||||
}
|
||||
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')
|
||||
dateArr.value=[startDate,endDate]
|
||||
getData()
|
||||
treeRef.value?.setCurrentKey()
|
||||
}
|
||||
const recognitionTypeList:any = ref([])
|
||||
const DeviceClassList:any = ref([])
|
||||
function getArrType() {
|
||||
const paramstype = {
|
||||
dictcode: 'recognition_type'
|
||||
}
|
||||
getDeviceByType(paramstype).then((res: any) => {
|
||||
recognitionTypeList.value = res.data
|
||||
})
|
||||
|
||||
const paramstypes = {
|
||||
dictcode: 'DeviceClass'
|
||||
}
|
||||
getDeviceByType(paramstypes).then((res: any) => {
|
||||
DeviceClassList.value = res.data
|
||||
})
|
||||
}
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
const ImgPath = ref("")
|
||||
// 导出
|
||||
function leadingOut() {
|
||||
if (dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
tableloading.value = true
|
||||
exportAbnormalDevice(queryInfo.value).then((response: any) => {
|
||||
tableloading.value = false
|
||||
downloadFile(response, '异常点位信息', 'xlsx')
|
||||
}).catch(()=>{
|
||||
tableloading.value = false
|
||||
});
|
||||
}
|
||||
|
||||
const treedata:any = ref([])
|
||||
const tableloading:any = ref([])
|
||||
const currentNodeKey = ref("")
|
||||
const orgId = ref("");
|
||||
const Maindata: any = ref({})
|
||||
const treeRef = ref();
|
||||
function getTree() {
|
||||
const params = {
|
||||
stationId: userStore.stationId
|
||||
}
|
||||
treeloading.value= true
|
||||
getSubstationNaviTree(params).then((res: any) => {
|
||||
if (res.data.length == 0) {
|
||||
tableData.value = []
|
||||
}
|
||||
treedata.value = res.data
|
||||
treeloading.value = false
|
||||
nextTick(() => {
|
||||
treeRef.value?.setCurrentKey(orgId.value);
|
||||
});
|
||||
})
|
||||
.catch((error: any) => {
|
||||
treeloading.value = false
|
||||
})
|
||||
|
||||
}
|
||||
// 导航树点击事件
|
||||
function handleNodeClick(data: any, node: any) {
|
||||
// node.isCurrent = false
|
||||
Maindata.value = data
|
||||
orgId.value = data.bayId;
|
||||
if(node.level == 1){
|
||||
queryInfo.value.stationCode = userStore.stationCode
|
||||
queryInfo.value.areaId = ""
|
||||
}else if(node.level == 2){
|
||||
queryInfo.value.stationCode = ""
|
||||
queryInfo.value.bayId = ""
|
||||
queryInfo.value.areaId = data.children[0].areaId
|
||||
}else if(node.level == 3){
|
||||
queryInfo.value.stationCode =""
|
||||
queryInfo.value.areaId = ""
|
||||
queryInfo.value.bayId = data.bayId
|
||||
}
|
||||
getData()
|
||||
|
||||
}
|
||||
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')
|
||||
dateArr.value=[startDate,endDate]
|
||||
getTree()
|
||||
getData()
|
||||
getArrType()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="Intelligentlinkage-box">
|
||||
<div id="IntelligentlinkageLeft" class="Intelligentlinkage-left" >
|
||||
<div class="Intelligentlinkage-box-title">
|
||||
<div class="imgname">数据列表</div>
|
||||
</div>
|
||||
<el-scrollbar style="margin-top:10px ;height: calc(100vh - 220px);" height="calc(100vh - 220px)" v-loading="treeloading">
|
||||
<el-tree ref="treeRef" :expand-on-click-node="false"
|
||||
node-key="bayId" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true"
|
||||
:props="defaultProps" @node-click="handleNodeClick"
|
||||
default-expand-all>
|
||||
<template #default="{ node }">
|
||||
<span class="treeActive">{{node.label}}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<main class="abnormaldevice">
|
||||
<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="queryInfo.taskName" placeholder="请输入任务名称" clearable
|
||||
@clear="getData()" @keyup.enter="getData()" /></div>
|
||||
<div style="margin-left: 10px;" class="screenHomepage"><el-input v-model="queryInfo.deviceName" placeholder="请输入点位名称" clearable
|
||||
@clear="getData()" @keyup.enter="getData()" /></div>
|
||||
<div style="margin-left: 10px;" class="screenHomepage"><el-input v-model="queryInfo.patroldeviceName" placeholder="请输入设备名称" clearable
|
||||
@clear="getData()" @keyup.enter="getData()" /></div>
|
||||
<div style="margin-left: 10px;" class="screenHomepage"><el-input v-model="queryInfo.componentName" placeholder="请输入部件名称" clearable
|
||||
@clear="getData()" @keyup.enter="getData()" /></div>
|
||||
<div style="" class="screenHomepage">
|
||||
<el-select v-model="queryInfo.recognitionType" class="m-2 selType" :teleported="false" :popper-append-to-body="false" clearable placeholder="识别类型" @change="getData" >
|
||||
<el-option v-for="item in recognitionTypeList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
</div>
|
||||
<!-- <div style="margin-top: 15px;">
|
||||
<el-select v-model="queryInfo.status" class="m-2" placeholder="巡视结论" @change="getData" @clear="getData()">
|
||||
<el-option v-for="item in InspectionType" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
</div> -->
|
||||
<div class="screenHomepage">
|
||||
<el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始时间"
|
||||
popper-class="elDatePicker"
|
||||
format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间" :clearable="false" @change="getData" />
|
||||
</div>
|
||||
<el-button class="searchButton" type="primary" @click="getData()" >搜索</el-button>
|
||||
<el-button class="searchButton" type="primary" @click="resetting()">重置</el-button>
|
||||
</div>
|
||||
<div>
|
||||
<el-button class="searchButton" type="primary" @click="leadingOut">导出</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" v-loading="tableloading"
|
||||
element-loading-text="正在加载数据，请耐心等待..."
|
||||
element-loading-background="rgb(11, 40, 34)" style="width:calc(100%);margin:auto;position: relative;margin: 5px 0px; height:calc(100vh - 270px);"
|
||||
:header-cell-style="tableBg" stripe
|
||||
>
|
||||
<el-table-column type="index" align="center" label="序号" width="50px" />
|
||||
<el-table-column prop="areaName" label="区域名称" min-width="100px" />
|
||||
<el-table-column prop="bayName" label="间隔名称" min-width="100px" />
|
||||
<el-table-column prop="taskName" label="任务名称" min-width="140px" />
|
||||
<el-table-column prop="patroldeviceName" label="设备名称" min-width="150px"/>
|
||||
<el-table-column prop="componentName" label="部件名称" min-width="100px"/>
|
||||
<el-table-column prop="deviceName" label="点位名称" min-width="100px"/>
|
||||
<el-table-column prop="deviceClass" label="点位分类" width="80px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="currency(DeviceClassList,scope.row.deviceClass) != undefined&¤cy(DeviceClassList,scope.row.deviceClass) != ''">{{currency(DeviceClassList,scope.row.deviceClass)}}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="recognitionType" label="识别类型" width="120px">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.recognitionType !=null &&scope.row.recognitionType !=''">{{ currency(recognitionTypeList,scope.row.recognitionType) }}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="time" label="巡视时间" width="100px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.time != undefined &&scope.row.time != ''">{{scope.row.time}}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="value" label="巡视结果" width="120px">
|
||||
<template #default="scope">
|
||||
<el-tooltip raw-content>
|
||||
<template #content>
|
||||
<div style="padding:5px">预警区间: {{ scope.row.threshold.earlyMin }} ~ {{ scope.row.threshold.earlyMax }}</div>
|
||||
<div style="padding:5px">一般区间: {{ scope.row.threshold.sameMin }} ~ {{ scope.row.threshold.sameMax }}</div>
|
||||
<div style="padding:5px">严重区间: {{ scope.row.threshold.seriousMin }} ~ {{ scope.row.threshold.seriousMax }}</div>
|
||||
<div style="padding:5px">危急区间: {{ scope.row.threshold.criticalMin }} ~ {{ scope.row.threshold.criticalMax }}</div>
|
||||
</template>
|
||||
<span v-if="scope.row.valueType=='meter'|| scope.row.valueType=='infrared'">
|
||||
<span v-if="scope.row.analysisResult == '异常'" style="color: red;font-size: 16px;font-weight: bold;"> {{ scope.row.value }} {{ scope.row.unit }}</span>
|
||||
<span v-else> {{ scope.row.value }} {{ scope.row.unit }}</span>
|
||||
</span>
|
||||
<span v-else>
|
||||
<span v-if="scope.row.conf !=null &&scope.row.conf !=''">{{ scope.row.conf }}</span>
|
||||
<span v-else>--</span>
|
||||
</span>
|
||||
</el-tooltip>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="analysisResult" label="巡视结论" width="100px">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.analysisResult == '正常'" style="color: rgb(0, 249, 162)">正常</span>
|
||||
<span v-if="scope.row.analysisResult == '异常'" style="color: rgb(255, 51, 0);color: red;font-size: 16px;font-weight: bold;">异常</span>
|
||||
<span v-if="scope.row.analysisResult == '设备检修'" style="color: rgb(0, 153, 255)">设备检修</span>
|
||||
<span v-if="scope.row.analysisResult == '失败'" style="color: rgb(255, 189, 0)">失败</span>
|
||||
<span v-if="scope.row.analysisResult == '截图失败'" style="color: rgb(255, 189, 0)">截图失败</span>
|
||||
<span v-if="scope.row.analysisResult == '成功'" style="color: rgb(0, 249, 162)">成功</span>
|
||||
<span v-if="scope.row.analysisResult == ''||scope.row.analysisResult == null">--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="defectFilePath" label="巡视图片" width="70px" align="center">
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
v-if=" scope.row.filePath "
|
||||
style="width: 30px; height: 30px;margin:auto"
|
||||
:src="scope.row.smallFilePath"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="scope.row.srcList"
|
||||
:preview-teleported="true"
|
||||
fit="cover"
|
||||
/>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="cexamineUserName" label="审核人" width="90px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.cexamineUserName != undefined &&scope.row.cexamineUserName != ''">{{scope.row.cexamineUserName}}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="examineDate" label="审核时间" width="100px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.examineDate != undefined &&scope.row.examineDate != ''">{{scope.row.examineDate}}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- </div> -->
|
||||
|
||||
<div style="display: flex;justify-content: center;margin-top: 5px;">
|
||||
<Page style="position: relative;z-index: 100;" :total="total" v-model:size="queryInfo.size"
|
||||
:jumper="'hide'" v-model:current="queryInfo.current" @pagination="getData()"></Page>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.Intelligentlinkage-box {
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
padding:15px;
|
||||
padding-top:60px;
|
||||
padding-bottom:0;
|
||||
height: calc(100vh - 90px);
|
||||
}
|
||||
.Intelligentlinkage-left {
|
||||
position: relative;
|
||||
width: 260px;
|
||||
min-width: 261px;
|
||||
height: calc(100vh - 160px);
|
||||
background: url(@/assets/newimg/spjk_lbbj.png) no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.nav-box {
|
||||
padding-top: 10px;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
|
||||
.nav-list {
|
||||
width: 65px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border: 1px solid rgb(95, 143, 125);
|
||||
font-family: 'MicrosoftYaHei Regular', 'MicrosoftYaHei';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #00F9A2;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.nav-active {
|
||||
// font-weight: bold;
|
||||
// color: rgb(255, 255, 255);
|
||||
background: rgba(0, 249, 162, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.el-tree {
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
--el-tree-node-hover-bg-color: transparent;
|
||||
--el-tree-text-color: rgb(0, 249, 162, 0.5);
|
||||
// --el-tree-expand-icon-color: var(--el-text-color-placeholder);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.Intelligentlinkage-box-title {
|
||||
font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
line-height: 44px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.IntelligentlinkageRight {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
margin-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.imgbg {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.abnormaldeviceImg {
|
||||
width: 100%;
|
||||
height: calc(100vh - 90px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.abnormaldevice {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 0 15px;
|
||||
padding-top:10px;
|
||||
width: 50%;
|
||||
height: calc(100vh - 160px);
|
||||
margin-left: 15px;
|
||||
box-sizing: border-box;
|
||||
background: url(@/assets/newimg/cjrw_1890.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: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
/* background: url(/src/assets/monitorsystem/xsri_yltu.png); */
|
||||
background-size: 100% 100%;
|
||||
.notification-title {
|
||||
text-align: center;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.notification-body {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,845 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "alarmInfo", // 警告信息确认
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import Page from '@/components/Pagination/page.vue'
|
||||
import { ref, onMounted, nextTick, watch } from "vue";
|
||||
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getAlarmLogPage, setAlarmLogStatus, setBatchAlarmLogStatus } from "@/api/alarmInfo";
|
||||
import { getDeviceByType } from "@/api/device";
|
||||
import moment from 'moment'
|
||||
import axios from 'axios';
|
||||
import { getNotCheckAlarmCount } from '@/api/home';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
|
||||
const userStore = useUserStore();
|
||||
|
||||
watch(() => userStore.alarmCount, (newValue, oldValue) => {
|
||||
getData()
|
||||
},
|
||||
{ deep: true })
|
||||
|
||||
const treeloading = ref(false)
|
||||
const tableData: any = ref([])
|
||||
// 查询参数
|
||||
const queryInfo: any = ref({
|
||||
|
||||
current: 1, // 当前页
|
||||
size: 10, // 页大小
|
||||
stationCode: userStore.stationCode,
|
||||
taskAlarmType: '', // 告警来源
|
||||
alarmLevel: '', // 告警等级
|
||||
checkFlag: '0', // 状态
|
||||
startDate: '', // 开始时间
|
||||
endDate: '',// 结束时间
|
||||
})
|
||||
const dateArr: any = ref([])
|
||||
tableData.value = []
|
||||
const alarmInfo: any = ref({})
|
||||
const total = ref()
|
||||
function getData() { // 获取列表信息
|
||||
queryInfo.value.startDate = ""
|
||||
queryInfo.value.endDate = ""
|
||||
if (dateArr.value != null && dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
treeloading.value = true
|
||||
getAlarmLogPage(queryInfo.value).then((res: any) => {
|
||||
for (let i = 0; i < res.data.records.length; i++) {
|
||||
res.data.records[i].defectFilePath = userStore.webApiBaseUrl + "/previewimage?type=alarm&filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
}
|
||||
|
||||
treeloading.value = false
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
queryInfo.value.size = res.data.size
|
||||
queryInfo.value.current = res.data.current
|
||||
}).catch(() => {
|
||||
treeloading.value = false
|
||||
})
|
||||
}
|
||||
//重置
|
||||
function resetting() {
|
||||
queryInfo.value = {
|
||||
current: 1, // 当前页
|
||||
size: 10, // 页大小
|
||||
stationCode: userStore.stationCode,
|
||||
taskAlarmType: '', // 告警来源
|
||||
alarmLevel: '', // 告警等级
|
||||
checkFlag: '0', // 状态
|
||||
startDate: '', // 开始时间
|
||||
endDate: '',// 结束时间
|
||||
}
|
||||
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')
|
||||
dateArr.value = [startDate, endDate]
|
||||
getData()
|
||||
}
|
||||
//表格多选事件
|
||||
const multipleSelection = ref([])
|
||||
const alarmId: any = ref([])
|
||||
const handleSelectionChange = (val: any) => {
|
||||
multipleSelection.value = val
|
||||
alarmId.value = []
|
||||
multipleSelection.value.forEach((item: any) => {
|
||||
if (item.checkFlag == 0) {
|
||||
alarmId.value.push(item.id)
|
||||
}
|
||||
})
|
||||
}
|
||||
const Explicit = ref(false)
|
||||
const examinationInfo: any = ref({
|
||||
checkResult: "1"
|
||||
})
|
||||
function examinationAllClick(row: any) {
|
||||
doubleHit.value = false
|
||||
examinationInfo.value = {
|
||||
checkResult: "1"
|
||||
}
|
||||
isCheckAll.value = true
|
||||
Explicit.value = true
|
||||
}
|
||||
function examinationClick(row: any) {
|
||||
doubleHit.value = false
|
||||
isCheckAll.value = false
|
||||
examinationInfo.value = row
|
||||
examinationInfo.value.checkResult = "1"
|
||||
Explicit.value = true
|
||||
}
|
||||
const playDeviceId = ref("")
|
||||
const playChannelId = ref("")
|
||||
function queryRecordDetails(row: any) {
|
||||
playDeviceId.value = ""
|
||||
playChannelId.value = ""
|
||||
let startTimeStr = moment(new Date(alarmInfo.value.alarmDate).getTime() - 15 * 1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
let endTimeStr = moment(new Date(alarmInfo.value.alarmDate).getTime() + 15 * 1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/gb_record/queryNvrRecord/' + alarmInfo.value.patroldeviceCode + '/' + alarmInfo.value.patroldeviceCode + '?startTime=' + startTimeStr + '&endTime=' + endTimeStr, {}).then((res: any) => {
|
||||
if (res.data.code === 0) {
|
||||
// 处理时间信息
|
||||
clickNum.value = clickNum.value +1
|
||||
playDeviceId.value = res.data.data.deviceId
|
||||
playChannelId.value = res.data.data.channelId
|
||||
setTime(startTimeStr, endTimeStr);
|
||||
playRecord()
|
||||
}
|
||||
|
||||
}).catch(function (error: any) {
|
||||
})
|
||||
}
|
||||
function rowClick(row: any) {
|
||||
if (row.id == alarmInfo.value.id) {
|
||||
return
|
||||
}
|
||||
alarmInfo.value = row
|
||||
queryRecordDetails(row.alarmDate)
|
||||
|
||||
// let startTimeStr = moment(new Date(row.alarmDate).getTime() - 30*1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
// let endTimeStr = moment(new Date(row.alarmDate).getTime() + 30*1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
// setTime(startTimeStr, endTimeStr);
|
||||
// playRecord()
|
||||
}
|
||||
const doubleHit = ref(false)
|
||||
function confirmClick() {
|
||||
if (doubleHit.value == true) {
|
||||
return
|
||||
}
|
||||
doubleHit.value = true
|
||||
if (isCheckAll.value == false) {
|
||||
const temporaryInfo = {
|
||||
id: examinationInfo.value.id,
|
||||
checkFlag: 1,
|
||||
checkResult: examinationInfo.value.checkResult,
|
||||
checkComment: examinationInfo.value.checkComment,
|
||||
taskAlarmType: examinationInfo.value.taskAlarmType,
|
||||
deviceId: examinationInfo.value.deviceid
|
||||
}
|
||||
setAlarmLogStatus(temporaryInfo).then((res: any) => {
|
||||
if (res != undefined && res.code == '0') {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "核查成功",
|
||||
});
|
||||
getNotCheckAlarmCount({ stationId: userStore.stationId }).then((res: any) => {
|
||||
userStore.alarmCount = res.data.count
|
||||
})
|
||||
Explicit.value = false
|
||||
getData()
|
||||
} else {
|
||||
doubleHit.value = false
|
||||
}
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: "error",
|
||||
message: "核查失败",
|
||||
});
|
||||
doubleHit.value = false
|
||||
})
|
||||
} else {
|
||||
|
||||
let alarmJson = {
|
||||
ids: alarmId.value.join(","),
|
||||
checkFlag: 1,
|
||||
checkResult: examinationInfo.value.checkResult,
|
||||
checkComment: examinationInfo.value.checkComment,
|
||||
}
|
||||
const temporaryInfo = {
|
||||
alarmJson: JSON.stringify(alarmJson)
|
||||
}
|
||||
setBatchAlarmLogStatus(temporaryInfo).then((res: any) => {
|
||||
if (res != undefined && res.code == '0') {
|
||||
ElMessage({
|
||||
type: "success",
|
||||
message: "核查成功",
|
||||
});
|
||||
getNotCheckAlarmCount({ stationId: userStore.stationId }).then((res: any) => {
|
||||
userStore.alarmCount = res.data.count
|
||||
})
|
||||
Explicit.value = false
|
||||
getData()
|
||||
} else {
|
||||
doubleHit.value = false
|
||||
}
|
||||
|
||||
|
||||
}).catch(() => {
|
||||
ElMessage({
|
||||
type: "error",
|
||||
message: "核查失败",
|
||||
});
|
||||
doubleHit.value = false
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const startTime = ref('2023-05-12 09:08:37')
|
||||
const endTime = ref('2023-05-12 14:51:18')
|
||||
const chooseDate = ref('2023-05-12')
|
||||
|
||||
const tmpTime = ref(0)
|
||||
const tmpStartTime = ref(0)
|
||||
|
||||
function setTime(startTimes: any, endTimes: any) {
|
||||
startTime.value = startTimes;
|
||||
endTime.value = endTimes;
|
||||
let start: any = (new Date(startTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime()) / 1000;
|
||||
let end: any = (new Date(endTime.value).getTime() - new Date(chooseDate.value + " 00:00:00").getTime()) / 1000;
|
||||
tmpTime.value = new Date(endTimes).getTime() - new Date(startTimes).getTime()
|
||||
tmpStartTime.value = new Date(startTimes).getTime()
|
||||
}
|
||||
const streamId = ref("")
|
||||
function gbPlay() {// 视频回放播放功能
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/resume/' + streamId.value, {}).then((res: any) => {
|
||||
}).catch(function (error: any) {
|
||||
});
|
||||
}
|
||||
function gbPause() { // 视频回放暂停功能
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/pause/' + streamId.value, {}).then((res: any) => {
|
||||
}).catch(function (error: any) {
|
||||
})
|
||||
}
|
||||
function closeVideo(index: any) { // 关闭视频
|
||||
|
||||
}
|
||||
|
||||
const videoUrl = ref('')
|
||||
const isCheckAll = ref(false)
|
||||
|
||||
const AlarmLevelList: any = ref([]) // 告警等级
|
||||
const AlarmSourceList: any = ref([])
|
||||
const checkFlagList: any = ref([{
|
||||
id: "0",
|
||||
itemcode: "0",
|
||||
dictname: "未核查"
|
||||
}, {
|
||||
id: "1",
|
||||
itemcode: "1",
|
||||
dictname: "已审核"
|
||||
}, {
|
||||
id: "2",
|
||||
itemcode: "2",
|
||||
dictname: "已修正"
|
||||
}
|
||||
])
|
||||
function getArrType() { // 查询字典方法
|
||||
const paramstype = {
|
||||
dictcode: 'AlarmLevel'
|
||||
}
|
||||
getDeviceByType(paramstype).then((res: any) => {
|
||||
AlarmLevelList.value = res.data
|
||||
})
|
||||
|
||||
const paramstypes = {
|
||||
dictcode: 'AlarmSource'
|
||||
}
|
||||
getDeviceByType(paramstypes).then((res: any) => {
|
||||
AlarmSourceList.value = res.data
|
||||
})
|
||||
}
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
const ImgPath = ref("")
|
||||
const streamInfo: any = ref({})
|
||||
const app = ref("")
|
||||
const mediaServerId = ref("")
|
||||
const ssrc = ref("")
|
||||
const recordVideoPlayer:any = ref(null)
|
||||
function stopPlayRecord (callback:any) {
|
||||
recordVideoPlayer.value.pause()
|
||||
videoUrl.value = '';
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/stop/' + playDeviceId.value + "/" + playChannelId.value + "/" + streamId.value, {}).then((res: any) => {
|
||||
if (callback) callback()
|
||||
})
|
||||
}
|
||||
|
||||
const clickNum = ref(0)
|
||||
function sliderChange(e: any) {
|
||||
if (streamId.value !== "") {
|
||||
stopPlayRecord(()=> {
|
||||
streamId.value = "";
|
||||
sliderChange(e);
|
||||
})
|
||||
} else {
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' + playDeviceId.value + "/" + playChannelId.value + '?startTime=' + e + '&endTime=' + endTime.value, {}).then((res: any) => {
|
||||
|
||||
if (res.data.code === 0) {
|
||||
// 处理时间信息
|
||||
streamInfo.value = res.data.data;
|
||||
app.value = res.data.data.app;
|
||||
streamId.value = res.data.data.stream;
|
||||
mediaServerId.value = res.data.data.mediaServerId;
|
||||
ssrc.value = res.data.data.ssrc;
|
||||
videoUrl.value = getUrlByStreamInfo()
|
||||
}
|
||||
}).catch(function (error: any) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function playRecord() {
|
||||
if (streamId.value !== "") {
|
||||
stopPlayRecord(()=> {
|
||||
streamId.value = "";
|
||||
playRecord();
|
||||
})
|
||||
} else {
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' + playDeviceId.value + "/" + playChannelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
|
||||
if (res.data.code === 0) {
|
||||
// 处理时间信息
|
||||
streamInfo.value = res.data.data;
|
||||
app.value = res.data.data.app;
|
||||
streamId.value = res.data.data.stream;
|
||||
mediaServerId.value = res.data.data.mediaServerId;
|
||||
ssrc.value = res.data.data.ssrc;
|
||||
videoUrl.value = getUrlByStreamInfo()
|
||||
}
|
||||
}).catch(function (error: any) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function getUrlByStreamInfo() {
|
||||
if (location.protocol === "https:") {
|
||||
videoUrl.value = streamInfo.value["wss_flv"]
|
||||
} else {
|
||||
videoUrl.value = streamInfo.value["ws_flv"]
|
||||
}
|
||||
return videoUrl.value;
|
||||
|
||||
}
|
||||
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')
|
||||
dateArr.value = [startDate, endDate]
|
||||
getArrType()
|
||||
getData()
|
||||
})
|
||||
const num = ref(0)
|
||||
const handleChange = (value: any) => {
|
||||
if (typeof value === 'number') {
|
||||
if (value.toString().indexOf(".") != -1) {
|
||||
ElMessage({
|
||||
type: 'error',
|
||||
message: '请输入整数',
|
||||
})
|
||||
num.value = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="alarmInfo-box">
|
||||
<Eldialog v-if="Explicit == true" :title="isCheckAll == false?'核查确认':'批量核查'" :zIndex="2000" :width="'670px'"
|
||||
@before-close="Explicit = false" >
|
||||
<template v-slot:PopFrameContent>
|
||||
<div style="padding:10px ;">
|
||||
<div v-if="isCheckAll == false">
|
||||
<div style="display:flex;align-items: center;margin-bottom: 10px;">
|
||||
<div class="details-line"></div>
|
||||
<div class="details-title">告警信息</div>
|
||||
</div>
|
||||
<div class="details-conent">
|
||||
<div class="details-name">间隔名称：</div>
|
||||
<div>{{ examinationInfo.bayName }}</div>
|
||||
</div>
|
||||
<div class="details-conent">
|
||||
<div class="details-name">设备名称：</div>
|
||||
<div>{{ examinationInfo.patroldeviceName }}</div>
|
||||
</div>
|
||||
<div class="details-conent">
|
||||
<div class="details-name">部件名称：</div>
|
||||
<div>{{ examinationInfo.componentName }}</div>
|
||||
</div>
|
||||
<div class="details-conent">
|
||||
<div class="details-name">告警来源：</div>
|
||||
<div>{{ currency(AlarmSourceList, examinationInfo.taskAlarmType) }}</div>
|
||||
</div>
|
||||
|
||||
<div class="details-conent">
|
||||
<div class="details-name">告警等级：</div>
|
||||
<div>{{ currency(AlarmLevelList, examinationInfo.alarmLevel) }}</div>
|
||||
</div>
|
||||
<div class="details-conent">
|
||||
<div class="details-name">告警描述：</div>
|
||||
<div>{{ examinationInfo.content }}</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items: center;margin-bottom: 10px;margin-top: 30px;">
|
||||
<div class="details-line"></div>
|
||||
<div class="details-title">核查确认</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-conent" style="align-items: center;">
|
||||
<div class="details-name" style="padding-right: 10px;">是否属实</div>
|
||||
|
||||
<el-radio-group v-model="examinationInfo.checkResult"
|
||||
:disabled="examinationInfo.checkFlag != 0 && examinationInfo.checkFlag != undefined">
|
||||
<el-radio label="1" size="large">是</el-radio>
|
||||
<el-radio label="0" size="large">否</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="details-conent">
|
||||
<div class="details-name" style="padding-right: 10px;">反馈意见</div>
|
||||
<el-input v-model="examinationInfo.checkComment"
|
||||
:readonly="examinationInfo.checkFlag != 0 && examinationInfo.checkFlag != undefined" :rows="3" resize="none"
|
||||
type="textarea" placeholder="" />
|
||||
</div>
|
||||
<div style="display:flex;justify-content:center;margin-top:40px">
|
||||
<div class="details-button" @click="Explicit = false">取消</div>
|
||||
<div class="details-button" v-if="examinationInfo.checkFlag == 0 || examinationInfo.checkFlag == undefined"
|
||||
@click="confirmClick">确定</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</Eldialog>
|
||||
<div class="alarmInfo-left">
|
||||
<div style="position: relative;display: flex;align-items: center; justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;padding:5px 0;" class="screenHomepage">
|
||||
<el-select v-model="queryInfo.taskAlarmType" class="marginright" placeholder="告警来源" @change="getData"
|
||||
:teleported="false" :popper-append-to-body="false" clearable>
|
||||
<el-option v-for="item in AlarmSourceList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-select v-model="queryInfo.alarmLevel" class="marginright" placeholder="告警等级" @change="getData"
|
||||
:teleported="false" :popper-append-to-body="false" clearable>
|
||||
<el-option v-for="item in AlarmLevelList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-select v-model="queryInfo.checkFlag" class="marginright" placeholder="状态" @change="getData"
|
||||
:teleported="false" :popper-append-to-body="false" clearable>
|
||||
<el-option v-for="item in checkFlagList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-date-picker v-model="dateArr" type="daterange" range-separator="至" start-placeholder="开始时间"
|
||||
popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间"
|
||||
:clearable="false" @change="getData" />
|
||||
<el-button class="searchButton" type="primary" @click="getData">搜索</el-button>
|
||||
<el-button class="searchButton" type="primary" @click="resetting">重置</el-button>
|
||||
</div>
|
||||
<div style="min-width: 170px;">
|
||||
<!-- <el-button class="searchButton" type="primary" :disabled="multipleSelection.length == 0">上报</el-button> -->
|
||||
<el-button class="searchButton" type="primary" @click="examinationAllClick"
|
||||
:disabled="multipleSelection.length == 0">批量核查</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table row-key="id" :data="tableData" stripe :header-cell-style="tableBg"
|
||||
v-loading="treeloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
|
||||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100vh - 270px); overflow: auto "
|
||||
@selection-change="handleSelectionChange" @row-click="rowClick">
|
||||
<el-table-column type="selection" width="30" align="center" />
|
||||
<el-table-column type="index" align="center" label="序号" width="50px"></el-table-column>
|
||||
<el-table-column prop="patroldeviceName" min-width="80px" label="设备名称" />
|
||||
<el-table-column prop="componentName" min-width="80px" label="部件名称" />
|
||||
<el-table-column prop="deviceName" label="点位名称" min-width="80px" />
|
||||
<el-table-column prop="materialId" label="实物ID" width="80px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.materialId">{{ scope.row.materialId }}</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="点位分类" prop="appearanceType" width="70px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.deviceClass == 1">Ⅰ类</span>
|
||||
<span v-if="scope.row.deviceClass == 2">Ⅱ类</span>
|
||||
<span v-if="scope.row.deviceClass == 3">Ⅲ类</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="taskAlarmType" label="告警来源" width="110px" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ currency(AlarmSourceList, scope.row.taskAlarmType) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmLevel" label="告警等级" width="90px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.alarmLevel == 1" style="color: #0099FF;">{{ currency(AlarmLevelList,
|
||||
scope.row.alarmLevel) }}</span>
|
||||
<span v-if="scope.row.alarmLevel == 2" style="color: #FFFF00;">{{ currency(AlarmLevelList,
|
||||
scope.row.alarmLevel) }}</span>
|
||||
<span v-if="scope.row.alarmLevel == 3" style="color: #FF9900;">{{ currency(AlarmLevelList,
|
||||
scope.row.alarmLevel) }}</span>
|
||||
<span v-if="scope.row.alarmLevel == 4" style="color: #FF3300;">{{ currency(AlarmLevelList,
|
||||
scope.row.alarmLevel) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="defectType" label="缺陷类别" width="90px" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.defectType == 'wcaqm'">未正确佩戴安全帽</span>
|
||||
<span v-else-if="scope.row.defectType == 'wcgz'">未穿长袖工作服</span>
|
||||
<span v-else-if="scope.row.defectType == 'ryjjph'">人员聚集/徘徊</span>
|
||||
<span v-else-if="scope.row.defectType == 'hzyw'">烟火</span>
|
||||
<span v-else-if="scope.row.defectType == 'xdwcr'">小动物</span>
|
||||
<span v-else-if="scope.row.defectType == 'yw_gkxfw'">异物_挂空悬浮物</span>
|
||||
<span v-else-if="scope.row.defectType == 'sly_dmyw'">渗漏油</span>
|
||||
<span v-else>--</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmDate" label="告警时间" width="100px" align="center" />
|
||||
<el-table-column prop="checkFlag" label="状态" width="70px" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{ currency(checkFlagList, scope.row.checkFlag) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80px" align="center" fixed="right">
|
||||
<template #default="scope">
|
||||
<div style="display: flex;justify-content: space-around;">
|
||||
<img title="核查" style="cursor: pointer;" src="@/assets/tableIcon/hecha.png" @click.stop="examinationClick(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="queryInfo.size"
|
||||
v-model:current="queryInfo.current" @pagination="getData()"></Page>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarmInfo-right">
|
||||
<div style="width: 100%;height: 50%;">
|
||||
<div style="display:flex;align-items: center;">
|
||||
<div class="alarmInfo-line"></div>
|
||||
<div class="alarmInfo-title"> <span class="fontFamily">历史录像 </span> <span
|
||||
style="font-weight: 100;color: #fff;font-size: 16px;"> (视频采集前后15秒)</span></div>
|
||||
</div>
|
||||
<div class="video-box">
|
||||
<div v-if="alarmInfo.id == undefined">
|
||||
<img src="@/assets/monitorsystem/gjqr_wsp.png">
|
||||
<div style=" font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
padding-top: 10px;">暂无视频</div>
|
||||
</div>
|
||||
<JessibucaPlayer v-if="alarmInfo.id != undefined" ref="recordVideoPlayer" :isrecord="'alarmInfo'" :_uid="99"
|
||||
:visible.sync="true" :videoUrl="videoUrl" height="100px" :tmpTime="tmpTime" :endTime="endTime"
|
||||
:tmpStartTime="tmpStartTime" :chooseDate="chooseDate" :hasAudio="false" fluent autoplay live
|
||||
:clickNum="clickNum" @closeVideo="closeVideo" @sliderChange="sliderChange" @gbPlay="gbPlay" @gbPause="gbPause"></JessibucaPlayer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarmInfo-visitation">
|
||||
<div style="display:flex;align-items: center;height: 40px;padding-left: 15px;padding-top:10px">
|
||||
<div class="alarmInfo-line"></div>
|
||||
<div class="alarmInfo-title" style="color: #fff;"> <span class="fontFamily">告警图片</span> </div>
|
||||
</div>
|
||||
|
||||
<div class="alarmimg">
|
||||
<div v-if="alarmInfo.id == undefined">
|
||||
<img src="@/assets/monitorsystem/gjqr_wtp.png">
|
||||
<div style="font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
padding-top: 10px;">暂无图片</div>
|
||||
</div>
|
||||
<div style="width: 96%;height: 90%;" v-if="alarmInfo.id != undefined">
|
||||
<div style="width:100%;height:80%; position: relative;">
|
||||
<div style="position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
background: rgba(0,0,0,0.5);">
|
||||
<img src="@/assets/monitorsystem/xsri_fd.png" alt="">
|
||||
<el-image style="position: absolute;width:100%;height:100%; opacity: 0;" :src="alarmInfo.defectFilePath"
|
||||
:zoom-rate="1.2" :preview-src-list="[alarmInfo.defectFilePath]" :preview-teleported="true"
|
||||
fit="cover" />
|
||||
</div>
|
||||
<img style="width:100%;height:100%;" :src="alarmInfo.defectFilePath">
|
||||
</div>
|
||||
<div style="padding-top:10px">巡视结果：<span style="color:#ff2525">{{ alarmInfo.value }}{{ alarmInfo.unit
|
||||
}}</span></div>
|
||||
<div style="display:flex;">
|
||||
<div style="min-width:70px;">告警描述：</div>
|
||||
<div style="color:#ff2525">{{ alarmInfo.content }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.alarmInfo-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.alarmInfo-left {
|
||||
padding: 8px 15px;
|
||||
width: calc(65vw);
|
||||
height: calc(100vh - 160px);
|
||||
background: url(@/assets/newimg/xsjk_1235_700.png);
|
||||
background-size: 100% 100%;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.alarmInfo-right {
|
||||
width: calc(33.5vw);
|
||||
height: calc(100vh - 160px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
|
||||
.alarmInfo-line {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background: inherit;
|
||||
background-color: #009BFF;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.alarmInfo-title {
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.video-box {
|
||||
width: 100%;
|
||||
height: calc(100% - 45px);
|
||||
background-color: rgba(40, 40, 40, 1);
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.alarmInfo-visitation {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: url(@/assets/patrolmonitor/xsjk_640.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.alarmimg {
|
||||
width: 100%;
|
||||
height: calc(100% - 45px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.searchButton {
|
||||
// border: #059a67 solid 1px;
|
||||
// background-color: #08503a;
|
||||
// color: #00F9A2;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
// 弹窗
|
||||
.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: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.notification-title {
|
||||
text-align: center;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.notification-body {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.examination {
|
||||
width: 670px;
|
||||
height: 650px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
background: url(@/assets/monitorsystem/ejectbg/xsri_xz.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.examination-title {
|
||||
text-align: center;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.examination-body {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.examinationAll {
|
||||
width: 670px;
|
||||
height: 420px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
background: url(@/assets/monitorsystem/ejectbg/u1243.png);
|
||||
background-size: 100% 100%;
|
||||
|
||||
.examination-title {
|
||||
text-align: center;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
height: 40px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.examination-body {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.details-line {
|
||||
width: 4px;
|
||||
height: 10px;
|
||||
background: inherit;
|
||||
background-color: rgb(64, 158, 255);
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.details-title {
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgb(64, 158, 255);
|
||||
}
|
||||
|
||||
.details-conent {
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
padding: 7px 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.details-name {
|
||||
min-width: 95px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.marginright{
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,178 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "record",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { querylog } from "@/api/task";
|
||||
import { getTreefirst,getDeviceByType } from "@/api/device";
|
||||
import Page from '@/components/Pagination/page.vue'
|
||||
import moment from 'moment'
|
||||
|
||||
//定义表格数据
|
||||
const tableData: any = ref([]);
|
||||
|
||||
// 查询数据
|
||||
const queryParams = ref({
|
||||
current: 1,
|
||||
size: 20,
|
||||
stationcode: '',
|
||||
startdate: '',
|
||||
enddate: '',
|
||||
type: '',
|
||||
querystr: '',
|
||||
});
|
||||
// 日期查询
|
||||
const operationTime: any = ref();
|
||||
// 分页-总页数
|
||||
const total = ref(0);
|
||||
// 表格加载
|
||||
const loading = ref(false)
|
||||
//传输信息类型
|
||||
const DeviceClassList = ref()
|
||||
// 获取当天日期
|
||||
function getNowFormatDate() {
|
||||
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')
|
||||
operationTime.value = [startDate,endDate]
|
||||
// init()
|
||||
}
|
||||
|
||||
|
||||
// 初始化加载
|
||||
function init() {
|
||||
if (operationTime.value != null) {
|
||||
queryParams.value.startdate = operationTime.value[0];
|
||||
queryParams.value.enddate = operationTime.value[1];
|
||||
}
|
||||
loading.value = true;
|
||||
querylog(queryParams.value).then((result: any) => {
|
||||
tableData.value = result.data.records;
|
||||
total.value = result.data.total;
|
||||
queryParams.value.size = result.data.size
|
||||
queryParams.value.current = result.data.current
|
||||
loading.value = false;
|
||||
}).catch((err: any) => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
//搜索选择框
|
||||
const optionSelect = ref()
|
||||
function searchBox() {
|
||||
getTreefirst().then((res: any) => {
|
||||
optionSelect.value = res.data
|
||||
queryParams.value.stationcode = optionSelect.value[0].stationCode
|
||||
})
|
||||
const params = {
|
||||
dictcode: 'TransLogType'
|
||||
}
|
||||
getDeviceByType(params).then((res:any)=>{
|
||||
DeviceClassList.value = res.data
|
||||
init()
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
searchBox();
|
||||
getNowFormatDate();
|
||||
});
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
function dateFormat(row: any) {
|
||||
const daterc = row;
|
||||
if (daterc != null) {
|
||||
var date = new Date(daterc);
|
||||
var year = date.getFullYear();
|
||||
var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
|
||||
var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
|
||||
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
||||
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
||||
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
||||
// 拼接
|
||||
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="record-box">
|
||||
<div
|
||||
style="margin-bottom: 10px;display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center;">
|
||||
<el-select v-model="queryParams.stationcode" placeholder="变电站" @change="init"
|
||||
style="width: 220px;margin-right:10px;">
|
||||
<el-option v-for="item in optionSelect" :key="item.stationId" :label="item.stationName"
|
||||
:value="item.stationCode" />
|
||||
</el-select>
|
||||
<el-select v-model="queryParams.type" placeholder="传输信息类型" clearable @change="init"
|
||||
style="width: 160px;margin-right:10px;">
|
||||
<el-option v-for="item in DeviceClassList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-input v-model="queryParams.querystr" placeholder="请输入传输信息描述" clearable @clear="init()"
|
||||
@keyup.enter="init()" style="margin-right:15px ;width: 200px;" />
|
||||
<div style="width: 260px;">
|
||||
<el-date-picker v-model="operationTime" type="daterange" range-separator="至" start-placeholder="开始时间"
|
||||
popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间"
|
||||
:clearable="false" @change="init" style="width: 250px;" />
|
||||
</div>
|
||||
<el-button type="primary" style="margin-left: 10px" @click="init">搜索</el-button>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="tableData"
|
||||
style="width: 100%; height: calc(100vh - 266px);margin-bottom: 20px;" border
|
||||
:header-cell-style="{ background: 'rgb(250 250 250)', height: '50px' }">
|
||||
<el-table-column type="index" label="序号" width="70" align="center"></el-table-column>
|
||||
<el-table-column prop="stationCode" label="变电站编号" width="100"></el-table-column>
|
||||
<el-table-column prop="stationName" label="变电站名称" width="240"></el-table-column>
|
||||
<el-table-column prop="transtype" label="传输信息类型" width="240">
|
||||
<template #default="scope">
|
||||
<span >{{ currency(DeviceClassList,scope.row.transtype) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="transTime" label="传输时间" width="240">
|
||||
<template #default="scope">
|
||||
<span>{{ dateFormat(scope.row.transTime) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="transdesc" label="传输信息描述"></el-table-column>
|
||||
</el-table>
|
||||
<Page :total="total" v-model:size="queryParams.size" v-model:current="queryParams.current" @pagination="init()">
|
||||
</Page>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped >
|
||||
.record-box {
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
height: calc(100vh - 130px);
|
||||
overflow: auto;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:deep(.el-table__cell) {
|
||||
color: #383838;
|
||||
}
|
||||
|
||||
/* :deep(.el-select .el-input) {
|
||||
width: 80px !important;
|
||||
} */
|
||||
</style>
|
||||
@ -1,512 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "silentmonitor", // 静默监视
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import Page from '@/components/Pagination/page.vue'
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import JessibucaPlayer from '@/components/jessibuca/index1.vue'
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getAlarmListByType,getAlarmListPage,getSubstationAreaByCode } from "@/api/silentmonitor";
|
||||
|
||||
import { getDeviceByType } from "@/api/device";
|
||||
import moment from 'moment'
|
||||
import axios from 'axios';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
const userStore = useUserStore();
|
||||
const treeloading = ref(false)
|
||||
const tableData:any = ref([])
|
||||
// 查询参数
|
||||
const queryInfo:any = ref({
|
||||
current: 1, // 当前页
|
||||
size:10, // 页大小
|
||||
stationId:userStore.stationId,
|
||||
areaId:'', // 区域ID
|
||||
patrolDeviceName:'', // 摄像机名称
|
||||
monitorType:'', // 告警类型
|
||||
startDate: '', // 开始时间
|
||||
endDate: '',// 结束时间
|
||||
desc:'',
|
||||
})
|
||||
const dateArr: any = ref([])
|
||||
tableData.value = []
|
||||
const alarmInfo:any = ref({})
|
||||
const total = ref(0)
|
||||
function getData() { // 获取列表信息
|
||||
queryInfo.value.startDate = ""
|
||||
queryInfo.value.endDate = ""
|
||||
if (dateArr.value != null && dateArr.value.length != 0) {
|
||||
queryInfo.value.startDate = dateArr.value[0]
|
||||
queryInfo.value.endDate = dateArr.value[1]
|
||||
}
|
||||
treeloading.value = true
|
||||
getAlarmListByType(queryInfo.value).then((res: any) => {
|
||||
treeloading.value = false
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
}).catch(()=>{
|
||||
treeloading.value = false
|
||||
})
|
||||
}
|
||||
//重置
|
||||
function resetting() {
|
||||
queryInfo.value = {
|
||||
current: 1, // 当前页
|
||||
size:10, // 页大小
|
||||
stationId:userStore.stationId,
|
||||
areaId:'', // 区域ID
|
||||
patrolDeviceName:'', // 摄像机名称
|
||||
monitorType:'', // 告警类型
|
||||
startDate: '', // 开始时间
|
||||
endDate: '',// 结束时间
|
||||
}
|
||||
dateArr.value = []
|
||||
getData()
|
||||
}
|
||||
const playDeviceId = ref("")
|
||||
const playChannelId = ref("")
|
||||
function queryRecordDetails(row:any){
|
||||
playDeviceId.value = ""
|
||||
playChannelId.value = ""
|
||||
let startTimeStr = moment(new Date(row).getTime() - 15*1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
let endTimeStr = moment(new Date(row).getTime() + 15*1000).format("YYYY-MM-DD HH:mm:ss");
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/gb_record/queryNvrRecord/' + alarmInfo.value.patroldeviceCode + '/' +alarmInfo.value.patroldeviceCode + '?startTime=' + startTimeStr + '&endTime=' + endTimeStr, {}).then((res: any) => {
|
||||
if(res.data.code === 0) {
|
||||
// 处理时间信息
|
||||
clickNum.value = clickNum.value +1
|
||||
playDeviceId.value = res.data.data.deviceId
|
||||
playChannelId.value = res.data.data.channelId
|
||||
setTime(startTimeStr, endTimeStr);
|
||||
playRecord()
|
||||
}
|
||||
|
||||
}).catch(function (error: any) {
|
||||
})
|
||||
}
|
||||
function rowClick(row:any){
|
||||
if(row.areaId == alarmInfo.value.areaId && row.monitorType == alarmInfo.value.monitorType ){
|
||||
return
|
||||
}
|
||||
alarmInfo.value = row
|
||||
queryRecordDetails(row.alarmDate)
|
||||
getGiveanalarm()
|
||||
}
|
||||
function rowGiveanalarmClick(row:any){
|
||||
queryRecordDetails(row.alarmDate)
|
||||
}
|
||||
|
||||
const startTime = ref('')
|
||||
const endTime = ref('')
|
||||
const tmpTime = ref(0)
|
||||
const tmpStartTime = ref(0) // 视频开始时间
|
||||
|
||||
function setTime(startTimes:any, endTimes:any){
|
||||
startTime.value = startTimes;
|
||||
endTime.value = endTimes;
|
||||
tmpTime.value = new Date(endTimes).getTime() - new Date(startTimes).getTime()
|
||||
tmpStartTime.value = new Date(startTimes).getTime()
|
||||
}
|
||||
const streamId = ref("")
|
||||
function gbPlay(){// 视频回放播放功能
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/resume/' + streamId.value, {}).then((res: any) => {
|
||||
}).catch(function (error: any) {
|
||||
});
|
||||
}
|
||||
function gbPause(){ // 视频回放暂停功能
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/pause/' + streamId.value, {}).then((res: any) => {
|
||||
}).catch(function (error: any) {
|
||||
})
|
||||
}
|
||||
const videoUrl = ref('ws://192.168.1.119:81/rtp/47868E3C.live.flv')
|
||||
const isCheckAll = ref(false)
|
||||
|
||||
const AreaList:any = ref([]) // 告警等级
|
||||
const SilentMonitoringTypeList:any = ref([])
|
||||
const checkFlagList:any = ref([{
|
||||
id:"0",
|
||||
itemcode:"0",
|
||||
dictname:"未核查"
|
||||
},{
|
||||
id:"1",
|
||||
itemcode:"1",
|
||||
dictname:"已审核"
|
||||
},{
|
||||
id:"2",
|
||||
itemcode:"2",
|
||||
dictname:"已修正"
|
||||
}
|
||||
])
|
||||
function getArrType() { // 查询字典方法
|
||||
const params = {
|
||||
stationCode: userStore.stationCode
|
||||
}
|
||||
getSubstationAreaByCode(params).then((res: any) => {
|
||||
AreaList.value = res.data
|
||||
})
|
||||
|
||||
const paramstypes = {
|
||||
dictcode: 'SilentMonitoringType'
|
||||
}
|
||||
getDeviceByType(paramstypes).then((res: any) => {
|
||||
SilentMonitoringTypeList.value = res.data
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
|
||||
|
||||
const streamInfo:any = ref({})
|
||||
const app = ref("")
|
||||
const mediaServerId = ref("")
|
||||
const ssrc = ref("")
|
||||
const clickNum = ref(0)
|
||||
const recordVideoPlayer:any = ref(null)
|
||||
function stopPlayRecord (callback:any) {
|
||||
recordVideoPlayer.value.pause()
|
||||
videoUrl.value = '';
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/stop/' + playDeviceId.value + "/" + playChannelId.value + "/" + streamId.value, {}).then((res: any) => {
|
||||
if (callback) callback()
|
||||
})
|
||||
}
|
||||
|
||||
function sliderChange(e:any){
|
||||
if (streamId.value !== "") {
|
||||
stopPlayRecord(()=> {
|
||||
streamId.value = "";
|
||||
sliderChange(e);
|
||||
})
|
||||
} else {
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' + playDeviceId.value + "/" + playChannelId.value + '?startTime=' + e + '&endTime=' + endTime.value, {}).then((res: any) => {
|
||||
if(res.data.code === 0) {
|
||||
// 处理时间信息
|
||||
streamInfo.value = res.data.data;
|
||||
app.value = res.data.data.app;
|
||||
streamId.value = res.data.data.stream;
|
||||
mediaServerId.value = res.data.data.mediaServerId;
|
||||
ssrc.value = res.data.data.ssrc;
|
||||
videoUrl.value = getUrlByStreamInfo()
|
||||
}
|
||||
}).catch(function (error: any) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function playRecord (){
|
||||
if (streamId.value !== "") {
|
||||
stopPlayRecord(()=> {
|
||||
streamId.value = "";
|
||||
playRecord();
|
||||
})
|
||||
} else {
|
||||
axios.get(userStore.webApiMonitorUrl + '/api/playback/start/' + playDeviceId.value + "/" + playChannelId.value + '?startTime=' + startTime.value + '&endTime=' + endTime.value, {}).then((res: any) => {
|
||||
if(res.data.code === 0) {
|
||||
// 处理时间信息
|
||||
streamInfo.value = res.data.data;
|
||||
app.value = res.data.data.app;
|
||||
streamId.value = res.data.data.stream;
|
||||
mediaServerId.value = res.data.data.mediaServerId;
|
||||
ssrc.value = res.data.data.ssrc;
|
||||
videoUrl.value = getUrlByStreamInfo()
|
||||
}
|
||||
}).catch(function (error: any) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function getUrlByStreamInfo(){
|
||||
if (location.protocol === "https:") {
|
||||
videoUrl.value = streamInfo.value["wss_flv"]
|
||||
}else {
|
||||
videoUrl.value = streamInfo.value["ws_flv"]
|
||||
}
|
||||
return videoUrl.value;
|
||||
|
||||
}
|
||||
const giveanalarmData:any = ref([])
|
||||
|
||||
const giveanalarmArr:any = ref([])
|
||||
const searchInfo:any =ref({
|
||||
current: 1, // 当前页
|
||||
size:10, // 页大小
|
||||
})
|
||||
const giveanalarmloading:any =ref(false)
|
||||
const giveanalarmtotal:any =ref(0)
|
||||
function resetgiveanalarm() {// 重置告警信息
|
||||
giveanalarmArr.value = []
|
||||
getGiveanalarm()
|
||||
}
|
||||
function getGiveanalarm() { // 获取列表信息
|
||||
|
||||
searchInfo.value.startDate = ""
|
||||
searchInfo.value.endDate = ""
|
||||
if (giveanalarmArr.value != null && giveanalarmArr.value.length != 0) {
|
||||
searchInfo.value.startDate = giveanalarmArr.value[0]
|
||||
searchInfo.value.endDate = giveanalarmArr.value[1]
|
||||
}
|
||||
searchInfo.value.patrolDeviceCode = alarmInfo.value.patroldeviceCode
|
||||
searchInfo.value.monitorType = alarmInfo.value.monitorType
|
||||
|
||||
giveanalarmloading.value = true
|
||||
getAlarmListPage(searchInfo.value).then((res: any) => {
|
||||
giveanalarmloading.value = false
|
||||
for(let i = 0 ;i<res.data.records.length;i++){
|
||||
res.data.records[i].smallFilePath = userStore.webApiBaseUrl +"/previewimage?size=small&filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
res.data.records[i].srcList = [userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)]
|
||||
res.data.records[i].defectFilePath = userStore.webApiBaseUrl +"/previewimage?filename=" + encodeURI(res.data.records[i].defectFilePath)
|
||||
}
|
||||
giveanalarmData.value = res.data.records
|
||||
giveanalarmtotal.value = res.data.total
|
||||
}).catch(()=>{
|
||||
giveanalarmloading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
function sortChange(column:any){
|
||||
if(column.order == "descending"){
|
||||
if(column.prop == "count"){
|
||||
queryInfo.value.asc = "count"
|
||||
queryInfo.value.desc = null
|
||||
}else{
|
||||
queryInfo.value.asc = "alarmDate"
|
||||
queryInfo.value.desc = null
|
||||
}
|
||||
// 正序
|
||||
} else if(column.order == "ascending") {
|
||||
if(column.prop == "count"){
|
||||
queryInfo.value.asc = null
|
||||
queryInfo.value.desc = "count"
|
||||
}else{
|
||||
queryInfo.value.asc = null
|
||||
queryInfo.value.desc = "alarmDate"
|
||||
}
|
||||
// column.order == "ascending" 上升
|
||||
} else {
|
||||
queryInfo.value.asc = null
|
||||
queryInfo.value.desc = null
|
||||
}
|
||||
getData()
|
||||
}
|
||||
const ImgPath = ref("")
|
||||
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')
|
||||
giveanalarmArr.value=[startDate,endDate]
|
||||
getArrType()
|
||||
getData()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="alarmInfo-box">
|
||||
<div class="alarmInfo-left">
|
||||
<div style="position: relative;display: flex;align-items: center; justify-content: space-between;">
|
||||
<div style="display: flex;align-items: center;padding:5px 0;" >
|
||||
<el-input v-model="queryInfo.patrolDeviceName" style="width:200px" placeholder="摄像机名称" clearable class="marginright"
|
||||
@clear="getData()" @keyup.enter="getData()" />
|
||||
<el-select v-model="queryInfo.areaId" class="marginright" placeholder="区域" @change="getData" :teleported="false" :popper-append-to-body="false" clearable>
|
||||
<el-option v-for="item in AreaList" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
|
||||
</el-select>
|
||||
<el-select v-model="queryInfo.monitorType" placeholder="告警类型" @change="getData" :teleported="false" :popper-append-to-body="false" clearable>
|
||||
<el-option v-for="item in SilentMonitoringTypeList" :key="item.id" :label="item.dictname" :value="item.itemcode" />
|
||||
</el-select>
|
||||
<el-button class="searchButton" type="primary" @click="getData">搜索</el-button>
|
||||
<el-button class="searchButton" type="primary" @click="resetting">重置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table :data="tableData"
|
||||
v-loading="treeloading" highlight-current-row element-loading-background="rgb(11, 40, 34)"
|
||||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100vh - 270px); overflow: auto "
|
||||
stripe :header-cell-style="tableBg"
|
||||
@row-click="rowClick" @sort-change="sortChange"
|
||||
>
|
||||
<el-table-column type="index" align="center" label="序号" width="50px" />
|
||||
<el-table-column prop="patroldeviceName" label="摄像机名称" />
|
||||
<el-table-column prop="areaName" label="区域名称" />
|
||||
<el-table-column prop="place" label="安装位置" />
|
||||
<el-table-column prop="monitorType" label="告警类型" width="160px" align="center">
|
||||
<template #default="scope">
|
||||
<span>{{currency(SilentMonitoringTypeList,scope.row.monitorType)}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="alarmDate" label="最近告警时间" width="170px" align="center" sortable="alarmDate"/>
|
||||
<el-table-column prop="count" label="告警次数" width="120px" align="center" sortable="custom">
|
||||
<template #default="scope">
|
||||
<span style="color: #FFBD00;">{{scope.row.count}}</span>
|
||||
</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="queryInfo.size"
|
||||
v-model:current="queryInfo.current" @pagination="getData()"></Page>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarmInfo-right">
|
||||
<div style="width: 100%;height: 50%;">
|
||||
<div style="display:flex;align-items: center;">
|
||||
<div class="alarmInfo-line"></div>
|
||||
<div class="alarmInfo-title">历史录像 <span style="font-weight: 100;color: #fff;font-size: 16px;"> (视频采集前后15秒)</span></div>
|
||||
</div>
|
||||
<div class="video-box">
|
||||
<div v-if="alarmInfo.patroldeviceCode == undefined">
|
||||
<img src="@/assets/monitorsystem/gjqr_wsp.png">
|
||||
<div style=" font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
padding-top: 10px;">暂无视频</div>
|
||||
</div>
|
||||
<JessibucaPlayer v-if="alarmInfo.patroldeviceCode != undefined" ref="recordVideoPlayer" :isrecord="'alarmInfo'" :_uid="99" :visible.sync="true" :videoUrl="videoUrl" height="100px"
|
||||
:tmpTime="tmpTime"
|
||||
:endTime="endTime" :tmpStartTime="tmpStartTime"
|
||||
:hasAudio="false" fluent autoplay live
|
||||
:clickNum="clickNum" @sliderChange="sliderChange" @gbPlay="gbPlay" @gbPause="gbPause"></JessibucaPlayer>
|
||||
</div>
|
||||
</div>
|
||||
<div class="alarmInfo-visitation">
|
||||
<div style="display:flex;align-items: center;height: 40px;padding-left: 15px;padding-top:10px">
|
||||
<div class="alarmInfo-line"></div>
|
||||
<div class="alarmInfo-title">告警列表</div>
|
||||
</div>
|
||||
<div class="alarmimg">
|
||||
<div v-if="alarmInfo.patroldeviceCode == undefined">
|
||||
<img src="@/assets/monitorsystem/jmjs_wnr.png">
|
||||
<div style="font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
text-align: center;
|
||||
padding-top: 10px;">暂无内容</div>
|
||||
</div>
|
||||
<div style="width:100%;height:100%;padding:0 20px" v-if="alarmInfo.patroldeviceCode != undefined">
|
||||
<div style="display: flex;align-items: center;padding-top:20px">
|
||||
<span>告警时间：</span>
|
||||
<el-date-picker v-model="giveanalarmArr" type="daterange" range-separator="至" start-placeholder="开始时间"
|
||||
popper-class="elDatePicker" format="YYYY-MM-DD" value-format="YYYY-MM-DD" end-placeholder="结束时间" :clearable="false" style="max-width: 370px;"
|
||||
@change="getGiveanalarm"/>
|
||||
</div>
|
||||
<el-table :data="giveanalarmData" stripe :header-cell-style="tableBg"
|
||||
v-loading="giveanalarmloading" highlight-current-row element-loading-background="rgb(11, 40, 34)"
|
||||
style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(100% - 85px); overflow: auto "
|
||||
@row-click="rowGiveanalarmClick">
|
||||
<el-table-column type="index" align="center" label="序号" width="50px" />
|
||||
<el-table-column prop="alarmDate" label="告警时间" width="170px" align="center"/>
|
||||
<el-table-column prop="content" label="告警信息" />
|
||||
<el-table-column prop="defectFilePath" label="告警图片" width="90px" show>
|
||||
<template #default="scope">
|
||||
<el-image
|
||||
style="width: 40px; height: 40px"
|
||||
:src="scope.row.smallFilePath"
|
||||
:zoom-rate="1.2"
|
||||
:preview-src-list="scope.row.srcList"
|
||||
:preview-teleported="true"
|
||||
fit="cover"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Page style="position: relative;z-index: 100;margin-top: 5px;" :total="giveanalarmtotal" v-model:size="searchInfo.size"
|
||||
v-model:current="searchInfo.current" @pagination="getGiveanalarm()"
|
||||
:jumper="'hide'"
|
||||
></Page>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
.alarmInfo-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 0;
|
||||
|
||||
.alarmInfo-left{
|
||||
padding: 8px 15px;
|
||||
margin-right: 15px;
|
||||
width: calc(65vw);
|
||||
height: calc(100vh - 160px);
|
||||
background: url(@/assets/newimg/xsjk_1235_700.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.alarmInfo-right{
|
||||
width: calc(33.5vw);
|
||||
height: calc(100vh - 160px);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: space-between;
|
||||
overflow:auto;
|
||||
.alarmInfo-line{
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
background: inherit;
|
||||
background-color: #009BFF;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.alarmInfo-title{
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.video-box{
|
||||
width: 100%;
|
||||
height: calc(100% - 45px);
|
||||
background-color: rgba(40, 40, 40, 1);
|
||||
margin-top: 10px;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
.alarmInfo-visitation{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background: url(@/assets/patrolmonitor/xsjk_640.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.alarmimg{
|
||||
width: 100%;
|
||||
height: calc(100% - 65px);
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
font-family: 'Arial Normal', 'Arial';
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.searchButton {
|
||||
// border: #059a67 solid 1px;
|
||||
// background-color: #08503a;
|
||||
// color: #00F9A2;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.marginright{
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,611 +0,0 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "todoPlan",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
// 任务执行计划
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { getTreefirst } from "@/api/device";
|
||||
import {
|
||||
getTaskByStationId,
|
||||
getTaskToDoList,
|
||||
getTaskToDo
|
||||
} from "@/api/task";
|
||||
import { getDeviceByType } from "@/api/device";
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import Page from '@/components/Pagination/page.vue';
|
||||
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
|
||||
//左侧树形控件
|
||||
interface Tree {
|
||||
[x: string]: any;
|
||||
label: string;
|
||||
children?: Tree[];
|
||||
}
|
||||
const defaultProps = {
|
||||
children: "children",
|
||||
label: "taskName"
|
||||
};
|
||||
const taskName = ref("");
|
||||
const treedata: any = ref([]);
|
||||
const treeRef = ref();
|
||||
const treeloading = ref(true);
|
||||
const currentNodeKey = ref("");
|
||||
const patrolData: any = ref();
|
||||
const querydata: any = ref();
|
||||
const taskId = ref("");
|
||||
//获取企业树形信息
|
||||
const value = ref()
|
||||
const optionSelect = ref()
|
||||
function getSelect() {
|
||||
getTreefirst().then((res: any) => {
|
||||
optionSelect.value = res.data
|
||||
value.value = res.data[0].stationName
|
||||
getTree(res.data[0].stationId)
|
||||
})
|
||||
}
|
||||
function qublicQuery() { // 前端通过任务名称查询
|
||||
let arr = []
|
||||
let newPublicData = JSON.parse(JSON.stringify(querydata.value))
|
||||
if (taskName.value != '') {
|
||||
newPublicData.forEach((item: any) => {
|
||||
if (item.taskName.toLowerCase().indexOf(taskName.value.toLowerCase()) !== -1) {
|
||||
arr.push(item)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
arr = newPublicData
|
||||
}
|
||||
treedata.value = arr
|
||||
currentNodeKey.value = ""
|
||||
taskId.value = ""
|
||||
tableData.value = []
|
||||
nextTick(() => {
|
||||
if (treedata.value.length != 0) {
|
||||
currentNodeKey.value = treedata.value[0].taskId
|
||||
taskId.value = treedata.value[0].taskId
|
||||
getData()
|
||||
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
function getTree(val: any) { // 左侧巡查任务Data
|
||||
const params = {
|
||||
stationId: val
|
||||
}
|
||||
treeloading.value = true
|
||||
getTaskByStationId(params).then((res: any) => {
|
||||
treedata.value = []
|
||||
querydata.value = []
|
||||
if (res.data != null && res.data.length != 0) {
|
||||
treedata.value = JSON.parse(JSON.stringify(res.data))
|
||||
querydata.value = JSON.parse(JSON.stringify(res.data))
|
||||
}
|
||||
|
||||
treeloading.value = false
|
||||
loading.value = true
|
||||
currentNodeKey.value = ""
|
||||
taskId.value = ""
|
||||
nextTick(() => {
|
||||
if (res.data.length != 0) {
|
||||
currentNodeKey.value = res.data[0].taskId
|
||||
taskId.value = treedata.value[0].taskId
|
||||
}
|
||||
getData()
|
||||
})
|
||||
})
|
||||
.catch((error: any) => {
|
||||
treeloading.value = false
|
||||
})
|
||||
|
||||
}
|
||||
// 导航树点击事件
|
||||
function handleNodeClick(data: Tree, node: any) {
|
||||
taskId.value = data.taskId;
|
||||
getData()
|
||||
}
|
||||
// 右侧表格
|
||||
|
||||
const deviceName = ref('')
|
||||
const tableData: any = ref()
|
||||
const loading = ref(false)
|
||||
const paramstable = ref({
|
||||
size: 10,
|
||||
current: 1,
|
||||
deviceName: '',
|
||||
type: '',
|
||||
})
|
||||
|
||||
|
||||
const taskInfo: any = ref({
|
||||
taskName: ""
|
||||
})
|
||||
const total = ref()
|
||||
function getData() {
|
||||
loading.value = true
|
||||
const params = {
|
||||
taskId: taskId.value,
|
||||
taskState: tabs.value,
|
||||
current: paramstable.value.current,
|
||||
size: paramstable.value.size,
|
||||
}
|
||||
if (taskId.value == "") {
|
||||
tableData.value = []
|
||||
loading.value = false
|
||||
return
|
||||
}
|
||||
getTaskToDoList(params).then((res: any) => {
|
||||
tableData.value = res.data.records
|
||||
total.value = res.data.total
|
||||
paramstable.value.size = res.data.size
|
||||
paramstable.value.current = res.data.current
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const tabs = ref(0)
|
||||
function tabClick(num: any) {
|
||||
tabs.value = num
|
||||
paramstable.value.current = 1
|
||||
getData()
|
||||
}
|
||||
//弹窗关闭
|
||||
const infoForm = ref()
|
||||
function handleClose() {
|
||||
if (infoForm.value != null) infoForm.value.resetFields();
|
||||
dialogVisible.value = false;
|
||||
|
||||
}
|
||||
const dialogVisible = ref(false);
|
||||
const title = ref("");
|
||||
|
||||
//查看
|
||||
function handleView(row: any) {
|
||||
title.value = "查看";
|
||||
const params = {
|
||||
taskTodoId: row.taskTodoId,
|
||||
|
||||
}
|
||||
getTaskToDo(params).then((res: any) => {
|
||||
taskInfo.value = res.data
|
||||
patrolData.value = res.data.taskResult
|
||||
})
|
||||
dialogVisible.value = true;
|
||||
|
||||
}
|
||||
const TaskTypeData: any = ref();
|
||||
const InspectionTypeData: any = ref();
|
||||
const TaskPriorityData: any = ref();
|
||||
function getDict() {
|
||||
const params = {
|
||||
dictcode: 'TaskType'
|
||||
}
|
||||
getDeviceByType(params).then((res: any) => {
|
||||
TaskTypeData.value = res.data
|
||||
})
|
||||
const paramsss = {
|
||||
dictcode: 'InspectionType'
|
||||
}
|
||||
getDeviceByType(paramsss).then((res: any) => {
|
||||
InspectionTypeData.value = res.data
|
||||
})
|
||||
const paramss = {
|
||||
dictcode: 'TaskPriority'
|
||||
}
|
||||
|
||||
|
||||
getDeviceByType(paramss).then((res: any) => {
|
||||
TaskPriorityData.value = res.data
|
||||
})
|
||||
}
|
||||
function currency(list: any, itemcode: any) {
|
||||
let dictname = ''
|
||||
list.forEach((element: any) => {
|
||||
if (element.itemcode == itemcode) {
|
||||
dictname = element.dictname
|
||||
}
|
||||
})
|
||||
return dictname
|
||||
}
|
||||
//获取用户列表信息
|
||||
onMounted(() => {
|
||||
getDict();
|
||||
getSelect();
|
||||
});
|
||||
|
||||
const vMove = {
|
||||
mounted(el: any) {
|
||||
el.onmousedown = function (e: any) {
|
||||
var init = e.clientX;
|
||||
var parent: any = document.getElementById("silderLeft");
|
||||
const initWidth: any = parent.offsetWidth;
|
||||
document.onmousemove = function (e) {
|
||||
var end = e.clientX;
|
||||
var newWidth = end - init + initWidth;
|
||||
parent.style.width = newWidth + "px";
|
||||
};
|
||||
document.onmouseup = function () {
|
||||
document.onmousemove = document.onmouseup = null;
|
||||
};
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="faulttemplate-box">
|
||||
<aside id="silderLeft">
|
||||
<el-select v-model="value" placeholder=""
|
||||
style="width: 100% !important; padding:5px; display: flex; justify-content: center" @change="getTree">
|
||||
<el-option v-for="item in optionSelect" :key="item.stationId" :label="item.stationName"
|
||||
:value="item.stationId" style="width:100%" />
|
||||
</el-select>
|
||||
|
||||
|
||||
<el-input v-model="taskName" placeholder="请输入任务名称" @input="qublicQuery()" style="width: 100% ; padding:5px;" />
|
||||
<el-scrollbar height="calc(100vh - 250px)">
|
||||
<el-tree ref="treeRef" :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
|
||||
node-key="taskId" :data="treedata" :current-node-key="currentNodeKey" :highlight-current="true"
|
||||
:props="defaultProps" v-loading="treeloading" @node-click="handleNodeClick">
|
||||
<template #default="{ node, data }">
|
||||
<div class="custom-tree-node" style="display: flex; align-items: center;">
|
||||
<svg v-if="data.type == 1" style="margin-right:5px" version="1.1" id="图层_1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16" height="16" viewBox="0 0 16 16" xml:space="preserve">
|
||||
<title>例行巡视</title>
|
||||
<path class="st0" d="M14,6.3V1.5H1.3v13.2H8c0.3,0,0.5,0.2,0.6,0.4c0,0,0,0,0,0c0.2,0.5-0.1,1-0.6,1H0.5c-0.3,0-0.6-0.3-0.6-0.6V0.7
|
||||
c0-0.3,0.3-0.6,0.6-0.6h14.3c0.3,0,0.6,0.3,0.6,0.6v5.6c0,0.4-0.3,0.7-0.7,0.7C14.3,7,14,6.7,14,6.3L14,6.3z M8.7,4.4h3.4
|
||||
c0.4,0,0.7,0.3,0.7,0.7c0,0.4-0.3,0.7-0.7,0.7H8.7c-0.4,0-0.7-0.3-0.7-0.7C7.9,4.8,8.3,4.4,8.7,4.4z M2.5,5.1c0.2-0.3,0.7-0.4,1-0.1
|
||||
c0.2,0.2,0.5,0.2,0.7,0l1.2-1.2c0.3-0.3,0.7-0.3,1,0.1l0,0c0.2,0.3,0.2,0.6-0.1,0.9L4.3,6.8C4.2,6.9,4.1,7,3.9,7S3.6,6.9,3.5,6.8
|
||||
L2.6,5.9C2.4,5.7,2.3,5.3,2.5,5.1z M2.5,9.6c0.2-0.3,0.7-0.4,1-0.1c0.2,0.2,0.5,0.2,0.7,0l1.2-1.2c0.3-0.3,0.7-0.3,1,0.1l0,0
|
||||
c0.2,0.3,0.2,0.6-0.1,0.9l-2.1,2.1c-0.1,0.1-0.3,0.2-0.4,0.2c-0.2,0-0.3-0.1-0.4-0.2l-0.9-0.9C2.4,10.3,2.3,9.9,2.5,9.6z M12.7,11.8
|
||||
h-2.3c0,0,0,0.1,0,0.1v2.7h2.3v-2.7C12.7,11.9,12.7,11.8,12.7,11.8z M13.2,10.2l0.2-0.3c0.2-0.3,0-0.7-0.4-0.7h-3
|
||||
c-0.3,0-0.5,0.4-0.4,0.7l0.2,0.3c0.1,0.1,0.2,0.2,0.4,0.2h2.7C13,10.4,13.2,10.3,13.2,10.2z M9.3,15.4V12c0-0.1,0-0.2-0.1-0.3
|
||||
L7.2,8.3C7.2,8.2,7.2,8.1,7.2,8c0.1-0.1,0.1-0.1,0.3-0.1h8.1c0.1,0,0.2,0.1,0.3,0.1c0.1,0.1,0,0.2,0,0.3l-1.9,3.4
|
||||
c-0.1,0.1-0.1,0.2-0.1,0.3v3.4c0,0.3-0.3,0.6-0.6,0.6H9.8C9.5,16,9.3,15.8,9.3,15.4z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
<svg v-if="data.type == 2" style="margin-right:5px" version="1.1" id="图层_1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16" height="16" viewBox="0 0 16 16" xml:space="preserve">
|
||||
<title>特殊巡视</title>
|
||||
<path class="st0"
|
||||
d="M10.3,14.5H1.7c-0.2,0-0.4-0.2-0.4-0.4V2.7c0-0.2,0.2-0.4,0.4-0.4C2,2.3,2.3,2,2.3,1.7S2,1,1.7,1
|
||||
C0.7,1,0,1.8,0,2.7v11.4c0,0.9,0.8,1.7,1.7,1.7h8.7c0.4,0,0.6-0.3,0.6-0.6C11,14.8,10.7,14.5,10.3,14.5z"
|
||||
fill="currentColor" />
|
||||
<path class="st0" d="M13,2.3L13,2.3c0.3,0,0.4,0.2,0.4,0.4v6c0,0.4,0.3,0.6,0.6,0.6v0c0.4,0,0.6-0.3,0.6-0.6v-6
|
||||
C14.7,1.8,13.9,1,13,1h0c-0.4,0-0.6,0.3-0.6,0.6S12.6,2.3,13,2.3z" fill="currentColor" />
|
||||
<rect x="4.8" y="0.7" class="st0" width="4.9" height="1.3" fill="currentColor" />
|
||||
<rect x="2.9" y="-0.2" class="st0" width="1.3" height="2.3" fill="currentColor" />
|
||||
<rect x="10.3" y="-0.2" class="st0" width="1.3" height="2.3" fill="currentColor" />
|
||||
<path class="st0" d="M15.5,12.7c-0.1-0.2-0.3-0.4-0.6-0.4h-2.7l0.8-0.8c0.3-0.3,0.3-0.6,0-0.9c-0.2-0.3-0.6-0.3-0.9,0l-1.9,1.9
|
||||
c-0.2,0.2-0.2,0.5-0.1,0.7c0.1,0.2,0.3,0.4,0.6,0.4h2.7l-0.7,0.7c-0.3,0.3-0.3,0.6,0,0.9c0.1,0.1,0.3,0.2,0.5,0.2
|
||||
c0.2,0,0.3-0.1,0.5-0.2l1.8-1.8C15.6,13.2,15.6,13,15.5,12.7z" fill="currentColor" />
|
||||
<path class="st0"
|
||||
d="M3.3,6h7.9c0.4,0,0.6-0.3,0.6-0.6c0-0.4-0.3-0.6-0.6-0.6H3.3C2.9,4.7,2.7,5,2.7,5.3C2.7,5.7,2.9,6,3.3,6z"
|
||||
fill="currentColor" />
|
||||
<path class="st0" d="M3.3,12.4h2.5c0.4,0,0.6-0.3,0.6-0.6c0-0.4-0.3-0.6-0.6-0.6H3.3c-0.4,0-0.6,0.3-0.6,0.6
|
||||
C2.7,12.1,2.9,12.4,3.3,12.4z" fill="currentColor" />
|
||||
<path class="st0"
|
||||
d="M3.3,9.2h7.4c0.4,0,0.6-0.3,0.6-0.6S11,7.9,10.7,7.9H3.3c-0.4,0-0.6,0.3-0.6,0.6S2.9,9.2,3.3,9.2z"
|
||||
fill="currentColor" />
|
||||
|
||||
</svg>
|
||||
<svg v-if="data.type == 3" style="margin-right:5px" version="1.1" id="图层_1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16" height="16" viewBox="0 0 16 16" xml:space="preserve">
|
||||
<title>专项巡视</title>
|
||||
<path class="st0"
|
||||
d="M1.9,14.8c-0.1-0.1-0.2-0.3-0.2-0.5V1.8c0-0.2,0.1-0.4,0.2-0.5C2,1.1,2.2,1,2.4,1h7.4v2.5
|
||||
c0,0.8,0.7,1.5,1.5,1.5h2.5l0,1.1h1l0-2.1l-4-4.1H2.1C1.3,0,0.7,0.7,0.6,1.5v12.9c0,0.8,0.7,1.5,1.5,1.5h6.3l0-1H2.4
|
||||
C2.2,15,2,14.9,1.9,14.8z M10.8,1.2l2.8,2.9h-2.1c-0.2,0-0.4-0.1-0.5-0.2c-0.1-0.1-0.2-0.3-0.2-0.5L10.8,1.2z"
|
||||
fill="currentColor" />
|
||||
<path class="st0" d="M7.9,7.8L7.9,7.8l-4.1,0c-0.3,0-0.6,0.2-0.6,0.5c0,0.3,0.2,0.5,0.6,0.5h4.1c0.3,0,0.6-0.2,0.6-0.5
|
||||
C8.4,8.1,8.2,7.8,7.9,7.8z" fill="currentColor" />
|
||||
<path class="st0" d="M14.5,7.3h-3.8c-0.5,0-1,0.4-1,1v6.4c0,0.5,0.4,1,1,1c0,0,0.1,0,0.2-0.1c0,0,1.7-1.7,1.7-1.7s1.6,1.7,1.7,1.7
|
||||
c0.1,0.1,0.2,0.1,0.2,0.1c0.5,0,1-0.4,1-1V8.2C15.5,7.7,15,7.3,14.5,7.3z M14.5,14.2c0,0.1-0.1,0.2-0.2,0.2l-1.8-1.6l-1.8,1.6
|
||||
c-0.1,0-0.2-0.1-0.2-0.2V8.4c0-0.1,0.1-0.2,0.2-0.2h3.5c0.1,0,0.2,0.1,0.2,0.2V14.2z"
|
||||
fill="currentColor" />
|
||||
<path class="st0" d="M3.7,10.8c-0.3,0-0.6,0.2-0.6,0.5c0,0.3,0.2,0.5,0.6,0.5h4.1c0.3,0,0.6-0.2,0.6-0.5c0-0.3-0.2-0.5-0.6-0.5H3.7
|
||||
z" fill="currentColor" />
|
||||
</svg>
|
||||
<svg v-if="data.type == 4" style="margin-right:5px" version="1.1" id="图层_1"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="16" height="16" viewBox="0 0 16 16" xml:space="preserve">
|
||||
<title>自定义巡视</title>
|
||||
<path class="st0" d="M13.8,9.2c-0.3,0-0.6,0.3-0.6,0.6v4.9H2.1V1.2h9l2.1,2.3v2c0,0.3,0.3,0.6,0.6,0.6c0.3,0,0.6-0.3,0.6-0.6V3.3
|
||||
c0-0.2-0.1-0.3-0.2-0.4l-2.5-2.7C11.7,0.1,11.5,0,11.3,0H1.5C1.2,0,0.9,0.3,0.9,0.6v14.8c0,0.3,0.3,0.6,0.6,0.6h12.3
|
||||
c0.3,0,0.6-0.3,0.6-0.6V9.8C14.4,9.5,14.1,9.2,13.8,9.2z" fill="currentColor" />
|
||||
<path class="st0" d="M15.5,6.4c-0.2-0.3-0.6-0.3-0.9-0.1l-8.6,6.2c0,0,0,0,0,0c-0.3,0.2-0.3,0.6-0.1,0.9c0.1,0.2,0.3,0.3,0.5,0.3
|
||||
c0.1,0,0.3,0,0.4-0.1l8.6-6.2C15.7,7.1,15.7,6.7,15.5,6.4z" fill="currentColor" />
|
||||
<path class="st0"
|
||||
d="M8.9,3.7H4C3.6,3.7,3.3,4,3.3,4.3c0,0.3,0.3,0.6,0.6,0.6h4.9c0.3,0,0.6-0.3,0.6-0.6C9.5,4,9.2,3.7,8.9,3.7z"
|
||||
fill="currentColor" />
|
||||
<path class="st0"
|
||||
d="M8.9,7.4H4C3.6,7.4,3.3,7.7,3.3,8S3.6,8.6,4,8.6h4.9c0.3,0,0.6-0.3,0.6-0.6S9.2,7.4,8.9,7.4z"
|
||||
fill="currentColor" />
|
||||
</svg>
|
||||
<span>{{ data.taskName }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-scrollbar>
|
||||
<div class="moveBtn" v-move>
|
||||
<div class="moveBtn-line" v-move></div>
|
||||
</div>
|
||||
</aside>
|
||||
<section class="silderRight">
|
||||
<div class="draggable">
|
||||
<div class="tabbas">
|
||||
<div @click="tabClick(0)" :class="tabs == 0 ? 'tabbas1' : ''">待执行</div>
|
||||
<div @click="tabClick(1)" :class="tabs == 1 ? 'tabbas1' : ''">历史执行</div>
|
||||
</div>
|
||||
<el-table v-loading="loading" :data="tableData" style="width: 100%;margin-bottom: 15px;" row-key="id" border
|
||||
default-expand-all stripe :header-cell-style="tableBg" :height="'calc(100vh - 280px)'">
|
||||
<el-table-column type="index" label="序号" width="80" align="center" />
|
||||
<el-table-column label="任务编号" prop="taskCode" min-width="110"></el-table-column>
|
||||
<el-table-column label="巡视类型" prop="type" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ currency(InspectionTypeData, scope.row.type) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="任务类型" prop="taskType" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ currency(TaskTypeData, scope.row.taskType) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优先级" prop="priority" min-width="120">
|
||||
<template #default="scope">
|
||||
{{ currency(TaskPriorityData, scope.row.priority) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="计划执行时间" prop="planStartTime" width="210"></el-table-column>
|
||||
<el-table-column v-if="tabs == 1" label="执行时间" prop="startTime" width="210"></el-table-column>
|
||||
<el-table-column label="状态" prop="taskState" width="100">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.taskState == 0">待执行</span>
|
||||
<span v-if="scope.row.taskState == 1">已执行</span>
|
||||
<span v-if="scope.row.taskState == 2">正在执行</span>
|
||||
<span v-if="scope.row.taskState == 3">暂停</span>
|
||||
<span v-if="scope.row.taskState == 4">终止</span>
|
||||
<span v-if="scope.row.taskState == 5">未执行</span>
|
||||
<span v-if="scope.row.taskState == 6">超期</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="90" fixed="right" align="center"
|
||||
style="display: flex; display: -webkit-flex;">
|
||||
<template #default="scope">
|
||||
<span
|
||||
style="display: flex;display: -webkit-flex; justify-content: space-around;-webkit-justify-content: space-around; ">
|
||||
<img src="@/assets/tableIcon/xsjk_ckxq.png" alt="" title="查看详情" @click="handleView(scope.row)"
|
||||
style="cursor: pointer;">
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Page :total="total" v-model:size="paramstable.size" v-model:current="paramstable.current"
|
||||
@pagination="getData()"></Page>
|
||||
</div>
|
||||
</section>
|
||||
<Eldialog v-model="dialogVisible" @before-close="handleClose" title="详情" append-to-body width="1175px" draggable>
|
||||
<template v-slot:PopFrameContent>
|
||||
<div class="displayflex">
|
||||
<div class="line"></div>
|
||||
<div class="title">基本信息</div>
|
||||
</div>
|
||||
<div class="displayflextext" style="margin-bottom:20px">
|
||||
<div>任务编码：</div>
|
||||
<div style="width: 160px;">{{ taskInfo.taskCode }}</div>
|
||||
<div>任务名称：</div>
|
||||
<div style="width: 200px;">{{ taskInfo.taskName }}</div>
|
||||
<div>巡视类型：</div>
|
||||
<div style="width: 150px;">{{ currency(InspectionTypeData, taskInfo.type) }}</div>
|
||||
<div>优先级：</div>
|
||||
<div style="width: 100px;">{{ currency(TaskPriorityData, taskInfo.priority) }}</div>
|
||||
<div>计划执行时间：</div>
|
||||
<div>{{ taskInfo.planStartTime }}</div>
|
||||
</div>
|
||||
<div class="displayflextext">
|
||||
<div v-if="tabs == 1">执行时间：</div>
|
||||
<div v-if="tabs == 1" style="width: 160px;">{{ taskInfo.startTime }}</div>
|
||||
<div>任务状态：</div>
|
||||
<div style="width: 200px;">
|
||||
<span v-if="taskInfo.taskState == 0">待执行</span>
|
||||
<span v-if="taskInfo.taskState == 1">已执行</span>
|
||||
<span v-if="taskInfo.taskState == 2">正在执行</span>
|
||||
<span v-if="taskInfo.taskState == 3">暂停</span>
|
||||
<span v-if="taskInfo.taskState == 4">终止</span>
|
||||
<span v-if="taskInfo.taskState == 5">未执行</span>
|
||||
<span v-if="taskInfo.taskState == 6">超期</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayflex">
|
||||
<div class="line"></div>
|
||||
<div class="title">巡视点位</div>
|
||||
</div>
|
||||
<el-table :data="patrolData" style="width: 100%;" row-key="id" border default-expand-all
|
||||
ref="multipleTableReflist"
|
||||
:header-cell-style="tableBg" stripe
|
||||
:height="'calc(100vh - 320px)'">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column label="巡视点位名称" prop="deviceName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="所属变电站" prop="stationName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="所属区域" prop="areaName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="所属间隔" prop="bayName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="所属主设备" prop="mainDeviceName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="所属部件" prop="componentName" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column label="摄像头" prop="patroldeviceName"></el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
</Eldialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.faulttemplate-box {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
padding-top:60px;
|
||||
// background-color: #f2f4f9;
|
||||
|
||||
}
|
||||
.silderRight {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: calc(100vh - 155px);
|
||||
overflow: auto;
|
||||
border-radius: 3px;
|
||||
padding: 15px;
|
||||
padding-bottom: 0px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
// :deep(.el-tree-node.is-current>.el-tree-node__content) {
|
||||
// width: 100%;
|
||||
// height: 40px;
|
||||
// background-color: #179f84 !important;
|
||||
// color: #fff !important;
|
||||
// }
|
||||
|
||||
// :deep(.el-select .el-input.is-focus .el-input__wrapper) {
|
||||
// box-shadow: 0 0 0 1px #179f84 inset !important;
|
||||
// }
|
||||
|
||||
// :deep(.el-select .el-input__wrapper.is-focus) {
|
||||
// box-shadow: 0 0 0 1px #179f84 inset !important;
|
||||
// }
|
||||
|
||||
:deep(.el-tree-node__content) {
|
||||
width: 100% !important;
|
||||
height: 40px !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
:deep(.el-form-item) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
width: 115px !important;
|
||||
}
|
||||
|
||||
:deep(.el-dialog) {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__error) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
:deep(.el-tooltip__trigger) {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
//tabs
|
||||
.tabbas {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #009bff;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
color:#B5D7FF;
|
||||
|
||||
div {
|
||||
width: 70px;
|
||||
height: 51px;
|
||||
line-height: 51px;
|
||||
margin-left: 10px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tabbas1 {
|
||||
width: 70px;
|
||||
height: 51px;
|
||||
text-align: center;
|
||||
line-height: 51px;
|
||||
color: #009bff !important;
|
||||
border-bottom: 3px solid #009bff !important;
|
||||
box-sizing: border-box;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.displayflex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.line {
|
||||
width: 5px;
|
||||
height: 14px;
|
||||
background: #009bff;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-left: 10px;
|
||||
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: rgb(181, 215, 255);
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.displayflextext {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40px;
|
||||
font-family: 微软雅黑;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: rgb(181, 215, 255);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
svg:hover {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
/* 拖动条 */
|
||||
.moveBtn {
|
||||
height: 100%;
|
||||
width: 15px;
|
||||
padding: 0 6px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.moveBtn-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#silderLeft {
|
||||
width: 300px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.moveBtn {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}</style>
|
||||
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
巡视任务展示
|
||||
</div>
|
||||
</template>
|
||||
File diff suppressed because it is too large
Load Diff
@ -25,7 +25,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
|
||||
proxy: {
|
||||
[env.VITE_APP_BASE_API]: {
|
||||
// 线上API地址
|
||||
target: 'http://192.168.1.20:8070/',
|
||||
target: 'http://192.168.1.20:8090/',
|
||||
// 本地API地址
|
||||
// target: 'http://192.168.1.152:8080/riis-system',
|
||||
changeOrigin: true,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user