jihe-hs/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/index.vue

<template>
    <div class='emergencyProcessManagement'>

        <!-- 搜索栏 -->
        <div class="filter">
            <div>
                <ButtonGradient @click="onAdd">
                    <template #prefix>
                        <img src="@screen/images/insert.svg" />
                    </template>
                    新增
                </ButtonGradient>
                <ButtonGradient @click="onRefresh" class="refresh-btn">
                    <template #prefix>
                        <img src="./images/refresh.svg" />
                    </template>
                    刷新
                </ButtonGradient>
            </div>
            <InputSearch style="width: 402px;" :formList="searchFormList" :formConfigOptions="{}"
                @handleSearch="handleSearch" />
        </div>

        <!-- 内容 -->
        <div class="body">
            <Table :data="tableData">
                <ElTableColumn prop="strEventCategory" label="事件分类" width="100" align="center" />
                <ElTableColumn prop="strEventType" label="事件类型" width="100" align="center" />
                <ElTableColumn prop="planName" label="预案名称" width="140" align="center" />
                <ElTableColumn prop="triggeringCondition" label="检索条件" width="140" />
                <ElTableColumn prop="strDeviceType" label="设备类型" width="140" />
                <ElTableColumn prop="controllableDeviceName" label="可控设备"/>
                <ElTableColumn prop="controlCommand" label="控制指令" />
                <ElTableColumn label="操作" width="210" align="center">
                    <template slot-scope="scope">
                        <ElButton type="text" style="color: #00D1FF;" @click="showDisposal(scope.row)">修改</ElButton>
                        <ElButton type="text" style="color: #00EBC1;" @click="handleDelete(scope.row)">删除</ElButton>
                    </template>
                </ElTableColumn>
            </Table>
        </div>

        <!-- 新增修改弹窗 -->
        <AddAndEditDialog :visible="isShowDialog" :detail="detail" @close="onCloseAddNew" @reInitData="initData" />

        <!-- 分页 -->
        <div class="footer">
            <Pagination @current-change="initData" @size-change="onSizeChange" width="'100%'"
                :page-sizes="[10, 20, 30, 40, 50]" :page-size="searchData.pageSize"
                :current-page.sync="searchData.pageNum" layout="total, sizes, prev, pager, next" :total="total">
            </Pagination>
        </div>
    </div>
</template>

<script>
import ButtonGradient from '@screen/components/Buttons/ButtonGradient.vue';
import Pagination from '@screen/components/Pagination.vue';
import Table from '@screen/components/Table.vue';
import InputSearch from '@screen/components/InputSearch/index.vue';
import AddAndEditDialog from './addAndEditDialog';
import request from "@/utils/request";
import { confirm } from "@screen/utils/common";
import { Message } from 'element-ui'
import { searchFormList } from './data';

const eventTypeMap = {
    0: {},
    1: {
        1: '交通事故',
        2: '车辆故障',
        3: '交通管制',
        4: '交通拥堵',
        5: '非法上路',
        6: '路障清除',
        7: '施工建设',
        8: '服务区异常',
        9: '设施设备隐患',
        10: '异常天气',
        11: '其他事件',
    },
    2: {
        1: '异常天气',
        2: '拥堵',
        3: '非机动车',
        4: '行人',
        5: '烟火',
        6: '抛洒物',
        7: '逆行',
    },
    3: {}

}
const deviceMap = {
    1: '摄像机',
    2: '可变信息标志',
    3: '气象监测器',
    4: '出口诱导灯',
    5: '路段语音广播',
    6: '护栏碰撞',
    7: '毫米波雷达',
    8: '合流区预警',
    9: '智慧锥桶',
    10: '激光疲劳唤醒',
    11: '类交通量调查站',
    12: '行车诱导',
    13: '智能设备箱',
    14: '光线在线监测',
}

export default {
    name: 'controlEventPlan',
    components: {
        ButtonGradient,
        Pagination,
        Table,
        InputSearch,
        AddAndEditDialog
    },
    data() {
        return {
            tableData: [],
            searchFormList,
            isShowDialog: false,
            total: 20,
            eventType: 1,
            searchData: {
                pageSize: 20,
                pageNum: 1,
            },
            phrasesData: [],
            detail: {}
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            request({
                url: `/business/plans/list`,
                method: "get",
                params: this.searchData,
            }).then((result) => {
                if (result.code != 200) return Message.error(result?.msg);
                result.rows.forEach(it => {
                    it.strEventCategory = it.eventCategory == 1 ? '交通事件' : '感知事件';
                    it.strEventType = eventTypeMap[it.eventCategory || 0][it.eventType];
                    it.strDeviceType = deviceMap[it.deviceType];
                })
                this.tableData = result.rows;
                this.total = result.total;
            });
        },
        onSizeChange(pageSize) {
            this.searchData.pageSize = pageSize;
            this.initData();
        },
        onRefresh() {
            this.initData();
        },
        onAdd() {
            this.detail = {}
            this.isShowDialog = true;
        },
        onCloseAddNew() {
            this.isShowDialog = false;
        },
        showDisposal(data) {
            this.detail = { ...data }
            this.isShowDialog = true;
        },
        handleSearch(data) {
            // console.log(data);
            this.searchData = { ...this.searchData, ...data }
            this.initData();
        },
        async handleDelete(data) {
            await confirm({ message: "是否要删除该预案?" });
            // return console.log('删除成功',data.id)
            request({
                url: `/business/plans/${data.id}`,
                method: "DELETE",

            }).then(result => {
                if (result.code != 200) return Message.error("删除失败");
                this.initData()

                Message.success("删除成功")
            }).catch(() => {
                Message.error("删除失败")
            })
        }
    }
}
</script>

<style lang='scss' scoped>
.emergencyProcessManagement {
    padding: 21px;

    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 6;
    width: 100%;
    height: 100%;

    .filter {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        >div {
            display: flex;
            gap: 6px;
        }
    }

    .body {
        flex: 1;
        position: relative;
        overflow: hidden;

        .content {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: auto;
        }
    }

    .footer {
        margin-top: 15px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>