diff --git a/src/views/kitchen/violation/cameraRecord/index.vue b/src/views/kitchen/violation/cameraRecord/index.vue
new file mode 100644
index 00000000..474a23f2
--- /dev/null
+++ b/src/views/kitchen/violation/cameraRecord/index.vue
@@ -0,0 +1,234 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+        <!-- <el-form-item label="关键字" prop="searchValue">
+            <el-input v-model="queryParams.searchValue" placeholder="请输入员工姓名，编号" maxlength="20" clearable style="width: 240px"/>
+        </el-form-item> -->
+        <el-form-item label="违规内容" prop="alarmType">
+            <el-select v-model="queryParams.alarmType" style="width: 240px" clearable> 
+                <el-option label="未戴口罩" value="1"></el-option>
+                <el-option label="垃圾桶未盖报警 " value="2"></el-option>
+                <el-option label="发现老鼠" value="3"></el-option>
+                <el-option label="未穿厨师服" value="4"></el-option>
+                <el-option label="未戴厨师帽" value="5"></el-option>
+                <el-option label="未戴手套" value="6"></el-option>
+                <el-option label="抽烟" value="7"></el-option>
+                <el-option label="打电话" value="8"></el-option>
+                <el-option label="地面巡检" value="9"></el-option>
+                <el-option label="设备归位 " value="10"></el-option>
+                <el-option label="未授权人员进入 " value="11"></el-option>
+                <el-option label="动火离人" value="13"></el-option>
+            </el-select>   
+        </el-form-item>
+        <el-form-item label="记录时间">
+            <el-date-picker
+                v-model="dateRange"
+                type="daterange"
+                align="right"
+                unlink-panels
+                range-separator="至"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                format="yyyy-MM-dd" style="width: 400px" 
+                :picker-options="pickerOptions" >
+            </el-date-picker>
+        </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="tableListData" height="800">
+      <el-table-column label="序号" align="center" width="80" type="index">
+        <template slot-scope="scope">
+          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+        </template>
+      </el-table-column> 
+      <el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true"/>
+      <el-table-column label="设备编号" align="center" prop="deviceNo" :show-overflow-tooltip="true"/>
+      <el-table-column label="位置" align="center" prop="subPlace" :show-overflow-tooltip="true"/>
+      <el-table-column label="违规内容" align="center" prop="alarmType" :show-overflow-tooltip="true">
+        <template slot-scope="scope">
+          <span v-if="scope.row.alarmType==1">未戴口罩</span>
+          <span v-if="scope.row.alarmType==2">垃圾桶未盖报警</span>
+          <span v-if="scope.row.alarmType==3">发现老鼠</span>
+          <span v-if="scope.row.alarmType==4">未穿厨师服</span>
+          <span v-if="scope.row.alarmType==5">未戴厨师帽</span>
+          <span v-if="scope.row.alarmType==6">未戴手套</span>
+          <span v-if="scope.row.alarmType==7">抽烟</span>
+          <span v-if="scope.row.alarmType==8">打电话</span>
+          <span v-if="scope.row.alarmType==9">地面巡检</span>
+          <span v-if="scope.row.alarmType==10">设备归位</span>
+          <span v-if="scope.row.alarmType==11">未授权人员进入</span>
+          <span v-if="scope.row.alarmType==13">动火离人</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="违规图片" align="center" prop="imgUrl" :show-overflow-tooltip="true">
+        <template slot-scope="scope"> 
+          <img :src="scope.row.imgUrl" v-if="scope.row.imgUrl" alt="" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
+          <span v-else>无</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="违规时间" align="center" prop="recordTime" :show-overflow-tooltip="true"/> 
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :visible.sync="dialogVisible" width="700px">
+      <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
+    </el-dialog>
+  </div>
+</template>
+
+<script> 
+import { getStaffIllegalListApi } from "@/api/kitchen/staff";
+
+export default {
+  name: "",
+  dicts: [],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      //表格数据
+      tableListData: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,  
+        searchValue: undefined,
+        alarmType: undefined, 
+      },
+      dialogVisible:false,//图片弹窗
+      dialogImageUrl:"",//图片弹窗  
+      dateRange:this.defaultDateRange(),
+      pickerOptions: {
+          shortcuts: [{
+              text: '最近一周',
+              onClick(picker) {
+              const start = new Date();
+              const end = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
+              picker.$emit('pick', [start, end]);
+              }
+          },{
+              text: '最近一个月',
+              onClick(picker) {
+              const start = new Date();
+              const end = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              picker.$emit('pick', [start, end]);
+              }
+          },{
+              text: '最近三个月',
+              onClick(picker) {
+              const start = new Date();
+              const end = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 91);
+              picker.$emit('pick', [start, end]);
+              }
+          }]
+      },
+    };
+  },
+  created() { 
+    this.getList();
+  },
+  methods: { 
+      /** 搜索按钮操作 */
+      handleQuery() {
+          this.queryParams.pageNum = 1;
+          this.getList();
+      },
+      /** 重置按钮操作 */
+      resetQuery() { 
+        this.dateRange = this.defaultDateRange()
+        this.queryParams = {
+          pageNum: 1,
+          pageSize: 10,  
+          searchValue: undefined,
+          alarmType: undefined, 
+        }
+        this.resetForm("queryForm");
+        this.handleQuery();
+      },
+      /** 查询列表 */
+      getList() {
+          this.loading = true;
+          let param = {
+            "pageNum": this.queryParams.pageNum, 
+            "pageSize": this.queryParams.pageSize,  
+            // "searchValue": this.queryParams.searchValue,  
+            "alarmType": this.queryParams.alarmType,  
+          }
+          if(this.dateRange&&this.dateRange.length>0){
+              param.startTime=this.formatDate(this.dateRange[0])
+              param.endTime=this.formatDate(this.dateRange[1])
+          }else{
+              param.startTime=undefined;
+              param.endTime=undefined;
+          }
+          getStaffIllegalListApi(param).then(response => {
+              this.tableListData = response.rows;
+              this.total = Number(response.total);
+              this.loading = false;
+          });
+      },
+      openImg(row) {
+        this.dialogImageUrl = row.imgUrl;
+        this.dialogVisible = true;
+      },
+      defaultDateRange() {
+          const end = new Date(new Date().toLocaleDateString());
+          end.setTime(end.getTime() + 24 * 60 * 60 * 1000 -1);
+          const start = new Date((new Date().toLocaleDateString()));
+          start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000); 
+          this.start = parseInt(start.getTime() / 1000)
+          this.end = parseInt(end.getTime() / 1000)
+          return [start, end]
+      }, 
+      //日期
+      formatDate(date) {
+          // 格式化为 YYYY-MM-DD
+          date = new Date(date)
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+          const day = String(date.getDate()).padStart(2, '0');
+          return `${year}-${month}-${day}`;
+      },
+      //日期时间
+      formatDateTime(date) {
+          // 格式化为 YYYY-MM-DD
+          date = new Date(date)
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
+          const day = String(date.getDate()).padStart(2, '0');
+          const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+          const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+          const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+      }
+  }
+};
+</script>