完善首页

rtsp-vue/src/views/index.vue

@@ -4,47 +4,136 @@
       <el-form-item label="设备类型" prop="type">
         <el-radio-group type="button" v-model="queryParams.type" @change="handleQuery">
           <el-radio-button :label="undefined">全部</el-radio-button>
-          <el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio-button>
+          <el-radio-button v-for="dict in device_type" :key="dict.value" :label="dict.value">{{ dict.label
+          }}</el-radio-button>
         </el-radio-group>
       </el-form-item>
+      <el-form-item style="float: right;">
+        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+          v-model:limit="queryParams.pageSize" @pagination="getList" />
+      </el-form-item>
     </el-form>
 
-    <el-row>
+
-      <el-col :span="12">
+    <div style="display: flex;">
-        <div style="display: flex;">
       <div class="card" @click="handleVideoCameraFilled(item)" v-for="item in deviceList" :key="item.deviceId">
         <div class="card-image">
           <img :src="item.url" :alt="item.url" style="width: 100%; height: 100%;" />
-            <!-- <div style="width: 100%; height: 100%;">
+          <!-- <div style="width: 100%; height: 100%;">
               {{ item.url }}
             </div> -->
         </div>
-        <div class="category"><dict-tag :options="device_type" :value="item.type"/></div>
+        <div class="category"><dict-tag :options="device_type" :value="item.type" /></div>
-        <div class="heading"> 
+        <div class="heading">
           {{ item.ip }}
           <!-- <div class="author"> By <span class="name">Abi</span> 4 days ago</div> -->
         </div>
       </div>
     </div>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div style="width: 100%; height: 100%;">
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <h3>告警记录 {{ alarmRecordList.length }}条</h3>
+            <el-button type="primary" @click="handleAlarmRecord">查看更多</el-button>
+          </div>
+          <el-table :data="alarmRecordList" style="width: 100%">
+            <el-table-column label="任务名称" align="center" prop="taskName" />
+            <el-table-column label="设备名称" align="center" prop="deviceName" />
+            <el-table-column label="报警类型" align="center" prop="alarmType" />
+            <!-- <el-table-column label="报警级别" align="center" prop="alarmLevel">
+              <template #default="scope">
+                <el-tag v-if="scope.row.alarmLevel === '1'" type="info">低</el-tag>
+                <el-tag v-else-if="scope.row.alarmLevel === '2'" type="warning">中</el-tag>
+                <el-tag v-else-if="scope.row.alarmLevel === '3'" type="danger">高</el-tag>
+              </template>
+            </el-table-column> -->
+            <el-table-column label="置信度" align="center" prop="confidence">
+              <template #default="scope">
+                {{ (scope.row.confidence * 100).toFixed(1) }}%
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
       </el-col>
       <el-col :span="12">
-
+        <div style="width: 100%; height: 100%;">
+          <div style="display: flex; justify-content: space-between; align-items: center;">
+            <h3>巡检记录 {{ inspectionRecordList.length }}条</h3>
+            <el-button type="primary" @click="handleInspectionRecord">查看更多</el-button>
+          </div>
+          <el-table :data="inspectionRecordList" style="width: 100%">
+            <el-table-column label="巡检任务" prop="taskName">
+              <template #default="scope">
+                {{ findTaskName(scope.row.taskId) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="执行时间" prop="executeTime" />
+            <el-table-column label="执行时长" prop="duration" />
+            <el-table-column label="执行状态" prop="status">
+              <template #default="scope">
+                <dict-tag :options="ins_record_status" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
       </el-col>
     </el-row>
-    
-
-
-    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize" @pagination="getList" />
   </div>
 </template>
 
 <script setup name="Device">
 import router from '@/router'
 import { listDevice } from "@/api/video/device";
+import { listInspectionRecord } from "@/api/video/insRecord";
+import { listInspection } from "@/api/video/inspection";
+import { listAlarm } from "@/api/video/alarm";
 
 const { proxy } = getCurrentInstance();
-const { device_on_status, device_type } = proxy.useDict('device_on_status', 'device_type');
+const { device_on_status, device_type, ins_record_status } = proxy.useDict('device_on_status', 'device_type', 'ins_record_status');
+
+const inspectionRecordList = ref([]);
+const inspectionList = ref([]);
+
+const findTaskName = (taskId) => {
+  return inspectionList.value.find(item => item.taskId === taskId)?.taskName;
+}
+function getInspectionList() {
+  listInspection({
+    pageNum: 1,
+    pageSize: 10,
+  }).then(response => {
+    inspectionList.value = response.rows;
+  });
+}
+function getInspectionRecordList() {
+  listInspectionRecord({
+    pageNum: 1,
+    pageSize: 10,
+  }).then(response => {
+    inspectionRecordList.value = response.rows;
+  });
+}
+function handleInspectionRecord() {
+  router.push({ path: "/insrecord" });
+}
+getInspectionList();
+getInspectionRecordList();
+
+function handleAlarmRecord() {
+  router.push({ path: "/alarm" });
+}
+const alarmRecordList = ref([]);
+function getAlarmRecordList() {
+  listAlarm({
+    pageNum: 1,
+    pageSize: 10,
+  }).then(response => {
+    alarmRecordList.value = response.rows;
+  });
+}
+getAlarmRecordList();
 
 const deviceList = ref([]);
 const loading = ref(true);

rtsp-vue/src/views/video/inspection/index.vue

@@ -2,24 +2,14 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="任务名称" prop="taskName">
-        <el-input
+        <el-input v-model="queryParams.taskName" placeholder="请输入任务名称" clearable @keyup.enter="handleQuery" />
-          v-model="queryParams.taskName"
-          placeholder="请输入任务名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="设备名称" prop="deviceName">
-        <el-input
+        <el-input v-model="queryParams.deviceName" placeholder="请输入设备名称" clearable @keyup.enter="handleQuery" />
-          v-model="queryParams.deviceName"
-          placeholder="请输入设备名称"
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="任务状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable>
-          <el-option v-for="dict in task_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
+          <el-option v-for="dict in task_status" :key="dict.value" :label="dict.label" :value="dict.value" />
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -30,42 +20,20 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="Plus" @click="handleAdd"
-          type="primary"
+          v-hasPermi="['video:inspection:add']">新增</el-button>
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['video:inspection:add']"
-        >新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
-          type="success"
+          v-hasPermi="['video:inspection:edit']">修改</el-button>
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['video:inspection:edit']"
-        >修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
-          type="danger"
+          v-hasPermi="['video:inspection:remove']">删除</el-button>
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['video:inspection:remove']"
-        >删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="Download" @click="handleExport"
-          type="warning"
+          v-hasPermi="['video:inspection:export']">导出</el-button>
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['video:inspection:export']"
-        >导出</el-button>
       </el-col>
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
@@ -79,12 +47,12 @@
       <el-table-column label="巡检时长(秒)" align="center" prop="duration" />
       <el-table-column label="任务状态" align="center" prop="status">
         <template #default="scope">
-          <dict-tag :options="task_status" :value="scope.row.status"/>
+          <dict-tag :options="task_status" :value="scope.row.status" />
         </template>
       </el-table-column>
       <el-table-column label="启用检测" align="center" prop="enableDetection">
         <template #default="scope">
-          <dict-tag :options="sys_normal_disable" :value="scope.row.enableDetection"/>
+          <dict-tag :options="sys_normal_disable" :value="scope.row.enableDetection" />
         </template>
       </el-table-column>
       <el-table-column label="检测阈值" align="center" prop="threshold" />
@@ -97,23 +65,24 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspection:edit']">修改</el-button>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-          <el-button link type="primary" icon="VideoPlay" @click="handleStart(scope.row)" v-hasPermi="['video:inspection:start']" v-if="scope.row.status === '1'">启动</el-button>
+            v-hasPermi="['video:inspection:edit']">修改</el-button>
-          <el-button link type="warning" icon="VideoPause" @click="handleStop(scope.row)" v-hasPermi="['video:inspection:stop']" v-if="scope.row.status === '0'">停止</el-button>
+          <el-button link type="primary" icon="VideoPlay" @click="handleStart(scope.row)"
-          <el-button link type="success" icon="CaretRight" @click="handleExecute(scope.row)" v-hasPermi="['video:inspection:execute']">执行</el-button>
+            v-hasPermi="['video:inspection:start']" v-if="scope.row.status === '1'">启动</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspection:remove']">删除</el-button>
+          <el-button link type="warning" icon="VideoPause" @click="handleStop(scope.row)"
-          <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)" v-hasPermi="['video:inspection:video']">详情</el-button>
+            v-hasPermi="['video:inspection:stop']" v-if="scope.row.status === '0'">停止</el-button>
+          <el-button link type="success" icon="CaretRight" @click="handleExecute(scope.row)"
+            v-hasPermi="['video:inspection:execute']">执行</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['video:inspection:remove']">删除</el-button>
+          <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)"
+            v-hasPermi="['video:inspection:video']">详情</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
+
-    <pagination
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
-      v-show="total>0"
+      @pagination="getList" />
-      :total="total"
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改巡检任务对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -123,20 +92,19 @@
         </el-form-item>
         <el-form-item label="设备" prop="deviceId">
           <el-select v-model="form.deviceId" placeholder="请选择设备" style="width: 100%">
-            <el-option
+            <el-option v-for="device in deviceList" :key="device.deviceId" :label="device.ip"
-              v-for="device in deviceList"
+              :value="device.deviceId" />
-              :key="device.deviceId"
-              :label="device.ip"
-              :value="device.deviceId"
-            />
           </el-select>
         </el-form-item>
-        <el-form-item label="Cron表达式" prop="cronExpression">
+        <el-form-item label="cron" prop="cronExpression">
-          <el-input v-model="form.cronExpression" placeholder="请输入Cron表达式" />
+          <el-input v-model="form.cronExpression" placeholder="请输入cron执行表达式">
-          <div class="el-form-item__tip">
+            <template #append>
-            例如：0 0 8 * * ? 表示每天8点执行<br/>
+              <el-button type="primary" @click="handleShowCron">
-            0 0/30 * * * ? 表示每30分钟执行一次
+                生成表达式
-          </div>
+                <i class="el-icon-time el-icon--right"></i>
+              </el-button>
+            </template>
+          </el-input>
         </el-form-item>
         <el-form-item label="巡检时长" prop="duration">
           <el-input-number v-model="form.duration" :min="10" :max="3600" placeholder="巡检时长(秒)" />
@@ -148,7 +116,8 @@
         </el-form-item>
         <el-form-item label="启用检测" prop="enableDetection">
           <el-radio-group v-model="form.enableDetection">
-            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label }}</el-radio>
+            <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.value">{{ dict.label
+              }}</el-radio>
           </el-radio-group>
         </el-form-item>
         <el-form-item label="检测阈值" prop="threshold">
@@ -162,12 +131,17 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
+      <crontab ref="crontabRef" @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab>
+    </el-dialog>
   </div>
 </template>
 
 <script setup name="Inspection">
 import { listInspection, getInspection, delInspection, addInspection, updateInspection, startTask, stopTask, executeTask } from "@/api/video/inspection";
 import { listDevice } from "@/api/video/device";
+import Crontab from '@/components/Crontab'
 
 import router from '@/router'
 
@@ -318,42 +292,42 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const taskIds = row.taskId || ids.value;
-  proxy.$modal.confirm('是否确认删除巡检任务编号为"' + taskIds + '"的数据项？').then(function() {
+  proxy.$modal.confirm('是否确认删除巡检任务编号为"' + taskIds + '"的数据项？').then(function () {
     return delInspection(taskIds);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+  }).catch(() => { });
 }
 
 /** 启动任务 */
 function handleStart(row) {
-  proxy.$modal.confirm('是否确认启动任务"' + row.taskName + '"？').then(function() {
+  proxy.$modal.confirm('是否确认启动任务"' + row.taskName + '"？').then(function () {
     console.log(row.taskId);
     return startTask(row.taskId);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("启动成功");
-  }).catch(() => {});
+  }).catch(() => { });
 }
 
 /** 停止任务 */
 function handleStop(row) {
-  proxy.$modal.confirm('是否确认停止任务"' + row.taskName + '"？').then(function() {
+  proxy.$modal.confirm('是否确认停止任务"' + row.taskName + '"？').then(function () {
     return stopTask(row.taskId);
   }).then(() => {
     getList();
     proxy.$modal.msgSuccess("停止成功");
-  }).catch(() => {});
+  }).catch(() => { });
 }
 
 /** 执行任务 */
 function handleExecute(row) {
-  proxy.$modal.confirm('是否确认立即执行任务"' + row.taskName + '"？').then(function() {
+  proxy.$modal.confirm('是否确认立即执行任务"' + row.taskName + '"？').then(function () {
     return executeTask(row.taskId);
   }).then(() => {
     proxy.$modal.msgSuccess("任务已提交执行");
-  }).catch(() => {});
+  }).catch(() => { });
 }
 
 /** 导出按钮操作 */
@@ -363,6 +337,20 @@ function handleExport() {
   }, `inspection_${new Date().getTime()}.xlsx`)
 }
 
+/** cron表达式按钮操作 */
+function handleShowCron() {
+  expression.value = form.value.cronExpression;
+  openCron.value = true;
+}
+
+/** 确定后回传值 */
+function crontabFill(value) {
+  form.value.cronExpression = value;
+}
+
+const openCron = ref(false);
+const expression = ref("");
+
 onMounted(() => {
   getList();
   getDeviceList();

rtsp-vue/src/views/video/inspection/record.vue

@@ -28,7 +28,7 @@
     </el-form>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
+      <!-- <el-col :span="1.5">
         <el-button
           type="primary"
           plain
@@ -56,7 +56,7 @@
           @click="handleDelete"
           v-hasPermi="['video:inspectionRecord:remove']"
         >删除</el-button>
-      </el-col>
+      </el-col> -->
       <el-col :span="1.5">
         <el-button
           type="warning"
@@ -71,14 +71,18 @@
 
     <el-table v-loading="loading" :data="inspectionRecordList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="巡检任务" align="center" prop="taskId" />
+      <el-table-column label="巡检任务" align="center" prop="taskId">
+        <template #default="scope">
+          {{ findTaskName(scope.row.taskId) }}
+        </template>
+      </el-table-column>
       <el-table-column label="执行时间" align="center" prop="executeTime" width="180">
         <template #default="scope">
           <span>{{ parseTime(scope.row.executeTime, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="执行时长" align="center" prop="duration" />
-      <el-table-column label="巡检结果" align="center" prop="result" />
+      <el-table-column label="巡检结果" align="center" prop="result" :show-overflow-tooltip="true"></el-table-column>
       <el-table-column label="执行状态" align="center" prop="status">
         <template #default="scope">
           <dict-tag :options="ins_record_status" :value="scope.row.status"/>
@@ -86,8 +90,9 @@
       </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspectionRecord:edit']">修改</el-button>
+          <el-button link icon="Document" @click="handleDetail(scope.row)">详情</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspectionRecord:remove']">删除</el-button>
+          <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['video:inspectionRecord:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['video:inspectionRecord:remove']">删除</el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -151,6 +156,36 @@
         </div>
       </template>
     </el-dialog>
+
+    <el-dialog :title="title" v-model="detailShow" width="600px" append-to-body>
+      <el-row>
+        <el-descriptions :column="3" border>
+          <el-descriptions-item label="巡检任务" prop="taskId">
+            {{ findTaskName(form.taskId) }}
+          </el-descriptions-item>
+          <el-descriptions-item label="执行时间" prop="executeTime">
+            {{ parseTime(form.executeTime, '{y}-{m}-{d}') }}
+          </el-descriptions-item>
+          <el-descriptions-item label="执行时长" prop="duration">
+            {{ form.duration }}
+          </el-descriptions-item>
+        </el-descriptions>
+      </el-row>
+
+      <el-row>
+        <div style="width: 100%; height: 100%;">
+          <h3>巡检结果</h3>
+          {{ form.result }}
+        </div>
+      </el-row>
+
+      <el-row>
+        <div style="width: 100%; height: 100%;">
+          <h3>附件</h3>
+          <video v-for="item in form.accessory.split(',')" :key="item" :src="item" controls></video>
+        </div>
+      </el-row>
+    </el-dialog>
   </div>
 </template>
 
@@ -174,6 +209,7 @@ const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
 const title = ref("");
+const detailShow = ref(false);
 
 const data = reactive({
   form: {},
@@ -191,6 +227,10 @@ const data = reactive({
   }
 });
 
+const findTaskName = (taskId) => {
+  return inspectionList.value.find(item => item.taskId === taskId)?.taskName;
+}
+
 watch(() => taskId, (newVal) => {
   if (newVal) {
     queryParams.value.taskId = parseInt(newVal);
@@ -318,6 +358,11 @@ function handleExport() {
   }, `inspectionRecord_${new Date().getTime()}.xlsx`)
 }
 
+function handleDetail(row) {
+  form.value = row;
+  detailShow.value = true;
+}
+
 getInspectionList();
 getList();
 </script>