sgxt_web/src/views/home/components/policeReports.vue

<template>
  <el-dialog v-model="modelValue" title="警情总数" width="70%" @close="closeDialog" destroy-on-close append-to-body>
    <div style="height: 60vh; overflow: auto;">


    <Search :searchArr="searchConfiger" @submit="onSearch" :key="pageData.keyCount"></Search>
    <MyTable :tableData="pageData.tableData" :tableColumn="pageData.tableColumn" :tableHeight="pageData.tableHeight"
      :key="pageData.keyCount" :tableConfiger="pageData.tableConfiger" :controlsWidth="pageData.controlsWidth">
      <!-- <template #jjlx="{ row }">
          <DictTag :tag="false" :value="row.jjlx" :options="D_BZ_JQBQ" />
        </template> -->
      <template #jqdjdm="{ row }">
        <DictTag :tag="false" :value="row.jqdjdm" :options="D_GS_BQ_DJ" />
      </template>
      <template #jqlbdm="{ row }">
        <DictTag :tag="false" :value="row.jqlbdm" :options="JQLB" />
      </template>
      <template #ypzt="{ row }">
        {{ row.ypzt === '01' ? '已研判' : '未研判' }}
      </template>
      <!-- <template #jqdjdm="{ row }">
          <DictTag :tag="false" :value="row.jqdjdm" :options="D_BZ_JQDJ" />
        </template> -->
      <!-- 操作 -->
      <!-- <template #controls="{ row }">
          <el-link type="primary" @click="addEdit('edit', row)">详情</el-link>
          <el-link type="warning" @click="handleYP('研判', row)">研判</el-link>
          <el-link type="danger" @click="handleYP('深度研判', row)">深度研判</el-link>
        </template> -->
    </MyTable>
    <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{
      ...pageData.pageConfiger,
      total: pageData.total
    }"></Pages>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="closeDialog">确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import MyTable from "@/components/aboutTable/MyTable.vue";
import Search from "@/components/aboutTable/Search.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { lzJcjPjdbSelectPage } from '@/api/semanticAnalysis.js'
import { ref, reactive, getCurrentInstance, watch } from "vue";
import { useRoute, useRouter } from 'vue-router'
import {timeValidate} from '@/utils/tools.js'
const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const { D_GS_BQ_DJ,JQLB,JQLX,JQXL,JQZL,D_BZ_JQLY,D_BZ_JQFL,JQLB_DP,D_BZ_JQBQ,D_GS_SSYJ } = proxy.$dict('D_GS_BQ_DJ',"JQLB",'JQLX','JQXL','JQZL','D_BZ_JQLY','D_BZ_JQFL','JQLB_DP','D_BZ_JQBQ','D_GS_SSYJ'); //获取字典数据
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  dict: {
    type: Object,
    default: () => ({})
  }
})
const searchConfiger = ref([
  {
    label: "接警员姓名",
    prop: "jjyxm",
    placeholder: "请输入接警员姓名",
    showType: "input"
  },
  {
    label: "报警内容",
    prop: "bjnr",
    placeholder: "请输入报警内容",
    showType: "input"
  },
  {
    label: "接警单编号",
    prop: "jjdbh",
    placeholder: "请输入接警单编号",
    showType: "input"
  },
  {
    label: "警情级别",
    prop: "jqdjdm",
    placeholder: "请选择警情级别",
    showType: "select",
    options: D_GS_BQ_DJ
  }, {
    label: "上报时间",
    prop: "startTime",
    placeholder: "请选择时间",
    showType: "daterange"
  },
]);
const emit = defineEmits(['update:modelValue'])
const closeDialog = () => {
  emit('update:modelValue', false)
}
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 40,
    haveControls: false,
  },
  controlsWidth: 160, //操作栏宽度
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  tableColumn: [
    { label: "接警单编号", prop: "jjdbh" },
    { label: "报警电话", prop: "bjdh" },
    { label: "报警时间", prop: "bjsj" },
    { label: "报警内容", prop: "bjnr", showOverflowTooltip: true },
    { label: "接警员姓名", prop: "jjyxm" },
    { label: "警情级别", prop: "jqdjdm",showSolt:true },
    // { label: "警情标签", prop: "jjlx", showSolt: true },
    { label: "警情类型", prop: "jqlbdm",showSolt:true },
    { label: "警情地址", prop: "jqdz" },
    { label: "补充接警内容", prop: "bcjjnr", showOverflowTooltip: true },
    { label: "研判状态", prop: "ypzt",showSolt:true },
  ],
  tableHeight: "43vh",
});
const parameter = ref()
const onSearch = (val) => {
  const promes = {
    startTime: val.startTime && val.startTime.length > 0 ? val.startTime[0] : '',
    endTime: val.startTime && val.startTime.length > 0 ? val.startTime[1] : '',
  }
  parameter.value = { ...val, ...promes }
  pageData.pageConfiger.pageCurrent = 1;
  changePage()
}
watch(() => props.modelValue, (val) => {
  if (val) {
    parameter.value = {startTime:timeValidate(new Date(),'ymd'),endTime:timeValidate(new Date(),'ymd')}
    changePage()
  }
})
const changePage = () => {
pageData.tableConfiger.loading = true;
  const params = {
    pageCurrent: pageData.pageConfiger.pageCurrent,
    pageSize: pageData.pageConfiger.pageSize,
    ...parameter.value
  }
  lzJcjPjdbSelectPage(params).then(res => {
    console.log(res);
    pageData.tableData = res.records || [];
    pageData.total = res.total;

  }).finally(() => {
    pageData.tableConfiger.loading = false;
  })
}

// 查看详情
const showDetail = (item) => {
  router.push({
    path: '/CollectCrculate',
    query: {
      id: item.id
    }
  })
}

const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  changePage()
}
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  changePage()
}
</script>

<style scoped></style>