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

<template>
  <el-dialog :model-value="modelValue" width="70%" @close="closeDialog" destroy-on-close append-to-body>
    
    <template #title>
      <div class="flex just-between align-center">
        <span class="f18">{{ title }}</span>
        <span @click="exportFile" class="f14 pointer" style="color: #0072ff;">下载</span>
      </div>
    </template>
    <div>
    <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 #yjtp="{ row }">
          <div v-if="!row.yjtp || row.yjtp.includes('baidu')">
            <img src="@/assets/images/car.png" width="65" height="70" v-if="row.yjlb == 2" />
            <img src="@/assets/images/default_male.png" width="65" height="70" v-else />
          </div>
          <el-image preview-teleported v-else @click.stop style="width: 65px; height: 70px" :src="row.yjtp"
            :preview-src-list="[row.yjtp]" show-progress>
            <template #error>
              <div class="image-slot error">
                <img src="@/assets/images/car.png" width="65" height="70" v-if="row.yjlb == 2" />
                <img src="@/assets/images/default_male.png" width="65" height="70" v-else />
              </div>
            </template>
          </el-image>
        </template>

        <template #yjjb="{ row }">
          <DictTag :value="row.yjjb" :tag="false" :color="bqYs(row.yjjb)" :options="D_BZ_YJJB" />
        </template>
        <template #yjlx="{ row }">
          <DictTag :value="row.yjlx" :tag="false"  :options="D_GS_ZDQT_YJLB" />
        </template>
        <template #yjlb="{ row }">
          <DictTag :value="row.yjlb" :options="D_BZ_YJLX" />
        </template>
        <template #controls="{ row }">
          <el-link type="warning" @click="pushAssess(row)">全息档案</el-link>
          <!-- <el-link type="primary" @click="showDetail(row)">转合成</el-link> -->
          <!-- <el-link type="danger" @click="delDictItem(row.id)">转会商</el-link> -->
          <!-- <el-link type="success" @click="handleQsFk(row, '签收')" v-if="row.czzt == '01'">签收</el-link>
          <el-link type="success" @click="handleQsFk(row, '反馈')" v-else-if="row.czzt == '02'">反馈</el-link>
          <el-link type="success" @click="handleQsFk(row, '查看反馈')" v-else>查看反馈</el-link> -->
          <!-- <el-link type="primary" @click="openAddModel(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 { exportExlByObj } from "@/utils/exportExcel.js"
import { getMultiDictVal } from "@/utils/dict.js"
import MyTable from "@/components/aboutTable/MyTable.vue";
import Search from "@/components/aboutTable/Search.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import { qcckGet, qcckPost } from "@/api/qcckApi.js";
import { ref, reactive, getCurrentInstance, watch } from "vue";
import {timeValidate} from '@/utils/tools.js'
const { proxy } = getCurrentInstance()
const { D_BZ_YJJB, D_GS_ZDQT_YJLB, D_BZ_YJLX } = proxy.$dict("D_BZ_YJJB", "D_GS_ZDQT_YJLB", "D_BZ_YJLX"); //获取字典数据
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: ''
  },
  dict: {
    type: Object,
    default: () => ({})
  }
})
const searchConfiger = ref([
  { label: "预警级别", prop: 'yjjbList', placeholder: "请选择预警级别", showType: "select", options: D_BZ_YJJB },
  // { label: "预警类型", prop: 'yjlxList', placeholder: "请输入身份证号码", showType: "select", options: D_GS_ZDQT_YJLB },
  {
    label: "上报时间",
    prop: "startTime",
    placeholder: "请选择时间",
    showType: "datetimerange"
  },  {
    label: "所属部门",
    prop: "ssbmdm",
    placeholder: "请输入所属部门",
    showType: "department",
  },
]);
const emit = defineEmits(['update:modelValue'])
const title = ref('')
let today = new Date();
let startOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate());
let endOfDay = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59, 999);
const closeDialog = () => {
  emit('update:modelValue', false)
}
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    loading: false,
    rowHieght: 40,
    haveControls: false,
showSelectType:'null'

  },
  controlsWidth: 160, //操作栏宽度
  total: 0,
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1
  }, //分页
  tableColumn: [
    { label: "预警图片", prop: "yjtp", showSolt: true },
    { label: "姓名", prop: "ryxm" },
    { label: "身份证号", prop: "rysfzh", width: 200 },
    { label: "预警标签", prop: "yjbq", width: 150 },
    { label: "预警地址", prop: "yjdz" },
    { label: "预警级别", prop: "yjjb", showSolt: true },
    { label: "预警类别", prop: "yjlb", showSolt: true },
    { label: "预警类型", prop: "yjlx", showSolt: true },
    { label: "预警时间", prop: "yjsj" },
    { label: "所属部门", prop: "ssbm" },
    { label: "车牌号", prop: "cph" },
  ],
  tableHeight: "43vh",
});
const parameter = ref()
const onSearch = (val) => {
  const promes = {
    startTime: val.startTime && val.startTime.length > 0 ? val.startTime[0] : timeValidate(startOfDay),
    endTime: val.startTime && val.startTime.length > 0 ? val.startTime[1] :timeValidate(endOfDay),
  }
  parameter.value = { ...val, ...promes }
  pageData.pageConfiger.pageCurrent = 1;
  changePage()
}
watch(() => props.modelValue, (val) => {
  if (val) {
    title.value = props.type == 'wqs' ? '未签收预警' :  props.type == 'yfk' ? '已反馈预警' : '预警总数'
    // 获取今天的开始时间和结束时间
    parameter.value = {startTime:timeValidate(startOfDay), endTime:timeValidate(endOfDay)}
    changePage()
  }
})
const ORDIMG = 'https://89.40.7.122:38496/image'
const IMGYM = 'https://sg.lz.dsj.xz/dhimage'
const changePage = () => {
pageData.tableConfiger.loading = true;
  const promes = {
    ...parameter.value,
    yjjbList:parameter.value.yjjbList? [parameter.value.yjjbList] : [],
    yjlxList:  ['01'],
    pageCurrent: pageData.pageConfiger.pageCurrent,
    pageSize: pageData.pageConfiger.pageSize
  }

  if(props.type == 'wqs') promes.czzt = '01';
  if(props.type == 'yfk') promes.czzt = '03';

  qcckPost(promes, '/mosty-gsxt/tbYjxx/getPageAllList').then((res) => {
    pageData.total = res.total || 0;
    pageData.tableConfiger.loading = false;
    pageData.tableData = res.records.map(item => {
      return {
        ...item,
        yjtp: item.yjlx == '01' ? item.yjtp.replace(ORDIMG, IMGYM) : item.yjtp
      }
    }) || [];
  }).catch(() => {
    pageData.tableConfiger.loading = false;
  })
}

const bqYs = (val) => {
  if (val == '01') {
    return '#ff0202'
  } else if (val == '02') {
    return '#ff8c00'
  } else if (val == '03') {
    return '#ffd325'
  } else if (val == '04') {
    return '#0000ff'
  }
}
const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  changePage()
}
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  changePage()
}

// 导出
const exportFile = () =>{
  const titleObj = {
    ryxm: "姓名",
    rysfzh: "身份证号",
    yjbq: "预警标签",
    yjdz: "预警地址",
    yjjb_name: "预警级别",
    yjlb_name: "预警类别",
    yjlx_name: "预警类型",
    yjsj: "预警时间",
    ssbm: "所属部门",
    cph: "车牌号",
  }
 let list = pageData.tableData.map(item => ({
  ...item,
  yjjb_name: getMultiDictVal(item.yjjb, D_BZ_YJJB),
  yjlb_name: getMultiDictVal(item.yjlb, D_BZ_YJLX),
  yjlx_name: getMultiDictVal(item.yjlx, D_GS_ZDQT_YJLB),
 }))
 exportExlByObj(titleObj, list, title.value)
}

</script>

<style scoped></style>