|
|
@@ -1,734 +1,174 @@
|
|
|
<template>
|
|
|
- <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-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>
|
|
|
+ <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
|
|
|
- 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
|
|
|
- >
|
|
|
+ <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>
|
|
|
</div>
|
|
|
- </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="
|
|
|
+ <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;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- 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>
|
|
|
+ justify-content: center;
|
|
|
+ background-color: rgb(39, 102, 221);
|
|
|
+ color: #fff;
|
|
|
+ ">
|
|
|
+ 解除警报
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- <el-col :span="6"></el-col> -->
|
|
|
</div>
|
|
|
- </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>
|
|
|
+ <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>
|
|
|
+
|
|
|
<script>
|
|
|
-import { mapGetters } from "vuex";
|
|
|
+import palyAndPlayback from "@/components/videoPlayer/palyAndPlayback";
|
|
|
+import cameraInfoMessage from "@/components/videoPlayer/cameraInfoMessage";
|
|
|
+import { msgAlarmDetail } from "@/api/alarmList";
|
|
|
+import { videoHistoricalAlarm, alarmHistoricalAlarm } from "@/api/video";
|
|
|
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: "cart",
|
|
|
- components: { warningDispose,detailsDialog },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["name"]),
|
|
|
- },
|
|
|
+ name: "AlarmDetail",
|
|
|
+ components: { palyAndPlayback, cameraInfoMessage, warningDispose },
|
|
|
data() {
|
|
|
return {
|
|
|
- detailsData:{
|
|
|
- dialogVisible:false,
|
|
|
- alarmId:''
|
|
|
+ id: "", // id
|
|
|
+ alarmId: "",
|
|
|
+ cameraCode: "", // 摄像机code
|
|
|
+ items: "",
|
|
|
+ cameraInfo: {
|
|
|
+ cameraCode: "",
|
|
|
+ isLock: "",
|
|
|
+ alarmTime: "",
|
|
|
+ alarmType: "",
|
|
|
+ lineDir: "",
|
|
|
+ deptId: "",
|
|
|
+ alarmMile: "",
|
|
|
+ beginMile: "",
|
|
|
+ installLongitude: "",
|
|
|
+ releasedTime: "",
|
|
|
},
|
|
|
- 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: "",
|
|
|
+ historicalAlarm: [],
|
|
|
warningDisposeModal: {
|
|
|
show: false,
|
|
|
id: "",
|
|
|
},
|
|
|
};
|
|
|
},
|
|
|
- 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();
|
|
|
- }
|
|
|
-
|
|
|
+ created() { },
|
|
|
+ mounted() {
|
|
|
+ this.id = this.$route.query.id;
|
|
|
+ this.alarmId = this.$route.query.alarmId;
|
|
|
+ this.cameraCode = this.$route.query.cameraCode;
|
|
|
+ this.msgAlarmDetail();
|
|
|
},
|
|
|
- methods: {
|
|
|
- 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,
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- // 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);
|
|
|
+ watch: {
|
|
|
+ $route(req) {
|
|
|
+ this.id = this.$route.query.id;
|
|
|
+ this.cameraCode = this.$route.query.cameraCode;
|
|
|
+ this.msgAlarmDetail();
|
|
|
},
|
|
|
+ },
|
|
|
+ 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
|
|
|
|
|
|
- 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;
|
|
|
+ // this.alarmId = this.cameraInfo.alarmId;
|
|
|
+ alarmHistoricalAlarm(this.alarmId).then((res) => {
|
|
|
+ this.historicalAlarm = res.data;
|
|
|
+ });
|
|
|
+ });
|
|
|
},
|
|
|
- release(val) {
|
|
|
- if (val) {
|
|
|
- this.warningDisposeModal.id = val;
|
|
|
- this.warningDisposeModal.show = true;
|
|
|
- }
|
|
|
+ release() {
|
|
|
+ this.warningDisposeModal.id = this.id;
|
|
|
+ this.warningDisposeModal.show = true;
|
|
|
},
|
|
|
releaseSuccess() {
|
|
|
this.warningDisposeModal.id = "";
|
|
|
this.warningDisposeModal.show = false;
|
|
|
- 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);
|
|
|
- }
|
|
|
- });
|
|
|
+ this.msgAlarmDetail();
|
|
|
},
|
|
|
- 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",
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ goback() {
|
|
|
+ // this.$router.push('/alarmInformation/list')
|
|
|
+ // this.$router.push("/list");
|
|
|
+ this.$router.back();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+
|
|
|
<style lang="scss" scoped>
|
|
|
-::v-deep .searth_left {
|
|
|
- margin: 0;
|
|
|
-}
|
|
|
-::v-deep .el-card__body {
|
|
|
- padding: 0 20px 20px 20px;
|
|
|
-}
|
|
|
-.dashboard {
|
|
|
- &-container {
|
|
|
- margin: 30px 30px 30px;
|
|
|
+.alarmDetail {
|
|
|
+ height: calc(100vh - 125px);
|
|
|
+
|
|
|
+ ::v-deep .el-card__body {
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
- &-text {
|
|
|
- font-size: 30px;
|
|
|
- line-height: 46px;
|
|
|
+ .alarmDetail-header {
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 60px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ background-color: #eff2f6;
|
|
|
}
|
|
|
-}
|
|
|
|
|
|
-.el-image-viewer__close {
|
|
|
- color: blue;
|
|
|
+ .alarmDetail-bottom {
|
|
|
+ padding: 0 20px 20px 20px;
|
|
|
+ flex: 1;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="scss" scoped>
|
|
|
+
|
|
|
.dashboard {
|
|
|
&-container {
|
|
|
- margin: 30px;
|
|
|
+ margin: 30px 30px 30px;
|
|
|
}
|
|
|
|
|
|
&-text {
|
|
|
@@ -736,41 +176,16 @@ export default {
|
|
|
line-height: 46px;
|
|
|
}
|
|
|
}
|
|
|
-.el-card.is-always-shadow,
|
|
|
-.el-card.is-hover-shadow:focus {
|
|
|
- box-shadow: none;
|
|
|
-}
|
|
|
-.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;
|
|
|
+
|
|
|
+.el-menu--horizontal>.el-menu-item.is-active {
|
|
|
+ background-color: #20a0ff;
|
|
|
+ color: #ffffff;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
}
|
|
|
-.export:active {
|
|
|
- background-color: #194da4;
|
|
|
- border: 1px solid #194da4;
|
|
|
+
|
|
|
+.el-menu--horizontal>.el-menu-item {
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
}
|
|
|
</style>
|
siyouyou