park-shanghai/src/views/emergency/workOrder/components/operation.vue

<template>
  <el-dialog
    :title="title"
    v-model="visible"
    width="35%"
    class="x-dialog"
    :destroy-on-close="true"
    append-to-body
    @closed="handlerClose()"
  >
    <el-form
      class="dialog-data"
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="88px"
    >
      <el-form-item label="工单地址:" prop="address">
        <div class="map">
          <MarsMap
            :url="configUrl"
            :options="getMapOptions"
            map-key="workOrder"
            @onload="marsOnload"
          />
        </div>
        <el-input
          v-model="form.address"
          placeholder="请输入"
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prepend>
            <el-button icon="MapLocation" />
          </template>
          <template #append>
            <span class="location-search" @click="handleSearch">搜索</span>
          </template>
        </el-input>

        <div class="serch-list" v-show="gaodePOIList.length > 0">
          <div
            clss="list-item"
            :class="currentId === item.id ? 'activeitem' : ''"
            v-for="item in gaodePOIList"
            :key="item.id"
            @click="handleCograph(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-form-item>
      <el-form-item label="工单类型:" prop="gdType">
        <el-radio-group v-model="form.gdType" @change="changeType()">
          <el-radio :value="parseInt(dict.value)" v-for="dict in dict.gdlx">{{
            dict.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <section v-if="id">
        <el-form-item prop="xdsqm" v-if="form.gdType === 0">
          <el-radio-group v-model="form.xdsqm">
            <el-radio
              :value="parseInt(dict.value)"
              v-for="dict in dict.xdsqm"
              >{{ dict.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="影响类型:" prop="yxlx">
          <el-checkbox-group v-model="form.yxlx">
            <el-checkbox
              v-for="dict in dict.yxlx"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="工单照片:" prop="gdtp">
          <ImageUpload v-model="form.gdtp" :limit="3"></ImageUpload>
        </el-form-item>
      </section>
      <section v-else>
        <el-form-item label="选派班组:" prop="zzjg">
          <el-cascader
            v-model="form.zzjg"
            :options="dict.deptList"
            :props="cascaderProps"
            @change="handleChange"
          />
        </el-form-item>
      </section>
      <el-form-item label="工单描述:">
        <el-input
          v-model="form.gdms"
          :rows="2"
          type="textarea"
          placeholder="请填写"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <section v-if="id">
          <el-button @click="handlerRetreat()">退单</el-button>
          <el-button type="primary" @click="confirm()">上报待处置</el-button>
          <el-button type="primary" @click="handleFeedBack()"
            >处理反馈</el-button
          >
        </section>

        <section v-else>
          <el-button @click="handlerClose()">取消</el-button>
          <el-button type="primary" @click="confirm()">确定</el-button>
        </section>
      </div>
    </template>
    <!-- 退单 -->
    <chargeBack v-model="retreat" :id="id" @confirm="handlerClose"></chargeBack>
    <!-- 处理反馈 -->
    <feedBack v-model="feedBackView" :id="id" @confirm="handlerClose" />
  </el-dialog>
</template>

<script setup>
import { addyj, updateyj, intruderyj, getyjById } from "@/api/emergency";
import { chargeBack, feedBack } from "../index";
import MarsMap from "@/components/mars-work/mars-map.vue";
import mapOptions from "@/components/mars-work/mapOptions";
import markerIcon from "@/assets/images/map-marker.png";
import { gaodeAddress, gaodePOI } from "@/utils/common.js";
const { proxy } = getCurrentInstance();
const gaodePOIList = ref([]);
const currentId = ref(0);
const cascaderProps = {
  value: "deptId",
  label: "deptName",
};

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  dict: {
    type: Object,
    default: {
      gdlx: [],
      gdlevel: [],
      clfa: [],
      gdms: [],
      deptList: [],
    },
  },

  id: {
    type: Number,
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue", "confirm"]);
//地图配置
const configUrl = "lib/config/config.json";
let mapData = null;
let mapLayer = {};
let entity = null;
const data = reactive({
  form: {
    id: null,
    address: undefined, //地址
    clbz: undefined, //处理班组
    clfa: undefined, //处理方案
    clhtp: undefined, //处理后图片
    clms: undefined, //处理描述
    createBy: undefined, //创建人
    createId: undefined, //创建者id
    createTime: undefined, //创建时间
    deptId: undefined, //部门id
    gdLevel: undefined, //工单等级
    gdType: undefined, //工单类型
    gdms: undefined, //工单描述
    gdtp: undefined, //工单图片
    lat: undefined, //纬度
    lon: undefined, //经度
    pqcl: undefined, //派遣车辆
    pqrs: undefined, //派遣人数
    reason: undefined, //退单原因
    status: undefined, //状态 0:待勘察，1:待派发,2:已退单.3:待处理,4:已完成
    zzjg: undefined,
    xdsqm: undefined, //行道树/乔木
    yxlx: undefined, //影响类型
  },
  rules: {
    address: [{ required: true, message: "请填写工单地址", trigger: "blur" }],
    gdType: [{ required: true, message: "请选择工单类型", trigger: "blur" }],
    xdsqm: [{ required: true, message: "请选择", trigger: "blur" }],
    zzjg: [{ required: true, message: "请选择选派班组", trigger: "blur" }],

    gdtp: [{ required: true, message: "请上传工单照片", trigger: "blur" }],
    yxlx: [{ required: true, message: "请选择影响类型", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);
const visible = ref(props.modelValue);
const retreat = ref(false);
const feedBackView = ref(false);
// 监听外部 modelValue 变化
watch(
  () => props.modelValue,
  (val) => {
    visible.value = val;
  }
);
watch(visible, (val) => {
  emit("update:modelValue", val);
});

const changeType = () => {
  if (props.id) form.value.xdsqm = undefined;
};

/**
 * 处理反馈
 *
 */
const handleFeedBack = () => {
  confirm(false);
};

/**
 * 退单
 *
 */
const handlerRetreat = () => {
  retreat.value = true;
};
/**
 * 提交
 */
const confirm = (isConfirm = true) => {
  proxy.$refs["formRef"].validate(async (valid) => {
    if (valid) {
      if (!form.value.lat || !form.value.lon) {
        proxy.$modal.msgWarning("请先落点至地图上！");
        return;
      }
      if (form.value.id) {
        form.value.yxlx = filterArray(form.value.yxlx, "join");
        await intruderyj(form.value);
        proxy.$modal.msgSuccess(`${props.title}成功`);
      } else {
        form.value.zzjg = filterArray(form.value.zzjg, "join");
        await addyj(form.value);
        proxy.$modal.msgSuccess("新增成功");
      }
     
        if (isConfirm) {
          handlerClose(isConfirm);
        } else {
          feedBackView.value = true;
        
         
          form.value.yxlx = filterArray(form.value.yxlx);
          
        }
  
    }
  });
};

/**
 * 获取详情
 */
const getInfo = async (val) => {
  if (!props.id || !visible.value) return;
  const res = await getyjById(props.id);
  if (props.id) {
    res.data.yxlx = filterArray(res.data.yxlx);
  } else {
    res.data.zzjg = res.data.zzjg.split(",").map((item) => parseInt(item));
  }

  form.value = res.data;
  if (form.value.lat && form.value.lon && mapData) {
    nextTick(() => {
      handleMapClick(form.value.lat, form.value.lon);
      mapData.flyToGraphic(mapLayer.marker, { radius: 300 });
    });
  }
};

const filterArray = (data, type) => {
  if (!type) {
    if (data) {
      return data.split(",");
    } else {
      return [];
    }
  } else {
    if (data) {
      return data.join();
    } else {
      return "";
    }
  }
};

/**
 *
 */
const handlerClose = (isConfirm) => {
  if (isConfirm) {
    emit("confirm");
  }
  visible.value = false;
  proxy.resetForm("formRef");
  gaodePOIList.value = [];
  if (mapData) {
    mapData.destroy();
    mapData = null;
    mapLayer.marker?.clear();
    entity = null;
  }
};

/**
 * 地址搜索
 */
const handleSearch = async () => {
  if (!form.value.address) {
    proxy.$modal.msgWarning("请输入关键字");
    return;
  }
  const res = await gaodePOI(form.value.address);
  gaodePOIList.value = res;
};

/**
 * 结果上图
 * @param item
 */
const handleCograph = (item) => {
  if (currentId.value != item.id) {
    const point = item.location.split(",");
    handleMapClick(parseFloat(point[0]), parseFloat(point[1]));
    mapData.flyToGraphic(mapLayer.marker, { radius: 300 });
    currentId.value = item.id;
    form.value.address = item.name;
  }
};
/**
 * 级联取人员deptID
 */
const handleChange = (value) => {
  form.value.deptId = value[value.length - 1];
};

/**
 * 获取地图配置
 */
const getMapOptions = computed(() => {
  mapOptions.scene.sceneMode = 2;
  mapOptions.basemaps[0] = {
    pid: 10,
    name: "高德电子",
    type: "gaode",
    icon: "//data.mars3d.cn/img/thumbnail/basemap/gaode_vec.png",
    layer: "vec",
    show: true,
  };
  return mapOptions;
});
/**
 * 地图初始化成功
 * @param map
 */
const marsOnload = (map) => {
  mapData = map;
  mapLayer.marker = new mars3d.layer.GraphicLayer({
    allowDrillPick: true,
  });
  mapData.addLayer(mapLayer.marker);
  map.on(mars3d.EventType.click, async ({ cartesian }) => {
    const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    const longitude = Cesium.Math.toDegrees(cartographic.longitude);
    const latitude = Cesium.Math.toDegrees(cartographic.latitude);
    const res = await gaodeAddress(`${longitude},${latitude}`);
    form.value.address = res.formatted_address;
    handleMapClick(longitude, latitude);
  });
  getInfo();
};
/**
 * @description: 处理地图点击
 * @private
 * @param {number} longitude 经度
 * @param {number} latitude 纬度
 * @returns
 */
const handleMapClick = (longitude, latitude) => {
  if (!isPositiveDecimal(longitude)) longitude = parseFloat(longitude);
  if (!isPositiveDecimal(latitude)) latitude = parseFloat(latitude);
  if (entity) {
    entity.position = [longitude, latitude];
  } else {
    entity = new mars3d.graphic.BillboardEntity({
      position: [longitude, latitude],
      style: {
        image: markerIcon,
        width: 35,
        height: 36,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      },
    });
    mapLayer.marker?.addGraphic(entity);
  }
  form.value.lat = longitude; //纬度
  form.value.lon = latitude; //经度
};

const isPositiveDecimal = (num) => {
  return typeof num === "number" && num >= 0 && !Number.isInteger(num);
};
</script>

<style lang="scss" scoped>
.map {
  height: 400px;
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.map-gps {
  height: 25px;
  width: 25px;
}
.serch-list {
  width: 100%;
  min-height: 50px;
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid #ccc;
  & > div {
    cursor: pointer;
    padding: 3px 10px;
    font-size: 14px;
  }
  & > div:hover,
  .activeitem {
    background-color: #4776eb;
    color: white;
    font-weight: bold;
  }
}
.location-search {
  font-size: 14px;
  cursor: pointer;
}
</style>