manhole-cover-management-system/src/views/gdczgl/rwcz/index.vue

<template>
  <div class="work-order-management">
    <el-card class="work-order-list">
      <h3>待办工单列表</h3>
      <el-table :data="workOrders" style="width: 100%" @row-click="handleRowClick">
        <el-table-column prop="orderNumber" label="工单编号"></el-table-column>
        <el-table-column prop="caseNumber" label="案件编号"></el-table-column>
        <el-table-column prop="alarmLevel" label="报警级别"></el-table-column>
        <el-table-column prop="alarmType" label="报警类型"></el-table-column>
        <el-table-column prop="alarmDescription" label="报警描述"></el-table-column>
        <el-table-column prop="purpose" label="用途"></el-table-column>
        <el-table-column prop="assignedUnit" label="权属单位"></el-table-column>
        <el-table-column prop="address" label="详细地址"></el-table-column>
        <el-table-column fixed="right" label="操作">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleDispatch(row)">下发</el-button>
            <el-button type="warning" link @click="handleDelay(row)">延期</el-button>
            <el-button type="info" link @click="handlePostpone(row)">缓办</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card v-if="selectedWorkOrder" class="work-order-details">
      <h3>工单详情</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="案件编号">{{ selectedWorkOrder.caseNumber }}</el-descriptions-item>
        <el-descriptions-item label="报警名称">{{ selectedWorkOrder.alarmName }}</el-descriptions-item>
        <el-descriptions-item label="报警时间">{{ selectedWorkOrder.alarmTime }}</el-descriptions-item>
        <el-descriptions-item label="报警描述">{{ selectedWorkOrder.alarmDescription }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备编号">{{ selectedWorkOrder.deviceSerial }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备名称">{{ selectedWorkOrder.deviceName }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备用途">{{ selectedWorkOrder.purpose }}</el-descriptions-item>
        <el-descriptions-item label="权属单位">{{ selectedWorkOrder.assignedUnit }}</el-descriptions-item>
        <el-descriptions-item label="权属单位电话">{{ selectedWorkOrder.unitPhone }}</el-descriptions-item>
        <el-descriptions-item label="安装时间">{{ selectedWorkOrder.installationTime }}</el-descriptions-item>
        <el-descriptions-item label="区">{{ selectedWorkOrder.district }}</el-descriptions-item>
        <el-descriptions-item label="街道">{{ selectedWorkOrder.street }}</el-descriptions-item>
        <el-descriptions-item label="道路">{{ selectedWorkOrder.road }}</el-descriptions-item>
        <el-descriptions-item label="辅助定位地址">{{ selectedWorkOrder.auxiliaryAddress }}</el-descriptions-item>
        <el-descriptions-item label="井盖设备材质">{{ selectedWorkOrder.material }}</el-descriptions-item>
        <el-descriptions-item label="工单办理经过">
          <p>{{ selectedWorkOrder.process }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="附件多媒体信息">
          <el-image v-for="(media, index) in selectedWorkOrder.media" :key="index" :src="media.url" fit="cover" />
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <div v-if="selectedWorkOrder && selectedWorkOrder.location" class="map-container">
      <h3>井盖设备位置</h3>
      <l-map :zoom="15" :center="selectedWorkOrder.location" style="height: 400px">
        <l-tile-layer :url="tileLayerUrl" />
        <l-marker :lat-lng="selectedWorkOrder.location">
          <l-icon :icon-url="markerIconUrl" :icon-size="[30, 41]" :icon-anchor="[15, 41]" />
        </l-marker>
      </l-map>
    </div>

    <!-- 延期弹窗 -->
    <el-dialog title="延期处理" v-model="dialogDelayVisible" width="30%">
      <el-form :model="delayForm">
        <el-form-item label="延期截止时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="delayForm.deadline"
              type="datetime"
              placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="延期理由" :label-width="formLabelWidth">
          <el-input v-model="delayForm.reason" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogDelayVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmDelay">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 缓办弹窗 -->
    <el-dialog title="缓办处理" v-model="dialogPostponeVisible" width="30%">
      <el-form :model="postponeForm">
        <el-form-item label="缓办截止时间" :label-width="formLabelWidth">
          <el-date-picker
              v-model="postponeForm.deadline"
              type="datetime"
              placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="缓办理由" :label-width="formLabelWidth">
          <el-input v-model="postponeForm.reason" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogPostponeVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmPostpone">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 下发弹窗 -->
    <el-dialog title="下发工单" v-model="dialogDispatchVisible" width="30%">
      <el-form :model="dispatchForm">
        <el-form-item label="维修负责人" :label-width="formLabelWidth">
          <el-select v-model="dispatchForm.responsible" placeholder="请选择">
            <el-option
                v-for="item in responsibleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogDispatchVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirmDispatch">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

// 模拟数据
const workOrders = ref([
  {
    orderNumber: 'W20230915001',
    caseNumber: 'C20230915001',
    alarmLevel: '紧急',
    alarmType: '损坏',
    alarmDescription: '井盖破损严重，存在安全隐患。',
    purpose: '排水',
    assignedUnit: '水务局',
    address: '上海市浦东新区陆家嘴环路1000号',
    location: [31.2304, 121.4737],
    media: [
      { url: 'https://example.com/image1.jpg' },
      { url: 'https://example.com/image2.jpg' }
    ]
  },
  // 更多模拟数据...
]);

const selectedWorkOrder = ref(null);
const dialogDelayVisible = ref(false);
const dialogPostponeVisible = ref(false);
const dialogDispatchVisible = ref(false);
const delayForm = ref({ deadline: null, reason: '' });
const postponeForm = ref({ deadline: null, reason: '' });
const dispatchForm = ref({ responsible: '' });
const formLabelWidth = ref('120px');
const responsibleOptions = ref([
  { value: 'person1', label: '张三' },
  { value: 'person2', label: '李四' },
  // 更多选项...
]);

// 处理表格点击事件
function handleRowClick(row) {
  selectedWorkOrder.value = row;
}

// 延期处理
function handleDelay(row) {
  selectedWorkOrder.value = row;
  dialogDelayVisible.value = true;
}

// 缓办处理
function handlePostpone(row) {
  selectedWorkOrder.value = row;
  dialogPostponeVisible.value = true;
}

// 下发处理
function handleDispatch(row) {
  selectedWorkOrder.value = row;
  dialogDispatchVisible.value = true;
}

// 确认延期
function handleConfirmDelay() {
  // 这里可以添加逻辑来处理延期操作
  ElMessage.success('延期成功');
  dialogDelayVisible.value = false;
}

// 确认缓办
function handleConfirmPostpone() {
  // 这里可以添加逻辑来处理缓办操作
  ElMessage.success('缓办成功');
  dialogPostponeVisible.value = false;
}

// 确认下发
function handleConfirmDispatch() {
  // 这里可以添加逻辑来处理下发操作
  ElMessage.success('下发成功');
  dialogDispatchVisible.value = false;
}

onMounted(() => {
  // 初始化 Leaflet 地图
  const tileLayerUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  const markerIconUrl = 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png';

  // 初始化地图
  // const map = new L.Map('map').setView([31.2304, 121.4737], 15);
  // L.tileLayer(tileLayerUrl).addTo(map);
  // L.marker([31.2304, 121.4737]).addTo(map)
  //     .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
  //     .openPopup();
});
</script>
<style scoped>
.work-order-management {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.map-container {
  height: 400px;
  position: relative;
}

#map {
  height: 100%;
}
</style>