From 05896cb241ad7b1586de08f4a8cef6db0dfe7bd7 Mon Sep 17 00:00:00 2001
From: joylink_zhaoerwei <Bob_Engineer@163.com>
Date: Thu, 14 Nov 2024 17:51:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BA=94=E6=80=A5=E5=A4=84?=
 =?UTF-8?q?=E7=BD=AE=E6=B5=81=E7=A8=8B=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SysMenu.vue            |  10 +-
 src/layouts/MainLayout.vue            |   4 +-
 src/pages/EmergencyResponseManage.vue | 456 ++++++++++++++++++++++++++
 src/router/routes.ts                  |   5 +
 4 files changed, 468 insertions(+), 7 deletions(-)
 create mode 100644 src/pages/EmergencyResponseManage.vue

diff --git a/src/components/SysMenu.vue b/src/components/SysMenu.vue
index 39e6192..166dc6b 100644
--- a/src/components/SysMenu.vue
+++ b/src/components/SysMenu.vue
@@ -66,11 +66,6 @@ const list = reactive([
         label: '线路信息管理',
         icon: 'format_list_numbered',
       },
-      {
-        path: '/dataManage/decisionInfo',
-        label: '决策信息管理',
-        icon: 'format_align_center',
-      },
       {
         path: '/dataManage/faultQuery',
         label: '故障查询管理',
@@ -145,6 +140,11 @@ const list = reactive([
         label: '辅助决策方案管理查询',
         icon: 'format_align_center',
       },
+      {
+        path: '/dataManage/emergencyResponse',
+        label: '应急处置流程表',
+        icon: 'call_merge',
+      },
     ],
   },
 ]);
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index d2159a7..053f5d3 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -15,13 +15,13 @@
           <img :src="NCC" style="width: 80px" />
         </div>
         <q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
-        <q-btn
+    <!--     <q-btn
           v-show="route.path.includes('line/monitor')"
           color="info"
           label="故障查询"
           class="q-mr-sm"
           @click="openFaultQueryDialog()"
-        />
+        /> -->
         <q-btn
           v-show="route.path.includes('line/monitor')"
           color="info"
diff --git a/src/pages/EmergencyResponseManage.vue b/src/pages/EmergencyResponseManage.vue
new file mode 100644
index 0000000..b9d0a56
--- /dev/null
+++ b/src/pages/EmergencyResponseManage.vue
@@ -0,0 +1,456 @@
+<template>
+  <q-tabs
+    v-model="tab"
+    dense
+    active-color="primary"
+    indicator-color="primary"
+    align="justify"
+    narrow-indicator
+  >
+    <q-tab
+      v-for="(item, index) in tabList"
+      :key="index"
+      :name="item.value"
+      :label="item.label"
+    />
+  </q-tabs>
+  <q-separator />
+  <q-tab-panel>
+    <div class="dialogContainer">
+      <q-table
+        ref="tableRef"
+        row-key="id"
+        v-model:pagination="pagination"
+        :loading="loading"
+        :rows="rows"
+        :columns="columns"
+        @request="onRequest"
+        :rows-per-page-options="[10, 20, 50, 100]"
+        :filter="filter"
+        class="left"
+      >
+        <template v-slot:top-right>
+          <q-form ref="myForm" @submit="searchDecisionInfo" style="width: 100%">
+            <div class="q-gutter-md q-mt-none row justify-center items-start">
+              <q-select
+                dense
+                v-model="filter.lineId"
+                :options="searchOptionsLineId"
+                emit-value
+                map-options
+                options-dense
+                label="线路ID"
+                style="width: 75px"
+                no-error-icon
+                lazy-rules
+                @update:model-value="handleSelectSearchLineId"
+                :rules="[(val) => val >= 0 || '请选择线路ID！']"
+              />
+              <q-select
+                dense
+                label="故障类型"
+                v-model="filter.faultType"
+                emit-value
+                map-options
+                :options="searchOptionsFaultType"
+                style="min-width: 130px"
+              />
+              <q-input
+                dense
+                :label="inputSearchName"
+                v-model="filter.faultName"
+                lazy-rules
+              />
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="search"
+                @click="searchTable"
+              />
+            </div>
+          </q-form>
+        </template>
+        <template v-slot:body="props">
+          <q-tr
+            :props="props"
+            :class="{ changeBackground: props.row.id === clickRowInfo.id }"
+            @click="handleRowClick(props.row)"
+          >
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              class="custom-column"
+            >
+              {{ col.value }}
+              <q-tooltip
+                anchor="bottom middle"
+                v-if="props.value && props.value.length > 20"
+              >
+                <div class="message-tip">
+                  {{ col.value }}
+                </div>
+              </q-tooltip>
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+
+      <q-scroll-area class="right">
+        <div class="detaiRow">
+          <div class="text">
+            <span class="textHead">故障类型</span> ：{{
+              clickRowInfo.faultType
+            }}
+          </div>
+          <div class="text">
+            <span class="textHead"> {{ showTitle.faultNameShower }}</span
+            >：{{ clickRowInfo.faultNameShower }}
+          </div>
+          <q-card class="box-card">
+            <div class="head">{{ showTitle.faultDriverShower }}</div>
+            <q-separator />
+            <div>
+              <div class="detail">{{ clickRowInfo.faultDriverShower }}</div>
+            </div>
+          </q-card>
+          <q-card class="box-card">
+            <div class="head">{{ showTitle.resultMsg }}</div>
+            <q-separator />
+            <div>
+              <div class="detail">{{ clickRowInfo.resultMsg }}</div>
+            </div>
+          </q-card>
+        </div>
+      </q-scroll-area>
+    </div>
+  </q-tab-panel>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted, watch } from 'vue';
+import { QTable, useQuasar } from 'quasar';
+import {
+  FaultQueryListItem,
+  faultQueryPageQuery,
+  faultQueryType,
+  FaultTypeItem,
+} from 'src/api/faultQuery';
+import { pageQuery } from 'src/api/LineInfoApi';
+import { ApiError } from 'src/boot/axios';
+
+const $q = useQuasar();
+
+const tab = ref('GUIDE');
+const tableTitle = reactive({
+  faultNameShower: '',
+  faultDriverShower: '',
+});
+const inputSearchName = ref('');
+watch(tab, (tabVal) => {
+  if (tabVal == 'GUIDE') {
+    inputSearchName.value = '故障现象';
+    tableTitle.faultNameShower = '故障现象';
+    tableTitle.faultDriverShower = '司机处理结果';
+  } else {
+    inputSearchName.value = '故障名称';
+    tableTitle.faultNameShower = '故障名称';
+    tableTitle.faultDriverShower = '故障现象';
+  }
+  handleSelectFaultType();
+  searchTable();
+});
+const tabList = ref([
+  {
+    label: '故障指导',
+    value: 'GUIDE',
+  },
+  {
+    label: '退出服务',
+    value: 'SERVICE',
+  },
+]);
+
+const tableRef = ref<QTable>();
+const columns = computed(() => [
+  {
+    name: 'id',
+    label: '编号',
+    field: 'id',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'lineId',
+    label: '线路',
+    field: 'lineId',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'faultType',
+    label: '故障类型',
+    field: (row: FaultQueryListItem) => {
+      if (row.faultType) {
+        return getFaultTypeName(row);
+      }
+    },
+    align: 'center',
+  },
+  {
+    name: 'faultNameShower',
+    label: tableTitle.faultNameShower,
+    field: 'faultNameShower',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'faultDriverShower',
+    label: tableTitle.faultDriverShower,
+    field: 'faultDriverShower',
+    required: true,
+    align: 'center',
+  },
+]);
+const rows = reactive([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const filter = reactive({
+  lineId: 0,
+  faultType: '',
+  faultName: '',
+});
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage } = props.pagination;
+  loading.value = true;
+  try {
+    const params = {
+      current: page,
+      size: rowsPerPage,
+    };
+    if (filter.lineId !== 0) {
+      Object.assign(params, {
+        lineId: filter.lineId,
+      });
+    }
+    if (filter.faultType !== '') {
+      Object.assign(params, {
+        faultType: filter.faultType,
+      });
+    }
+    if (filter.faultName !== '') {
+      Object.assign(params, {
+        faultName: filter.faultName,
+      });
+    }
+    let resp = await faultQueryPageQuery(params);
+    pagination.value.page = resp.current;
+    pagination.value.rowsNumber = resp.total;
+    pagination.value.rowsPerPage = resp.size;
+    rows.splice(0, rows.length, ...(resp.records as []));
+    if (rows.length) {
+      handleRowClick(rows[0]);
+    } else {
+      clickRowInfo.faultType = '';
+      clickRowInfo.faultNameShower = '';
+      clickRowInfo.faultDriverShower = '';
+      clickRowInfo.resultMsg = '';
+    }
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取范围列表',
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const clickRowInfo = reactive({
+  id: 0,
+  faultType: '',
+  faultNameShower: '',
+  faultDriverShower: '',
+  resultMsg: '',
+});
+const showTitle = reactive({
+  faultNameShower: '',
+  faultDriverShower: '',
+  resultMsg: '',
+});
+function handleRowClick(row: FaultQueryListItem) {
+  if (row.faultType.includes('FAULT_EMERGENCY_GUIDE')) {
+    showTitle.faultNameShower = '故障现象';
+    showTitle.faultDriverShower = '司机处理结果';
+    showTitle.resultMsg = '行调提醒司机关键点';
+  } else {
+    showTitle.faultNameShower = '故障名称';
+    showTitle.faultDriverShower = '故障现象';
+    showTitle.resultMsg = '退出服务地点';
+  }
+  clickRowInfo.id = row?.id as number;
+  clickRowInfo.faultType = getFaultTypeName(row) as string;
+  clickRowInfo.faultNameShower = row.faultNameShower;
+  clickRowInfo.faultDriverShower = row.faultDriverShower;
+  clickRowInfo.resultMsg = row.resultMsg;
+}
+
+async function queryAllFaultType() {
+  try {
+    allOptionsFaultType = await faultQueryType();
+    handleSelectFaultType();
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取指定线路的故障类型配置',
+    });
+  }
+}
+
+let allOptionsFaultType: FaultTypeItem[] = [];
+function getFaultTypeName(row: FaultQueryListItem) {
+  for (let i = 0; i < allOptionsFaultType.length; i++) {
+    if (allOptionsFaultType[i].lineId == row.lineId) {
+      const fts = allOptionsFaultType[i].fts;
+      for (let j = 0; i < fts.length; j++) {
+        if (fts[j].faultType == row.faultType) {
+          return fts[j].typeName;
+        }
+      }
+    }
+  }
+}
+const searchOptionsFaultType = ref([{ label: '全部', value: '' }]);
+function handleSelectFaultType() {
+  let allType = '';
+  searchOptionsFaultType.value = [{ label: '全部', value: '' }];
+  for (let i = 0; i < allOptionsFaultType.length; i++) {
+    allOptionsFaultType[i].fts.forEach((item) => {
+      if (
+        (tab.value == 'GUIDE' &&
+          item.faultType.includes('FAULT_EMERGENCY_GUIDE')) ||
+        (tab.value == 'SERVICE' &&
+          item.faultType.includes('FAULT_EXIT_SERVICE'))
+      ) {
+        searchOptionsFaultType.value.push({
+          label: item.typeName,
+          value: item.faultType,
+        });
+        if (allType == '') {
+          allType = item.faultType;
+        } else {
+          allType = allType + ',' + item.faultType;
+        }
+      }
+    });
+  }
+  filter.faultType = allType;
+  searchOptionsFaultType.value[0].value = allType;
+}
+
+const searchOptionsLineId = ref<{ label: string; value: number }[]>([
+  { label: '全部', value: 0 },
+]);
+async function queryLineInfo() {
+  try {
+    let response = await pageQuery({
+      current: 1,
+      size: 50,
+    });
+    response.records.forEach((info) => {
+      searchOptionsLineId.value.push({ label: info.name, value: info.lineId });
+    });
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  }
+}
+
+function searchTable() {
+  tableRef.value?.requestServerInteraction();
+}
+
+onMounted(() => {
+  queryLineInfo();
+  queryAllFaultType();
+  setTimeout(() => {
+    searchTable();
+  }, 1000);
+});
+</script>
+
+<style lang='scss' scoped>
+.changeBackground {
+  background-color: #31ccec;
+}
+.custom-column {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.message-tip {
+  width: 300px;
+  overflow: auto;
+  line-height: 22px;
+  white-space: pre-wrap;
+  font-size: 14px;
+}
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 10px;
+}
+.dialogContainer {
+  display: flex;
+  height: calc(100vh - 120px);
+  .left {
+    width: calc(50vw + 60px);
+  }
+  .right {
+    flex: 1;
+    height: calc(100vh - 120px);
+    .detaiRow {
+      margin: 10px 0 0 20px;
+      .text {
+        width: 450px;
+        word-wrap: break-word;
+        margin-bottom: 10px;
+        font-size: 18px;
+        .textHead {
+          font-weight: 600;
+        }
+      }
+      .box-card {
+        width: 98%;
+        height: calc(50vh - 115px);
+        margin-bottom: 10px;
+        padding: 0 5px;
+        .head {
+          padding: 5px 5px;
+          font-size: 20px;
+          font-weight: 600;
+        }
+        .detail {
+          margin-bottom: 10px;
+          padding: 5px 5px;
+          line-height: 28px;
+          white-space: pre-wrap;
+          font-size: 20px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 4ddbeba..4743361 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -51,6 +51,11 @@ const routes: RouteRecordRaw[] = [
         name: 'faultQuery',
         component: () => import('pages/FaultQueryManage.vue'),
       },
+      {
+        path: 'emergencyResponse',
+        name: 'emergencyResponse',
+        component: () => import('pages/EmergencyResponseManage.vue'),
+      },
       {
         path: 'thresholdValue',
         name: 'thresholdValue',