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

<template>
  <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
    <u-tabs
      :list="list"
      :current="state.current"
      @click="tabsClick"
      lineColor="#333"
      :activeStyle="{ color: '#333', fontSize: '14px' }"
      :inactiveStyle="{ color: '#909399', fontSize: '14px' }"
    ></u-tabs>
  </u-sticky>

  <oa-scroll
    customClass="bg-white scroll-height"
    :isSticky="true"
    :refresherLoad="false"
    :refresherLoadTitle="false"
    :refresherEnabled="false"
    :refresherEnabledTitle="false"
    :refresherDefaultStyle="'none'"
    :refresherThreshold="44"
    :refresherBackground="'#f5f6f7'"
    :data-theme="'theme-' + proxy.$settingStore.themeColor.name"
  >
    <template #default>
      <oa-touch class="informationSelect" @change="touchChange">
        <template #content>
          <uni-swipe-action>
            <uni-swipe-action-item>
              <!-- 各类查询 start -->
              <view class="tableType3">
                <u-input class="block mb10" v-model="state.dataInput" :placeholder="state.placeholderText" @blur="blur" shape="circle" prefixIcon="search" prefixIconStyle="color: #0c7bf9"> </u-input>
                <u-empty v-if="state.classifyData == undefined" text="暂无数据" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"> </u-empty>
                <view class="con" v-if="state.current == 8">
                  <view class="time">{{ state.operateDate }}</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>
                <u-row v-for="po in state.classifyData" :key="po" v-else>
                  <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>
        </template>
      </oa-touch>
    </template>
  </oa-scroll>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { onReady, onLoad, onUnload, onShow, onNavigationBarButtonTap } from "@dcloudio/uni-app";
import { ref, onMounted, inject, shallowRef, reactive, watchEffect, getCurrentInstance } from "vue";
/*----------------------------------接口引入-----------------------------------*/
import { dataList } from "@/api/business/mhxf/informationSelect";
/*----------------------------------组件引入-----------------------------------*/
/*----------------------------------store引入-----------------------------------*/
import { useStores, commonStores } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------公共变量-----------------------------------*/
const { proxy } = getCurrentInstance();
const commonStore = commonStores(); //全局公共Store
/*----------------------------------变量声明-----------------------------------*/
const state = reactive({
  dataInput: "",
  current: 0,
  classifyUrl: "",
  placeholderText: "",
  classifyData: undefined, //警情查询数据存储
  operateDate: proxy.$time.getFormatterDate(new Date()), //操作时间
});

const inter = reactive({
  interOperateDate: null,
});

const list = ref([
  { id: 1, name: "警情查询" },
  { id: 2, name: "火灾查询" },
  { id: 3, name: "人员查询" },
  { id: 4, name: "车辆查询" },
  { id: 5, name: "站点查询" },
  { id: 6, name: "消火栓" },
  { id: 7, name: "重点单位" },
  { id: 8, name: "消防检查信息" },
  { id: 9, name: "视频监控" },
]);

/**
 * @滑动change事件
 */
function touchChange(e) {
  if (e == "右滑") {
    if (state.current >= 1) {
      state.current--;
    } else {
      state.current = list.value.length - 1;
    }
  } else if (e == "左滑") {
    if (state.current < list.value.length - 1) {
      state.current++;
    } else {
      state.current = 0;
    }
  }
}

function blur(e) {
  console.log(1)
  if (state.dataInput) {
    goSearch();
  }
}

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

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

//分类信息查询 start
async function classifySearch(URL, params) {
  proxy.$modal.loading("加载中");
  state.classifyData = [];
  dataList(URL, params).then((res) => {
    proxy.$modal.closeLoading();
    if (res.status == "SUCCESS") {
      if (state.current == 2) {
        var records = res.data[0][0];
      } else if (state.current == 3) {
        var records = res.data[0];
      } else {
        var records = res.data.records[0];
      }

      if (JSON.stringify(records) === "{}") {
        state.classifyData = undefined;
      }

      switch (state.current) {
        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];
        state.classifyData.push(obj);
      }
    } else {
    }
  });
}
// end

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

onLoad((options) => {
  inter.interOperateDate = setInterval(() => {
    state.operateDate = proxy.$time.getFormatterDate(new Date());
  }, 1000);
});

onUnload(() => {
  clearInterval(inter.interOperateDate); //销毁之前定时器
});

onShow(() => {
  //调用系统主题颜色
  proxy.$settingStore.systemThemeColor([1]);
});

onReady(() => {});

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

<style lang="scss">
.uni-swipe {
  overflow: visible;
}
</style>

<style lang="scss" scoped>
.informationSelect {
}

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