|
|
@@ -1,174 +1,734 @@
|
|
|
<template>
|
|
|
- <el-card class="alarmDetail dashboard-container">
|
|
|
- <div class="alarmDetail-header">
|
|
|
- <div style="display: flex; align-items: center">
|
|
|
- <div>报警信息详情</div>
|
|
|
- </div>
|
|
|
- <el-button type="text" icon="el-icon-arrow-left" @click="goback">返回</el-button>
|
|
|
- </div>
|
|
|
+ <div class="dashboard-container">
|
|
|
+ <div class="dashboard-text">
|
|
|
+ <div style="background: #fff">
|
|
|
+ <div style="height: 74px; display: flex; align-items: center">
|
|
|
+ <el-select
|
|
|
+ style="width: 220px; margin-left: 20px; margin-right: 20px"
|
|
|
+ v-model="railwayCode"
|
|
|
+ placeholder="请选择报警线路"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in routeList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.railwayName"
|
|
|
+ :value="item.railwayCode"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
|
|
|
- <el-container class="alarmDetail-bottom">
|
|
|
- <el-container>
|
|
|
- <div style="display: flex; flex-direction: column">
|
|
|
- <div style="
|
|
|
- height: 35px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-family: 0;
|
|
|
- ">
|
|
|
- <div style="
|
|
|
- height: 14px;
|
|
|
- width: 5px;
|
|
|
- background-color: rgb(39, 102, 221);
|
|
|
- margin-right: 5px;
|
|
|
- "></div>
|
|
|
- <div style="font-size: 16px; line-height: 16px">报警信息</div>
|
|
|
+ <el-select
|
|
|
+ v-model="lineDir"
|
|
|
+ placeholder="请选择行别"
|
|
|
+ style="width: 220px; margin-right: 20px"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in lineType"
|
|
|
+ :key="index"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-model="isLock"
|
|
|
+ placeholder="请选择解除状态"
|
|
|
+ style="width: 220px; margin-right: 20px"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in zhangtai"
|
|
|
+ :key="index"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ :clearable="true"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="searchShow == true"
|
|
|
+ style="display: flex"
|
|
|
+ justify="end"
|
|
|
+ type="flex"
|
|
|
+ >
|
|
|
+ <div class="sp-button-submit" type="primary" @click="msgAlarmList">
|
|
|
+ 查询
|
|
|
+ </div>
|
|
|
+ <div class="sp-button-reset" @click="resetForm()">重置</div>
|
|
|
+ <!-- <div class="sp-button-submit" @click="uploadOut">导出</div> -->
|
|
|
+ <el-button
|
|
|
+ v-if="searchShow == false"
|
|
|
+ @click="searchShow = true"
|
|
|
+ type="text"
|
|
|
+ style="color: #2766dd"
|
|
|
+ icon="el-icon-arrow-up"
|
|
|
+ >收起</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="searchShow == true"
|
|
|
+ @click="searchShow = false"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-arrow-down"
|
|
|
+ style="color: #2766dd"
|
|
|
+ >展开</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
- <cameraInfoMessage pageType="alarmDetail" :cameraInfo="cameraInfo" :historicalAlarm="historicalAlarm"
|
|
|
- style="flex: 1; width: 300px"></cameraInfoMessage>
|
|
|
- <div @click="release()" v-if="cameraInfo.isLock == 2" style="
|
|
|
- margin-top: 10px;
|
|
|
- font-family: 0;
|
|
|
- width: 100%;
|
|
|
- height: 35px;
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="searchShow == false"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ height: 40px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 460px; margin-right: 20px; margin-left: 20px"
|
|
|
+ v-model="value1"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ clearable
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ :clearable="true"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <!-- <el-input
|
|
|
+ v-model="alarmMileBD"
|
|
|
+ placeholder="请输入里程位置"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ style="width: 100%"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ </el-input> -->
|
|
|
+
|
|
|
+ <el-select
|
|
|
+ v-if="searchShow == false"
|
|
|
+ v-model="alarmType"
|
|
|
+ placeholder="请选择报警类型"
|
|
|
+ style="width: 220px; margin-right: 20px"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in damageList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-if="searchShow == false">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- background-color: rgb(39, 102, 221);
|
|
|
- color: #fff;
|
|
|
- ">
|
|
|
- 解除警报
|
|
|
+ padding-bottom: 17px;
|
|
|
+ margin-left: 20px;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <!-- <el-input
|
|
|
+ v-model="beginMile"
|
|
|
+ placeholder="请输入起始里程"
|
|
|
+ @input="changeValue1"
|
|
|
+ style="width: 220px; margin-left: 20px"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <template slot="append">km</template></el-input
|
|
|
+ > -->
|
|
|
+ <!-- <el-select
|
|
|
+ v-model="beginMile"
|
|
|
+ placeholder="请选择起始里程"
|
|
|
+ style="width: 250px"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in mileageList"
|
|
|
+ :key="index"
|
|
|
+ :clearable="true"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ ></el-option>
|
|
|
+ </el-select> -->
|
|
|
+ <!-- <div
|
|
|
+ style="
|
|
|
+ width: 10px;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #888;
|
|
|
+ margin: 0 5px;
|
|
|
+ "
|
|
|
+ ></div> -->
|
|
|
+ <!-- <el-input
|
|
|
+ v-model="endMile"
|
|
|
+ placeholder="请输入结束里程"
|
|
|
+ @input="changeValue2"
|
|
|
+ style="width: 220px; margin-right: 20px"
|
|
|
+ clearable
|
|
|
+ >
|
|
|
+ <template slot="append">km</template></el-input
|
|
|
+ > -->
|
|
|
+ <el-input
|
|
|
+ v-model="alarmMileBD"
|
|
|
+ placeholder="请输入里程位置"
|
|
|
+ clearable
|
|
|
+ oninput="value=value.replace(/[^\d.]/g, '')"
|
|
|
+ style="width: 220px; margin-right: 20px"
|
|
|
+ >
|
|
|
+ <template slot="append">km</template></el-input
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ v-model="monitorSystemName"
|
|
|
+ placeholder="请选择监测系统名称"
|
|
|
+ style="width: 220px; margin-right: 20px"
|
|
|
+ filterable
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in monitorNameData"
|
|
|
+ :key="item.monitorSystemName"
|
|
|
+ :label="item.monitorSystemName"
|
|
|
+ :value="item.clientId"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <div
|
|
|
+ v-if="searchShow == false"
|
|
|
+ style="display: flex; align-items: center"
|
|
|
+ >
|
|
|
+ <div class="sp-button-submit searth_left" @click="msgAlarmList">
|
|
|
+ 查询
|
|
|
+ </div>
|
|
|
+ <div class="sp-button-reset" @click="resetForm()">重置</div>
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ v-if="searchShow == false"
|
|
|
+ @click="searchShow = true"
|
|
|
+ type="text"
|
|
|
+ style="color: #2766dd"
|
|
|
+ icon="el-icon-arrow-up"
|
|
|
+ >收起</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ v-if="searchShow == true"
|
|
|
+ @click="searchShow = false"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-arrow-down"
|
|
|
+ style="color: #2766dd"
|
|
|
+ >展开</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- <el-col :span="6"></el-col> -->
|
|
|
</div>
|
|
|
- <el-main style="padding: 0px; margin-top: 20px">
|
|
|
- <palyAndPlayback :items="items" :videoType="videoType" :cameraCode="cameraCode"
|
|
|
- :alarmTime="cameraInfo.alarmTime" @tabChange="palyAndPlaybackTabChange"></palyAndPlayback>
|
|
|
- </el-main>
|
|
|
- </el-container>
|
|
|
- </el-container>
|
|
|
-
|
|
|
- <warningDispose v-if="warningDisposeModal.show" :id="warningDisposeModal.id" @close="warningDisposeModal.show = false"
|
|
|
- @success="releaseSuccess"></warningDispose>
|
|
|
- </el-card>
|
|
|
-</template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-card class="cardHeadr" style="margin-top: 15px; padding-top: 0">
|
|
|
+ <!-- <div style="font-size: 18px">
|
|
|
+ 告警:<span style="font-size: 24px; color: red"> {{ total }}</span>
|
|
|
+ </div> -->
|
|
|
+ <div style="height: 64px; display: flex; align-items: center">
|
|
|
+ <div class="export" @click="uploadOut">
|
|
|
+ <span class="icon font_family"></span>
|
|
|
+ 导出
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column
|
|
|
+ label="报警时间"
|
|
|
+ prop="alarmTime"
|
|
|
+ width="180"
|
|
|
+ fixed
|
|
|
+ ></el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="报警线路"
|
|
|
+ prop="railwayName"
|
|
|
+ fixed
|
|
|
+ ></el-table-column> -->
|
|
|
+ <el-table-column
|
|
|
+ label="来源"
|
|
|
+ prop="sourceName"
|
|
|
+ width="140"
|
|
|
+ fixed
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column align="center" label="报警类型" prop="alarmTypeName" fixed>
|
|
|
+ <!-- <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ scope.row.alarmType == 1
|
|
|
+ ? "泥石流"
|
|
|
+ : scope.row.alarmType == 2
|
|
|
+ ? "异物侵线"
|
|
|
+ : "异物侵入"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column
|
|
|
+ align="center"
|
|
|
+ label="报警病害属性"
|
|
|
+ prop="alarmAttr"
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ ></el-table-column> -->
|
|
|
|
|
|
+ <el-table-column label="行别" align="center" prop="lineDir">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="text-align: center">
|
|
|
+ {{
|
|
|
+ scope.row.lineDir === 1
|
|
|
+ ? "上行"
|
|
|
+ : scope.row.lineDir === 2
|
|
|
+ ? "下行"
|
|
|
+ : "-"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="里程位置(km)"
|
|
|
+ align="center"
|
|
|
+ prop="alarmMiles"
|
|
|
+ ></el-table-column>
|
|
|
+ <!-- <el-table-column label="起里里程(km)" prop="beginMile"></el-table-column>
|
|
|
+ <el-table-column label="结束里程(km)" prop="endMile"></el-table-column> -->
|
|
|
+ <!-- <el-table-column label="报警次数" align="center" prop="alarmCount">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div style="color: red">{{ scope.row.alarmCount }}</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ <!-- <el-table-column label="解除状态" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ {{
|
|
|
+ scope.row.isLock === 1
|
|
|
+ ? "已解除"
|
|
|
+ : scope.row.isLock === 2
|
|
|
+ ? "未解除"
|
|
|
+ : "-"
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="报警内容"
|
|
|
+ show-overflow-tooltip="true"
|
|
|
+ align="center"
|
|
|
+ prop="content"
|
|
|
+
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ max-width: 10em;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ {{ scope.row.content }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="推送车次"
|
|
|
+ align="center"
|
|
|
+
|
|
|
+ prop="trainNumName"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ v-if='scope.row.trainNumName'
|
|
|
+ type="text"
|
|
|
+ style="text-align: center; color: #2766dd"
|
|
|
+ @click="detailsBtn(scope.row)"
|
|
|
+ >{{ scope.row.trainNumName }}{{ '...' }}</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="解除状态" align="center" prop="isRelease">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{
|
|
|
+ scope.row.isRelease === 1
|
|
|
+ ? "已解除"
|
|
|
+ : scope.row.isRelease === 2
|
|
|
+ ? "未解除"
|
|
|
+ : "-"
|
|
|
+ }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="解除说明"
|
|
|
+ align="center"
|
|
|
+
|
|
|
+ prop="releaseContent"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="解除时间"
|
|
|
+ align="center"
|
|
|
+
|
|
|
+ prop="releasedTime"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="操作" align="center" width="280" prop="text13">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <div>
|
|
|
+ <!-- <el-button
|
|
|
+ style="color: #2766dd"
|
|
|
+ v-if="scope.row.isLock == 2"
|
|
|
+ type="text"
|
|
|
+ @click="release(scope.row.id)"
|
|
|
+ >解除</el-button
|
|
|
+ > -->
|
|
|
+
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ style="text-align: center; color: #2766dd"
|
|
|
+ @click="
|
|
|
+ seeDetail(scope.row.id, scope.row.railwayCode, scope.row)
|
|
|
+ "
|
|
|
+ >查看详情</el-button
|
|
|
+ >
|
|
|
+ <!-- <el-button
|
|
|
+ type="text"
|
|
|
+ style="text-align: center; color: #2766dd"
|
|
|
+ @click="detailsBtn(scope.row)"
|
|
|
+ >推送详情</el-button
|
|
|
+ > -->
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-row justify="end" style="margin-top: 10px" type="flex">
|
|
|
+ <el-pagination
|
|
|
+ :page-size="100"
|
|
|
+ :page-sizes="[10, 15, 20]"
|
|
|
+ :total="total"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </el-row>
|
|
|
+ </el-card>
|
|
|
+ <detailsDialog :detailsData="detailsData" v-if="detailsData.dialogVisible"></detailsDialog>
|
|
|
+ <warningDispose
|
|
|
+ v-if="warningDisposeModal.show"
|
|
|
+ :id="warningDisposeModal.id"
|
|
|
+ @close="warningDisposeModal.show = false"
|
|
|
+ @success="releaseSuccess"
|
|
|
+ ></warningDispose>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
<script>
|
|
|
-import palyAndPlayback from "@/components/videoPlayer/palyAndPlayback";
|
|
|
-import cameraInfoMessage from "@/components/videoPlayer/cameraInfoMessage";
|
|
|
-import { msgAlarmDetail } from "@/api/alarmList";
|
|
|
-import { videoHistoricalAlarm, alarmHistoricalAlarm } from "@/api/video";
|
|
|
+import { mapGetters } from "vuex";
|
|
|
import warningDispose from "@/components/warning/warningDispose.vue";
|
|
|
-
|
|
|
+import detailsDialog from './components/detailsDialog.vue'
|
|
|
+import {
|
|
|
+ baseRailwayManagement,
|
|
|
+ dataType,
|
|
|
+ msgAlarmList,
|
|
|
+ getCameraDataUpLoadOut,
|
|
|
+ releaseAlarm,
|
|
|
+ alarmMessageList
|
|
|
+} from "@/api/alarmList";
|
|
|
+import { monitorNameList } from "@/api/monitor";
|
|
|
export default {
|
|
|
- name: "AlarmDetail",
|
|
|
- components: { palyAndPlayback, cameraInfoMessage, warningDispose },
|
|
|
+ name: "cart",
|
|
|
+ components: { warningDispose,detailsDialog },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(["name"]),
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
- id: "", // id
|
|
|
- alarmId: "",
|
|
|
- cameraCode: "", // 摄像机code
|
|
|
- items: "",
|
|
|
- cameraInfo: {
|
|
|
- cameraCode: "",
|
|
|
- isLock: "",
|
|
|
- alarmTime: "",
|
|
|
- alarmType: "",
|
|
|
- lineDir: "",
|
|
|
- deptId: "",
|
|
|
- alarmMile: "",
|
|
|
- beginMile: "",
|
|
|
- installLongitude: "",
|
|
|
- releasedTime: "",
|
|
|
+ detailsData:{
|
|
|
+ dialogVisible:false,
|
|
|
+ alarmId:''
|
|
|
},
|
|
|
- historicalAlarm: [],
|
|
|
+ warningModal: {
|
|
|
+ show: true,
|
|
|
+ },
|
|
|
+ isShow: false,
|
|
|
+ searchShow: true,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 0,
|
|
|
+ value1: "",
|
|
|
+ value: "",
|
|
|
+ input: "",
|
|
|
+ zhangtai: [
|
|
|
+ {
|
|
|
+ value: "1",
|
|
|
+ label: "已解除",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "2",
|
|
|
+ label: "未解除",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ monitorNameData: [],
|
|
|
+ tableData: [],
|
|
|
+ routeList: [],
|
|
|
+ lineType: [],
|
|
|
+ damageList: [],
|
|
|
+ mileageList: [],
|
|
|
+ railwayCode: "",
|
|
|
+ lineDir: "",
|
|
|
+ alarmType: "",
|
|
|
+ alarmMileBD: "",
|
|
|
+ monitorSystemName: "",
|
|
|
+ beginMile: "",
|
|
|
+ endMile: "",
|
|
|
+ beginAlarmTime: "",
|
|
|
+ endAlarmTime: "",
|
|
|
+ isLock: "",
|
|
|
warningDisposeModal: {
|
|
|
show: false,
|
|
|
id: "",
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
- created() { },
|
|
|
- mounted() {
|
|
|
- this.id = this.$route.query.id;
|
|
|
- this.alarmId = this.$route.query.alarmId;
|
|
|
- this.cameraCode = this.$route.query.cameraCode;
|
|
|
- this.msgAlarmDetail();
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route(req) {
|
|
|
- this.id = this.$route.query.id;
|
|
|
- this.cameraCode = this.$route.query.cameraCode;
|
|
|
- this.msgAlarmDetail();
|
|
|
- },
|
|
|
+ created() {
|
|
|
+ if(this.$route.params.pageNum) {
|
|
|
+ this.isLock = this.$route.params.isLock + ''
|
|
|
+ this.monitorSystemName = this.$route.params.source
|
|
|
+ }
|
|
|
+ this.getMonitoreName();
|
|
|
+ this.msgAlarmList();
|
|
|
+ this.baseRailwayManagement();
|
|
|
+ this.dataType("sys_line_dir");
|
|
|
+ this.dataType("sys_alarm_type");
|
|
|
+ this.dataType("sys_mileage");
|
|
|
+ if(this.$route.query.zhangtai){
|
|
|
+ this.isLock = "2";
|
|
|
+ this.msgAlarmList();
|
|
|
+ }
|
|
|
+
|
|
|
},
|
|
|
methods: {
|
|
|
- msgAlarmDetail() {
|
|
|
- msgAlarmDetail(this.id).then((res) => {
|
|
|
- console.log(res.data, 'dadadad')
|
|
|
- this.cameraInfo = res.data;
|
|
|
- var row = JSON.parse(sessionStorage.row)
|
|
|
- if (typeof row.alarmMiles === 'number') {
|
|
|
- var value = row.alarmMiles
|
|
|
- row.alarmMiles = row.alarmMile
|
|
|
- row.alarmMile = value
|
|
|
- }
|
|
|
- this.items = row
|
|
|
-
|
|
|
- // this.alarmId = this.cameraInfo.alarmId;
|
|
|
- alarmHistoricalAlarm(this.alarmId).then((res) => {
|
|
|
- this.historicalAlarm = res.data;
|
|
|
- });
|
|
|
+ detailsBtn(row) {
|
|
|
+ this.detailsData.alarmId = row.alarmId
|
|
|
+ this.detailsData.dialogVisible = true
|
|
|
+ },
|
|
|
+ getMonitoreName() {
|
|
|
+ let params = {};
|
|
|
+ monitorNameList(params).then((response) => {
|
|
|
+ this.monitorNameData = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ imagePreview(images) {
|
|
|
+ this.$hevueImgPreview({
|
|
|
+ multiple: true, // 开启多图预览模式
|
|
|
+ nowImgIndex: 0, // 多图预览，默认展示第二张图片
|
|
|
+ imgList: images, // 需要预览的多图数组
|
|
|
+ });
|
|
|
+ },
|
|
|
+ seeDetail(val, val1, row) {
|
|
|
+ sessionStorage.row = JSON.stringify(row);
|
|
|
+ this.$router.push({
|
|
|
+ path: "/alarmDetail",
|
|
|
+ query: {
|
|
|
+ id: val,
|
|
|
+ cameraCode: val1,
|
|
|
+ alarmId: row.alarmId,
|
|
|
+ },
|
|
|
});
|
|
|
},
|
|
|
- release() {
|
|
|
- this.warningDisposeModal.id = this.id;
|
|
|
- this.warningDisposeModal.show = true;
|
|
|
+ // uploadOut: function () {
|
|
|
+ // getCameraDataUpLoadOut({}).then((res) => {
|
|
|
+ // this.resolveBlob(res);
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ uploadOut: function () {
|
|
|
+ getCameraDataUpLoadOut({}).then((res) => {
|
|
|
+ this.resolveBlob(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ resolveBlob(res) {
|
|
|
+ const link = document.createElement("a");
|
|
|
+ link.style.dispaly = "none";
|
|
|
+ let binaryData = [];
|
|
|
+ binaryData.push(res);
|
|
|
+ link.href = window.URL.createObjectURL(new Blob(binaryData));
|
|
|
+ // link.href = URL.createObjectURL(res);
|
|
|
+ link.setAttribute("download", "报警信息列表.xlsx");
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ },
|
|
|
+
|
|
|
+ resetForm() {
|
|
|
+ (this.railwayCode = ""),
|
|
|
+ (this.lineDir = ""),
|
|
|
+ (this.alarmType = ""),
|
|
|
+ (this.alarmMileBD = "");
|
|
|
+ this.monitorSystemName = "";
|
|
|
+ (this.beginMile = ""),
|
|
|
+ (this.endMile = ""),
|
|
|
+ (this.beginAlarmTime = ""),
|
|
|
+ (this.endAlarmTime = "");
|
|
|
+ this.value1 = "";
|
|
|
+ this.isLock = "";
|
|
|
+ this.msgAlarmList();
|
|
|
+ },
|
|
|
+ getImgUrl(img) {
|
|
|
+ return "http://124.71.171.71:18801/picbucket" + img;
|
|
|
+ },
|
|
|
+ release(val) {
|
|
|
+ if (val) {
|
|
|
+ this.warningDisposeModal.id = val;
|
|
|
+ this.warningDisposeModal.show = true;
|
|
|
+ }
|
|
|
},
|
|
|
releaseSuccess() {
|
|
|
this.warningDisposeModal.id = "";
|
|
|
this.warningDisposeModal.show = false;
|
|
|
- this.msgAlarmDetail();
|
|
|
+ this.msgAlarmList();
|
|
|
+ },
|
|
|
+ dataType(val) {
|
|
|
+ dataType(val).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (val === "sys_line_dir") {
|
|
|
+ this.lineType = [];
|
|
|
+ this.lineType = res.data;
|
|
|
+ this.$set(this.lineType);
|
|
|
+ } else if ("sys_alarm_type" === val) {
|
|
|
+ this.damageList = [];
|
|
|
+ this.damageList = res.data;
|
|
|
+ this.$set(this.damageList);
|
|
|
+ } else if ("sys_mileage" === val) {
|
|
|
+ this.mileageList = [];
|
|
|
+ this.mileageList = res.data;
|
|
|
+ this.$set(this.mileageList);
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
- goback() {
|
|
|
- // this.$router.push('/alarmInformation/list')
|
|
|
- // this.$router.push("/list");
|
|
|
- this.$router.back();
|
|
|
+ baseRailwayManagement() {
|
|
|
+ baseRailwayManagement().then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.routeList = [];
|
|
|
+ this.routeList = res.data;
|
|
|
+ this.$set(this.routeList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ this.pageSize = val;
|
|
|
+ this.msgAlarmList();
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
+ this.pageNum = val;
|
|
|
+ this.msgAlarmList();
|
|
|
+ },
|
|
|
+
|
|
|
+ changeValue(value) {
|
|
|
+ this.alarmMileBD = /^[0-9]*$/.test(parseInt(value))
|
|
|
+ ? String(parseInt(value)).replace(".", "")
|
|
|
+ : "";
|
|
|
+ },
|
|
|
+ changeValue1(value) {
|
|
|
+ this.beginMile = /^[0-9]*$/.test(parseInt(value))
|
|
|
+ ? String(parseInt(value)).replace(".", "")
|
|
|
+ : "";
|
|
|
+ },
|
|
|
+ changeValue2(value) {
|
|
|
+ this.endMile = /^[0-9]*$/.test(parseInt(value))
|
|
|
+ ? String(parseInt(value)).replace(".", "")
|
|
|
+ : "";
|
|
|
+ },
|
|
|
+
|
|
|
+ msgAlarmList() {
|
|
|
+ // if (this.alarmMileBD && !/^(\d+.\d{1,3}|\d+)$/.test(this.alarmMileBD)) {
|
|
|
+ // return this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "请输入正确的里程",
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // if (this.beginMile && !/^(\d+.\d{1,3}|\d+)$/.test(this.beginMile)) {
|
|
|
+ // return this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "请输入正确的起始里程",
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // if (this.endMile && !/^(\d+.\d{1,3}|\d+)$/.test(this.endMile)) {
|
|
|
+ // return this.$message({
|
|
|
+ // type: "error",
|
|
|
+ // message: "请输入正确的结束里程",
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+
|
|
|
+ let beginAlarmTime = undefined;
|
|
|
+ let endAlarmTime = undefined;
|
|
|
+ if (this.value1) {
|
|
|
+ beginAlarmTime = this.value1[0];
|
|
|
+ endAlarmTime = this.value1[1];
|
|
|
+ }
|
|
|
+ msgAlarmList({
|
|
|
+ pageNum: this.pageNum,
|
|
|
+ pageSize: this.pageSize,
|
|
|
+ alarmType: this.alarmType,
|
|
|
+ railwayCode: this.railwayCode,
|
|
|
+ beginMile: this.beginMile,
|
|
|
+ endMile: this.endMile,
|
|
|
+ lineDir: this.lineDir,
|
|
|
+ isRelease: this.isLock,
|
|
|
+ alarmMileBD: this.alarmMileBD,
|
|
|
+ beginAlarmTime: beginAlarmTime,
|
|
|
+ endAlarmTime: endAlarmTime,
|
|
|
+ source: this.monitorSystemName,
|
|
|
+ }).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.tableData = [];
|
|
|
+ this.tableData = res.data.records;
|
|
|
+ this.$set(this.tableData);
|
|
|
+ this.total = res.data.total;
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: res.mag,
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
-.alarmDetail {
|
|
|
- height: calc(100vh - 125px);
|
|
|
-
|
|
|
- ::v-deep .el-card__body {
|
|
|
- padding: 0;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
-
|
|
|
- .alarmDetail-header {
|
|
|
- padding: 0 20px;
|
|
|
- height: 60px;
|
|
|
- flex-shrink: 0;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- background-color: #eff2f6;
|
|
|
+::v-deep .searth_left {
|
|
|
+ margin: 0;
|
|
|
+}
|
|
|
+::v-deep .el-card__body {
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+}
|
|
|
+.dashboard {
|
|
|
+ &-container {
|
|
|
+ margin: 30px 30px 30px;
|
|
|
}
|
|
|
|
|
|
- .alarmDetail-bottom {
|
|
|
- padding: 0 20px 20px 20px;
|
|
|
- flex: 1;
|
|
|
- overflow: auto;
|
|
|
+ &-text {
|
|
|
+ font-size: 30px;
|
|
|
+ line-height: 46px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.el-image-viewer__close {
|
|
|
+ color: blue;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
.dashboard {
|
|
|
&-container {
|
|
|
- margin: 30px 30px 30px;
|
|
|
+ margin: 30px;
|
|
|
}
|
|
|
|
|
|
&-text {
|
|
|
@@ -176,16 +736,41 @@ export default {
|
|
|
line-height: 46px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
-.el-menu--horizontal>.el-menu-item.is-active {
|
|
|
- background-color: #20a0ff;
|
|
|
- color: #ffffff;
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
+.el-card.is-always-shadow,
|
|
|
+.el-card.is-hover-shadow:focus {
|
|
|
+ box-shadow: none;
|
|
|
}
|
|
|
-
|
|
|
-.el-menu--horizontal>.el-menu-item {
|
|
|
- height: 35px;
|
|
|
- line-height: 35px;
|
|
|
+.el-card {
|
|
|
+ border: 1px solid#FFFF;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #303133;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+::v-deep .el-date-editor .el-range__icon {
|
|
|
+ top: 0;
|
|
|
+}
|
|
|
+.export {
|
|
|
+ // margin: 23px 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ width: 98px;
|
|
|
+ height: 34px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #abc7fd;
|
|
|
+ line-height: 34px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2250c8;
|
|
|
+ background-color: #e7eeff;
|
|
|
+}
|
|
|
+.export:hover {
|
|
|
+ color: #fff;
|
|
|
+ border: 1px solid #2250c8;
|
|
|
+ background-color: #2250c8;
|
|
|
+}
|
|
|
+.export:active {
|
|
|
+ background-color: #194da4;
|
|
|
+ border: 1px solid #194da4;
|
|
|
}
|
|
|
</style>
|
siyouyou