ops-management-platform-frontend/src/views/IO/delayPatrol/waitPatrol/faultModal.vue

<template>
  <a-modal v-model:open="visible" title="工单上报" @ok="handleOk" width="70%">
    <a-form :model="form" layout="vertical">
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="所属项目" name="projectName">
            <a-select
              v-model:value="form.projectName"
              :options="projectNameOptions"
              placeholder="请选择"
              :fieldNames="{
                label: 'projectName',
                value: 'projectName',
                options: 'options',
              }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="是否事故" name="isAccident">
            <a-radio-group v-model:value="form.isAccident">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="报修人员" name="repairer">
            <a-input v-model:value="form.repairer" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="响应级别">
            <a-select v-model:value="form.responseLevel" :options="responseLevelOptions" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="响应时限">
            <a-input v-model:value="form.responseTime" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="故障大类" name="faultCategory">
            <a-select
              v-model:value="form.faultCategory"
              :options="[{ value: '前端' }, { value: '后端' }]"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="故障小类" name="faultSubcategory">
            <a-select
              v-model:value="form.faultSubcategory"
              :options="faultSubcategoryOptions"
              :fieldNames="{
                label: 'typeName',
                value: 'id',
                options: 'options',
              }"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="所属机构" name="organizationName">
            <a-input v-model:value="form.organizationName"  />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="故障地点" name="faultLocation">
            <a-select
              v-model:value="form.faultLocation"
              :options="faultLocationOptions"
              @change="faultLocationChange"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <div id="amapContainer" style="width: 100%; height: 500px"></div>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="故障描述" name="faultDescription">
            <a-textarea v-model:value="form.faultDescription" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="24">
          <a-form-item label="故障图片" name="faultImg">
            <a-upload
              v-model:file-list="form.faultImg"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            >
              <a-button type="primary"> 上传 </a-button>
            </a-upload>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]">
        <a-col :span="12">
          <a-form-item label="是否派遣" name="isDispatched">
            <a-radio-group v-model:value="form.isDispatched">
              <a-radio :value="1">是</a-radio>
              <a-radio :value="0">否</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="form.isDispatched == 1">
          <a-form-item label="维护要求" name="maintenanceRequirement">
            <a-select
              v-model:value="form.maintenanceRequirement"
              :options="maintenanceRequirementOptions"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="[16, 16]" v-if="form.isDispatched == 1">
        <a-col :span="24">
          <a-form-item label="派遣意见" name="dispatchOpinion">
            <a-textarea v-model:value="form.dispatchOpinion" :rows="4" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
  import { reactive, ref } from 'vue';
  import { getInfo, getSubcategoryType, workOrderAdd,getProjectInfo } from './api';
  import { message } from 'ant-design-vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    setup() {
      const visible = ref(false);
      const form = reactive({
        projectName: '',
        isAccident: null,
        repairer: '',
        responseTime: '',
        responseLevel: '',
        faultCategory: null,
        faultSubcategory: null,
        organizationName: '',
        faultLocation: '',
        faultDescription: '',
        faultImg: null,
        isDispatched: null,
        maintenanceRequirement: null,
        dispatchOpinion: '',
        longitude: '',
        latitude: '',
      });
      //下拉框
      const projectNameOptions = ref([])
      const getProjectNameOptions= async () =>{
        const res = await getProjectInfo();
        projectNameOptions.value = res
      }
      
      const responseLevelOptions = [
        {
          value: 0,
          label: '常规',
        },
        {
          value: 1,
          label: '紧急',
        },
        {
          value: 2,
          label: '特级',
        },
      ];
      const maintenanceRequirementOptions = [
        {
          value: 1,
          label: '新增',
        },
      ];
      const faultLocationOptions = [
        {
          value: '1',
          label: 'a',
          latitude: '29.8537459',
          longitude: '121.5591519',
        },
        {
          value: '2',
          label: 'b',
          latitude: '29.8572957 ',
          longitude: '121.5611743',
        },
        {
          value: '3',
          label: 'c',
          latitude: '29.8537459',
          longitude: '121.5591519',
        },
      ];
      const faultLocationChange = (val) => {
        const obj = faultLocationOptions.find((i) => {
          return (i.value = val);
        });
        form.longitude = obj.longitude
        form.latitude = obj.latitude
        initMap(obj.longitude, obj.latitude, obj.organizationName);
      };
      const faultSubcategoryOptions = ref([]);
      const getFaultSubcategoryOptions = async () => {
        const res = await getSubcategoryType();
        faultSubcategoryOptions.value = res.rows;
      };
      const showModal = () => {
        visible.value = true;
        getFaultSubcategoryOptions()
        getProjectNameOptions()
      };

      const handleOk = () => {
        let params = {};
        for (let i in form) {
          params[i] = form[i];
        }
        workOrderAdd(params).then((_) => {
          message.success('操作成功');
          visible.value = false;
        });
      };
      //地图
      const map = ref(null);
      const initMap = async (longitude, latitude, organizationName) => {
        try {
          // 加载高德地图 JavaScript API
          await AMapLoader.load({
            key: '786a2e7cc6d4be5ba1d6174a0aa10f2b',
            version: '2.0',
            plugins: [],
          });

          // 初始化地图
          map.value = new AMap.Map('amapContainer', {
            zoom: 17,
            center: [longitude, latitude],
          });

          // 添加标记（可选）
          const marker = new AMap.Marker({
            position: new AMap.LngLat(longitude, latitude),
            title: organizationName,
          });
          const markerList = [marker];
          map.value.add(markerList);
        } catch (error) {
          console.error('加载高德地图失败:', error);
        }
      };
      return {
        visible,
        form,
        showModal,
        handleOk,
        responseLevelOptions,
        maintenanceRequirementOptions,
        faultSubcategoryOptions,
        faultLocationOptions,
        projectNameOptions,
        faultLocationChange
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-modal-body {
    max-width: 600px;
    margin: 0 auto;
  }
</style>