rt-sim-training-client/src/views/newMap/displayNew/demon/faultChoose.vue

<template>
  <el-dialog v-dialogDrag :title="title" :visible.sync="dialogShow" width="800px" :before-close="doClose" :modal="false">
    <div class="draft">
      <el-radio-group v-model="auto">
        <el-radio :label="false" border>{{ $t('display.faultChoose.manual') }}</el-radio>
        <el-radio :label="true" border>{{ $t('display.faultChoose.automatic') }}</el-radio>
      </el-radio-group>
    </div>
    <div v-if="auto" class="card">
      <QueryListPage ref="pageRules" :pager-config="pagerConfig" :query-form="queryForm" :query-list="queryList" />
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogShow = false">{{ $t('global.cancel') }}</el-button>
      <el-button type="primary" :loading="loading" @click="handleConfirm">{{ $t('global.confirm') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getFailureGenerateRules, setFailureMode } from '@/api/simulation';
import { FaultStatusEnum } from '@/scripts/FaultDic';
import ModelType from '@/jmap/constant/deviceType';

// 故障列表
export default {
    name: 'FaultChoose',
    props: {
        group: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            dialogShow: false,
            loading: false,
            deviceMap: {},
            auto: false,
            pagerConfig: {
                pageSize: 'pageSize',
                pageIndex: 'pageNum'
            },
            queryForm: {
                reset: true,
                labelWidth: '80px',
                queryObject: {
                    condition: {
                        type: 'text',
                        label: this.$t('display.faultChoose.settingCondition')
                    }
                }
            },
            queryList: {
                query: null,
                selectCheckShow: false,
                radioShow: true,
                columns: [
                    {
                        title: this.$t('display.faultChoose.settingCondition'),
                        prop: 'condition'
                    },
                    {
                        title: this.$t('display.faultChoose.triggerTarget'),
                        prop: 'target'
                    }
                ]
            }
        };
    },
    computed: {
        title() {
            return this.$t('display.faultChoose.selectFault');
        },
        lineCode() {
            return this.$route.query.lineCode;
        }
    },
    mounted() {
        this.$Dictionary.physicalViewType().then(list => {
            this.deviceMap = [];
            list.forEach(elem => {
                this.deviceMap[elem.code] = elem.name;
            });
        });
    },
    methods: {
        formatNameByCode(code) {
            let name = '';
            const device = this.$store.getters['map/getDeviceByCode'](code);
            if (device) {
                switch (device._type) {
                case ModelType.Signal:
                case ModelType.Switch:
                case ModelType.Station:
                case ModelType.Section: {
                    name += device.name;
                    break;
                }
                }
                if (device.stationCode) {
                    const station = this.$store.getters['map/getDeviceByCode'](device.stationCode);
                    if (station) {
                        name += '【' + station.name + '】';
                    }
                }
            }

            return name;
        },
        doShow() {
            this.dialogShow = true;
            this.queryList.data = [];
            getFailureGenerateRules({ skin: this.lineCode, group: this.group }).then(response => {
                const data = response.data;
                data.forEach(elem => {
                    this.queryList.data.push({
                        id: elem.id,
                        condition: `${this.deviceMap[elem.condition.triggerDeviceType]}${this.formatNameByCode(elem.condition.triggerDeviceCode)} 状态：${FaultStatusEnum[elem.condition.triggerDeviceType][elem.condition.triggerDeviceStatus]}`,
                        target: `${this.deviceMap[elem.targetDeviceType]}${this.formatNameByCode(elem.targetDeviceCode)}`
                    });
                });
            });
        },
        doClose() {
            this.dialogShow = false;
        },
        getFailureModel(auto) {
            const model = { auto };
            if (auto) {
                const choose = this.$refs.pageRules.currentChoose();
                if (choose) {
                    choose.id ? Object.assign(model, { ruleId: choose.id }) : this.$messageBox(this.$t('display.faultChoose.selectRules'));
                }
            }

            return model;
        },
        handleConfirm() {
            this.$nextTick(() => {
                const faultModel = this.getFailureModel(this.auto);
                setFailureMode(faultModel, this.group).then(() => {
                    this.$message.success(this.$t('display.faultChoose.setFaultSuccess'));
                }).catch(() => {
                    this.$messageBox(this.$t('display.faultChoose.setFaultFail'));
                });

                this.doClose();
            });
        },
        reloadTable() {
            this.queryList.reload();
        }
    }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
    .draft {
        text-align: center;
        margin-bottom: 10px;
    }
</style>