烟花爆竹批发企业仓库安全风险监测前端
zhouwx
2025-04-16 489ba60990eeb2b11ff2522678630d8bc3764e71
src/views/firework/humiture/components/dataDialog.vue
@@ -3,24 +3,75 @@
    <el-dialog
        v-model="dialogVisible"
        title="历史记录"
        width="50%"
        width="800px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-form style="display: flex;align-items: center">
        <el-form-item>
          <el-date-picker
              v-model="state.dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 300px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态:" style="margin-left: 20px" >
          <el-select
              v-model="state.queryParams.filter.deviceWarning"
              placeholder="请选择"
              style="width: 80%"
          >
            <el-option
                v-for="item in state.statusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="state.tableList" :border="true">
        <el-table-column label="序号" type="index" align="center" width="80" />
        <el-table-column label="探测器" prop="createTime" align="center"  />
        <el-table-column label="浓度值" prop="basicName" align="center" />
        <el-table-column label="状态" prop="tabooBasicName" align="center" />
        <el-table-column label="属性" prop="tabooBasicName" align="center" />
        <el-table-column label="时间" prop="updateBy" align="center" />
        <el-table-column label="探测器" prop="deviceName" align="center"  />
        <el-table-column label="浓度值" prop="realValue" align="center" >
          <template #default="scope">
            <div>{{scope.row.realValue}}<span v-if="state.type == '温度'">℃</span><span v-else>%RH</span></div>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="deviceWarning" align="center" >
          <template #default="scope">
            <span v-if="scope.row.deviceWarning == 0" style="color: #42b983">正常</span>
            <span v-else style="color: #ed5565">报警</span>
          </template>
        </el-table-column>
        <el-table-column label="属性"  align="center" >
          <template #default="scope">
            <span>{{state.type}}</span>
          </template>
        </el-table-column>
        <el-table-column label="时间" prop="createDate" align="center" width="120" />
      </el-table>
      <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:page="queryParams.pageIndex"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
      />
@@ -29,33 +80,84 @@
</template>
<script setup>
import {reactive, ref, toRefs} from "vue";
import {getHumidity, getTemperature} from "@/api/company/warehouse";
const dialogVisible = ref(false);
const emit = defineEmits(["getList"]);
const loading = ref(false)
const state = reactive({
  type: '',
  tableList: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 5,
    pageIndex: 1,
    pageSize: 10,
    filter: {
      deviceId: null,
      deviceWarning: '',
      createDateStart: '',
      createDateEnd: ''
    }
  },
  statusList: [
    {
      id: 0,
      name: '正常'
    },
    {
      id: 1,
      name: '报警'
    },
  ],
  dateRange:[]
})
const { queryParams, total } = toRefs(state);
const openDialog = async (type,value) => {
  state.type = type
  state.queryParams.filter.deviceId = value.deviceId
  await getList()
  dialogVisible.value = true;
}
const getList = async () => {
  // loading.value = true
  // const res = await getAvoidInfoPage(state.queryParams)
  // if(res.code == 200){
  //   state.tableList = res.data.list
  //   state.total = res.data.total
  // }else{
  //   ElMessage.warning(res.message)
  // }
  // loading.value = false
  loading.value = true
  state.queryParams.filter.createDateStart = state.dateRange[0]
  state.queryParams.filter.createDateEnd = state.dateRange[1]
  if(state.type == '湿度'){
    const res = await getHumidity(state.queryParams)
    if(res.code == 200){
      state.tableList = res.result.records
      state.total = res.result.total
    }else{
      ElMessage.warning(res.message)
    }
    loading.value = false
  }else {
    const res = await getTemperature(state.queryParams)
    if(res.code == 200){
      state.tableList = res.result.records
      state.total = res.result.total
    }else{
      ElMessage.warning(res.message)
    }
    loading.value = false
  }
}
function reset() {
  state.queryParams = {
    pageIndex: 1,
    pageSize: 10,
    filter: {
      deviceId: state.queryParams.filter.deviceId,
      deviceWarning: '',
      createDateStart: '',
      createDateEnd: ''
    }
  }
  state.dateRange = []
  getList()
}
const handleClose = () => {
  dialogVisible.value = false;