事件确认

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/eventPlanDialog/index.vue

@@ -13,7 +13,7 @@
                         <div class="text">联动设备:</div>
                     </el-col>
                     <el-col :span="22">
-                        <FormTable ref="secondFormTable" :tableData="secondFormData"></FormTable>
+                        <FormTable ref="secondFormTable" :tableData="secondFormData" :type="1"></FormTable>
                     </el-col>
                 </el-row>
             </div>
@@ -23,14 +23,16 @@
                         <div class="text">恢复操作:</div>
                     </el-col>
                     <el-col :span="22">
-                        <FormTable ref="thirdFormTable" :tableData="thirdFormData"></FormTable>
+                        <FormTable ref="thirdFormTable" :tableData="thirdFormData" :type="2"></FormTable>
                     </el-col>
                 </el-row>
             </div>
         </div>
 
         <template #footer>
-            <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">强制恢复</Button>
+            <Button v-if="isDisBtn" style="padding:0 24px;  pointer-events: none; background-color: #C9C9C9;"
+                @click.native="handleRestore" :loading="submitting">强制恢复</Button>
+            <Button v-else style="padding:0 24px;" @click.native="handleRestore" :loading="submitting">强制恢复</Button>
             <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button>
             <Button style="background: #C9C9C9;padding:0 24px;"
                 @click.native="modelVisible = false, submitting = false">取消</Button>
@@ -40,12 +42,11 @@
 
 <script>
 import Dialog from "@screen/components/Dialog/index";
-import FormTable from '../../../plan/formTable/index.vue';
+import FormTable from '../formTable/index.vue';
 import Button from '@screen/components/Buttons/Button.vue';
 import request from '@/utils/request';
 import { Message } from "element-ui";
 import { throttle } from "lodash"
-import { isDate } from 'mathjs';
 
 
 export default {
@@ -66,17 +67,23 @@ export default {
     },
     props: {
         visible: Boolean,
+        activeName: String,
         info: {
             type: Array,
             default: () => []
+        },
+        eventFormData: {
+            type: Object,
+            default: () => { }
         }
     },
     data() {
         return {
             title: '事件确认',
+            isDisBtn: true,
             dialogType: 1,
             planId: 0,
-            plans: [],
+            planInfo: {},
             submitting: false,
             secondFormData: [{
                 deviceType: 1,
@@ -186,6 +193,7 @@ export default {
                 if (this.visible) {
                     if (this.info.length > 0) {
                         this.planName = this.info[0]?.planName || '';
+                        this.planInfo = this.info[0];
                         this.initData(this.info[0]);
                     }
                 }
@@ -243,10 +251,21 @@ export default {
             }
             return this.deviceData;
         },
+        async getTemplateAutomatic() {
+            request({
+                url: `/business/plans/event/automatic`,
+                method: "post",
+            }).then((result) => {
+                if (result.code != 200) return Message.error(result?.msg);
+                this.sbOptions = result.data;
+
+            }).catch(() => {
+                Message.error("查询可变信息标识失败");
+            })
+        },
         changeRadio(value) {
-            console.log('va', value)
             let plan = this.info.find(it => it.planName == value);
-            console.log('plan', plan)
+            this.planInfo = plan;
             this.initData(plan);
         },
         formatData(it, value = 1) {
@@ -289,47 +308,53 @@ export default {
         },
         handleSubmit() {
             // this.submitting = false;
-            let secondFormTable = this.$refs['secondFormTable'].tableData || [];
-            let thirdFormTable = this.$refs['thirdFormTable'].tableData || [];
-            console.log('12', thirdFormTable);
-            let dcArr = [];
-            let id = '';
-            if (this.dialogType == 2) id = this.planId;
-            secondFormTable.forEach(it => {
-                dcArr.push(this.formatData(it, 1, id));
-            })
-            thirdFormTable.forEach(it => {
-                dcArr.push(this.formatData(it, 2, id));
-            })
 
-            console.log({
+            // let secondFormTable = this.$refs['secondFormTable'].tableData || [];
-                dcExecuteAction: dcArr
+            // let thirdFormTable = this.$refs['thirdFormTable'].tableData || [];
-            })
+            // console.log('12', thirdFormTable);
-            return;
+            // let dcArr = [];
-            if (this.dialogType == 1) {//新增
+            // let id = '';
+            // if (this.dialogType == 2) id = this.planId;
+            // secondFormTable.forEach(it => {
+            //     dcArr.push(this.formatData(it, 1, id));
+            // })
+            // thirdFormTable.forEach(it => {
+            //     dcArr.push(this.formatData(it, 2, id));
+            // })
 
-            } else if (this.dialogType == 2) {//修改
+            let reqData = {
-                // request({
+                operationType: 1,//1-执行操作 2-恢复操作
-                //     url: `/business/plans`,
+                dcEmergencyPlans: this.planInfo,
-                //     method: "put",
+                dcEvent: this.eventFormData
-                //     data: {
+            };
-                //         ...this.formData,
+
-                //         id: this.planId,
+            // let url = '';
-                //         dcExecuteAction: dcArr
+            // if (this.activeName == '-1') {//感知
+            //     url = '/business/plans/event/confirm';
+            //     reqData = { ...reqData, dcWarning: { ...reqData.dcEvent } }
+            // } else {//交通
+            //     url = '/business/plans/event/confirm';
             // }
-                // }).then((result) => {
+            console.log('reqData', reqData)
-                //     if (result.code != 200) return Message.error(result?.msg);
+            return;
-                //     Message.success("提交成功");
+            request({
-                //     this.modelVisible = false;
+                url: url,
-                // }).catch(() => {
+                method: "post",
-                //     Message.error("提交失败");
+                data: reqData
-                // }).finally(() => {
+            }).then((result) => {
-                //     this.submitting = false;
+                if (result.code != 200) return Message.error(result?.msg);
+                Message.success("提交成功");
+                this.modelVisible = false;
+            }).catch(() => {
+                Message.error("提交失败");
+            }).finally(() => {
+                this.submitting = false;
                 // this.$emit('reInitData', true);
-                // })
+            })
 
-            }
 
+        },
+        handleRestore() {
 
         }
     }
@@ -349,7 +374,7 @@ export default {
 
 .EventAddPlanDialog {
     gap: 9px;
-    width: 1080px;
+    width: 1280px;
     height: 310px;
     display: flex;
     flex-direction: column;
@@ -376,5 +401,16 @@ export default {
         justify-content: end;
         gap: 15px;
     }
+
+    // .disabledBtn {
+    //     height: 24px;
+    //     border-radius: 48px;
+    //     background: #C9C9C9;
+    //     padding: 0 24px;
+    //     color: white !important;
+    //     display: flex;
+    //     align-items: center;
+    //     justify-content: center;
+    // }
 }
 </style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/formTable/index.vue

@@ -0,0 +1,336 @@
+<template>
+    <div class="EventDetail">
+        <Table :data="tableData" :show-header="false">
+            <ElTableColumn prop="deviceType" width="160">
+                <template slot-scope="scope">
+                    <el-select v-model="scope.row.deviceType" placeholder="请选择设备类型" @change="changeDeviceType">
+                        <el-option v-for="item in deviceOptions" :key="item.value" :label="item.label"
+                            :value="item.value">
+                        </el-option>
+                    </el-select>
+                </template>
+            </ElTableColumn>
+
+            <ElTableColumn prop="searchRule" width="230">
+                <template slot-scope="scope">
+                    <div class="plhx">
+                        <el-select v-model="scope.row.searchRule" placeholder="检索规则条件">
+                            <el-option v-for="item in zyOptions" :key="item.value" :label="item.label"
+                                :value="item.value">
+                            </el-option>
+                        </el-select>
+
+                        <el-input-number v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3"
+                            v-model="scope.row.number" :min="0" :max="9999" style="width: 130px;"></el-input-number>
+                        <p v-if="scope.row.searchRule == 2 || scope.row.searchRule == 3">个</p>
+
+                        <el-input-number v-if="scope.row.searchRule == 4" v-model="scope.row.number" :min="0"
+                            :max="9999" style="width: 130px;"></el-input-number>
+                        <p v-if="scope.row.searchRule == 4" style="width: 56px;">公里</p>
+                    </div>
+
+                </template>
+            </ElTableColumn>
+
+            <ElTableColumn prop="deviceList" width="400">
+                <template slot-scope="scope">
+                    <div class="mjs">
+                        <el-select v-if="scope.row.searchRule == 1" v-model="scope.row.deviceList" placeholder="请选择设备"
+                            multiple collapse-tags>
+                            <el-option v-for="item in sbOptions" :key="item.id" :label="item.deviceName"
+                                :value="item.id">
+                            </el-option>
+                        </el-select>
+                        <el-input @click.native="clickQbb(scope.$index)" v-if="scope.row.deviceType == 2"
+                            placeholder="请选择" v-model="scope.row.qbb" readonly>
+                            <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                        </el-input>
+
+                        <el-select v-if="scope.row.deviceType == 10" v-model="scope.row.gzms" placeholder="工作模式">
+                            <el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+                        <el-input-number v-if="scope.row.deviceType == 10" placeholder="时长(分钟)"
+                            v-model="scope.row.operationDuration" :min="0" :max="999"></el-input-number>
+
+                        <el-select v-if="scope.row.deviceType == 12" v-model="scope.row.controlModel"
+                            placeholder="请选择模式">
+                            <el-option label="手动模式" value="00"></el-option>
+                            <el-option label="自动模式" value="01"></el-option>
+                            <el-option label="万年历" value="02"></el-option>
+                        </el-select>
+                        <el-time-picker v-if="scope.row.controlModel == '01' && scope.row.deviceType == 12"
+                            v-model="scope.row.time" is-range style="" range-separator="-" placeholder="选择时间"
+                            value-format="HH:mm" format="HH:mm">
+                        </el-time-picker>
+                        <el-select v-if="scope.row.deviceType == 12" v-model="scope.row.state" placeholder="工作状态">
+                            <el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
+                                :value="item.value"></el-option>
+                        </el-select>
+
+                        <el-input v-if="scope.row.deviceType == 5" v-model="scope.row.content"
+                            placeholder="请输入发布内容"></el-input>
+
+                    </div>
+                </template>
+            </ElTableColumn>
+
+
+            <ElTableColumn label="操作" width="100">
+                <template slot-scope="scope">
+                    <ElButton class="elButton" icon="el-icon-plus" plain size="mini"
+                        @click.native="onAdd(scope.row.id)" />
+                    <ElButton class="elButton" icon="el-icon-delete" plain size="mini"
+                        @click.native="onDel(scope.$index)" />
+                </template>
+            </ElTableColumn>
+        </Table>
+
+        <!-- 情报板弹窗 -->
+        <QbbDialog :visible="isShowDialog" :info="qbbData" :type="type" @close="onCloseDialog" @dialogSubmit="dialogSubmit" />
+    </div>
+</template>
+
+<script>
+import Table from '@screen/components/Table.vue';
+import Button from '@screen/components/Buttons/Button.vue';
+import request from "@/utils/request";
+import QbbDialog from "../qbbDialog/index.vue";
+import { Message } from 'element-ui'
+import { planDeviceOptions } from "@screen/utils/enum.js";
+
+
+export default {
+    name: 'formTable',
+    components: {
+        Button,
+        Table,
+        QbbDialog
+    },
+    model: {
+        prop: 'visible',
+        event: 'update:value'
+    },
+    inject: ['loadData'],
+    props: {
+        visible: Boolean,
+        eventType: Number,
+        type: Number,
+        tableData: {
+            type: Array,
+            default: () => [{
+                deviceType: 1,
+                searchRule: 1,
+                qbb: ''
+            }]
+        }
+    },
+    data() {
+        return {
+            // tableData: [
+            //     {
+            //         deviceType: 1,
+            //         searchRule: 1,
+            //         qbb: '安全行驶'
+            //     }
+            // ],
+            isShowDialog: false,
+            deviceOptions: planDeviceOptions,
+            zyOptions: [
+                {
+                    value: 1,
+                    label: '指定设备资源'
+                },
+                {
+                    value: 2,
+                    label: '事发上游最近'
+                },
+                {
+                    value: 3,
+                    label: '事发下游最近'
+                },
+                {
+                    value: 4,
+                    label: '最近公里数'
+                },
+            ],
+            gzztOptions: [
+                {
+                    value: "01",
+                    label: "常亮"
+                },
+                {
+                    value: "02",
+                    label: "流水"
+                },
+                {
+                    value: "03",
+                    label: "闪烁"
+                },
+                {
+                    value: "04",
+                    label: "关闭",
+                }
+            ],
+            gzmsOptions: [
+                {
+                    value: "SETMD0",
+                    label: "激光关闭"
+                },
+                {
+                    value: "SETMD1",
+                    label: "常亮模式"
+                },
+                {
+                    value: "SETMD2",
+                    label: "间隔100ms闪烁模式"
+                },
+                {
+                    value: "SETMD3",
+                    label: "间隔200ms闪烁模式",
+                },
+                {
+                    value: "SETMD4",
+                    label: "间隔500ms闪烁模式",
+                },
+                {
+                    value: "SETMD5",
+                    label: "2次闪烁模式"
+                },
+                {
+                    value: "SETMD6",
+                    label: "SOS模式"
+                },
+                {
+                    value: "SETMD7",
+                    label: "自定义模式1",
+                },
+                {
+                    value: "SETMD8",
+                    label: "自定义模式2",
+                },
+                {
+                    value: "SETMD9",
+                    label: "自定义模式3",
+                }
+            ],
+            qbbData: {},
+            sbOptions: [],
+            deviceType: 1,
+            index: 1
+        }
+    },
+    async created() {
+        let loadData = await this.loadData(1);
+        // console.log('aa',loadData)
+        this.sbOptions = loadData;
+    },
+    methods: {
+        initData() {
+            // request({
+            //     url: `business/device/query?deviceType=2`,
+            //     method: "get",
+            // }).then((result) => {
+            //     if (result.code != 200) return Message.error(result?.msg);
+            //     this.sbOptions = result.data;
+
+            // }).catch(() => {
+            //     Message.error("查询可变信息标识失败");
+            // })
+
+        },
+        async changeDeviceType(value) {
+            this.deviceType = value;
+            console.log('value', value)
+            this.sbOptions = await this.loadData(value);
+        },
+        onAdd(id) {
+            this.tableData.push({
+                deviceType: 1,
+                searchRule: 1,
+                qbb: ''
+            })
+        },
+        onDel(index) {
+            if (this.tableData.length <= 1) {
+                return Message.warning('最后一项不可删除！');
+            }
+            this.tableData.splice(index, 1)
+        },
+        clickQbb(index) {
+            this.index = index;
+            this.qbbData = this.tableData[index].dcInfoBoardTemplate;
+            if (this.type == 1) {
+                this.isShowDialog = true;
+            }
+        },
+        onCloseDialog() {
+            this.isShowDialog = false;
+        },
+        dialogSubmit(data) {
+            this.tableData[this.index].qbb = data.content;
+            this.tableData[this.index].otherConfig = JSON.stringify(data);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.EventDetail {
+    display: flex;
+    gap: 9px;
+    width: 100%;
+    // height: 768px;
+    min-height: 50px;
+    margin-top: 5px;
+    flex-direction: column;
+
+    ::v-deep {
+        .el-table .el-table__cell {
+            padding: 0 5px;
+        }
+    }
+
+    .mjs {
+        display: flex;
+
+        >div {
+            margin-right: 10px;
+        }
+    }
+
+    .ms {
+        width: 160px;
+    }
+
+    .plhx {
+        display: flex;
+    }
+
+    ::v-deep {
+        .el-tag.el-tag--info {
+            max-width: 100px;
+        }
+
+        .el-range-editor--medium .el-range__icon,
+        .el-range-editor--medium .el-range__close-icon {
+            display: none;
+        }
+    }
+
+}
+
+.elButton {
+    background: #2ba8c3;
+    border-radius: 2px 2px 2px 2px;
+    color: #FFFFFF;
+}
+
+.elButton:hover,
+.elButton:focus {
+    background: #2ba8c3;
+    border-radius: 2px 2px 2px 2px;
+    border-color: #FFFFFF;
+    color: #FFFFFF;
+}
+</style>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -18,7 +18,8 @@
     </div>
 
     <!-- 确认弹窗 -->
-    <EventPlanDialog :visible="isShowDialog" :info="info" @close="onCloseAddNew" />
+    <EventPlanDialog :visible="isShowDialog" :info="info" :eventFormData="formData" :activeName="activeName"
+      @close="onCloseAddNew" />
 
     <template #footer>
       <Button style="padding: 0 24px;" @click.native="onDelete">误报</Button>

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/qbbDialog/index.vue

@@ -0,0 +1,308 @@
+<template>
+    <Dialog v-model="modelVisible" title="情报板确认">
+        <div class="EventAddPlanDialog">
+            <h4>预案内容</h4>
+            <dev class="listBox disPid">
+                <div class="tplItem">
+                    <!-- 模板内容 -->
+                    <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview>
+                    <!-- 操作按钮 -->
+                    <div class="infoBtnBox infoBtnBoxSm">
+                        <p class="btn">
+                            <!-- <el-radio v-model="radio1" :label="1" @input="changeRadio(1)" /> -->
+                        </p>
+                    </div>
+                </div>
+            </dev>
+            <h4>自动生成</h4>
+            <dev class="listBox disPid">
+                <div class="tplItem">
+                    <!-- 模板内容 -->
+                    <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="{}"></BoardTplPreview>
+                    <!-- 操作按钮 -->
+                    <div class="infoBtnBox infoBtnBoxSm">
+                        <p class="btn">
+                            <!-- <el-radio v-model="radio1" :label="2" @input="changeRadio(2)" /> -->
+                        </p>
+                    </div>
+                </div>
+            </dev>
+            <h4>情报板模版</h4>
+            <vuescroll :ops="scrollOptions" class="listBox">
+                <div v-for="(item) in templateAvailable" :key="item.dictValue">
+                    <!-- 原来是<el-collapse v-model="activeNames"> -->
+                    <h5>{{ item.dictLabel }}</h5>
+                    <div v-for="(itm, indx) in item.list" :key="indx" class="tplItem">
+                        <!-- 模板内容 -->
+                        <BoardTplPreview class="boardPreview" boardWH="1400*200" :tpl="itm"></BoardTplPreview>
+                        <!-- 操作按钮 -->
+                        <div class="infoBtnBox infoBtnBoxSm">
+                            <p class="btn">
+                                <el-radio v-model="radio1" :label="itm.id" @input="changeRadio(itm)" />
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </vuescroll>
+        </div>
+        <template #footer>
+            <Button style="background: #C9C9C9;padding:0 24px;"
+                @click.native="modelVisible = false, submitting = false">取消</Button>
+            <Button style="padding:0 24px;" @click.native="handleSubmit" :loading="submitting">确认</Button>
+        </template>
+    </Dialog>
+</template>
+
+<script>
+import vuescroll from "vuescroll";
+import scrollOptions from "@/common/scrollbar.js";
+import BoardTplPreview from "@screen/components/infoBoard/BoardTplPreview.vue";
+import Dialog from "@screen/components/Dialog/index";
+import Button from '@screen/components/Buttons/Button.vue';
+import { getTemplateList } from "@/api/board/template";
+import DeviceControlDialog from '../../../../../Home/components/Dialogs/DrivingGuidance/components/DeviceControlDialog.vue';
+
+export default {
+    name: 'qbbDialog',
+    components: {
+        Dialog,
+        Button,
+        vuescroll,
+        BoardTplPreview,
+        DeviceControlDialog
+    },
+    model: {
+        prop: 'visible',
+        event: 'close'
+    },
+    props: {
+        visible: Boolean,
+        type: Number,
+        info: {
+            type: Object,
+            default: () => { }
+        }
+    },
+    data() {
+        return {
+            submitting: false,
+            selectedSize: "",
+            scrollOptions,
+            templateAvailable: null,
+            tplCategory: [],
+            templateAll: [],
+            radio1: '',
+            itmData: {}
+        }
+    },
+    mounted() {
+        if (this.type == 1) {
+            this.initData();
+        }
+    },
+    computed: {
+        modelVisible: {
+            get() {
+                if (this.visible) {
+                    if (this.info && this.info.id) {
+                        this.radio1 = Number(this.info.id);
+                    }
+                }
+                return this.visible;
+            },
+            set(val) {
+                this.$emit('close', val)
+            }
+        },
+    },
+    methods: {
+        initData() {
+            if (this.tplCategory.length && this.templateAll.length) {
+                this.____setAvailableTemplate();
+            } else {
+                Promise.all([
+                    this.____getTemplateCategory(),
+                    this.____getAllTemplate(),
+                ]).then((res) => {
+                    this.____setAvailableTemplate();
+                });
+            }
+
+        },
+        // 获取信息模板分类
+        ____getTemplateCategory() {
+            return this.getDicts("iot_template_category").then((res) => {
+                this.tplCategory = res.data;
+            });
+        },
+        //获取全部模版
+        ____getAllTemplate() {
+            return getTemplateList().then((res) => {
+                this.templateAll = res.data;
+            });
+        },
+        // 设置当前设备可用的模板
+        ____setAvailableTemplate() {
+            this.templateAvailable = [];
+            this.tplCategory.forEach((item, index) => {
+                let arr = this.templateAll["" + index];
+                if (arr.length > 0) {
+                    let temp = [];
+                    arr.forEach((tpl) => {
+                        if (tpl.screenSize) {
+                            temp.push(tpl);
+                        }
+                    });
+                    if (temp.length > 0) {
+                        this.templateAvailable.push({
+                            ...item,
+                            list: temp,
+                        });
+                    }
+                }
+            });
+        },
+        changeRadio(data) {
+            this.itmData = data;
+        },
+        handleSubmit() {
+            this.modelVisible = false;
+            this.$emit('dialogSubmit', this.itmData);
+        }
+
+
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.listBox {
+    padding: 20px;
+
+    .tplItem {
+        margin-right: 14px;
+        display: flex;
+        align-items: stretch;
+        padding-bottom: 10px;
+
+        .boardPreview {
+            border: 1px solid rgba(61, 232, 255, 0.5);
+            // width: 560px;
+            // height:80px;
+            flex: 1;
+        }
+
+        .infoBtnBox {
+            &.infoBtnBoxSm {
+                width: 60px;
+            }
+
+            width: 110px;
+            height: 80px;
+            display: flex;
+            margin-left: 10px;
+            /* // border: solid 1px #05afe3; */
+            border: 1px solid rgba(61, 232, 255, 0.5);
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+            .btn {
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                width: 15px;
+                height: 30px;
+
+                &.btnApply {
+                    background-image: url(~@/assets/jihe/images/button/toLeft.svg);
+                }
+
+                &.btnEdit {
+                    background-image: url(~@/assets/jihe/images/button/edit.svg);
+                }
+
+                &.btnDelete {
+                    background-image: url(~@/assets/jihe/images/button/delete.svg);
+                }
+            }
+
+            i {
+                font-size: 24px;
+                color: #666;
+                padding-left: 4px;
+                cursor: pointer;
+                caret-color: rgba(0, 0, 0, 0);
+                user-select: none;
+            }
+
+            i:hover {
+                color: #05afe3;
+            }
+
+            .disabledClass {
+                pointer-events: none;
+                cursor: auto !important;
+                color: #ccc;
+            }
+        }
+    }
+
+    .controlBox {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        display: flex;
+        justify-content: center;
+    }
+
+    .el-collapse {
+        max-height: 100% !important;
+        overflow: auto;
+        border-bottom: none;
+        border-top: none;
+        padding: 0 0.5vw;
+    }
+}
+
+.disPid {
+    padding: 0 20px !important;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity .24s;
+}
+
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.EventAddPlanDialog {
+    gap: 9px;
+    width: 650px;
+    height: 700px;
+    display: flex;
+    flex-direction: column;
+
+    h4 {
+        margin: 0 0 5px 0;
+    }
+
+    ::v-deep {
+        .el-radio__label {
+            display: none;
+        }
+    }
+
+    .form {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .footer {
+        display: flex;
+        justify-content: end;
+        gap: 15px;
+    }
+}
+</style>