代码备用

src/api/faultQuery.ts

@@ -0,0 +1,76 @@
+import { api } from 'src/boot/axios';
+import { PageDto, PageQueryDto } from './ApiCommon';
+
+const faultQueryUriBase = '/api/fault/query';
+
+export interface FaultQueryListItem {
+  id: number;
+  lineId: number;
+  faultType: string;
+  faultNameShower: string;
+  faultDriverShower: string;
+  resultMsg: string;
+}
+
+export interface FaultQueryInfo<T = unknown> {
+  data: T;
+}
+
+export class PagingQueryParams extends PageQueryDto {
+  lineId?: string;
+  faultType?: string;
+  faultName?: string;
+}
+
+/**
+ * 分页查询故障查询
+ * @param params
+ * @returns
+ */
+export async function faultQueryPageQuery(
+  params: PagingQueryParams
+): Promise<PageDto<FaultQueryListItem>> {
+  const response = await api.get(`${faultQueryUriBase}/page`, {
+    params: params,
+  });
+  return response.data;
+}
+
+/**
+ * 创建或编辑故障查询
+ * @param params
+ * @returns
+ */
+export function createFaultQuery(faultData: FaultQueryListItem) {
+  return api.post(`${faultQueryUriBase}`, faultData);
+}
+
+/**
+ * 删除故障查询
+ * @param id 草稿id
+ */
+export function deleteFaultQueryById(id: number) {
+  return api.delete(`${faultQueryUriBase}/${id}`);
+}
+
+/**
+ * 根据id获取故障查询
+ * @param id 草稿id
+ */
+export function faultQueryById(
+  id: number
+): Promise<FaultQueryInfo<FaultQueryListItem>> {
+  return api.get(`${faultQueryUriBase}/${id}`);
+}
+
+export interface FaultTypeItem {
+  faultType: string;
+  typeName: string;
+}
+
+/**
+ * 获取故障类型
+ */
+export function faultQueryType() {
+  return api.get(`${faultQueryUriBase}/type`);
+}

src/components/SysMenu.vue

@@ -77,6 +77,11 @@ const list = reactive([
         label: '决策信息管理',
         icon: 'format_align_center',
       },
+      {
+        path: '/dataManage/faultQuery',
+        label: '故障查询管理',
+        icon: 'disabled_by_default',
+      },
       {
         path: '/dataManage/thresholdValue',
         label: '报警故障阈值配置',

src/components/dialog/FaultQueryDialog.vue

@@ -0,0 +1,174 @@
+<template>
+  <draggable-dialog
+    seamless
+    ref="dialogRef"
+    @show="onDialogShow"
+    :title="props.dialogTitle"
+    :width="800"
+    :height="0"
+  >
+    <template v-slot:footer>
+      <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]"
+      >
+        <template v-slot:body-cell="props">
+          <q-td :props="props" class="custom-column">
+            {{ props.value }}
+            <q-tooltip
+              anchor="bottom middle"
+              v-if="props.value && props.value.length > 20"
+            >
+              <div class="message-tip">
+                {{ props.value }}
+              </div>
+            </q-tooltip>
+          </q-td>
+        </template>
+      </q-table>
+    </template>
+    <template v-slot:titleButton>
+      <div>
+        <q-select
+          outlined
+          label="故障类型"
+          v-model="creatForm.alertType"
+          :options="optionsFaultType"
+          emit-value
+          map-options
+          :rules="[(val) => val.length > 0 || '请选择故障类型！']"
+        />
+        <q-input
+          outlined
+          label="消息名称"
+          type="textarea"
+          v-model="creatForm.faultNameShower"
+          lazy-rules
+        />
+      </div>
+      <q-btn square color="purple" style="margin-right: 10px" icon="search">
+        <q-popup-edit
+          ref="popupEdit"
+          v-model="searchAreaName"
+          :cover="false"
+          :offset="[0, 10]"
+          v-slot="scope"
+        >
+          <q-input
+            color="accent"
+            v-model="scope.value"
+            label="区域名称"
+            dense
+            autofocus
+            @keyup.enter="scope.set"
+          >
+            <template v-slot:prepend>
+              <q-icon name="search" color="accent" />
+            </template>
+          </q-input>
+        </q-popup-edit>
+      </q-btn>
+    </template>
+  </draggable-dialog>
+</template>
+
+<script setup lang="ts">
+import { IAreaConfigListItem, getDeviceAreaList } from 'src/api/ConfigApi';
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import DraggableDialog from '../common/DraggableDialog.vue';
+import { QTable, useQuasar } from 'quasar';
+import { deviceTypeMap } from 'src/api/TrainApi';
+
+const props = defineProps<{
+  dialogTitle: string;
+}>();
+
+const $q = useQuasar();
+const lineId = useRoute().params.lineId as string;
+
+const tableRef = ref<QTable>();
+const columns: QTable['columns'] = [
+  { name: 'id', label: 'ID', field: 'id', align: 'center' },
+  { name: 'lineId', label: '线路ID', field: 'lineId', align: 'center' },
+  {
+    name: 'areaName',
+    label: '名称',
+    field: 'areaName',
+    align: 'center',
+  },
+  {
+    name: 'deviceType',
+    label: '设备类型',
+    field: (row) => deviceTypeMap[row.deviceType as keyof typeof deviceTypeMap],
+    align: 'center',
+  },
+];
+const rows = ref<IAreaConfigListItem[]>([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const searchAreaName = ref('');
+watch(
+  () => searchAreaName.value,
+  () => {
+    tableRef.value?.requestServerInteraction();
+  }
+);
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage } = props.pagination;
+  loading.value = true;
+  try {
+    const resp = await getDeviceAreaList({
+      lineId,
+      current: page,
+      size: rowsPerPage,
+      areaName: searchAreaName.value,
+    });
+    pagination.value.page = resp.current;
+    pagination.value.rowsNumber = resp.total;
+    pagination.value.rowsPerPage = resp.size;
+    rows.value = resp.records;
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取范围列表',
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+const onDialogShow = () => {
+  tableRef.value?.requestServerInteraction();
+};
+</script>
+
+<style scoped>
+.custom-column {
+  max-width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.message-tip {
+  width: 300px;
+  overflow: auto;
+  line-height: 22px;
+  white-space: pre-wrap;
+  font-size: 14px;
+}
+</style>

src/layouts/MainLayout.vue

@@ -15,7 +15,20 @@
           <img :src="NCC" style="width: 80px" />
         </div>
         <q-toolbar-title> 西安NCC调度辅助决策系统 </q-toolbar-title>
-
+        <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"
+          label="退出服务"
+          class="q-mr-sm"
+          @click="openFaultQueryDialog('退出服务')"
+        />
         <q-btn
           v-show="route.path.includes('line/monitor')"
           color="info"
@@ -128,6 +141,7 @@ import { logout } from 'src/api/UserApi';
 import { ApiError } from 'src/boot/axios';
 import { useUserStore } from 'src/stores/user-store';
 import { getMonitorPath } from 'src/router/routes';
+import FaultQueryDialog from 'src/components/dialog/FaultQueryDialog.vue';
 
 const leftDrawerOpen = ref(false);
 const router = useRouter();
@@ -180,6 +194,15 @@ onMounted(() => {
   socket = webSocketConnect(destination, handler);
 });
 
+function openFaultQueryDialog(dialogTitle: string) {
+  $q.dialog({
+    component: FaultQueryDialog,
+    componentProps: {
+      dialogTitle,
+    },
+  });
+}
+
 //模拟报警
 const $q = useQuasar();
 function openSetAlarmMockDialog() {

src/pages/FaultQueryManage.vue

@@ -0,0 +1,434 @@
+<template>
+  <div class="q-pa-md">
+    <q-table
+      ref="tableRef"
+      title="故障查询"
+      :style="{ height: tableHeight + 'px' }"
+      :rows="rows"
+      :columns="columnDefs"
+      row-key="id"
+      v-model:pagination="pagination"
+      :rows-per-page-options="[10, 20, 50, 100]"
+      :loading="loading"
+      binary-state-sort
+      @request="onRequest"
+    >
+      <template v-slot:body-cell="props">
+        <q-td :props="props" class="custom-column">
+          {{ props.value }}
+          <q-tooltip
+            anchor="bottom middle"
+            v-if="props.value && props.value.length > 20"
+          >
+            <div class="message-tip">
+              {{ props.value }}
+            </div>
+          </q-tooltip>
+        </q-td>
+      </template>
+      <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
+              :rules="[(val) => val >= 0 || '请选择线路ID！']"
+            />
+            <q-select
+              dense
+              label="故障类型"
+              v-model="filter.alertType"
+              :options="searchOptionsFaultType"
+              style="width: 130px"
+            />
+            <q-btn color="primary" label="查询" type="submit" />
+            <q-btn
+              color="primary"
+              label="新建"
+              @click="createFormShow = true"
+            />
+          </div>
+        </q-form>
+      </template>
+
+      <template v-slot:body-cell-operations="props">
+        <q-td :props="props">
+          <div class="q-gutter-sm row justify-center">
+            <q-btn
+              color="primary"
+              :disable="operateDisabled"
+              label="编辑"
+              @click="editData(props.row)"
+            />
+            <q-btn
+              color="red"
+              :disable="operateDisabled"
+              label="删除"
+              @click="deleteData(props.row)"
+            />
+          </div>
+        </q-td>
+      </template>
+    </q-table>
+
+    <q-dialog
+      v-model="createFormShow"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 500px">
+        <q-form
+          ref="myForm"
+          @submit="onCreate"
+          @reset="onReset"
+          class="q-gutter-md"
+        >
+          <q-card-section class="q-gutter-sm">
+            <div class="text-h6">
+              {{ creatForm.id ? '编辑故障查询' : '新建故障查询' }}
+            </div>
+            <q-select
+              outlined
+              label="线路ID"
+              v-model="creatForm.lineId"
+              :options="optionsLineId"
+              emit-value
+              map-options
+              lazy-rules
+              :rules="[(val) => val > 0 || '请选择线路ID！']"
+              @blur="handleSelectLineId"
+            />
+            <q-select
+              outlined
+              label="故障类型"
+              v-model="creatForm.alertType"
+              :options="optionsFaultType"
+              emit-value
+              map-options
+              :rules="[(val) => val.length > 0 || '请选择故障类型！']"
+            />
+            <q-input
+              outlined
+              label="消息名称"
+              v-model="creatForm.faultNameShower"
+              lazy-rules
+            />
+            <q-input
+              outlined
+              type="textarea"
+              label="司机处理结果"
+              v-model="creatForm.faultDriverShower"
+              lazy-rules
+            />
+            <q-input
+              outlined
+              type="textarea"
+              label="司机关键点"
+              v-model="creatForm.resultMsg"
+              lazy-rules
+            />
+          </q-card-section>
+
+          <q-card-actions align="right">
+            <q-btn color="primary" label="确定" type="submit" />
+            <q-btn label="取消" type="reset" v-close-popup />
+          </q-card-actions>
+        </q-form>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue';
+import { useQuasar, type QTableColumn, QForm, QTable } from 'quasar';
+import {
+  faultQueryPageQuery,
+  deleteFaultQueryById,
+  createFaultQuery,
+  FaultQueryListItem,
+  faultQueryType,
+} from '../api/faultQuery';
+import {
+  showAlertTypeData,
+  saveAlertTypeData,
+} from 'src/components/alarm/alarmInfoEnum';
+import { ApiError } from 'src/boot/axios';
+import { pageQuery } from 'src/api/LineInfoApi';
+
+const $q = useQuasar();
+
+const props = withDefaults(
+  defineProps<{
+    sizeHeight: number;
+  }>(),
+  { sizeHeight: 500 }
+);
+
+const tableHeight = computed(() => {
+  return props.sizeHeight - 32;
+});
+
+const columnDefs: QTableColumn[] = [
+  {
+    name: 'id',
+    label: '编号',
+    field: 'id',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'lineId',
+    label: '线路',
+    field: 'lineId',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'faultType',
+    label: '故障类型',
+    field: (row) => {
+      if (row.faultType) {
+        return (showAlertTypeData as never)[row.faultType + ''];
+      }
+    },
+    align: 'center',
+  },
+  {
+    name: 'faultNameShower',
+    label: '消息名称',
+    field: 'faultNameShower',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'faultDriverShower',
+    label: '司机处理结果',
+    field: 'faultDriverShower',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'resultMsg',
+    label: '司机关键点',
+    field: 'resultMsg',
+    required: true,
+    align: 'center',
+  },
+  { name: 'operations', label: '操作', field: 'operations', align: 'center' },
+];
+
+const operateDisabled = ref(false);
+const tableRef = ref();
+const rows = reactive([]);
+const loading = ref(false);
+const pagination = ref({
+  sortBy: 'desc',
+  descending: false,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 10,
+});
+
+const filter = ref({
+  alertType: '全部',
+  areaConfigName: '',
+  lineId: 0,
+  lineType: '全部',
+});
+
+const onRequest: QTable['onRequest'] = async (props) => {
+  const { page, rowsPerPage, sortBy, descending } = props.pagination;
+  loading.value = true;
+  try {
+    const params = {
+      current: page,
+      size: rowsPerPage,
+    };
+    if (filter.value.lineId !== 0) {
+      Object.assign(params, {
+        lineId: filter.value.lineId,
+      });
+    }
+    if (filter.value.alertType !== '全部') {
+      Object.assign(params, {
+        alertType: (saveAlertTypeData as never)[filter.value.alertType],
+      });
+    }
+    let response = await faultQueryPageQuery(params);
+    const pageData = response;
+    pagination.value.rowsNumber = pageData.total;
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+    rows.splice(0, rows.length, ...(pageData.records as []));
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取故障查询列表',
+    });
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  queryLineInfo();
+  setTimeout(() => {
+    tableRef.value.requestServerInteraction();
+  });
+});
+
+function searchDecisionInfo() {
+  tableRef.value.requestServerInteraction();
+}
+
+const createFormShow = ref(false);
+const myForm = ref<QForm | null>(null);
+const creatForm = reactive({
+  id: '',
+  lineId: '',
+  faultType: '',
+  faultNameShower: '',
+  faultDriverShower: '',
+  resultMsg: '',
+});
+
+const optionsLineId = ref<{ label: string; value: number }[]>([]);
+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) => {
+      optionsLineId.value.push({ label: info.name, value: info.lineId });
+      searchOptionsLineId.value.push({ label: info.name, value: info.lineId });
+    });
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  }
+}
+
+let optionsFaultType = ref<{ label: string; value: number }[]>([]);
+const searchOptionsFaultType = ['全部', ...optionsFaultType.value];
+async function handleSelectLineId() {
+  try {
+    const res = await faultQueryType();
+    console.log(res.data, 111);
+    console.log(typeof res.data, 4444);
+  } catch (err) {
+    $q.notify({
+      type: 'negative',
+      message: '无法获取指定线路的故障类型配置',
+    });
+  }
+}
+
+function onCreate() {
+  myForm.value?.validate().then(async (res) => {
+    if (res) {
+      operateDisabled.value = true;
+      try {
+        const params = {
+          id: +creatForm.id,
+          lineId: +creatForm.lineId,
+          faultType: creatForm.faultType,
+          faultNameShower: creatForm.faultNameShower,
+          faultDriverShower: creatForm.faultDriverShower,
+          resultMsg: creatForm.resultMsg,
+        };
+        await createFaultQuery(params);
+        onReset();
+        createFormShow.value = false;
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        const apiErr = err as ApiError;
+        $q.notify({
+          type: 'negative',
+          message: apiErr.title,
+        });
+      } finally {
+        operateDisabled.value = false;
+      }
+    }
+  });
+}
+
+function editData(row: FaultQueryListItem) {
+  creatForm.id = row.id + '';
+  creatForm.lineId = row.lineId + '';
+  creatForm.faultType = row.faultType;
+  creatForm.faultNameShower = row.faultNameShower;
+  creatForm.faultDriverShower = row.faultDriverShower;
+  creatForm.resultMsg = row.resultMsg;
+  createFormShow.value = true;
+}
+
+async function deleteData(row: FaultQueryListItem) {
+  operateDisabled.value = true;
+  $q.dialog({
+    title: '确认',
+    message: `确认删除编号是"${row.id}"的决策信息吗?`,
+    cancel: true,
+  })
+    .onOk(async () => {
+      try {
+        await deleteFaultQueryById(row.id);
+        tableRef.value.requestServerInteraction(); // 刷新列表
+      } catch (err) {
+        $q.notify({
+          type: 'negative',
+          message: '无法删除决策信息',
+        });
+      }
+    })
+    .onDismiss(() => {
+      operateDisabled.value = false;
+    });
+}
+
+function onReset() {
+  creatForm.id = '';
+  creatForm.lineId = '';
+  creatForm.faultType = '';
+  creatForm.faultNameShower = '';
+  creatForm.faultDriverShower = '';
+  creatForm.resultMsg = '';
+  myForm.value?.resetValidation();
+}
+</script>
+
+<style scoped>
+.custom-column {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.message-tip {
+  width: 300px;
+  max-height: 250px;
+  overflow: auto;
+  line-height: 22px;
+  white-space: pre-wrap;
+  font-size: 14px;
+}
+</style>

src/router/routes.ts

@@ -46,6 +46,11 @@ const routes: RouteRecordRaw[] = [
         name: 'decisionInfo',
         component: () => import('pages/DecisionInfoManage.vue'),
       },
+      {
+        path: 'faultQuery',
+        name: 'faultQuery',
+        component: () => import('pages/FaultQueryManage.vue'),
+      },
       {
         path: 'thresholdValue',
         name: 'thresholdValue',