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" style="background-color: #ffffff; padding: 10px">
    <uni-swipe-action>
      <uni-swipe-action-item>
        <!-- 各类查询 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>
          <view v-if="current == 8">
            <view class="con" style="">
              <view class="time">{{ newTime }}</view>
              <video src="http://file.usky.cn/statics/video/20230203.mp4" autoplay :controls="false" :show-center-play-btn="false" :loop="true" style="width: 100%"></video>
            </view>
          </view>
          <view v-else>
            <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>
        </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";

import { dataList } from "@/api/business/mhxf/informationSelect";

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,
    },
  },
  {
    id: 9,
    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,
    });
  } else if (current.value == 8) {
    //消防检查信息
    placeholderText.value = "";
    // classifyUrl.value = "/service-fire/demFireInspect/fireInspectList";
    // classifySearch(classifyUrl.value, {
    //   companyId: dataInput.value,
    // });
  }
}

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

  dataList(URL, params).then((res) => {
    if (res.status == "SUCCESS") {
      if (current.value == 2) {
        var records = res.data[0][0];
      } else if (current.value == 3) {
        var records = res.data.data[0];
      } else {
        var records = res.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);

        console.log(classifyData.value);
      }
    } else {
    }
  });
}
// end

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

// start

const newTime = ref("");
function getNowTime() {
  var date = new Date();
  var time =
    addZero(date.getFullYear()) +
    "-" +
    addZero(date.getMonth() + 1) +
    "-" +
    addZero(date.getDate()) +
    " " +
    addZero(date.getHours()) +
    ":" +
    addZero(date.getMinutes()) +
    ":" +
    addZero(date.getSeconds());
  newTime.value = time;
}
//根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
//小于10的拼接上0字符串
function addZero(s) {
  return s < 10 ? "0" + s : s;
}

// end

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

onLoad((options) => {
  getNowTime(); //进入页面调用该方法获取当前时间
  clearInterval(myTimeDisplay); //销毁之前定时器
  var myTimeDisplay = setInterval(() => {
    getNowTime(); //每秒更新一次时间
  }, 1000);
});

onReady(() => {});

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

<style lang="scss">
.uni-swipe {
  overflow: visible;
}
body {
  background: #fff;
}
.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);
}

.time {
  position: absolute;
  z-index: 99999;
  top: 3px;
  left: 3px;
  display: inline-block;
  color: #fff;
}
.con {
  text-align: center;
  position: relative;
}
.whiteBackgroundColor {
  background-color: #ffffff;
}
body {
  background: #fff;
}
</style>