故障查询调整
This commit is contained in:
joylink_zhaoerwei
parent
cfcf0e06d1
commit
9ac2c2dc59
@ -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">
|
||||
<q-td :props="props" class="custom-column">
|
||||
{{ props.value }}
|
||||
<q-tooltip
|
||||
anchor="bottom middle"
|
||||
v-if="props.value && props.value.length > 20"
|
||||
<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"
|
||||
>
|
||||
<div class="message-tip">
|
||||
{{ props.value }}
|
||||
</div>
|
||||
</q-tooltip>
|
||||
</q-td>
|
||||
{{ 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>
|
||||
</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 = '';
|
||||
for (let i = 0; i < allOptionsFaultType.length; i++) {
|
||||
if (allOptionsFaultType[i].lineId == +lineId) {
|
||||
allOptionsFaultType[i].fts.forEach((item) => {
|
||||
if (
|
||||
(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;
|
||||
}
|
||||
}
|
||||
allOptionsFaultType.forEach((faultTypeOption) => {
|
||||
faultTypeOption.fts.forEach((fault) =>
|
||||
searchOptionsFaultType.value.push({
|
||||
label: fault.typeName,
|
||||
value: fault.faultType,
|
||||
})
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@ -18,16 +18,9 @@
|
||||
<q-btn
|
||||
v-show="route.path.includes('line/monitor')"
|
||||
color="info"
|
||||
label="故障指导"
|
||||
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('退出服务')"
|
||||
@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,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user