dy_web/src/views/largeScreen/home/components/dialog/xiafaZl.vue

<template>
  <!--下发指令 -->
  <SizeDialog @handleIdentity="close" :show="showAddEvent" :butList="['提交']" :showContent="true" :showbut="false"
    title="下发指令">
    <div class="form_box">
      <el-form label-width="100px" :model="formInfo" :inline="true" label-position="top" :rules="rules" ref="elform">
        <el-form-item label="指令标题" style="width: 100%" prop="zlbt">
          <el-input v-model="formInfo.zlbt" placeholder="请输入指令标题" clearable />
        </el-form-item>
        <el-form-item label="指令类型" style="width: 100%" prop="zllx">
          <el-select style="width: 100%" v-model="formInfo.zllx" placeholder="请选择指令类型">
            <el-option v-for="dict in D_BZ_RGZLLX" :key="dict.value + 'zllx'" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指令等级" style="width: 100%" prop="zldj">
          <el-select style="width: 100%" v-model="formInfo.zldj" placeholder="请选择指令等级">
            <el-option v-for="dict in D_BZ_TYJB" :key="dict.value + 'zldj'" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="指令接收对象" style="width: 100%" prop="zljsdx">
          <el-select @change="checkJsdx" style="width: 100%" v-model="formInfo.zljsdx" placeholder="请选择指令接收对象">
            <el-option v-for="dict in D_BZ_ZLJSDX" :key="dict.value + 'zljsdx'" :label="dict.label"
              :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="事件坐标" style="width: 100%" prop="jwd">
          <el-input v-model="formInfo.jwd" placeholder="请选择坐标" clearable style="width: 80%" />
          <el-button type="info" @click="selectLocation">选点</el-button>
        </el-form-item>
        <el-form-item label="指令内容" style="width: 100%" prop="zlnr">
          <el-input v-model="formInfo.zlnr" placeholder="请输入指令内容" clearable />
        </el-form-item>
        <el-form-item label="附件上传" style="width: 100%" prop="fjmc">
          <el-input v-model="formInfo.fjmc" placeholder="请选择上传文件" style="width: 80%" />
          <el-upload :limit="1" action="/mosty-api/mosty-base/minio/image/upload/id" :on-change="upImgFile"
            :on-success="upImg" :show-file-list="false">
            <el-button type="primary" style="padding: 0 14px">上传</el-button>
          </el-upload>
        </el-form-item>
        <div class="mapQx">
          <span>地图圈选 - 圈选人员</span>
          <el-button type="primary" style="padding: 0 14px" @click="selectLoop">空间查询</el-button>
        </div>
        <div class="tagbox" placeholder="请选择人员">
          <el-tag :key="tag" v-for="tag in qxList" closable :disabled-transitions="false" @close="handClose(tag)">
            {{ tag }}
          </el-tag>
        </div>
      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="submit">发送</el-button>
      </div>
    </div>
  </SizeDialog>
  <MjLoad v-model="visible" @choosedUsers="hanlderChooseMj" />
</template>

<script setup>
import { dateFormat } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import SizeDialog from "./minDialog.vue";
import MjLoad from "@/components/MyComponents/ChooseJz/MjLoad.vue";
import emitter from "@/utils/eventBus.js";
import * as MOSTY from "@/components/MyComponents/index";
import { reactive, ref, onMounted, getCurrentInstance, onUnmounted } from "vue";
import { getXfbbList, addZl } from "@/api/situationPresentation/zlXf.js";
import { getSelectDeckList } from "@/api/dpApi/home.js";
import { getAddressApi } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const { D_BZ_ZLLX, D_BZ_RGZLLX, D_BZ_ZLJSDX, D_BZ_TYJB } = proxy.$dict(
  "D_BZ_ZLLX",
  "D_BZ_RGZLLX",
  "D_BZ_ZLJSDX",
  "D_BZ_TYJB"
);
const visible = ref(false);
//巡组搜索参数
const xzQuery = reactive({
  xfzt: "0,1,2",
  pageCurrent: 1,
  pageSize: 20,
  jzMc: "",
  xfzt: "0,1,2"
});
//巡组数据
const xzList = ref([]);
const qxList = ref([]);
const inputValue = ref("");
//巡组加载状态
const selectLoading = ref(false);
const showAddEvent = ref(false);
const formInfo = ref({
  zxrDtoList: [],
  zlfsdd: "",
  zlbt: "抓捕疑似在逃人员",
  zllx: "05",
  zldj: "10",
  zljsdx: "03",
  zlnr: "抓捕疑似在逃人员"
});
const xzTotal = ref(0);
const elform = ref(null);
const rules = reactive({
  zlbt: [{ required: true, message: "请填写指令标题" }],
  zllx: [{ required: true, message: "请选择指令类型" }],
  zlly: [{ required: true, message: "请选择指令来源" }],
  zldj: [{ required: true, message: "请选择指令等级" }],
  zljsdx: [{ required: true, message: "请选择指令接收对象" }],
  jwd: [{ required: true, message: "请选择点位" }]
});
const fjmc = ref("");
onMounted(() => {
  emitter.on("showZlxf", (res) => {
    showAddEvent.value = true;
  });
  emitter.on("closeAllDialog", (res) => {
    showAddEvent.value = false;
  });
  getXz();
  // 圈选撒点
  emitter.on("coordString", (res) => {
    if (res.type == 'point') {
      formInfo.value.jwd = res.coord[0] + "," + res.coord[1];
      formInfo.value.jd = res.coord[0];
      formInfo.value.wd = res.coord[1];
      let data = { jd: res.coord[0], wd: res.coord[1] };
      let img = require("@/assets/point/jq.png");
      emitter.emit("deletePointArea", "jq");
      emitter.emit("addPointArea", { coords: [data], icon: img, flag: "jq" });
    }
    if (res.type == 'circle') {
      let data = {
        pageCurrent: 1,
        pageSize: 20,
        radius: parseInt(res.data.radius) * 1000,
        jd: res.data.centerPoint[0],
        wd: res.data.centerPoint[1]
      };
      formInfo.value.jwd = res.data.centerPoint[0] + "," + res.data.centerPoint[1];
      formInfo.value.jd = res.data.centerPoint[0];
      formInfo.value.wd = res.data.centerPoint[1];
      circleData(data);
    }
  });
});
onUnmounted(() => {
  emitter.off("getcoord");
});
function handClose(tag) {
  qxList.value.splice(qxList.value.indexOf(tag), 1);
}
function remoteMethod(query) {
  if (query) {
    xzQuery.jzMc = query;
    xzQuery.pageCurrent = 1;
    getXz();
  }
}
//选择民警
function hanlderChooseMj(arr) {
  const jzryList = arr.map((item) => {
    return {
      jsrid: item.ryid,
      jsrmc: item.xm,
      jsrsfzh: item.sfzh,
      jsrlxdh: item.lxdh,
      jsrlx: item.fl,
      xm: item.xm
    };
  });
  formInfo.value.zxrDtoList = jzryList;
}
function getXz() {
  getSelectDeckList(xzQuery).then((res) => {
    xzTotal.value = res.total;
    xzList.value = res.records;
  });
}
function checkJsdx() {
  formInfo.value.zxrDtoList = [];
}

//懒加载
function selectLoad() {
  if (xzTotal.value > xzList.value.length) {
    xzQuery.pageCurrent++;
    getXfbbList(xzQuery).then((res) => {
      xzTotal.value = res.total;
      xzList.value.push(...res.records);
    });
  } else {
    return false;
  }
}

//关闭弹窗
function close() {
  showAddEvent.value = false;
  qxList.value = [];
  formInfo.value = { zxrDtoList: [] };
  emitter.emit("removePlot", "PIO");
  emitter.emit("deletePointArea", "jq");
  emitter.emit("deletePointArea", "jqMap");
  emitter.emit("deletePointArea", "yjMap");
  emitter.emit("deletePointArea", "sp");
  emitter.emit("deletePointArea", "kk");
  emitter.emit("deletePointArea", "centerpoint");
  emitter.emit("removePlot", 'quanXuan'); //移除绘制工具
}
function submit() {
  elform.value.validate((valid) => {
    if (!valid) return false;
    const data = { ...formInfo.value, zllx: '06' };
    data.zxrDtoList = formInfo.value.zxrDtoList.map((item) => {
      return {
        zxrXzid: item.id,
        zxrLx: "03",
        zxrXzmc: item.jzMc
      };
    });
    addZl(data).then(() => {
      close();
      proxy.$message({ type: "success", message: "指令下发成功" });
    });
  });
}
//选择点位
function selectLocation() {
  emitter.emit("removePlot", "PIO");
  emitter.emit("drawShape", { flag: "PIO", type: 'point' });
}

function upImgFile(row) {
  fjmc.value = row.name;
}
function upImg(row) {
  formInfo.value.fjId = row.data;
  formInfo.value.fjmc = fjmc.value;
}
function handleClose(tag) {
  formInfo.value.zxrDtoList.splice(formInfo.value.zxrDtoList.indexOf(tag), 1);
}
//地图圈选
function selectLoop() {
  emitter.emit("deletePointArea", "jqMap");
  emitter.emit("deletePointArea", "yjMap");
  emitter.emit("deletePointArea", "sp");
  emitter.emit("deletePointArea", "kk");
  emitter.emit("deletePointArea", "jq");
  qxList.value = []
  formInfo.value.zxrDtoList = []

  emitter.emit("deletePointArea", "centerpoint");
  emitter.emit("drawShape", { flag: "quanXuan", type: 'circle', isclear: true });
}
//获取圈选数据
function circleData(data) {
  getSelectDeckList(data).then((res) => {
    if (res.records.length > 0) {
      qxList.value = res.records.map((item, index) => {
        return item.jzMc ? item.jzMc : item.fzrXm + "巡组";
      });
      formInfo.value.zxrDtoList = res.records.map((item, index) => {
        return item;
      });
    } else {
      ElMessage({ message: "暂无巡组信息", type: "warning" });
    }
  });
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/homeScreen.scss";

.form_box {
  padding: 10px;
  max-height: 84vh;
  overflow-y: auto;
}

::v-deep .el-form-item__content {
  flex-wrap: nowrap;
}

.ipt {
  min-height: 32px;
  border: 1px solid #fff;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 0 12px;
  cursor: pointer;
  width: 100%;
  position: relative;

  .el-tag {
    margin-right: 12px;
    background: #434449;
  }
}

.tagbox {
  min-height: 32px;
  border: 1px solid #409eff;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 4px 12px;
  cursor: pointer;
  width: 100%;
  position: relative;
  margin-bottom: 4px;
  max-height: 100px;
  overflow: hidden;
  overflow: auto;
}

.ipt:hover {
  border-color: rgb(62, 127, 247);
}

.ts::after {
  content: "请选择指令接收对象";
  position: absolute;
  top: 0;
  right: 0;
  left: 12px;
  line-height: 32px;
  bottom: 0;
  color: rgb(177, 177, 177);
}

.mapQx {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}

::v-deep .el-tag--default.is-closable {
  margin-bottom: 4px;
  margin-right: 4px;
}

::v-deep .el-form--inline.el-form--label-top {
  max-height: 78vh;
  overflow: hidden;
  overflow-y: auto;
}
</style>