ops-management-platform-frontend/src/views/IO/workOrder/orderSend/detailDrawer.vue

<template>
  <div>
    <!-- 抽屉组件 -->
    <a-drawer
      title="工单详情"
      placement="right"
      :closable="true"
      :open="visible"
      @close="onClose"
      width="600px"
    >
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1" tab="详细信息">
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">所属项目：</span>{{ detail.projectName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">所属合同：</span>{{ detail.contractName }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">编号：</span>{{ detail.id }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">报修人员：</span>{{ detail.repairer }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">状态：</span>{{statusText(detail.status) }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">待处理人：</span>{{ detail.handler }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">报修时间：</span>{{ detail.repairTime }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">是否事故：</span>{{ detail.isAccident }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">故障大类：</span>{{ detail.faultCategory }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">故障小类：</span>{{ detail.faultSubcategory }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="12">
              <div><span class="titleLabel">所属机构：</span>{{ detail.organizationName }}</div>
            </a-col>
            <a-col :span="12">
              <div><span class="titleLabel">响应级别：</span>{{ detail.responseLevel }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">响应时限(小时)：</span>{{ detail.responseTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障地址：</span>{{ detail.faultLocation }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">故障描述：</span>{{ detail.faultDescription }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div
                ><span class="titleLabel">故障图片：</span>
                <div v-for="(item, index) in detail.attachments" :key="index">
                  <img alt="" :src="item.url" />
                </div>
              </div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">地图信息：</span>
              <div id="orderSendDetailMap" style="width: 100%; height: 500px"></div>
              </div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="处理信息" force-render>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">维修人员：</span>{{ detail.fixPeople }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">修复时间：</span>{{ detail.fixTime }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">修复结果：</span>{{ detail.fixResult }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">费用情况：</span>{{ detail.cost }}</div>
            </a-col>
          </a-row>
          <a-row :gutter="[16, 16]">
            <a-col :span="24">
              <div><span class="titleLabel">处理图片：</span>{{ detail.handleImg }}</div>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="3" tab="流程信息">
          <div style="margin-left: 20px">
            <a-timeline>
              <a-timeline-item>
                <template #dot>故障上报</template>
                <div class="timeText">Create a services site 2015-09-01</div>
              </a-timeline-item>
              <a-timeline-item>
                <template #dot>故障派遣</template>
                <div class="timeText">Create a services site 2015-09-01</div>
              </a-timeline-item>
              <a-timeline-item>
                <template #dot>故障接单</template>
                <div class="timeText">Create a services site 2015-09-01</div>
              </a-timeline-item>
              <a-timeline-item>
                <template #dot>故障处理</template>
                <div class="timeText">Create a services site 2015-09-01</div>
              </a-timeline-item>
              <a-timeline-item>
                <template #dot>预审</template>
                <div class="timeText">Create a services site 2015-09-01</div>
              </a-timeline-item>
              <a-timeline-item>
                <template #dot>初审</template>
                <div class="timeText">Create a services site 2015-09-01</div>
              </a-timeline-item>
            </a-timeline>
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="历史信息">
          <a-table :dataSource="historyInfo" :columns="historyColumns" bordered>
            <template #bodyCell="{ column }">
              <template v-if="column.key === 'action'">
                <a-button type="link">查看</a-button>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="5" tab="延期信息">
          <a-table :dataSource="delayInfo" :columns="delayColumns" bordered>
            <template #bodyCell="{ column }">
              <template v-if="column.key === 'action'">
                <a-button type="link">查看</a-button>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
  </div>
</template>

<script>
  import { reactive, ref } from 'vue';
  import { getInfo } from './api';
  import AMapLoader from '@amap/amap-jsapi-loader';
  export default {
    setup(props, { emit }) {
      //抽屉详情
      let detail = reactive({
        projectName: '',
        contractName: '',
        id: '',
        status: null,
        repairer: '',
        handler: '',
        repairTime: '',
        organizationName: '',
        isAccident: null,
        faultCategory: '',
        faultSubcategory: '',
        responseLevel: null,
        responseTime: '',
        faultLocation: '',
        faultDescription: '',
        attachments: '',
        fixPeople: '',
        fixTime: '',
        fixResult: '',
        cost: '',
        handleImg: '',
        longitude: '',
        latitude: '',
      });
      const statusOptions = [
        {
          label: '待派遣',
          value: 0,
        },
        {
          label: '待接单',
          value: 1,
        },
        {
          label: '处理中',
          value: 2,
        },
        {
          label: '运维单位处理时回退至派遣',
          value: 3,
        },
        {
          label: '初审',
          value: 4,
        },
        {
          label: '终审',
          value: 5,
        },
        {
          label: '结案',
          value: 6,
        },
      ];
      const statusText = (val) => {
        return statusOptions.find((i) => {
          return i.value == val;
        })?.label;
      };
      const historyInfo = ref([]);
      const historyColumns = [
        {
          title: '环节',
          dataIndex: 'stage',
          key: 'stage',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          key: 'operation',
        },
        {
          title: '操作人',
          dataIndex: 'operator',
          key: 'operator',
        },
        {
          title: '详细信息',
          dataIndex: 'action',
          key: 'action  ',
        },
      ];
      const delayInfo = ref([]);
      const delayColumns = [
        {
          title: '申请时间',
          dataIndex: 'applyTime',
          key: 'applyTime',
        },
        {
          title: '申请原因',
          dataIndex: 'applyReason',
          key: 'applyReason',
        },
        {
          title: '延期时间',
          dataIndex: 'delayTime',
          key: 'delayTime',
        },
        {
          title: '详细信息',
          dataIndex: 'action',
          key: 'action  ',
        },
      ];

      // 打开抽屉的方法
      const visible = ref(false);
      const showDrawer = async (id) => {
        visible.value = true;
        const data = await getInfo(id);
        for (let i in detail) {
          detail[i] = data[i];
        }
        initMap(detail.longitude, detail.latitude, detail.faultLocation);
      };

      // 关闭抽屉的方法
      const onClose = () => {
        visible.value = false;
        map.value?.destroy();
      };
      const activeKey = ref('1');

      //地图
      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('orderSendDetailMap', {
            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,
        showDrawer,
        onClose,
        activeKey,
        historyInfo,
        historyColumns,
        delayInfo,
        delayColumns,
        detail,
        statusText
      };
    },
  };
</script>

<style scoped>
  /* 可选样式调整 */
  .ant-btn {
    margin: 20px;
  }

  /* .singerDetail{
  margin-bottom: 10px;
} */
  div {
    margin-bottom: 10px;
  }

  .timeText {
    margin: 0 0 40px 20px;
    color: red;
  }

  .titleLabel {
    color: gray;
  }
</style>