添加详情页面

src/views/iot/videoQuality/dialog.alarm.history.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="videoQuality">
+    <el-dialog title="告警历史记录" :visible.sync="isShow" width="1000px" @close="close">
+      <div class="page-body">
+        <search-table ref="st" url="/videoDiagnosisRecord/alarm/history/list" :search-data="search"
+          :manual="false" :page="true" :select="false" tableHeight="441px" :drag="false">
+          <!-- 搜索 -->
+          <template slot="searchs">
+            <el-row>
+              <el-col :span="6">
+                <el-form-item label="组织机构">
+                  <span class="ellipsis">{{ rowData ? rowData.orgName : "" }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="监控主机">
+                  <span class="ellipsis">{{ rowData ? rowData.monitorHost : "" }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="摄像头">
+                  <span class="ellipsis">{{ rowData ? rowData.deviceName : "" }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="通道号">
+                  <span class="ellipsis">{{ rowData ? rowData.channelNumber : "" }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <!-- <el-form-item label="报警状态">
+              <el-select v-model="search.alarmState" clearable>
+                <el-option v-for="item in alarmStatusOptions" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item> -->
+            <el-form-item label="告警类型">
+              <el-select v-model="search.alarmCode" clearable>
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="报警/恢复时间">
+              <el-date-picker v-model="search.alarmTime" type="daterange" range-separator="至" start-placeholder="开始日期"
+                end-placeholder="结束日期">
+              </el-date-picker>
+            </el-form-item>
+
+          </template>
+          <!-- 表格 -->
+          <template slot="columns">
+            <el-table-column type="index" label="序号" width="80px"></el-table-column>
+            <el-table-column prop="alarmType" label="告警类型" min-width="100px"></el-table-column>
+            <el-table-column label="报警发生时间">
+              <template slot-scope="r">
+                {{r.row.alarmStartTime}}
+              </template>
+            </el-table-column>
+            <el-table-column label="报警恢复时间">
+              <template slot-scope="r">
+                {{r.row.alarmEndTime}}
+              </template>
+            </el-table-column>
+          </template>
+        </search-table>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import SearchTable from "../../../components/table/search.table.vue";
+import {  mapMutations } from "vuex";
+
+export default {
+  components:{
+    SearchTable
+  },
+  data() {
+    const params = this.$route.params;
+    return {
+      isShow: false,
+      rowData: null,
+      search: {
+        monitorHost: "",
+        channelCode: "",
+        createTime: null,
+        alarmType: null
+      },
+      alarmStatusOptions: [
+        {
+          value: 0,
+          label: "正常"
+        },
+        {
+          value: 1,
+          label: "异常"
+        },
+        {
+          value: 2,
+          label: "未告警"
+        },
+      ],
+      options: [
+        {
+          value: "114",
+          label: "信号丢失"
+        },
+        {
+          value: "131",
+          label: "视频遮挡"
+        },
+        {
+          value: "116",
+          label: "亮度异常"
+        },
+        {
+          value: "117",
+          label: "图像偏色"
+        },
+        {
+          value: "118",
+          label: "雪花干扰"
+        },
+        {
+          value: "119",
+          label: "条纹干扰"
+        },
+        {
+          value: "132",
+          label: "对比度异常"
+        },
+        {
+          value: "115",
+          label: "图像模糊",
+        }
+      ],
+    };
+  },
+  props: {},
+  watch: {},
+  computed: {
+  },
+  methods: {
+    ...mapMutations([]),
+    close() {
+      this.rowData=null;
+      this.$refs.st.ClearTableData();
+    },
+    async show(rowData) {
+      console.log("row", rowData);
+      this.rowData = rowData;
+      this.search ={
+        deviceId: rowData.deviceId,
+        alarmTime: null,
+        alarmCode: null,
+      };
+      this.isShow = true;
+    },
+  },
+  created() { },
+  mounted() { },
+};
+</script>
+
+<style lang="scss">
+.videoQuality {
+  .el-form {
+    padding-top: 5px;
+  }
+  .ellipsis {
+    width: 200px;
+  }
+}
+</style>

src/views/iot/videoQuality/index.vue

@@ -93,7 +93,7 @@
         <el-table-column align="center" label="模糊" prop="letterNo" ></el-table-column>
         <el-table-column label="操作" align="center"  width="120" >
           <template slot-scope="r">
-            <el-button type="text">告警历史记录</el-button>
+            <el-button type="text" @click="openAlarmHistoryDialog(r.row)">告警历史记录</el-button>
           </template>
         </el-table-column>
 
@@ -108,17 +108,20 @@
       />
 
     </div>
+
+    <dialog-alarm-history ref="alarmHistoryDialog"></dialog-alarm-history>
+
   </div>
 </template>
 
 <script>
 import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
 import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
-import TimeLine from "../videoIntegrity/timeLine.vue";
+import DialogAlarmHistory from "./dialog.alarm.history";
 import {getLetterApproveList} from "@/api/core/letter";
 import dayjs from 'dayjs';
 export default {
-  components: {DataRangePicker, OrgTree,TimeLine },
+  components: {DataRangePicker, OrgTree,DialogAlarmHistory },
   dicts: ['letter_status', 'out_in_type', 'out_in_approve_status'],
   data() {
     return {
@@ -144,6 +147,9 @@ export default {
   },
   methods: {
     dayjs,
+    openAlarmHistoryDialog(row) {
+      this.$refs.alarmHistoryDialog.show(row);
+    },
     getDefaultKey(key) {
       this.queryParams.orgId = key;
       this.getList();