usky-web-mobile/src/pages/business/mhxf/informationSelect/index.vue

<template>
  <u-sticky bgColor="#fff" style="border-bottom: 1px #ececec solid">
    <u-tabs :list="list" @click="tabsClick" :current="current"></u-tabs>
  </u-sticky>

  <view class="informationSelect" @touchstart="fingerstart" @touchend="fingerend">
    <uni-swipe-action>
      <uni-swipe-action-item style="background-color: #ffffff; padding: 10px">
        <!-- 警情查询 -->
        <view class="content1">
          <u-input style="border-radius: 50px; margin-bottom: 10px"  @blur="blur" v-model="dataInput" prefixIcon="search" prefixIconStyle="color: #0c7bf9" placeholder="请输入案件编号"> </u-input>
         <u-row v-for="po in policeData" :key="po" style="height: 36px; line-height: 36px">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 0px">{{ po.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 0px 0px 5px">{{ po.value }}</view>
            </u-col>
          </u-row>
        </view> 

        <!-- 各类查询 start -->
        <view class="content1">
          <u-input style="border-radius: 50px; margin-bottom: 10px" @blur="blur" v-model="dataInput" prefixIcon="search" prefixIconStyle="color: #0c7bf9" :placeholder="placeholderText"> </u-input>
          <view style="text-align: center; color: rgb(189, 189, 189); font-size: 14px" v-if="!dataRes">暂无数据</view>
          <u-row v-for="po in classifyData" :key="po" style="height: 36px; line-height: 36px">
            <u-col span="4">
              <view style="text-align: right; padding: 0px 5px 0px 5px">{{ po.title }}</view>
            </u-col>
            <u-col span="8">
              <view style="text-align: left; padding: 0px 5px 0px 5px">{{ po.value }}</view>
            </u-col>
          </u-row>
        </view>
        <!-- 各类查询 end -->
      </uni-swipe-action-item>
    </uni-swipe-action>
  </view>
</template>

<script setup>
import { onReady, onLoad, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect } from "vue";
import useXunJianStore from "@/store/modules/xunJian";

const myRequest = inject("$myRequest"); //全局接口请求
const settingsStore = useXunJianStore(); //全局变量值Store

const dataInput = ref("");
const current = ref(0);
const classifyUrl = ref("");
const classifyCode = ref("");
const placeholderText = ref("");
const dataRes = ref(0);

const list = ref([
  {
    id: 1,
    name: "警情查询",
  },
  {
    id: 2,
    name: "火灾查询",
  },
  {
    id: 3,
    name: "人员查询",
    badge: {
      // isDot: true,
      // value: 5,
    },
  },
  {
    id: 4,
    name: "车辆查询",
    badge: {
      // value: 5,
    },
  },
  {
    id: 5,
    name: "站点查询",
    badge: {
      // value: 5,
    },
  },
  {
    id: 6,
    name: "消火栓",
    badge: {
      // value: 5,
    },
  },

  {
    id: 7,
    name: "重点单位",
    badge: {
      // value: 5,
    },
  },
  {
    id: 8,
    name: "消防检查信息",
    badge: {
      // value: 5,
    },
  },
]);

const startData = ref({
  clientX: "",
  clientY: "",
});
const updDistance = ref(100);
const lrDistance = ref(50);
const topMed = ref("");
const bottomMed = ref("");
const leftMed = ref("");
const rightMed = ref("");
const classifyData = ref([]); //警情查询数据存储

/**
 * @当按下去的时候
 */
function fingerstart(e) {
  // 记录 距离可视区域左上角 左边距 和 上边距
  startData.value.clientX = e.changedTouches[0].clientX;
  startData.value.clientY = e.changedTouches[0].clientY;
}
/**
 * @当抬起来的时候
 */
function fingerend(e) {
  // 当前位置 减去 按下位置 计算 距离
  const subX = e.changedTouches[0].clientX - startData.value.clientX;
  const subY = e.changedTouches[0].clientY - startData.value.clientY;
  if (subY > updDistance.value || subY < -updDistance.value) {
    if (subY > updDistance.value) {
      bottomscroll(subY);
    } else if (subY < -updDistance.value) {
      topscroll(subY);
    }
  } else {
    if (subX > lrDistance.value) {
      rightscroll(subX);
    } else if (subX < -lrDistance.value) {
      leftscroll(subX);
    } else {
      console.log("无效操作");
    }
  }
}
/**
 * @上滑触发
 */
function topscroll(dista) {
  topMed.value ? (topMed.value = dista) : (topMed.value = null);
  console.log("触发了上滑方法!");
}
/**
 * @下滑触发
 */
function bottomscroll(dista) {
  bottomMed.value ? (bottomMed.value = dista) : (bottomMed.value = null);
  console.log("触发了下滑方法!");
}
/**
 * @右滑触发
 */
function rightscroll(dista) {
  rightMed.value ? (rightMed.value = dista) : (rightMed.value = null);
  console.log("触发了右滑方法!");
  if (current.value >= 1) {
    current.value--;
  } else {
    current.value = 0;
  }
}
/**
 * @左滑触发
 */
function leftscroll(dista) {
  leftMed.value ? (leftMed.value = dista) : (leftMed.value = null);
  console.log("触发了左滑方法!");
  if (current.value < list.value.length - 1) {
    current.value++;
  } else {
    current.value = 0;
  }
}

function blur(e) {
  if (dataInput.value) {
    goSearch();
  }
}

/**
 * @tabs点击事件
 */
function tabsClick(e) {
  current.value = e.index;
  console.log(current.value);
  dataInput.value = "";
}

function goSearch() {
  if (current.value == 0) {
    //警情查询
    classifyUrl.value = "/service-fire/demPoliceInfo/page";
    placeholderText.value = "请输入案件编号";
    classifySearch(classifyUrl.value, {
      caseCode: dataInput.value,
    });
  } else if (current.value == 1) {
    //火灾查询
    placeholderText.value = "请输入火灾地址";
    classifyUrl.value = "/service-fire/demFireStatisticsAttach/page";
    classifySearch(classifyUrl.value, {
      address: dataInput.value,
    });
  } else if (current.value == 2) {
    //人员查询
    placeholderText.value = "请输入值班人员名称";
    classifyUrl.value = "/service-fire/unitBeOnDuty/list";
    classifySearch(classifyUrl.value, {
      name: dataInput.value,
    });
  } else if (current.value == 3) {
    //车辆信息
    placeholderText.value = "请输入车牌号";
    classifyUrl.value = "/service-fire/unitBeOnDuty/vehiclelist";
    classifySearch(classifyUrl.value, {
      licensePlate: dataInput.value,
    });
  } else if (current.value == 4) {
    //站点查询
    placeholderText.value = "请输入站点名称";
    classifyUrl.value = "/service-fire/unitBeOnDuty/page";
    classifySearch(classifyUrl.value, {
      stationName: dataInput.value,
    });
  } else if (current.value == 5) {
    //消火栓
    placeholderText.value = "请输入水源名称";
    classifyUrl.value = "/service-fire/demWaterSource/waterSourceList";
    classifySearch(classifyUrl.value, {
      waterName: dataInput.value,
    });
  } else if (current.value == 6) {
    //重点单位
    placeholderText.value = "请输入单位名称";
    classifyUrl.value = "/service-fire/baseCompany/companyList";
    classifySearch(classifyUrl.value, {
      companyName: dataInput.value,
    });
  } else if (current.value == 7) {
    //消防检查信息
    placeholderText.value = "请输入单位ID";
    classifyUrl.value = "/service-fire/demFireInspect/fireInspectList";
    classifySearch(classifyUrl.value, {
      companyId: dataInput.value,
    });
  }
}

//分类信息查询 start
async function classifySearch(URL, params) {
  classifyData.value = [];

  const res = await myRequest({
    url: URL,
    data: params,
  });

  if (res.data.status == "SUCCESS") {
    if (current.value == 2) {
      var records = res.data.data[0][0];
    } else if (current.value == 3) {
      var records = res.data.data[0];
    } else {
      var records = res.data.data.records[0];
    }
    if (!records) {
      dataRes.value = 0;
    } else {
      dataRes.value = 1;
    }

    switch (current.value) {
      case 0: //警情查询
        var classifyTitle = [
          "案件编号",
          "主管支队",
          "案件时间段",
          "通知到场时间",
          "通知出水时间",
          "通知控制时间",
          "通知熄火时间",
          "通知返队时间",
          "区域",
          "案件类型",
          "案发地址",
          "立案时间",
          "立案日期",
          "处置对象",
          "案件等级",
          "主管中队",
          "区县",
          "案件状态",
          "案件性质",
          "填表时间",
          "街镇",
          "创建时间",
        ];
        var classifyValue = [
          records.caseCode,
          records.branch,
          records.timeSlot,
          records.noticeArrivalTime,
          records.noticeEffluentTime,
          records.controlTime,
          records.quenchTime,
          records.returnTime,
          records.caseArea,
          records.caseTypeCode,
          records.address,
          records.filingTime,
          records.filingDate,
          records.handleObject,
          records.caseLevel,
          records.squadron,
          records.district,
          records.caseStatus,
          records.caseNature,
          records.bdpAudit,
          records.streetTown,
          records.createTime,
        ];
        break;
      case 1: //火灾查询
        var classifyTitle = [
          "地区",
          "街镇",
          "经度",
          "维度",
          "平台ID",
          "火灾地址",
          "过火面积",
          "直接财产损失",
          "死亡人数",
          "受伤人数",
          "受灾户数",
          "火灾原因",
          "火灾等级",
          "场所一级",
          "场所二级",
          "起火物一级",
          "起火物二级",
          "性质",
        ];
        var classifyValue = [
          records.district,
          records.street,
          records.longitude,
          records.latitude,
          records.id,
          records.address,
          records.burnedArea,
          records.propertyLoss,
          records.deathToll,
          records.nonFatal,
          records.disasterHome,
          records.fireCause,
          records.fireLevel,
          records.placeOne,
          records.placeTwo,
          records.fireGoodsOne,
          records.fireGoodsTwo,
          records.nature,
        ];
        break;
      case 2: //人员查询
        var classifyTitle = ["值班人员信息", "岗位名称", "机构名称", "机构简称", "机构地址", "值班日期"];
        var classifyValue = [records.name, records.postName, records.organizationName, records.organizationShort, records.organizationAddress, records.time];
        break;
      case 3: //车辆查询
        var classifyTitle = [
          "车辆信息",
          "单件装备编码",
          "装备名称",
          "装备编码",
          "上级装备编码",
          "所属消防机构",
          "车牌号码",
          "资产编号",
          "商标",
          "颜色",
          "生产厂家名称",
          "有效期至",
          "车架号",
          "发动机编号",
          "批次号",
          "电台呼号",
          "车辆简称",
          "电台频道",
          "指挥员姓名",
          "驾驶员",
        ];
        var classifyValue = [
          records.vehicleId,
          records.singleEquipCode,
          records.equipName,
          records.equipCode,
          records.superiorEquipCode,
          records.fireOrga,
          records.licensePlate,
          records.assetCode,
          records.assetCode,
          records.colour,
          records.productName,
          records.validityTime,
          records.frameCode,
          records.engineCode,
          records.batchCode,
          records.radioCallSign,
          records.vehicleAbbreviat,
          records.radioChannel,
          records.commanderName,
          records.driver,
        ];
        break;
      case 4: //站点查询
        var classifyTitle = [
          "平台ID",
          "支队名称",
          "所属辖区中队",
          "消防站名称",
          "单位性质",
          "地址",
          "所在位置",
          "联动固定电话",
          "负责人姓名",
          "负责人手机号码",
          "备注",
          "消防站类型",
          "经度",
          "维度",
          "创建时间",
          "更新时间",
          "支队id",
          "中队id",
          "编号",
          "原单位性质",
        ];
        var classifyValue = [
          records.id,
          records.branchName,
          records.squadron,
          records.stationName,
          records.companyNature,
          records.address,
          records.location,
          records.fixedPhone,
          records.chargeName,
          records.chargePhone,
          records.remark,
          records.stationType,
          records.longitude,
          records.dimension,
          records.createTime,
          records.updateTime,
          records.branchId,
          records.squadronId,
          records.number,
          records.primaryCompanyNature,
        ];
        break;
      case 5: //消火栓
        var classifyTitle = [
          "可用状态名称",
          "消防站简介",
          "水源地址",
          "建造时间",
          "消火栓接口形式",
          "水源类型",
          "管辖机构名称",
          "取水形式",
          "联系方式",
          "可用状态",
          "水源性质",
          "水源名称",
          "管网单位",
          "管网压力",
        ];
        var classifyValue = [
          records.availableStatusName,
          records.fireAbbreviat,
          records.waterAddress,
          records.buildTime,
          records.hydrantInterface,
          records.waterType,
          records.organizateName,
          records.waterForm,
          records.contactMode,
          records.availableStatus,
          records.waterNature,
          records.waterName,
          records.pipeCompany,
          records.pipePressure,
        ];
        break;
      case 6: //重点单位
        var classifyTitle = [
          "单位联系电话",
          "单位详细地址",
          "职工人数",
          "单位类型",
          "消防安全责任人姓名",
          "法人代表姓名",
          "单位名称",
          "消防安全管理人姓名",
          "单位主属性",
          "建筑面积",
          "行政区域",
          "单位成立时间",
          "占地面积",
          "火灾危险性",
          "创建时间",
          "单位性质",
          "固定资产（单位：万元）",
        ];
        var classifyValue = [
          records.linkPhone,
          records.address,
          records.employeeNum,
          records.companyType,
          records.fireDutyName,
          records.delegateName,
          records.companyName,
          records.fireManageName,
          records.mainAttribute,
          records.buildArea,
          records.administrativeDivision,
          records.foundTimecoverArea,
          records.coverArea,
          records.fireHazard,
          records.createTime,
          records.companyNature,
          records.fixedAssets,
        ];
        break;
      case 7: //消防检查信息
        var classifyTitle = ["单位ID", "检查人员ID", "计划生成时间", "检查结果", "创建人", "创建时间", "检查员名称", "检查员职位", "单位电话"];
        var classifyValue = [
          records.companyId,
          records.personId,
          records.planTime,
          records.inspectResult,
          records.creator,
          records.createTime,
          records.personName,
          records.personPosition,
          records.linkPhone,
        ];
        break;
      // default:
      //    默认代码块
    }

    for (var i = 0; i < classifyTitle.length; i++) {
      var obj = {};
      obj.title = classifyTitle[i];
      obj.value = classifyValue[i];
      classifyData.value.push(obj);
    }
  } else {
  }
}
// end

watchEffect(() => {
  goSearch();
});

// 自定义导航事件
onNavigationBarButtonTap((e) => {
  if (e.float == "right") {
    uni.navigateTo({
      url: "/pages/business/mhxf/xunJian/collect/components/collectRecord",
    });
  } else {
  }
});

onLoad((options) => {});

onReady(() => {});

onMounted(() => {});
</script>

<style lang="scss">
.is-selected {
  color: #1989fa;
}

.informationSelect {
  height: calc(100% - 45px);
  background-color: #ffffff;
  .content1 {
    .u-row {
      height: 36px;
      line-height: 36px;
      .u-col {
        border: 1px #e4e3e3 solid;
        border-right: 0px;
        border-bottom: 0px;
        text-align: center;

        view {
          padding: 0 10px;
          min-height: 40px;
          overflow: hidden; //超出的文本隐藏
          // text-overflow: ellipsis; //溢出用省略号显示
          overflow: auto;
          white-space: nowrap; // 默认不换行；
          font-size: 14px;
        }
      }

      .u-col:last-child {
        border-right: 1px #e4e3e3 solid;
      }
    }

    .u-row:last-child {
      .u-col {
        border-bottom: 1px #e4e3e3 solid;
      }
    }
  }
}
</style>

<style scoped>
body,
uni-page-body,
uni-page-refresh,
.grayBackgroundColor {
  background: rgb(241, 241, 241);
}

.whiteBackgroundColor {
  background-color: #ffffff;
}
</style>