预警树修改

SafeCampus.WEB/src/views/warn/zjrq/index.vue

@@ -4,125 +4,147 @@
  * @Date: 2023-12-15 15:44:05
 !-->
 <template>
-  <div class="table-box">
-    <ProTable ref="proTable" title="预警列表" :columns="columns" :request-api="warnZJRQApi.page">
-      <!-- 表格 header 按钮 -->
-      <template #tableHeader="scope">
-        <!-- <s-button suffix="预警" @click="onOpen(FormOptEnum.ADD)" /> -->
-        <s-button
-          type="danger"
-          plain
-          suffix="预警"
-          :opt="FormOptEnum.DELETE"
-          :disabled="!scope.isSelected"
-          @click="onDelete(scope.selectedListIds, '删除所选数据')"
-        />
-      </template>
-      <!-- 表格 菜单类型 按钮 -->
-      <template #menuType="scope">
-        <el-space wrap>
-          <el-tag v-if="scope.row.menuType === MenuTypeDictEnum.MENU" type="success">{{
-            dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.MENU)
-          }}</el-tag>
-          <el-tag v-else-if="scope.row.menuType === MenuTypeDictEnum.LINK" type="warning">{{
-            dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.LINK)
-          }}</el-tag>
-          <el-tag v-else type="info">{{ dictStore.dictTranslation(SysDictEnum.MENU_TYPE, scope.row.menuType) }}</el-tag>
-          <el-tag v-if="scope.row.isHome === true" type="danger">首页</el-tag>
-        </el-space>
-      </template>
-      <!-- 操作 -->
-      <template #operation="scope">
-        <s-button link :opt="FormOptEnum.VIEW" @click="onDetail(scope.row)"> 详情 </s-button>
-        <s-button v-if="scope.row.warnHand == 0" link :opt="FormOptEnum.EDIT" @click="toHandle(FormOptEnum.EDIT, scope.row)">处理</s-button>
-        <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `确定删除该预警吗？`)" />
-      </template>
-    </ProTable>
-    <el-dialog v-model="visible" :title="detailData.alarmTypeDesc + '-' + detailData.tick" width="830px" :before-close="handleClose">
-      <div>
-        <img class="detailpic" :src="detailData.snapshotUrl" alt="" />
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <div class="linebox">所属学校：演示学校</div>
-          </el-col>
-          <el-col :span="12">
-            <div class="linebox">班级：{{ detailData.personSetName ? detailData.personSetName : "暂无数据" }}</div>
-          </el-col>
-          <el-col :span="12">
-            <div class="linebox">姓名：{{ detailData.personName ? detailData.personName : "暂无数据" }}</div>
-          </el-col>
-          <el-col :span="12">
-            <div class="linebox">预警摄像头：{{ detailData.cameraName }}</div>
-          </el-col>
-          <el-col :span="12">
-            <div class="linebox">预警类型：{{ detailData.alarmTypeDesc }}</div>
-          </el-col>
-          <el-col :span="12">
-            <div class="linebox">预警时间：{{ detailData.tick }}</div>
-          </el-col>
+  <div class="main-box">
+    <!-- <TreeFilter
+      ref="treeFilter"
+      label="personSetName"
+      id="personSetId"
+      width="300px"
+      :show-all="true"
+      :request-api="userManageClassManageApi.page"
+      @change="changeTreeFilter"
+    > -->
+    <TreeFilter
+      ref="treeFilters"
+      title="预警类型"
+      label="name"
+      id="code"
+      :isData="true"
+      width="300px"
+      :data="warnOptions"
+      @change="changeType"
+    ></TreeFilter>
 
-          <el-col :span="12">
-            <div class="linebox">备注信息：{{ detailData.extend ? detailData.extend : "暂无数据" }}</div>
-          </el-col>
-          <el-col :span="12">
-            <div class="linebox">
-              复核视频：
-              <span style="cursor: pointer" v-if="detailData.videoUrl" @click="onPlay(detailData.videoUrl)">
-                <el-icon color="#409efc" :size="20">
-                  <VideoCamera />
-                </el-icon>
-                <!-- <el-icon><VideoCamera /></el-icon> -->
-              </span>
-              <span v-else>暂无数据</span>
-              <!-- {{ detailData.videoUrl }} -->
-            </div>
-          </el-col>
-          <el-col :span="24">
-            <div class="linebox">
-              处理意见：
-              <span style="cursor: pointer" v-if="detailData.remark">
-                {{ detailData.remark }}
-              </span>
-              <span v-else>暂无数据</span>
-              <!-- {{ detailData.videoUrl }} -->
-            </div>
-          </el-col>
-        </el-row>
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="visible = false">关闭</el-button>
+    <div class="table-box">
+      <ProTable ref="proTable" :searchCol="3" title="预警列表" :columns="columns" :request-api="warnZJRQApi.page">
+        <!-- 表格 header 按钮 -->
+        <template #tableHeader="scope">
+          <!-- <s-button suffix="预警" @click="onOpen(FormOptEnum.ADD)" /> -->
+          <s-button
+            type="danger"
+            plain
+            suffix="预警"
+            :opt="FormOptEnum.DELETE"
+            :disabled="!scope.isSelected"
+            @click="onDelete(scope.selectedListIds, '删除所选数据')"
+          />
+        </template>
+        <!-- 表格 菜单类型 按钮 -->
+        <template #menuType="scope">
+          <el-space wrap>
+            <el-tag v-if="scope.row.menuType === MenuTypeDictEnum.MENU" type="success">{{
+              dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.MENU)
+            }}</el-tag>
+            <el-tag v-else-if="scope.row.menuType === MenuTypeDictEnum.LINK" type="warning">{{
+              dictStore.dictTranslation(SysDictEnum.MENU_TYPE, MenuTypeDictEnum.LINK)
+            }}</el-tag>
+            <el-tag v-else type="info">{{ dictStore.dictTranslation(SysDictEnum.MENU_TYPE, scope.row.menuType) }}</el-tag>
+            <el-tag v-if="scope.row.isHome === true" type="danger">首页</el-tag>
+          </el-space>
+        </template>
+        <!-- 操作 -->
+        <template #operation="scope">
+          <s-button link :opt="FormOptEnum.VIEW" @click="onDetail(scope.row)"> 详情 </s-button>
+          <s-button v-if="scope.row.warnHand == 0" link :opt="FormOptEnum.EDIT" @click="toHandle(FormOptEnum.EDIT, scope.row)">处理</s-button>
+          <s-button link :opt="FormOptEnum.DELETE" @click="onDelete([scope.row.id], `确定删除该预警吗？`)" />
+        </template>
+      </ProTable>
+      <el-dialog v-model="visible" :title="detailData.alarmTypeDesc + '-' + detailData.tick" width="830px" :before-close="handleClose">
+        <div>
+          <img class="detailpic" :src="detailData.snapshotUrl" alt="" />
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <div class="linebox">所属学校：演示学校</div>
+            </el-col>
+            <el-col :span="12">
+              <div class="linebox">班级：{{ detailData.personSetName ? detailData.personSetName : "暂无数据" }}</div>
+            </el-col>
+            <el-col :span="12">
+              <div class="linebox">姓名：{{ detailData.personName ? detailData.personName : "暂无数据" }}</div>
+            </el-col>
+            <el-col :span="12">
+              <div class="linebox">预警摄像头：{{ detailData.cameraName }}</div>
+            </el-col>
+            <el-col :span="12">
+              <div class="linebox">预警类型：{{ detailData.alarmTypeDesc }}</div>
+            </el-col>
+            <el-col :span="12">
+              <div class="linebox">预警时间：{{ detailData.tick }}</div>
+            </el-col>
+
+            <el-col :span="12">
+              <div class="linebox">备注信息：{{ detailData.extend ? detailData.extend : "暂无数据" }}</div>
+            </el-col>
+            <el-col :span="12">
+              <div class="linebox">
+                复核视频：
+                <span style="cursor: pointer" v-if="detailData.videoUrl" @click="onPlay(detailData.videoUrl)">
+                  <el-icon color="#409efc" :size="20">
+                    <VideoCamera />
+                  </el-icon>
+                  <!-- <el-icon><VideoCamera /></el-icon> -->
+                </span>
+                <span v-else>暂无数据</span>
+                <!-- {{ detailData.videoUrl }} -->
+              </div>
+            </el-col>
+            <el-col :span="24">
+              <div class="linebox">
+                处理意见：
+                <span style="cursor: pointer" v-if="detailData.remark">
+                  {{ detailData.remark }}
+                </span>
+                <span v-else>暂无数据</span>
+                <!-- {{ detailData.videoUrl }} -->
+              </div>
+            </el-col>
+          </el-row>
         </div>
-      </template>
-    </el-dialog>
-    <!-- 视频 -->
-    <el-dialog v-model="videoVisible" title="视频" width="830px" :before-close="handleCloseVideo">
-      <div>
-        <div class="dialogHeader">
-          <div></div>
-          <!-- <div class="dialogBtn" @click="refreshUrl">
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="visible = false">关闭</el-button>
+          </div>
+        </template>
+      </el-dialog>
+      <!-- 视频 -->
+      <el-dialog v-model="videoVisible" title="视频" width="830px" :before-close="handleCloseVideo">
+        <div>
+          <div class="dialogHeader">
+            <div></div>
+            <!-- <div class="dialogBtn" @click="refreshUrl">
               <el-icon color="#409efc" :size="20">
                     <Refresh />
               </el-icon>
               <div>刷新视频</div>
             </div> -->
+          </div>
+          <VideoPlay :videoUrl="videoUrls" />
         </div>
-        <VideoPlay :videoUrl="videoUrls" />
-      </div>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button @click="handleCloseVideo">关闭</el-button>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button @click="handleCloseVideo">关闭</el-button>
+          </div>
+        </template>
+      </el-dialog>
+      <!-- 预览头像 -->
+      <el-dialog v-model="preViewvisible" title="查看图片" width="830px" :before-close="previewhandleClose">
+        <div style="display: flex; align-items: center; justify-content: center">
+          <img class="detailpic" :src="faceUrl" alt="" />
         </div>
-      </template>
-    </el-dialog>
-    <!-- 预览头像 -->
-    <el-dialog v-model="preViewvisible" title="查看图片" width="830px" :before-close="previewhandleClose">
-      <div style="display: flex; align-items: center; justify-content: center">
-        <img class="detailpic" :src="faceUrl" alt="" />
-      </div>
-    </el-dialog>
-    <!-- 处理预警 -->
-    <handleForm ref="formRefH" />
+      </el-dialog>
+      <!-- 处理预警 -->
+      <handleForm ref="formRefH" />
+    </div>
   </div>
 </template>
 
@@ -157,18 +179,19 @@ let warnOptions = ref([]);
 function getWarnTypeList() {
   setTimeout(async ()=> {
     await warnZJRQApi.warnType({}).then((res:any) => {
-    let { code, data } = res;
-   
-    if (code == 200) {
-      warnOptions.value = data.map((item:any) => {
-        return {
-          label: item.name,
-          value: item.code
-        };
-      })
-      
-    }
-  });
+      let { code, data } = res;
+    
+      if (code == 200) {
+        warnOptions.value = data;
+        // warnOptions.value = data.map((item:any) => {
+        //   return {
+        //     label: item.name,
+        //     value: item.code
+        //   };
+        // })
+        
+      }
+    });
   })
   
 }
@@ -225,10 +248,10 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
     prop: "alarmType",
     label: "预警类型",
     enum: warnOptions, 
-    search: { 
-      el: "tree-select",
-      // span: 1
-    } 
+    // search: { 
+    //   el: "tree-select",
+    //   // span: 1
+    // } 
   },
   {
     prop: "warnHand",
@@ -252,7 +275,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
     },
     search: { 
       el: "tree-select",
-      // span: 1 
+      span: 0.1 
     } 
   },
   { 
@@ -265,7 +288,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
         return (
           <div class="flex-center">
             <el-date-picker
-              style="150px; flex-shink: 1;"
+              
               v-model={searchParam.StartTick}
               type="datetime"
               placeholder="开始时间"
@@ -274,9 +297,10 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
               time-format="HH:mm:ss"
               value-format="YYYY-MM-DD HH:mm:ss"
             />
-            <span class="mr10 ml10">-</span>
+            {/* <span class="mr10 ml10">-</span> */}
+            <span style="margin: 0 4px;">-</span>
             <el-date-picker
-              style="150px;"
+             
               v-model={searchParam.EndTick}
               type="datetime"
               placeholder="结束时间"
@@ -294,6 +318,7 @@ const columns: ColumnProps<ZJRQ.WarnInfo>[] = [
   { prop: "operation", label: "操作", width: 250, fixed: "right" }
 ];
 
+
 /**
  * 删除
  * @param ids  id数组
@@ -336,13 +361,18 @@ const videoUrls = ref('');
 const onPlay = (url:string) => {
   videoVisible.value = true;
   videoUrls.value = url
-  console.log(videoUrls.value)
 }
 const handleCloseVideo = () => {
   videoVisible.value = false;
   videoUrls.value = ''
 };
-
+const alarmType = ref<number | string>()
+function changeType(val: number | string) {
+  alarmType.value = val
+  proTable.value!.pageable.pageNum = 1;
+  proTable.value!.searchParam.alarmType = val;
+  proTable.value!.search();
+}
 </script>
 
 <style lang="scss" scoped>