diff --git a/src/components/home/leftFive.vue b/src/components/home/leftFive.vue
new file mode 100644
index 0000000..cc5a191
--- /dev/null
+++ b/src/components/home/leftFive.vue
@@ -0,0 +1,247 @@
+<template>
+    <div class="edge-device-page">
+        <div class="inner-tit">
+            <img src="../../assets/img/lef-badge.png" alt="" />
+            <div>施工环境</div>
+            <div class="select">
+                <el-select
+                    v-model="deviceVal"
+                    clearable
+                    filterable
+                    placeholder="请选择"
+                    @change="deviceChange"
+                    style="border: none"
+                >
+                    <el-option
+                        v-for="item in deviceRange"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </div>
+        </div>
+        <div class="single-wrapper">
+            <div class="single-icon">
+                <span style="color: #42c8e3"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[8].jcValue
+                            : ''
+                    }}°C</span
+                >
+                <span>温度</span>
+                <img src="../../assets/img/temp.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #fda496"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[7].jcValue
+                            : ''
+                    }}m/s</span
+                >
+                <span>风速</span>
+                <img src="../../assets/img/wind.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #87d674"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[9].jcValue
+                            : ''
+                    }}%rh</span
+                >
+                <span>湿度</span>
+                <img src="../../assets/img/wet.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #f2ad49"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[5].jcValue
+                            : ''
+                    }}db</span
+                >
+                <span>噪声</span>
+                <img src="../../assets/img/loud.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #9634cc"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[3].jcValue
+                            : ''
+                    }}/ugm3</span
+                >
+                <span>PM2.5</span>
+                <img src="../../assets/img/pm2.5.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #1db1c0"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[4].jcValue
+                            : ''
+                    }}/ugm3</span
+                >
+                <span>PM10</span>
+                <img src="../../assets/img/pm10.png" alt="" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    queryDeviceByProApi,
+    queryEnvironmentInfoByIdApi,
+    queryChartsInfoByIdApi,
+    queryWarnInfoByIdApi,
+} from '@/api/substation/substation'
+
+export default {
+    props: {
+        proId: {
+            type: Number,
+            default: undefined,
+        },
+    },
+    name: 'leftFive',
+    components: {},
+    data() {
+        return {
+            deviceVal: '',
+            deviceRange: [],
+            environmentInfoList: undefined,
+        }
+    },
+    created() {},
+    mounted() {},
+    // 监听 proId 的变化, 当 proId 变化并且有值时, 获取设备数据
+    watch: {
+        proId: {
+            handler: function (val) {
+                if (val) {
+                    this.getDeviceData(val)
+                } else {
+                    this.deviceVal = ''
+                    this.deviceRange = []
+                    this.environmentInfoList = undefined
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        async getDeviceData(proId) {
+            console.log('🚀 ~ getDeviceData-调用了 ~ proId:', proId)
+            let res = await queryDeviceByProApi({
+                proId,
+                devType: 116,
+            })
+            console.log('🚀 ~ getDeviceData ~ res:', res)
+            if (res.data.data.length > 0) {
+                this.deviceVal = res.data.data[0].devId
+                this.deviceRange = res.data.data.map((item) => {
+                    return {
+                        label: item.devName,
+                        value: item.devId,
+                    }
+                })
+                await this.getEnvironmentData(this.deviceVal)
+            } else {
+                this.deviceVal = ''
+                this.deviceRange = []
+                this.environmentInfoList = undefined
+            }
+        },
+        async getEnvironmentData(devId) {
+            console.log('🚀 ~ getEnvironmentData ~ devId:', devId)
+            let res = await queryEnvironmentInfoByIdApi({
+                devId,
+            })
+            console.log('res-->', res)
+            if (res.data.data.length > 0) {
+                this.environmentInfoList = res.data.data
+            } else {
+                this.environmentInfoList = undefined
+            }
+        },
+        deviceChange(e) {
+            console.log(e)
+            this.getEnvironmentData(e)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@font-face {
+    font-family: 'YouShe';
+    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
+}
+
+.edge-device-page {
+    height: 100%;
+    background-color: #f3f7ff;
+    box-sizing: border-box;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #eff2fc;
+    box-shadow: 2px 2px 2px #d9e0f3;
+
+    .inner-tit {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 20px;
+        background-color: #eff4fe;
+        display: flex;
+        align-items: center;
+        color: #000;
+        font-size: 20px;
+        font-family: 'YouShe', sans-serif;
+        box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
+            -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
+        margin-bottom: 15px;
+
+        img {
+            margin-right: 10px;
+        }
+    }
+    .select {
+        margin-left: 20px;
+    }
+
+    .single-wrapper {
+        margin-top: 100px;
+        display: flex;
+        flex: 1;
+        justify-content: space-around;
+
+        .single-icon {
+            width: 12%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #000;
+
+            span:first-child {
+                font-size: 24px;
+                padding-bottom: 3px;
+            }
+
+            span:nth-child(2) {
+                font-size: 18px;
+            }
+
+            img {
+                width: 90%;
+                height: 90%;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/home/leftSeven.vue b/src/components/home/leftSeven.vue
new file mode 100644
index 0000000..a738981
--- /dev/null
+++ b/src/components/home/leftSeven.vue
@@ -0,0 +1,226 @@
+<template>
+    <div class="edge-device-page">
+        <div class="inner-tit">
+            <img src="../../assets/img/lef-badge.png" alt="" />
+            <div>基坑检测</div>
+            <div class="select">
+                <el-select
+                    v-model="pitVal"
+                    clearable
+                    filterable
+                    placeholder="请选择"
+                    @change="pitChange"
+                >
+                    <el-option
+                        v-for="item in pitRange"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    />
+                </el-select>
+            </div>
+        </div>
+        <div class="work-icons">
+            <div class="single-icon">
+                <span style="color: #3bc7e3"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[0].jcValue
+                            : ''
+                    }}<span style="font-size: 18px">%VOL</span></span
+                >
+                <span>含氧量</span>
+                <img src="../../assets/img/O2.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #7588ff"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[1].jcValue
+                            : ''
+                    }}<span style="font-size: 18px">%PPM</span></span
+                >
+                <span>一氧化碳</span>
+                <img src="../../assets/img/CO.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #62c560"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[2].jcValue
+                            : ''
+                    }}<span style="font-size: 18px">%LEL</span></span
+                >
+                <span>可燃气体</span>
+                <img src="../../assets/img/fire.png" alt="" />
+            </div>
+            <div class="single-icon">
+                <span style="color: #f68f84"
+                    >{{
+                        environmentInfoList
+                            ? environmentInfoList[3].jcValue
+                            : ''
+                    }}<span style="font-size: 18px">%PPM</span></span
+                >
+                <span>硫化氢</span>
+                <img src="../../assets/img/H2S.png" alt="" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    queryDeviceByProApi,
+    queryPitDataApi,
+    queryLimitSpaceApi,
+    queryNewLimitSpaceApi,
+    queryEnvironmentInfoByIdApi,
+} from '@/api/substation/substation'
+
+export default {
+    props: {
+        proId: {
+            type: Number,
+            default: undefined,
+        },
+    },
+    name: 'LeftSeven',
+    components: {},
+    data() {
+        return {
+            environmentInfoList: undefined,
+            currentPit: undefined,
+            pitVal: undefined,
+            pitRange: [],
+            // 暂定 0离线 1报警 2在线
+            pitList: [],
+            todayRecordList: [],
+        }
+    },
+    created() {},
+    mounted() {},
+    watch: {
+        proId: {
+            handler: function (val) {
+                console.log('🚀 ~ watch--子组件 val:', val)
+                if (val) {
+                    this.getDeviceData(val)
+                } else {
+                    this.pitVal = ''
+                    this.pitRange = []
+                    this.environmentInfoList = undefined
+                }
+            },
+            immediate: true,
+        },
+    },
+    methods: {
+        async getDeviceData(proId) {
+            let res = await queryDeviceByProApi({
+                proId,
+                devType: 119,
+            })
+            if (res.data.data.length> 0) {
+                this.pitVal = res.data.data[0].devId
+                this.pitList = res.data.data
+                this.pitRange = res.data.data.map((item) => {
+                    return {
+                        label: item.devName,
+                        value: item.devId,
+                    }
+                })
+                await this.getEnvironmentData(this.pitVal)
+            } else {
+                this.pitVal = ''
+                this.pitRange = []
+                this.environmentInfoList = undefined
+            }
+        },
+        async getEnvironmentData(devId) {
+            let res = await queryEnvironmentInfoByIdApi({
+                devId,
+            })
+            if (res.data.data.length > 0) {
+                this.environmentInfoList = res.data.data
+            } else {
+                this.environmentInfoList = undefined
+            }
+        },
+        pitChange(e) {
+            console.log(e)
+            this.getEnvironmentData(e)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@font-face {
+    font-family: 'YouShe';
+    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
+}
+
+.edge-device-page {
+    height: 100%;
+    background-color: #f3f7ff;
+    box-sizing: border-box;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #eff2fc;
+    box-shadow: 2px 2px 2px #d9e0f3;
+
+    .inner-tit {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 20px;
+        background-color: #eff4fe;
+        display: flex;
+        align-items: center;
+        color: #000;
+        font-size: 20px;
+        font-family: 'YouShe', sans-serif;
+        box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
+            -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
+        margin-bottom: 15px;
+
+        img {
+            margin-right: 10px;
+        }
+    }
+    .select {
+        margin-left: 20px;
+    }
+
+    .work-icons {
+        margin-top: 100px;
+        display: flex;
+        flex: 1;
+        justify-content: space-around;
+
+        .single-icon {
+            width: 12%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #000;
+
+            span:first-child {
+                font-size: 24px;
+                padding-bottom: 3px;
+            }
+
+            span:nth-child(2) {
+                font-size: 18px;
+            }
+
+            img {
+                width: 90%;
+                height: 90%;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/components/home/leftSix.vue b/src/components/home/leftSix.vue
new file mode 100644
index 0000000..92a7b2a
--- /dev/null
+++ b/src/components/home/leftSix.vue
@@ -0,0 +1,456 @@
+<template>
+    <div class="edge-device-page">
+        <div class="inner-tit">
+            <img src="../../assets/img/lef-badge.png" alt="" />
+            <div>组塔检测</div>
+        </div>
+        <div class="tower-info">
+            <div class="tower-lef">
+                <div class="lef-spin">
+                    <div>
+                        <h4 style="background-color: #d8d8d8"></h4>
+                        离线
+                    </div>
+                    <div>
+                        <h4 style="background-color: #f31111"></h4>
+                        报警
+                    </div>
+                    <div>
+                        <h4 style="background-color: #39ce10"></h4>
+                        在线
+                    </div>
+                </div>
+                <span>倾角监测设备</span>
+                <div class="lef-tower-pic">
+                    <div
+                        :class="[
+                            'single-tower',
+                            { isActive: currentAngleTower === item.devId },
+                        ]"
+                        v-for="item in towerAngleList"
+                        :key="item.devId"
+                        @click="selTowerAngle(item)"
+                    >
+                        <img
+                            v-if="item.devStatus === 0"
+                            src="../../assets/img/offline.png"
+                            alt=""
+                        />
+                        <img
+                            v-if="item.devWarn === 1"
+                            src="../../assets/img/alerting.png"
+                            alt=""
+                        />
+                        <img
+                            v-if="item.devStatus === 1 && item.devWarn === 0"
+                            src="../../assets/img/inline.png"
+                            alt=""
+                        />
+                    </div>
+                </div>
+                <span>拉力监测设备</span>
+                <div class="lef-tower-pic">
+                    <div
+                        :class="[
+                            'single-tower',
+                            { isActive: currentPullTower === item.devId },
+                        ]"
+                        v-for="item in towerPullList"
+                        :key="item.devId"
+                        @click="selTowerPull(item)"
+                    >
+                        <img
+                            v-if="item.devStatus === 0"
+                            src="../../assets/img/offline.png"
+                            alt=""
+                        />
+                        <img
+                            v-if="item.devWarn === 1"
+                            src="../../assets/img/alerting.png"
+                            alt=""
+                        />
+                        <img
+                            v-if="item.devStatus === 1 && item.devWarn === 0"
+                            src="../../assets/img/inline.png"
+                            alt=""
+                        />
+                    </div>
+                </div>
+            </div>
+            <div class="tower-rig">
+                <div class="dip-angle">
+                    <div
+                        class="upper-pic"
+                        style="
+                            background: linear-gradient(
+                                135deg,
+                                #eaefff,
+                                #e2e6fb,
+                                #dadcf5
+                            );
+                            border: 1px solid #9ebfdc;
+                        "
+                    >
+                        <img src="../../assets/img/dip-angle.png" alt="" />
+                        <div>
+                            <span>倾角</span>
+                            <span style="color: #854dfa"
+                                >{{ angleFirst }}°</span
+                            >
+                        </div>
+                    </div>
+                    <div class="lower-info">
+                        <div v-for="item in angleList" :key="item.jcName">
+                            <span>{{ item.jcTime }}</span>
+                            <span>{{ item.jcValue }}{{ item.jcUnit }}</span>
+                        </div>
+                        <!--              <div>
+                <span>2024.08.02 12:01</span>
+                <span>30°</span>
+              </div>
+              <div>
+                <span>2024.08.02 12:01</span>
+                <span>30°</span>
+              </div>-->
+                    </div>
+                </div>
+                <div class="pull-force">
+                    <div
+                        class="upper-pic"
+                        style="
+                            background: linear-gradient(
+                                135deg,
+                                #eaefff,
+                                #dbecfd,
+                                #c8dffd
+                            );
+                            border: 1px solid #afcce9;
+                        "
+                    >
+                        <img src="../../assets/img/pull.png" alt="" />
+                        <div>
+                            <span>拉力</span>
+                            <span style="color: #418cff">{{ pullFirst }}N</span>
+                        </div>
+                    </div>
+                    <div class="lower-info">
+                        <div v-for="item in pullList" :key="item.jcName">
+                            <span>{{ item.jcTime }}</span>
+                            <span>{{ item.jcValue }}{{ item.jcUnit }}</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import {
+    queryDeviceByProApi,
+    queryTowerTodayApi,
+    queryTowerWarnApi,
+    queryEnvironmentInfoByIdApi,
+} from '@/api/substation/substation'
+export default {
+    components: {},
+    props: {
+        proId: {
+            type: Number,
+            default: undefined,
+        },
+    },
+    name: 'leftSix',
+    data() {
+        return {
+            currentAngleTower: undefined,
+            currentPullTower: undefined,
+            // 暂定 0离线 1在线
+            towerAngleList: [],
+            towerPullList: [],
+            angleFirst: undefined,
+            pullFirst: undefined,
+            angleList: [],
+            pullList: [],
+        }
+    },
+    created() {},
+
+    mounted() {},
+    watch: {
+        proId: {
+            handler: function (val) {
+                if (val) {
+                    this.getDeviceData(val)
+                } else {
+                    this.towerAngleList = []
+                    this.towerPullList = []
+                }
+            },
+            immediate: true,
+        },
+        // 监听 towerAngleList和towerPullList 的变化 当变化时, 清空angleFirst, pullFirst, angleList, pullList
+        towerAngleList: {
+            handler: function (val) {
+                this.angleFirst = undefined
+                this.angleList = []
+            },
+            deep: true,
+        },
+        towerPullList: {
+            handler: function (val) {
+                this.pullFirst = undefined
+                this.pullList = []
+            },
+            deep: true,
+        },
+    },
+    methods: {
+        async getDeviceData(proId) {
+            let angleRes = await queryDeviceByProApi({
+                proId,
+                devType: 117,
+            })
+            this.towerAngleList = angleRes.data.data
+            let pullRes = await queryDeviceByProApi({
+                proId,
+                devType: 118,
+            })
+            this.towerPullList = pullRes.data.data
+        },
+        async getEnvironmentData(devId, type) {
+            let res = await queryEnvironmentInfoByIdApi({
+                devId,
+            })
+            console.log('🚀 ~ getEnvironmentData ~ res:', res)
+            if (type === '117') {
+                if (res.data.data.length > 0) {
+                    this.angleFirst = res.data.data[0].jcValue
+                    this.angleList = res.data.data.filter(
+                        (item) => item.jcUnit === '°',
+                    )
+                } else {
+                    this.angleFirst = ''
+                    this.angleList = []
+                }
+            } else if (type === '118') {
+                if (res.data.data.length > 0) {
+                    this.pullFirst = res.data.data[0].jcValue
+                    this.pullList = res.data.data.filter(
+                        (item) => item.jcUnit === 'N',
+                    )
+                } else {
+                    this.pullFirst = ''
+                    this.pullList = []
+                }
+            }
+        },
+        selTowerAngle(val) {
+            console.log(val)
+            this.currentAngleTower = val.devId
+            this.getEnvironmentData(val.devId, val.devType)
+        },
+        selTowerPull(val) {
+            this.currentPullTower = val.devId
+            this.getEnvironmentData(val.devId, val.devType)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+@font-face {
+    font-family: 'YouShe';
+    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
+}
+
+.edge-device-page {
+    height: 100%;
+    background-color: #f3f7ff;
+    box-sizing: border-box;
+    padding: 15px 20px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid #eff2fc;
+    box-shadow: 2px 2px 2px #d9e0f3;
+
+    .inner-tit {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 20px;
+        background-color: #eff4fe;
+        display: flex;
+        align-items: center;
+        color: #000;
+        font-size: 20px;
+        font-family: 'YouShe', sans-serif;
+        box-shadow: -3px -3px 2px #cbdcf6, 2px 2px 2px #f8f9fe,
+            -2px -2px 2px #cbdcf6, 2px 2px 2px #f8f9fe;
+        margin-bottom: 15px;
+
+        img {
+            margin-right: 10px;
+        }
+    }
+
+    .tower-info {
+        flex: 1;
+        display: flex;
+        height: 90%;
+
+        .tower-lef {
+            width: 40%;
+            height: 100%;
+            margin-right: 15px;
+            display: flex;
+            flex-direction: column;
+
+            .lef-spin {
+                width: 100%;
+                height: 4%;
+                display: flex;
+                align-items: center;
+                color: #000;
+                font-size: 16px;
+                margin-bottom: 15px;
+
+                div {
+                    display: flex;
+                    align-items: center;
+                    margin-right: 12px;
+
+                    h4 {
+                        width: 15px;
+                        height: 15px;
+                        margin-right: 12px;
+                    }
+                }
+            }
+
+            span {
+                padding: 15px 0;
+                color: #000;
+                font-size: 16px;
+            }
+
+            .lef-tower-pic {
+                width: 100%;
+                height: 350px;
+                box-sizing: border-box;
+                padding: 20px;
+                display: flex;
+                justify-content: space-around;
+                flex-wrap: wrap;
+                overflow-y: auto;
+
+                .single-tower {
+                    width: 35%;
+                    height: 135px;
+                    border-radius: 20px;
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    img {
+                        width: 60%;
+                        height: 70%;
+                    }
+                }
+
+                .isActive {
+                    background: linear-gradient(
+                        135deg,
+                        #eef7ff,
+                        #ddedff,
+                        #c2dcff
+                    );
+                    border: 1px solid #b8d2ed;
+                }
+            }
+        }
+
+        .tower-rig {
+            flex: 1;
+            background-color: #ebf2fc;
+            border: 1px solid #cadff3;
+            border-radius: 10px;
+            box-sizing: border-box;
+            padding: 25px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .dip-angle,
+            .pull-force {
+                width: 100%;
+                height: 48%;
+                border-radius: 10px;
+                border: 1px dashed #a3c2de;
+                box-sizing: border-box;
+                padding: 20px;
+                display: flex;
+                flex-direction: column;
+
+                .upper-pic {
+                    width: 100%;
+                    height: 35%;
+                    border-radius: 10px;
+                    box-sizing: border-box;
+                    padding: 4% 18%;
+                    display: flex;
+                    justify-content: space-between;
+                    margin-bottom: 15px;
+
+                    img {
+                        width: 40%;
+                        height: 100%;
+                        margin-right: 50px;
+                    }
+
+                    div {
+                        flex: 1;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-around;
+                        font-size: 24px;
+                        color: #000;
+                    }
+                }
+
+                .lower-info {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: space-around;
+                    overflow-y: auto;
+
+                    div {
+                        width: 100%;
+                        box-sizing: border-box;
+                        padding: 15px 50px;
+                        border-bottom: 1px dashed #cccfd4;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        span:first-child {
+                            font-size: 18px;
+                            color: #646566;
+                        }
+
+                        span:last-child {
+                            font-size: 24px;
+                            color: #000;
+                        }
+                    }
+
+                    div:last-child {
+                        border-bottom: none;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/Workbench/components/workbenchEdit.vue b/src/views/Workbench/components/workbenchEdit.vue
index 7afbe04..76245ba 100644
--- a/src/views/Workbench/components/workbenchEdit.vue
+++ b/src/views/Workbench/components/workbenchEdit.vue
@@ -108,6 +108,9 @@ import VueGridLayout from 'vue-grid-layout'
 import LeftOne from '@/components/home/leftOne.vue'
 import LeftTwo from '@/components/home/leftTwo.vue'
 import LeftThree from '@/components/home/leftThree.vue'
+import LeftFive from '@/components/home/leftFive.vue'
+import LeftSix from '@/components/home/leftSix.vue'
+import LeftSeven from '@/components/home/leftSeven.vue'
 import RightOne from '@/components/home/rightOne.vue'
 import RightTwo from '@/components/home/rightTwo.vue'
 import CountryMap from '@/components/home/countryMap.vue'
@@ -124,7 +127,10 @@ export default {
         LeftThree,
         RightOne,
         RightTwo,
-        CountryMap
+        CountryMap,
+        LeftFive,
+        LeftSix,
+        LeftSeven
     },
     computed: {
       searchComp() {
@@ -430,6 +436,33 @@ export default {
                     isAccord: '1*1',
                     rigCont: '2*2'
                 },
+                {
+                    id: 7,
+                    name: '环境检测',
+                    componentName: 'LeftFive',
+                    w: 3,
+                    h: 1,
+                    isAccord: '1*1',
+                    rigCont: '1*3'
+                },
+                {
+                    id: 8,
+                    name: '组塔检测',
+                    componentName: 'LeftSix',
+                    w: 2,
+                    h: 2,
+                    isAccord: '1*1',
+                    rigCont: '2*2'
+                },
+                {
+                    id: 9,
+                    name: '基坑检测',
+                    componentName: 'LeftSeven',
+                    w: 3,
+                    h: 1,
+                    isAccord: '1*1',
+                    rigCont: '1*3'
+                }
             ],
             rowHeight: 0,
             previewLayout: [],
diff --git a/src/views/Workbench/components/workbenchTemp.vue b/src/views/Workbench/components/workbenchTemp.vue
index 1b1429f..493932c 100644
--- a/src/views/Workbench/components/workbenchTemp.vue
+++ b/src/views/Workbench/components/workbenchTemp.vue
@@ -22,7 +22,7 @@
             >
                 <div class="item-box">
                     <component v-if="item.componentName === 'CountryMap'" :is="item.componentName" :send-geo="sendGeo"/>
-                    <component v-else :is="item.componentName" @openDialog="handleDialog"/>
+                    <component v-else :is="item.componentName" @openDialog="handleDialog" :proId="proId"/>
                 </div>
             </GridItem>
         </GridLayout>
@@ -46,6 +46,9 @@ import ItemSix from './item-six.vue'
 import LeftOne from '@/components/home/leftOne.vue'
 import LeftTwo from '@/components/home/leftTwo.vue'
 import LeftThree from '@/components/home/leftThree.vue'
+import LeftFive from '@/components/home/leftFive.vue'
+import LeftSix from '@/components/home/leftSix.vue'
+import LeftSeven from '@/components/home/leftSeven.vue'
 import RightOne from '@/components/home/rightOne.vue'
 import RightTwo from '@/components/home/rightTwo.vue'
 import CountryMap from '@/components/home/countryMap.vue'
@@ -57,14 +60,18 @@ import {
   querySubProjInfoApi
 } from '@/api/substation/substation'
 export default {
-    /* props: {
-        layoutList: {
-            type: Array,
-            default: () => [
-              // 第一行
-            ],
-        },
-    }, */
+    props: {
+        // layoutList: {
+        //     type: Array,
+        //     default: () => [
+        //       // 第一行
+        //     ],
+        // },
+        proId: {
+            type: Number,
+            default: undefined,
+        }
+    },
     components: {
         GridLayout: VueGridLayout.GridLayout,
         GridItem: VueGridLayout.GridItem,
@@ -74,7 +81,10 @@ export default {
         RightOne,
         RightTwo,
         CountryMap,
-        CommonDialog
+        CommonDialog,
+        LeftFive,
+        LeftSix,
+        LeftSeven
     },
     data() {
         return {
@@ -196,8 +206,20 @@ export default {
         }
     },
     created() {
+      setTimeout(() => {
+        console.log('created-->工程id', this.proId)
+      }, 200)
       this.getGeoData()
     },
+    // 监听工程id变化
+    watch: {
+      proId: {
+        handler: function (val) {
+          console.log('workbench--watch-->工程id', val)
+        },
+        immediate: true
+      }
+    },
     mounted() {
         this.getTableData()
         this.rowHeight = (this.$refs['workbenchEditRef'].clientHeight - 65) / 12
diff --git a/src/views/Workbench/index.vue b/src/views/Workbench/index.vue
index 1387276..b6c1fb3 100644
--- a/src/views/Workbench/index.vue
+++ b/src/views/Workbench/index.vue
@@ -1,11 +1,26 @@
 <template>
     <!-- 工作台 -->
     <div class="workbench-container">
+        <div class="select">
+            <el-select
+                v-model="proId"
+                filterable
+                placeholder="请选择"
+                style="border: none"
+            >
+                <el-option
+                    v-for="item in proOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                />
+            </el-select>
+        </div>
         <el-button
-          size="small"
-          class="edit-btn"
-          @click="handleEditWorkbench"
-          v-if="!idEdit"
+            size="small"
+            class="edit-btn"
+            @click="handleEditWorkbench"
+            v-if="!idEdit"
             >编辑工作台</el-button
         >
 
@@ -15,7 +30,7 @@
             @handleSubmit="handleSubmit"
             style="margin-top: 10px"
         />
-        <WorkbenchTemp  v-else />
+        <WorkbenchTemp v-else :proId="proId"/>
     </div>
 </template>
 
@@ -28,6 +43,7 @@ import LeftThree from '@/components/home/leftThree.vue'
 import RightOne from '@/components/home/rightOne.vue'
 import RightTwo from '@/components/home/rightTwo.vue'
 import CountryMap from '@/components/home/countryMap.vue'
+import { queryProjListApi } from '@/api/tableApis'
 
 export default {
     components: {
@@ -43,14 +59,14 @@ export default {
     data() {
         return {
             idEdit: false,
-
+            proId: undefined,
+            proOptions: [],
         }
     },
     mounted() {
-      // this.getTableData()
+        this.getTableData()
     },
     methods: {
-
         handleEditWorkbench() {
             this.idEdit = true
         },
@@ -62,6 +78,24 @@ export default {
             // this.getTableData()
             this.idEdit = false
         },
+        // 获取工程列表
+        async getTableData() {
+            const params = {
+                pageNum: 1,
+                pageSize: 999,
+            }
+            let res = await queryProjListApi(params)
+            console.log('🚀 ~ 获取工程列表 ~ res:', res)
+            if (res.data.code === 200) {
+                this.proOptions = res.data.rows.map((item) => {
+                    return {
+                        value: item.id,
+                        label: item.proName,
+                    }
+                })
+                this.proId = res.data.rows[0].id
+            }
+        },
     },
 }
 </script>
@@ -79,5 +113,12 @@ export default {
         right: 10px;
         font-size: 16px;
     }
+
+    .select {
+        position: absolute;
+        top: -35px;
+        right: 150px;
+        font-size: 16px;
+    }
 }
 </style>