风门故障统计分析，车辆损坏排查-提交

.env

@@ -1,5 +1,5 @@
 # port
-VITE_PORT = 8062
+VITE_PORT = 3100
 
 #  网站标题
 VITE_GLOB_APP_TITLE = 智能通风管控系统

src/views/vent/monitorManager/gateMonitor/components/CarDamageTable.vue

@@ -1,31 +1,54 @@
 <template>
   <div class="car-damage">
-    <a-table size="small" :dataSource="dataSource" :columns="carColumns" :pagination="pagination" :scroll="{ y: 200, }"
-      @change="pageChange">
-       <template #bodyCell="{ column, text }">
-        <template v-if="column.dataIndex == 'type'">
-          <div>{{ text == '1' ? '风门损坏' : '正常开闭' }}</div>
+    <div class="search-area">
+      <a-row>
+        <a-col :span="4">
+          <div class="area-item">
+            <div class="item-text">风门状态：</div>
+            <a-select ref="select" v-model:value="type" style="width: 240px" placeholder="请选择风门状态">
+              <a-select-option v-for="(item, index) in typeList" :key="item.value" :value="item.value">{{
+                item.label }}</a-select-option>
+            </a-select>
+          </div>
+        </a-col>
+        <a-col :span="4">
+          <a-button type="primary" preIcon="ant-design:search-outlined" style="margin-left: 10px"
+            @click="getSearch">查询</a-button>
+          <a-button preIcon="ant-design:sync-outlined" style="margin: 0px 15px" @click="getReset">重置</a-button>
+        </a-col>
+      </a-row>
+    </div>
+    <div class="content-area">
+      <a-table size="small" :dataSource="dataSource" :columns="carColumns" :pagination="pagination"
+        :scroll="{ y: 200, }" @change="pageChange">
+        <template #bodyCell="{ column, text }">
+          <template v-if="column.dataIndex == 'type'">
+            <div>{{ text == '1' ? '风门损坏' : '正常开闭' }}</div>
+          </template>
         </template>
-      </template>
-    </a-table>
+      </a-table>
+    </div>
+
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive,watchEffect } from 'vue'
-import { carColumns } from '../gate.data'
+import { ref, reactive, onMounted } from 'vue'
+import { carColumns, typeList } from '../gate.data'
 
 let props = defineProps({
   deviceListApi: {
     type: Function,
-    required: false,
+    required: true,
   },
-  gateId:{
-    type:String,
-    default:''
+  gateId: {
+    type: String,
+    default: ''
   }
 })
 
+let type = ref('0')
+
 let dataSource = ref<any[]>([])
 //分页参数配置
 let pagination = reactive({
@@ -39,7 +62,7 @@ let pagination = reactive({
 
 //查询列表
 async function getCarList() {
-  let res = await props.deviceListApi({gateIds:props.gateId, pageNo: pagination.current, pageSize: pagination.pageSize })
+  let res = await props.deviceListApi({ gateIds: props.gateId, type: type.value, pageNo: pagination.current, pageSize: pagination.pageSize })
   dataSource.value = res.records || []
   pagination.total = res.total
 }
@@ -48,9 +71,42 @@ function pageChange(val) {
   pagination.pageSize = val.pageSize;
   getCarList()
 }
-watchEffect(()=>{
-  props.deviceListApi &&  getCarList()
+//查询
+function getSearch() {
+  pagination.current = 1
+  getCarList()
+}
+//重置
+function getReset() {
+  type.value = '0'
+  pagination.current = 1
+  getCarList()
+}
+onMounted(() => {
+  getCarList()
 })
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.car-damage {
+  .search-area {
+    margin: 15px;
+
+    .area-item {
+      display: flex;
+      align-items: center;
+
+      .item-text {
+        color: #fff;
+      }
+    }
+  }
+
+  .zxm-picker,
+  .zxm-input {
+    border: 1px solid #3ad8ff77;
+    background-color: #ffffff00;
+    color: #fff;
+  }
+}
+</style>

src/views/vent/monitorManager/gateMonitor/components/WindDoorFaultTable.vue

@@ -12,13 +12,13 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, watchEffect } from 'vue'
+import { reactive, ref, onMounted } from 'vue'
 import { faultColumns } from '../gate.data'
 
 let props = defineProps({
   deviceListApi: {
     type: Function,
-    required: false,
+    required: true,
 
   },
 })
@@ -47,8 +47,8 @@ function pageChange(val) {
   pagination.pageSize = val.pageSize;
   getList()
 }
-watchEffect(()=>{
-  props.deviceListApi &&  getList()
+onMounted(() => {
+  getList()
 })
 </script>
 

src/views/vent/monitorManager/gateMonitor/gate.data.ts

@@ -119,6 +119,11 @@ export const faultColumns: BasicColumn[] = [
     align: 'center'
   },
 ];
+//风门状态
+export let typeList:any[] =[
+  { label: '正常开闭', value: '0' },
+  { label: '风门损坏', value: '1' }
+]
 //车辆损坏排查
 export const carColumns: BasicColumn[] = [
   {