故障查询调整

src/components/dialog/FaultQueryDialog.vue

@@ -3,11 +3,11 @@
     seamless
     ref="dialogRef"
     @show="onDialogShow"
-    :title="props.dialogTitle"
+    title="故障查询"
     :width="990"
-    :height="0"
+    :height="580"
   >
-    <template v-slot:footer>
+    <div class="dialogContainer">
       <q-table
         ref="tableRef"
         row-key="id"
@@ -17,22 +17,63 @@
         :columns="columns"
         @request="onRequest"
         :rows-per-page-options="[10, 20, 50, 100]"
+        style="width: 500px; height: 580px"
       >
-        <template v-slot:body-cell="props">
+        <template v-slot:body="props">
-          <q-td :props="props" class="custom-column">
+          <q-tr
-            {{ props.value }}
+            :props="props"
-            <q-tooltip
+            :class="{ changeBackground: props.row.id === clickRowInfo.id }"
-              anchor="bottom middle"
+            @click="handleRowClick(props.row)"
-              v-if="props.value && props.value.length > 20"
+          >
+            <q-td
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              class="custom-column"
             >
-              <div class="message-tip">
+              {{ col.value }}
-                {{ props.value }}
+              <q-tooltip
-              </div>
+                anchor="bottom middle"
-            </q-tooltip>
+                v-if="props.value && props.value.length > 20"
-          </q-td>
+              >
+                <div class="message-tip">
+                  {{ col.value }}
+                </div>
+              </q-tooltip>
+            </q-td>
+          </q-tr>
         </template>
       </q-table>
-    </template>
+
+      <q-scroll-area style="width: 490px; height: 560px">
+        <div class="detaiRow">
+          <div class="text">
+            <span class="textHead">故障类型</span> ：{{
+              clickRowInfo.faultType
+            }}
+          </div>
+          <div class="text">
+            <span class="textHead"> 消息名称(故障现象)</span>：{{
+              clickRowInfo.faultNameShower
+            }}
+          </div>
+          <q-card class="box-card">
+            <div class="head">司机处理结果(服务故障现象)</div>
+            <q-separator />
+            <div>
+              <div class="detail">{{ clickRowInfo.faultDriverShower }}</div>
+            </div>
+          </q-card>
+          <q-card class="box-card">
+            <div class="head">司机关键点(退出服务地点)</div>
+            <q-separator />
+            <div>
+              <div class="detail">{{ clickRowInfo.resultMsg }}</div>
+            </div>
+          </q-card>
+        </div>
+      </q-scroll-area>
+    </div>
     <template v-slot:titleButton>
       <q-btn
         square
@@ -58,7 +99,7 @@
           />
           <q-input
             dense
-            :label="inputSearchName"
+            label="故障现象(故障名称)"
             v-model="filter.faultName"
             lazy-rules
           />
@@ -78,7 +119,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, reactive, ref, computed } from 'vue';
+import { reactive, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
 import DraggableDialog from '../common/DraggableDialog.vue';
 import { QTable, useQuasar } from 'quasar';
@@ -89,19 +130,9 @@ import {
   FaultTypeItem,
 } from 'src/api/faultQuery';
 
-const props = defineProps<{
-  dialogTitle: string;
-}>();
-
 const $q = useQuasar();
 const lineId = useRoute().params.lineId as string;
 
-const tableTitle = reactive({
-  faultNameShower: '',
-  faultDriverShower: '',
-  resultMsg: '',
-});
-
 const tableRef = ref<QTable>();
 const columns = computed(() => [
   {
@@ -111,13 +142,6 @@ const columns = computed(() => [
     required: true,
     align: 'center',
   },
-  {
-    name: 'lineId',
-    label: '线路',
-    field: 'lineId',
-    required: true,
-    align: 'center',
-  },
   {
     name: 'faultType',
     label: '故障类型',
@@ -130,25 +154,11 @@ const columns = computed(() => [
   },
   {
     name: 'faultNameShower',
-    label: tableTitle.faultNameShower,
+    label: '消息名称(故障现象)',
     field: 'faultNameShower',
     required: true,
     align: 'center',
   },
-  {
-    name: 'faultDriverShower',
-    label: tableTitle.faultDriverShower,
-    field: 'faultDriverShower',
-    required: true,
-    align: 'center',
-  },
-  {
-    name: 'resultMsg',
-    label: tableTitle.resultMsg,
-    field: 'resultMsg',
-    required: true,
-    align: 'center',
-  },
 ]);
 const rows = reactive([]);
 const loading = ref(false);
@@ -199,6 +209,21 @@ const onRequest: QTable['onRequest'] = async (props) => {
   }
 };
 
+const clickRowInfo = reactive({
+  id: 0,
+  faultType: '',
+  faultNameShower: '',
+  faultDriverShower: '',
+  resultMsg: '',
+});
+function handleRowClick(row: FaultQueryListItem) {
+  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();
@@ -226,34 +251,14 @@ function getFaultTypeName(row: FaultQueryListItem) {
 }
 const searchOptionsFaultType = ref([{ label: '全部', value: '' }]);
 function handleSelectFaultType() {
-  let allType = '';
+  allOptionsFaultType.forEach((faultTypeOption) => {
-  for (let i = 0; i < allOptionsFaultType.length; i++) {
+    faultTypeOption.fts.forEach((fault) =>
-    if (allOptionsFaultType[i].lineId == +lineId) {
+      searchOptionsFaultType.value.push({
-      allOptionsFaultType[i].fts.forEach((item) => {
+        label: fault.typeName,
-        if (
+        value: fault.faultType,
-          (props.dialogTitle == '故障指导' &&
+      })
-            item.faultType.includes('FAULT_EMERGENCY_GUIDE')) ||
+    );
-          (props.dialogTitle == '退出服务' &&
+  });
-            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;
-
-      break;
-    }
-  }
 }
 
 function searchTable() {
@@ -272,26 +277,13 @@ const onDialogShow = () => {
     tableRef.value?.requestServerInteraction();
   }, 1000);
 };
-
-const inputSearchName = ref('');
-onMounted(() => {
-  if (props.dialogTitle == '故障指导') {
-    inputSearchName.value = '故障现象';
-    tableTitle.faultNameShower = '故障现象';
-    tableTitle.faultDriverShower = '司机处理结果';
-    tableTitle.resultMsg = '行调提醒司机关键点';
-  } else {
-    inputSearchName.value = '故障名称';
-    tableTitle.faultNameShower = '故障名称';
-    tableTitle.faultDriverShower = '故障现象';
-    tableTitle.resultMsg = '退出服务地点';
-  }
-});
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
+.changeBackground {
+  background-color: orange; /* 浅蓝色 */
+}
 .custom-column {
-  max-width: 250px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -308,4 +300,37 @@ onMounted(() => {
   justify-content: center;
   margin-top: 10px;
 }
+.dialogContainer {
+  display: flex;
+  .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: 450px;
+      height: 225px;
+      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>

src/layouts/MainLayout.vue

@@ -18,16 +18,9 @@
         <q-btn
           v-show="route.path.includes('line/monitor')"
           color="info"
-          label="故障指导"
+          label="故障查询"
           class="q-mr-sm"
-          @click="openFaultQueryDialog('故障指导')"
+          @click="openFaultQueryDialog()"
-        />
-        <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')"
@@ -194,12 +187,9 @@ onMounted(() => {
   socket = webSocketConnect(destination, handler);
 });
 
-function openFaultQueryDialog(dialogTitle: string) {
+function openFaultQueryDialog() {
   $q.dialog({
     component: FaultQueryDialog,
-    componentProps: {
-      dialogTitle,
-    },
   });
 }