diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/components/ScopeTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/components/ScopeTable.vue
new file mode 100644
index 00000000..acf49709
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/components/ScopeTable.vue
@@ -0,0 +1,387 @@
+<template>
+    <div class="ScopeTable">
+        <el-row>
+            <el-col :span="7">
+                <!-- 设备类型 -->
+                <el-select v-model="tableInfo.deviceType" placeholder="" @change="changeDeviceType" transfer="true"
+                    :popper-append-to-body="false" style="width: 123px;">
+                    <el-option v-for="item in deviceOptions" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-col>
+            <el-col :span="1">
+            </el-col>
+            <el-col :span="7">
+                <!-- 规则条件 -->
+                <el-select v-model="tableInfo.searchRule" placeholder="" style="width: 123px;">
+                    <el-option v-for="item in zyOptions" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                </el-select>
+            </el-col>
+            <el-col :span="6">
+                <div v-if="tableInfo.searchRule == 1" style="width: 123px;height: 20px;"> </div>
+                <!-- 个 -->
+                <el-input-number v-if="tableInfo.searchRule == 2 || tableInfo.searchRule == 3"
+                    v-model="tableInfo.number" :min="0" :max="9999" style="width: 75px;"></el-input-number>
+                <span v-if="tableInfo.searchRule == 2 || tableInfo.searchRule == 3">个</span>
+                <!-- 公里 -->
+                <el-input-number v-if="tableInfo.searchRule == 4" v-model="tableInfo.number" :min="0" :max="9999"
+                    style="width: 75px;"></el-input-number>
+                <span v-if="tableInfo.searchRule == 4" style="width: 56px;">公里</span>
+            </el-col>
+
+            <el-col :span="4">
+                <div class="firstBtns">
+                    <ButtonGradient class="title-button" @click.native="$emit('onAdd')">
+                        <i class="el-icon-plus"></i>
+                    </ButtonGradient>
+                    <ButtonGradient class="title-button" @click.native="$emit('onDel', index)">
+                        <i class="el-icon-delete"></i>
+                    </ButtonGradient>
+                </div>
+            </el-col>
+        </el-row>
+
+        <el-row v-if="tableInfo.searchRule == 1">
+            <!-- 设备列表 -->
+            <el-select v-model="tableInfo.devList" placeholder="请选择设备" multiple collapse-tags>
+                <el-option v-for="item in sbOptions" :key="item.id" :label="item.label" :value="item.value">
+                </el-option>
+            </el-select>
+        </el-row>
+
+        <el-row>
+            <el-col :span="3">
+                <p>执行:</p>
+            </el-col>
+            <!-- 可变信息标识 -->
+            <el-col v-if="tableInfo.deviceType == 2" :span="8">
+                <el-select v-model="tableInfo.zx_operationType" placeholder="请选择">
+                    <el-option label="自定义发布" :value="1"></el-option>
+                    <el-option label="智能发布" :value="2"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 2 && tableInfo.zx_operationType == 1" :span="8">
+                <el-input @click.native="clickQbb('zx_content')" placeholder="请选择" v-model="tableInfo.zx_content"
+                    readonly>
+                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                </el-input>
+            </el-col>
+            <!-- 疲劳唤醒 -->
+            <el-col v-if="tableInfo.deviceType == 10" :span="8">
+                <el-select v-model="tableInfo.zx_name" placeholder="工作模式">
+                    <el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 10" :span="6">
+                <el-input-number placeholder="" v-model="tableInfo.zx_operationDuration" :min="0"
+                    :max="999"></el-input-number>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 10" :span="6">
+                <span>时长(分钟)</span>
+            </el-col>
+            <!-- 行车诱导 -->
+            <el-col v-if="tableInfo.deviceType == 12" :span="6">
+                <el-select v-model="tableInfo.zx_controlModel" placeholder="请选择模式" transfer="true"
+                    :popper-append-to-body="false">
+                    <el-option label="手动模式" value="00"></el-option>
+                    <el-option label="自动模式" value="01"></el-option>
+                    <el-option label="万年历" value="02"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 12 && tableInfo.zx_controlModel == '01'" :span="8">
+                <el-time-picker v-model="tableInfo.zx_time" is-range style="" range-separator="-" placeholder="选择时间"
+                    value-format="HH:mm" format="HH:mm">
+                </el-time-picker>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 12" :span="4">
+                <el-select v-model="tableInfo.zx_state" placeholder="工作状态">
+                    <el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-col>
+            <!-- 语音广播 -->
+            <el-col v-if="tableInfo.deviceType == 5" :span="8">
+                <el-select v-model="tableInfo.zx_operationType" placeholder="请选择">
+                    <el-option label="自定义发布" :value="1"></el-option>
+                    <el-option label="智能发布" :value="2"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 5 && tableInfo.zx_operationType == 1" :span="10">
+                <el-input v-model="tableInfo.zx_content" placeholder="请输入发布内容"></el-input>
+            </el-col>
+        </el-row>
+
+        <el-row v-if="tableInfo.deviceType !== 5">
+            <el-col :span="3">
+                <p>恢复:</p>
+            </el-col>
+            <!-- 可变信息标识 -->
+            <el-col v-if="tableInfo.deviceType == 2" :span="8">
+                <el-select v-model="tableInfo.hf_operationType" placeholder="请选择">
+                    <el-option label="自定义发布" :value="1"></el-option>
+                    <el-option label="还原上次" :value="2"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 2 && tableInfo.hf_operationType == 1" :span="8">
+                <el-input @click.native="clickQbb('hf_content')" placeholder="请选择" v-model="tableInfo.hf_content"
+                    readonly>
+                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
+                </el-input>
+            </el-col>
+            <!-- 疲劳唤醒 -->
+            <el-col v-if="tableInfo.deviceType == 10" :span="8">
+                <el-select v-model="tableInfo.hf_name" placeholder="工作模式">
+                    <el-option v-for="item in gzmsOptions" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 10" :span="6">
+                <el-input-number placeholder="" v-model="tableInfo.hf_operationDuration" :min="0"
+                    :max="999"></el-input-number>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 10" :span="6">
+                <span>时长(分钟)</span>
+            </el-col>
+            <!-- 行车诱导 -->
+            <el-col v-if="tableInfo.deviceType == 12" :span="6">
+                <el-select v-model="tableInfo.hf_controlModel" placeholder="请选择模式" transfer="true"
+                    :popper-append-to-body="false">
+                    <el-option label="手动模式" value="00"></el-option>
+                    <el-option label="自动模式" value="01"></el-option>
+                    <el-option label="万年历" value="02"></el-option>
+                </el-select>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 12 && tableInfo.hf_controlModel == '01'" :span="8">
+                <el-time-picker v-model="tableInfo.hf_time" is-range style="" range-separator="-" placeholder="选择时间"
+                    value-format="HH:mm" format="HH:mm">
+                </el-time-picker>
+            </el-col>
+            <el-col v-if="tableInfo.deviceType == 12" :span="4">
+                <el-select v-model="tableInfo.hf_state" placeholder="工作状态">
+                    <el-option v-for="item in gzztOptions" :key="item.value" :label="item.label"
+                        :value="item.value"></el-option>
+                </el-select>
+            </el-col>
+            <!-- 语音广播 -->
+            <!-- <el-col v-if="tableInfo.deviceType == 5" :span="4">
+                <el-select v-model="tableInfo.hf_operationType" placeholder="请选择">
+                    <el-option label="自定义发布" :value="1"></el-option>
+                    <el-option label="智能发布" :value="2"></el-option>
+                </el-select>
+            </el-col> -->
+            <el-col v-if="tableInfo.deviceType == 5" :span="12">
+                <el-input v-model="tableInfo.hf_content" placeholder="请输入发布内容"></el-input>
+            </el-col>
+        </el-row>
+
+        <!-- 情报板弹窗 -->
+        <QbbDialog :visible="isShowDialog" :info="qbbData" @close="onCloseDialog" @dialogSubmit="dialogSubmit" />
+    </div>
+</template>
+
+<script>
+import Table from '@screen/components/Table.vue';
+import Button from '@screen/components/Buttons/Button.vue';
+import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
+import request from "@/utils/request";
+import QbbDialog from "./qbbDialog.vue";
+import { Message } from 'element-ui'
+import { planDeviceOptions } from "@screen/utils/enum.js";
+import { defaultTableInfo } from "../data";
+
+export default {
+    name: 'ScopeTable',
+    components: {
+        Button,
+        Table,
+        QbbDialog,
+        ButtonGradient
+    },
+    model: {
+        prop: 'visible',
+        event: 'update:value'
+    },
+    // inject: ['loadData'],
+    props: {
+        visible: Boolean,
+        eventType: Number,
+        type: Number,
+        index: Number,
+        tableInfo: {
+            type: Object,
+            default: () => ({ ...defaultTableInfo })
+        }
+    },
+    data() {
+        return {
+            isShowDialog: false,
+            deviceOptions: planDeviceOptions,
+            zyOptions: [
+                {
+                    value: 1,
+                    label: '指定设备资源'
+                },
+                {
+                    value: 2,
+                    label: '事发上游最近'
+                },
+                {
+                    value: 3,
+                    label: '最近公里数'
+                },
+            ],
+            gzztOptions: [
+                {
+                    value: "01",
+                    label: "常亮"
+                },
+                {
+                    value: "02",
+                    label: "流水"
+                },
+                {
+                    value: "03",
+                    label: "闪烁"
+                },
+                {
+                    value: "04",
+                    label: "关闭",
+                }
+            ],
+            gzmsOptions: [
+                {
+                    value: "激光关闭",
+                    label: "激光关闭"
+                },
+                {
+                    value: "常亮模式",
+                    label: "常亮模式"
+                },
+                {
+                    value: "间隔100ms闪烁模式",
+                    label: "间隔100ms闪烁模式"
+                },
+                {
+                    value: "间隔200ms闪烁模式",
+                    label: "间隔200ms闪烁模式",
+                },
+                {
+                    value: "间隔500ms闪烁模式",
+                    label: "间隔500ms闪烁模式",
+                },
+                {
+                    value: "2次闪烁模式",
+                    label: "2次闪烁模式"
+                },
+                {
+                    value: "SOS模式",
+                    label: "SOS模式"
+                },
+                {
+                    value: "自定义模式1",
+                    label: "自定义模式1",
+                },
+                {
+                    value: "自定义模式2",
+                    label: "自定义模式2",
+                },
+                {
+                    value: "自定义模式3",
+                    label: "自定义模式3",
+                }
+            ],
+            deviceData: [],
+            qbbData: {},
+            sbOptions: [],
+            deviceType: 1,
+            clickQbbName: 1
+        }
+    },
+    watch: {
+        'tableInfo.deviceType': {
+            async handler(newValue) {
+                console.log('aaaaaaaaaaaaaaaaaa', newValue)
+                await this.loadData(newValue);
+                console.log('bbbbbbbbbbb', this.sbOptions)
+            },
+            immediate: true,
+        }
+    },
+    async mounted() {
+        // this.loadData(2);
+    },
+    methods: {
+        initData() {
+
+        },
+        async loadData(deviceType = 1) {
+            this.sbOptions = [];
+            let result = await request({
+                url: `business/device/query?deviceType=${deviceType}`,
+                method: "get",
+            });
+            if (result.code != 200) return Message.error(result?.msg);
+            if (deviceType == 1) {
+                result.data.filter((it) => it.iotDeviceId && it.childType !== "1-1").forEach(it => {
+                    this.sbOptions.push({ value: it.iotDeviceId, label: it.deviceName })
+                });
+            } else {
+                result.data.filter((it) => it.iotDeviceId).forEach(it => {
+                    this.sbOptions.push({ value: it.iotDeviceId, label: it.deviceName })
+                });
+            }
+        },
+        async changeDeviceType(value) {
+            this.deviceType = value;
+            console.log('value', value)
+            this.tableInfo.devList = [];
+            this.loadData(value);
+        },
+        clickQbb(name) {
+            this.clickQbbName = name;
+            // this.qbbData = this.tableData[index].dcInfoBoardTemplate;
+            this.isShowDialog = true;
+        },
+        onCloseDialog() {
+            this.isShowDialog = false;
+        },
+        dialogSubmit(data) {
+            console.log('qbbData', data)
+            this.tableInfo[this.clickQbbName] = data.content;
+            // this.tableData[this.index].otherConfig = JSON.stringify(data);
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.ScopeTable {
+    display: flex;
+    gap: 9px;
+    width: 100%;
+    // height: 768px;
+    min-height: 50px;
+    margin-top: 5px;
+    flex-direction: column;
+
+    p {
+        color: aqua;
+    }
+
+    .firstBtns {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    ::v-deep {
+        .el-select .el-select--medium {
+            margin-right: 5px;
+        }
+
+
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/components/qbbDialog.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/components/qbbDialog.vue
new file mode 100644
index 00000000..e170f34b
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/components/qbbDialog.vue
@@ -0,0 +1,279 @@
+<template>
+    <Dialog v-model="modelVisible" title="选择情报板" width="700px">
+      <div class="PlanQbbDialog">
+        <vuescroll :ops="scrollOptions" class="listBox">
+          <div v-for="item in templateAvailable" :key="item.dictValue">
+            <!-- 原来是<el-collapse v-model="activeNames"> -->
+            <h3>{{ item.dictLabel }}</h3>
+            <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";
+  
+  export default {
+    name: "qbbDialog",
+    components: {
+      Dialog,
+      Button,
+      vuescroll,
+      BoardTplPreview,
+    },
+    model: {
+      prop: "visible",
+      event: "close",
+    },
+    props: {
+      visible: Boolean,
+      info: {
+        type: Object,
+        default: () => { },
+      },
+    },
+    data() {
+      return {
+        submitting: false,
+        selectedSize: "",
+        scrollOptions,
+        templateAvailable: null,
+        tplCategory: [],
+        templateAll: [],
+        radio1: "",
+        itmData: {},
+      };
+    },
+    mounted() {
+      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;
+    }
+  }
+  
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 0.24s;
+  }
+  
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+  
+  .PlanQbbDialog {
+    gap: 9px;
+    width: 650px;
+    height: 510px;
+    display: flex;
+    flex-direction: column;
+  
+    .first,
+    .second,
+    .third {
+      padding: 5px 10px 8px;
+      background-color: #296887;
+      margin-bottom: 15px;
+  
+      .text {
+        margin-top: 12px;
+      }
+    }
+  
+    ::v-deep {
+      .el-radio__label {
+        display: none;
+      }
+    }
+  
+    .form {
+      flex: 1;
+      overflow-y: auto;
+    }
+  
+    .footer {
+      display: flex;
+      justify-content: end;
+      gap: 15px;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/data.js b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/data.js
new file mode 100644
index 00000000..775abffd
--- /dev/null
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/data.js
@@ -0,0 +1,9 @@
+// import { planDeviceOptions } from "@screen/utils/enum.js";
+
+export const defaultTableInfo = {
+  deviceType: 2,
+  searchRule: 1,
+  number: 0,
+  // zx_operationType: 2,
+  // hf_operationType: 2,
+};
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue
index 58a00de3..5a04dab9 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/commandDispatch/Cards/DeviceControl/index.vue
@@ -1,38 +1,177 @@
 <template>
   <Card class='DeviceControl' title="设备管控">
-    TODO
+    <div class="container">
+      <el-row v-for="(item, index) in tableData" :key="index" class="rowBlock">
+        <ScopeTable :tableInfo="item" :index="index" @onAdd="onAdd" @onDel="onDel"></ScopeTable>
+      </el-row>
+    </div>
+
+    <div class="foot">
+      <ButtonGradient class="special-button" style="background: rgb(229, 68, 73);" @click.native="handleSubmit(1)">
+        一键控制
+      </ButtonGradient>
+      <ButtonGradient class="special-button" style="background: rgb(250, 152, 56);" @click.native="handleSubmit(2)">
+        一键恢复
+      </ButtonGradient>
+    </div>
   </Card>
 </template>
 
 <script>
 import Card from "@screen/components/Card2/Card.vue";;
-
-import { merge } from "lodash";
+import ButtonGradient from "@screen/components/Buttons/ButtonGradient.vue";
+import ScopeTable from "./components/ScopeTable.vue";
 import { provideMixin } from "./../../mixin"
-
-
+import { defaultTableInfo } from "./data";
+import { Message } from 'element-ui'
+import request from "@/utils/request";
 
 export default {
   name: 'DeviceControl',
   mixins: [provideMixin],
   components: {
-    Card
+    Card,
+    ScopeTable,
+    ButtonGradient
   },
   data() {
     return {
-      data: null
+      planId: '',
+      tableData: []
     }
   },
   watch: {
-    data() {
-      
-    }
   },
   mounted() {
-
   },
   methods: {
-    
+    detailChange(eventId) {
+      this.initData(this.detailData);
+    },
+    initData(eventInfo) {
+      console.log('eventInfo', eventInfo)
+      request({
+        url: `business/plans/list/event/type`,
+        method: "post",
+        data: { ...eventInfo }
+      })
+        .then((result) => {
+          if (result.code != 200) return Message.error(result?.msg);
+          let data = result.data;
+          if (data.length == 0) {
+            this.tableData = [{ ...defaultTableInfo }];
+            return Message.warning('该事件暂无处置预案')
+          };
+
+          let dcExecuteAction = data[0].dcExecuteAction || [];
+          this.planId = data[0].id;
+
+          let dcArr = [];
+          dcExecuteAction.forEach((it) => {
+            let action = { ...it };
+            if (it.executeConfig) {
+              let executeConfig = JSON.parse(it.executeConfig);
+              let execute = this.mapKeys(executeConfig, 'zx_');
+              action = { ...action, ...execute };
+            }
+            if (it.recoverConfig) {
+              let recoverConfig = JSON.parse(it.recoverConfig);
+              let recover = this.mapKeys(recoverConfig, 'hf_');
+              action = { ...action, ...recover };
+            }
+            if (it.deviceList) {
+              action.devList = it.deviceList
+                .split(",")
+                .map((str) => str);
+            }
+
+            dcArr.push(action);
+          });
+          this.tableData = dcArr.length == 0 ? [{ ...defaultTableInfo }] : dcArr;
+
+          console.log("tableData", this.tableData);
+        })
+        .catch((err) => {
+          console.log(err);
+          Message.error("查询事件预案列表失败", err);
+        });
+    },
+    mapKeys(obj, prefix) {
+      return Object.keys(obj).reduce((result, key) => {
+        result[`${prefix}${key}`] = obj[key];
+        return result;
+      }, {});
+    },
+    onAdd() {
+      this.tableData.push({ ...defaultTableInfo })
+    },
+    onDel(index) {
+      if (this.tableData.length <= 1) {
+        return Message.warning('最后一项不可删除！');
+      }
+      this.tableData.splice(index, 1)
+    },
+    handleSubmit(value = 1) {
+      let dcArr = [];
+      this.tableData.forEach(item => {
+        let dcData = {
+          deviceType: item.deviceType,
+          searchRule: item.searchRule,
+          number: item.number
+        }
+        if (item.devList && item.devList.length > 0) {
+          dcData.deviceList = item.devList.join(",");
+        }
+        let zxData = {}, hfData = {};
+        Object.keys(item).forEach(key => {
+          if (/^zx_/.test(key)) {
+            let keyName = key.substring(3);
+            zxData[keyName] = item[key];
+          }
+          if (/^hf_/.test(key)) {
+            let keyName = key.substring(3);
+            hfData[keyName] = item[key];
+          }
+        })
+        if (item.deviceType == 12) {
+          zxData = this.formatData(zxData);
+          hfData = this.formatData(hfData);
+        }
+        dcData.executeConfig = JSON.stringify(zxData);
+        dcData.recoverConfig = JSON.stringify(hfData);
+
+        dcArr.push(dcData);
+      })
+
+      let reqData = {
+        operationType: value, //1-执行操作 2-恢复操作
+        dcEmergencyPlans: {
+          id: this.planId,
+          dcExecuteAction: dcArr
+        },
+        dcEvent: {
+          id: this.detailData.id,
+          eventType: this.detailData.eventType,
+          stakeMark: this.detailData.stakeMark,
+          direction: this.detailData.direction == "菏泽方向" ? '1': '3',
+        },
+      };
+      console.log("reqData", reqData);
+
+      // return;
+      request({
+        url: "/business/plans/event/confirm",
+        method: "post",
+        data: reqData,
+      })
+        .then((result) => {
+          if (result.code != 200) return Message.error(result?.msg);
+          Message.success("提交成功");
+        })
+        .catch(() => {
+          Message.error("提交失败");
+        })
+    },
   },
 
 }
@@ -47,5 +186,36 @@ export default {
     }
   }
 
+  .container {
+    height: 500px;
+    overflow-y: auto;
+
+    .rowBlock {
+      background-color: #296887;
+      padding: 5px 10px;
+      margin-bottom: 10px;
+    }
+
+  }
+
+  .foot {
+    display: flex;
+    justify-content: space-evenly;
+    margin-top: 10px;
+
+
+    .special-button {
+      width: 100px;
+
+      .icon {
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 20px;
+        height: 20px;
+        transition: all 0.3s linear;
+      }
+    }
+  }
+
 }
 </style>
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/ScopeTable.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/ScopeTable.vue
index bfd9003a..f2c6db75 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/ScopeTable.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/ScopeTable.vue
@@ -23,7 +23,7 @@
                 <!-- 设备列表 -->
                 <el-select v-if="tableInfo.searchRule == 1" v-model="tableInfo.devList" placeholder="请选择设备" multiple
                     collapse-tags>
-                    <el-option v-for="item in sbOptions" :key="item.id" :label="item.deviceName" :value="item.id">
+                    <el-option v-for="item in sbOptions" :key="item.id" :label="item.label" :value="item.value">
                     </el-option>
                 </el-select>
                 <!-- 个 -->
@@ -48,7 +48,8 @@
                 </el-select>
             </el-col>
             <el-col v-if="tableInfo.deviceType == 2 && tableInfo.zx_operationType == 1" :span="4">
-                <el-input @click.native="clickQbb('zx_content')" placeholder="请选择" v-model="tableInfo.zx_content" readonly>
+                <el-input @click.native="clickQbb('zx_content')" placeholder="请选择" v-model="tableInfo.zx_content"
+                    readonly>
                     <i slot="suffix" class="el-input__icon el-icon-search"></i>
                 </el-input>
             </el-col>
@@ -98,7 +99,7 @@
             </el-col>
         </el-row>
 
-        <el-row>
+        <el-row v-if="tableInfo.deviceType !== 5">
             <el-col :span="2">
                 <p>恢复操作:</p>
             </el-col>
@@ -110,7 +111,8 @@
                 </el-select>
             </el-col>
             <el-col v-if="tableInfo.deviceType == 2 && tableInfo.hf_operationType == 1" :span="4">
-                <el-input @click.native="clickQbb('hf_content')" placeholder="请选择" v-model="tableInfo.hf_content" readonly>
+                <el-input @click.native="clickQbb('hf_content')" placeholder="请选择" v-model="tableInfo.hf_content"
+                    readonly>
                     <i slot="suffix" class="el-input__icon el-icon-search"></i>
                 </el-input>
             </el-col>
@@ -195,7 +197,7 @@ export default {
         type: Number,
         tableInfo: {
             type: Object,
-            default: () => ({...defaultTableInfo})
+            default: () => ({ ...defaultTableInfo })
         }
     },
     data() {
@@ -283,23 +285,28 @@ export default {
         }
     },
     watch: {
-        // async tableData(newValue) {
-        //     console.log('newValue', newValue)
-        //     if (newValue) {
-        //         const item = this.tableData.find(it => it.searchRule == 1);
-        //         console.log('item', item);
-        //         if (item && item.deviceType) {
-        //             let loadData = await this.loadData(item.deviceType);
-        //             console.log('aa', loadData)
-        //             this.sbOptions = loadData;
-        //         }
-        //     }
-        // }
+        'tableInfo.deviceType': {
+            async handler(newValue) {
+                console.log('aaaaaaaaaaaaaaaaaa', newValue)
+                let loadData = await this.loadData(newValue);
+                // console.log('aa', loadData)
+                this.sbOptions = [];
+                loadData.forEach(it => {
+                    this.sbOptions.push({ value: it.iotDeviceId, label: it.deviceName })
+                })
+                console.log('bbbbbbbbbbb', this.sbOptions)
+            },
+            immediate: true,
+        }
     },
     async mounted() {
-        let loadData = await this.loadData(2);
-        // console.log('aa', loadData)
-        this.sbOptions = loadData;
+        // if(this.type == )
+        // let loadData = await this.loadData(2);
+        // // console.log('aa', loadData)
+        // this.sbOptions = [];
+        // loadData.forEach(it => {
+        //     this.sbOptions.push({ value: it.iotDeviceId, label: it.deviceName })
+        // })
     },
     methods: {
         initData() {
@@ -308,7 +315,11 @@ export default {
         async changeDeviceType(value) {
             this.deviceType = value;
             console.log('value', value)
-            this.sbOptions = await this.loadData(value);
+            let loadData = await this.loadData(value);
+            this.sbOptions = [];
+            loadData.forEach(it => {
+                this.sbOptions.push({ value: it.iotDeviceId, label: it.deviceName })
+            })
         },
         onAdd(id) {
             this.tableData.push({
@@ -332,7 +343,7 @@ export default {
             this.isShowDialog = false;
         },
         dialogSubmit(data) {
-            console.log('qbbData',data)
+            console.log('qbbData', data)
             this.tableInfo[this.clickQbbName] = data.content;
             // this.tableData[this.index].otherConfig = JSON.stringify(data);
         }
diff --git a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
index ef62be4a..37a1bb2e 100644
--- a/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
+++ b/ruoyi-ui/src/views/JiHeExpressway/pages/control/event/plan/addAndEditDialog/index.vue
@@ -192,7 +192,7 @@ export default {
             if (it.deviceList) {
               action.devList = it.deviceList
                 .split(",")
-                .map((str) => Number(str));
+                .map((str) => str);
             }
 
             dcArr.push(action);
@@ -226,9 +226,9 @@ export default {
       });
       if (result.code != 200) return Message.error(result?.msg);
       if (deviceType == 1) {
-        this.deviceData = result.data.filter((it) => it.childType !== "1-1");
+        this.deviceData = result.data.filter((it) => it.iotDeviceId && it.childType !== "1-1");
       } else {
-        this.deviceData = result.data;
+        this.deviceData = result.data.filter((it) => it.iotDeviceId);
       }
       return this.deviceData;
     },
@@ -273,7 +273,7 @@ export default {
           let dcArr = [];
           this.tableData.forEach(item => {
             let dcData = {
-              id: null,
+              id: this.dialogType == 1 ? null : item.id,
               deviceType: item.deviceType,
               searchRule: item.searchRule,
               number: item.number