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: {
|
proxy: {
|
||||||
[env.VITE_APP_BASE_API]: {
|
[env.VITE_APP_BASE_API]: {
|
||||||
// 线上API地址
|
// 线上API地址
|
||||||
target: 'http://192.168.1.20:8070/',
|
target: 'http://192.168.1.20:8090/',
|
||||||
// 本地API地址
|
// 本地API地址
|
||||||
// target: 'http://192.168.1.152:8080/riis-system',
|
// target: 'http://192.168.1.152:8080/riis-system',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user