From ab92d42343b299e5ba10aa4065b3eea63686a1c9 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Mon, 31 Mar 2025 09:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=96=BD=E5=B7=A5=E5=AE=89?=
 =?UTF-8?q?=E5=85=A8=E8=B7=9D=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/substation/powerWorkDetect.vue | 984 ++++++++++--------
 1 file changed, 557 insertions(+), 427 deletions(-)

diff --git a/src/components/substation/powerWorkDetect.vue b/src/components/substation/powerWorkDetect.vue
index 6fe8d1a5..3a28a4dc 100644
--- a/src/components/substation/powerWorkDetect.vue
+++ b/src/components/substation/powerWorkDetect.vue
@@ -1,257 +1,304 @@
 <template>
-  <div class="hole-page">
-    <div class="tower-detect">
-        <div class="inner-tit" style="display: flex; justify-content: space-between; align-items: center;">
-          <div>
-            <img src="../../assets/img/lef-badge.png" alt="">
-            近电感应预警
-          </div>
+    <div class="hole-page">
+        <div class="tower-detect">
+            <div
+                class="inner-tit"
+                style="
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                "
+            >
+                <div>
+                    <img src="../../assets/img/lef-badge.png" alt="" />
+                    近电感应预警---
+                </div>
 
-          <el-button type="text"  style="font-size: 18px;" @click="handleSignUp">参数配置</el-button>
-        </div>
-        <el-form
-          style="width: 100%;"
-          :model="queryParams"
-          ref="queryFormRef"
-          size="small"
-          :inline="true"
-          label-width="80px"
-          >
-          <el-form-item
-              label="设备名称"
-              prop="devName"
-          >
-              <el-input
-              v-model="queryParams.devName"
-              placeholder="请输入设备名称"
-              clearable maxlength="20"
-              style="width: 200px;"
-              />
-          </el-form-item>
-          <el-form-item
-              label="预警时间"
-              prop="warnTime"
-          >
-          <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="background-color: #ECF3FE;">
-              </el-date-picker>
-          </el-form-item>
-          <el-button
-              style="margin-top: 3px"
-              type="primary"
-              icon="el-icon-search"
-              size="mini"
-              @click="handleQuery"
-          >搜索</el-button>
-        </el-form>
+                <el-button
+                    type="text"
+                    style="font-size: 18px"
+                    @click="handleSignUp"
+                    >参数配置</el-button
+                >
+            </div>
+            <el-form
+                style="width: 100%"
+                :model="queryParams"
+                ref="queryFormRef"
+                size="small"
+                :inline="true"
+                label-width="80px"
+            >
+                <el-form-item label="设备名称" prop="devName">
+                    <el-input
+                        v-model="queryParams.devName"
+                        placeholder="请输入设备名称"
+                        clearable
+                        maxlength="20"
+                        style="width: 200px"
+                    />
+                </el-form-item>
+                <el-form-item label="预警时间" prop="warnTime">
+                    <el-date-picker
+                        v-model="dateRange"
+                        type="daterange"
+                        range-separator="至"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"
+                        style="background-color: #ecf3fe"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+                <el-button
+                    style="margin-top: 3px"
+                    type="primary"
+                    icon="el-icon-search"
+                    size="mini"
+                    @click="handleQuery"
+                    >搜索</el-button
+                >
+            </el-form>
             <el-table
-            :data="tableList"
-            stripe
-            style="width: 100%"
-            :row-style="rowStyle"
-          >
-          <el-table-column
-            label="序号"
-            align="center"
-            width="80"
-            type="index"
+                :data="tableList"
+                stripe
+                style="width: 100%"
+                :row-style="rowStyle"
             >
-            <template slot-scope="scope">
-                    <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
-            </template>
-          </el-table-column>
-            <el-table-column
-              prop="devName"
-              label="设备名称"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column
-              prop="warnTime"
-              label="预警时间"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column
-              prop="warnContent"
-              label="预警内容"
-              align="center"
-            >
-            </el-table-column>
-            <el-table-column
-                label="操作"
-                align="center"
-            >
-                <template slot-scope="scope">
-                    <el-button type="danger" size="mini" @click="handleWarn(scope.row)">删除</el-button>
-                </template>
-            </el-table-column>
-          </el-table>
-          <pagination
-              :total="total"
-              :page.sync="queryParams.pageNum"
-              :limit.sync="queryParams.pageSize"
-              @pagination="getTableList"
-              style="background-color: #f3f7ff;"
-              />
-    </div>
+                <el-table-column
+                    label="序号"
+                    align="center"
+                    width="80"
+                    type="index"
+                >
+                    <template slot-scope="scope">
+                        <span>{{
+                            (queryParams.pageNum - 1) * queryParams.pageSize +
+                            scope.$index +
+                            1
+                        }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="devName" label="设备名称" align="center">
+                </el-table-column>
+                <el-table-column
+                    prop="warnTime"
+                    label="预警时间"
+                    align="center"
+                >
+                </el-table-column>
+                <el-table-column
+                    prop="warnContent"
+                    label="预警内容"
+                    align="center"
+                >
+                </el-table-column>
+                <el-table-column label="操作" align="center">
+                    <template slot-scope="scope">
+                        <el-button
+                            type="danger"
+                            size="mini"
+                            @click="handleWarn(scope.row)"
+                            >删除</el-button
+                        >
+                    </template>
+                </el-table-column>
+            </el-table>
+            <pagination
+                :total="total"
+                :page.sync="queryParams.pageNum"
+                :limit.sync="queryParams.pageSize"
+                @pagination="getTableList"
+                style="background-color: #f3f7ff"
+            />
+        </div>
+
+        <div class="chart-box" id="Chart"> 图表区域 </div>
 
         <!-- 查看参数配置弹窗 -->
-        <el-dialog :title="title" :visible.sync="showConfig" width="800px" height="800px"  append-to-body @close="closeConfig">
-          <el-form :model="queryConfig" ref="queryFormConfig" size="small" :inline="true" v-show="showSearch" label-width="120px">
-            <el-row :gutter="24">
-                <el-col :span="20">
-                  <el-form-item label="线路属性：" prop="attribute">
-                  <el-radio-group v-model="queryConfig.attribute">
-                    <el-radio
-                      v-for="(radioItem, radioIndex) in radioList"
-                      :key="radioIndex"
-                      :label="radioItem.value"
-                    >{{ radioItem.label }}</el-radio>
-                  </el-radio-group>
-                  </el-form-item>
-                </el-col>
-              </el-row>
-              <el-row :gutter="24">
-                <el-col :span="20">
-                  <el-form-item label="电压等级：" label-width="195px" prop="elecLevel" style="display: flex;margin-bottom: 30px;" >
-                    <el-radio-group v-model="queryConfig.elecLevel" style="display: flex; flex-wrap: wrap;  gap: 10px;margin-top: 0px;align-items: center;">
-                    <el-radio
-                      v-for="(radioItem, radioIndex) in radioLevelList"
-                      :key="radioIndex"
-                      :label="radioItem.value"
-                       class="radioLevelType"
-                    >{{ radioItem.label }}</el-radio>
-                  </el-radio-group>
-
-                  </el-form-item>
-                </el-col>
-              </el-row>
-            <el-row :gutter="24">
-              <el-col :span="20">
-                <el-form-item label="距离：" prop="attribute">
-                  <el-input placeholder="请输入距离" v-model="queryConfig.distance" ></el-input>
-                </el-form-item>
-              </el-col>
-            </el-row>
-        </el-form>
-                <div
+        <el-dialog
+            :title="title"
+            :visible.sync="showConfig"
+            width="800px"
+            height="800px"
+            append-to-body
+            @close="closeConfig"
+        >
+            <el-form
+                :model="queryConfig"
+                ref="queryFormConfig"
+                size="small"
+                :inline="true"
+                v-show="showSearch"
+                label-width="120px"
+            >
+                <el-row :gutter="24">
+                    <el-col :span="20">
+                        <el-form-item label="线路属性：" prop="attribute">
+                            <el-radio-group v-model="queryConfig.attribute">
+                                <el-radio
+                                    v-for="(radioItem, radioIndex) in radioList"
+                                    :key="radioIndex"
+                                    :label="radioItem.value"
+                                    >{{ radioItem.label }}</el-radio
+                                >
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="24">
+                    <el-col :span="20">
+                        <el-form-item
+                            label="电压等级："
+                            label-width="195px"
+                            prop="elecLevel"
+                            style="display: flex; margin-bottom: 30px"
+                        >
+                            <el-radio-group
+                                v-model="queryConfig.elecLevel"
+                                style="
+                                    display: flex;
+                                    flex-wrap: wrap;
+                                    gap: 10px;
+                                    margin-top: 0px;
+                                    align-items: center;
+                                "
+                            >
+                                <el-radio
+                                    v-for="(
+                                        radioItem, radioIndex
+                                    ) in radioLevelList"
+                                    :key="radioIndex"
+                                    :label="radioItem.value"
+                                    class="radioLevelType"
+                                    >{{ radioItem.label }}</el-radio
+                                >
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row :gutter="24">
+                    <el-col :span="20">
+                        <el-form-item label="距离：" prop="attribute">
+                            <el-input
+                                placeholder="请输入距离"
+                                v-model="queryConfig.distance"
+                            ></el-input>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div
                 style="
-                  width: 100%;
-                  height: 50px;
-                  display: flex;
-                  justify-content: flex-end;
-                  align-items: center;
+                    width: 100%;
+                    height: 50px;
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: center;
                 "
-              >
+            >
                 <el-button type="primary" size="mini" @click="saveConfig"
-                  >确定</el-button
+                    >确定</el-button
                 >
                 <el-button type="normal" size="mini" @click="closeClick"
-                  >取消</el-button
+                    >取消</el-button
                 >
-              </div>
-      </el-dialog>
-
-  </div>
+            </div>
+        </el-dialog>
+    </div>
 </template>
 
 <script>
 import { dialogConfig } from './config-sign'
 import { commonMixin } from '@/views/mixins/common'
 import TableSign from './subComp/table-sign.vue'
+import * as echarts from 'echarts'
 import {
-  queryWarnElectListApi,
-  delWarnElect,
-  getWarnElectConfigApi,
-  editConfig,
+    queryWarnElectListApi,
+    delWarnElect,
+    getWarnElectConfigApi,
+    editConfig,
 } from '@/api/substation/substation'
 export default {
-  components: {
-    TableSign
-  },
-  mixins: [ commonMixin ],
-  props: {
-    sendMsg: {
-      type: Object,
-      default: null
-    }
-  },
-  name: 'powerWorkDetect',
-  data() {
-    return {
-      showSearch: true,
-      showConfig: false,
-      sendId: undefined,
-      queryConfig: {
-        attribute: "",
-        elecLevel: "",
-        distance:""
-      },
-      title: '参数配置',
-      radioList: [
-      { value: 1, label: '直流' },
-      { value: 2, label: '交流' },
-      // 可以添加更多选项
-      ],
-      radioLevelList: [
-        { value: 0, label: '≤10KV' },
-        { value: 1, label: '20~35KV' },
-        { value: 2, label: '66~110KV' },
-        { value: 3, label: '220KV' },
-        { value: 4, label: '330KV' },
-        { value: 5, label: '500KV' },
-        { value: 6, label: '750KV' },
-        { value: 7, label: '1000KV' },
-      ],
-      radioLevelList2: [
-        { value: 1, label: '≤10KV' },
-        { value: 2, label: '20~35KV' },
-        { value: 3, label: '66~110KV' },
-        { value: 4, label: '220KV' },
-      ],
-      queryParams: {
-        devName: '',
-        pageNum: 1,
-        pageSize: 10,
-        startTime: '',
-        endTime: '',
-      },
-      dateRange: [],
-      tableList: [],
-      total: 0,
-    }
-  },
-  computed: {},
-  created() {
-
-  },
-  mounted() {
-    this.sendId = this.sendMsg.projectId
-    this.getWarnElectList(this.sendMsg.projectId)
-  },
-  methods: {
-    //获取近电感应预警表格
-    async getWarnElectList(proId) {
-        let res = await queryWarnElectListApi({
-            proId,
-        })
-        this.tableList = res.rows
-        this.total = res.total
+    components: {
+        TableSign,
     },
+    mixins: [commonMixin],
+    props: {
+        sendMsg: {
+            type: Object,
+            default: null,
+        },
+    },
+    name: 'powerWorkDetect',
+    data() {
+        return {
+            showSearch: true,
+            showConfig: false,
+            sendId: undefined,
+            queryConfig: {
+                attribute: '',
+                elecLevel: '',
+                distance: '',
+            },
+            title: '参数配置',
+            radioList: [
+                { value: 1, label: '直流' },
+                { value: 2, label: '交流' },
+                // 可以添加更多选项
+            ],
+            radioLevelList: [
+                { value: 0, label: '≤10KV' },
+                { value: 1, label: '20~35KV' },
+                { value: 2, label: '66~110KV' },
+                { value: 3, label: '220KV' },
+                { value: 4, label: '330KV' },
+                { value: 5, label: '500KV' },
+                { value: 6, label: '750KV' },
+                { value: 7, label: '1000KV' },
+            ],
+            radioLevelList2: [
+                { value: 1, label: '≤10KV' },
+                { value: 2, label: '20~35KV' },
+                { value: 3, label: '66~110KV' },
+                { value: 4, label: '220KV' },
+            ],
+            queryParams: {
+                devName: '',
+                pageNum: 1,
+                pageSize: 10,
+                startTime: '',
+                endTime: '',
+            },
+            dateRange: [],
+            tableList: [],
+            total: 0,
+        }
+    },
+    computed: {},
+    created() {},
+    mounted() {
+        this.sendId = this.sendMsg.projectId
+        this.getWarnElectList(this.sendMsg.projectId)
+        this.initChart()
+    },
+    methods: {
+        //获取近电感应预警表格
+        async getWarnElectList(proId) {
+            let res = await queryWarnElectListApi({
+                proId,
+            })
+            this.tableList = res.rows
+            this.total = res.total
+        },
 
-    async getTableList() {
+        async getTableList() {
             this.queryParams.proId = this.sendMsg.projectId
-            if (this.dateRange!=null&&this.dateRange.length>0) {
-            const dateStart = new Date(this.dateRange[0])
-            const dateEnd = new Date(this.dateRange[1])
-            this.queryParams.startTime = dateStart.toLocaleDateString('en-CA')
-            this.queryParams.endTime = dateEnd.toLocaleDateString('en-CA')
+            if (this.dateRange != null && this.dateRange.length > 0) {
+                const dateStart = new Date(this.dateRange[0])
+                const dateEnd = new Date(this.dateRange[1])
+                this.queryParams.startTime =
+                    dateStart.toLocaleDateString('en-CA')
+                this.queryParams.endTime = dateEnd.toLocaleDateString('en-CA')
             } else {
                 this.queryParams.startTime = null
                 this.queryParams.endTime = null
@@ -259,245 +306,328 @@ export default {
             let res = await queryWarnElectListApi(this.queryParams)
             this.tableList = res.rows
             this.total = res.total
-    },
+        },
 
-    //搜索
-    handleQuery() {
-      this.getTableList()
-    },
-
-     /** 删除按钮操作 */
-    handleWarn(row) {
-        const id = row.id
-        this.$modal.confirm('是否确认删除该条数据').then(function() {
-            return delWarnElect({'id':id});
-        }).then(() => {
+        //搜索
+        handleQuery() {
             this.getTableList()
-            this.$modal.msgSuccess("删除成功");
-        }).catch(() => {})
-    },
+        },
 
-    // 查看参数配置
-    async handleSignUp() {
-      const res = await getWarnElectConfigApi({
-        proId: this.sendMsg.projectId
-      })
-      console.log('2222222', res)
-      this.queryConfig.attribute = res.data.configElectValue
-      this.queryConfig.elecLevel = res.data.configLevelValue
-      this.showConfig = true
-    },
-    closeConfig() {
-      this.showConfig = false
-    },
-    saveConfig() {
-      let config = {
-        configElectName: '线路属性',
-        configLevelName: '电压等级',
-        configElectValue: this.queryConfig.attribute,
-        configLevelValue: this.queryConfig.elecLevel,
-        distance: this.queryConfig.distance,
-      }
-      editConfig(config).then(response => {
-        this.$modal.msgSuccess("修改成功");
-            this.showConfig = false;
-      });
-    },
-    closeClick() {
-      this.showConfig = false
-    },
+        /** 删除按钮操作 */
+        handleWarn(row) {
+            const id = row.id
+            this.$modal
+                .confirm('是否确认删除该条数据')
+                .then(function () {
+                    return delWarnElect({ id: id })
+                })
+                .then(() => {
+                    this.getTableList()
+                    this.$modal.msgSuccess('删除成功')
+                })
+                .catch(() => {})
+        },
 
-    rowStyle(scope) {
-      if(scope.rowIndex % 2 === 0) {
-        return {
-          background: '#EAF5FF',
-        }
-      } else {
-        return {
-          background: '#E1EEFF',
-        }
-      }
+        // 查看参数配置
+        async handleSignUp() {
+            const res = await getWarnElectConfigApi({
+                proId: this.sendMsg.projectId,
+            })
+            console.log('2222222', res)
+            this.queryConfig.attribute = res.data.configElectValue
+            this.queryConfig.elecLevel = res.data.configLevelValue
+            this.showConfig = true
+        },
+        closeConfig() {
+            this.showConfig = false
+        },
+        saveConfig() {
+            let config = {
+                configElectName: '线路属性',
+                configLevelName: '电压等级',
+                configElectValue: this.queryConfig.attribute,
+                configLevelValue: this.queryConfig.elecLevel,
+                distance: this.queryConfig.distance,
+            }
+            editConfig(config).then((response) => {
+                this.$modal.msgSuccess('修改成功')
+                this.showConfig = false
+            })
+        },
+        closeClick() {
+            this.showConfig = false
+        },
+
+        rowStyle(scope) {
+            if (scope.rowIndex % 2 === 0) {
+                return {
+                    background: '#EAF5FF',
+                }
+            } else {
+                return {
+                    background: '#E1EEFF',
+                }
+            }
+        },
+
+        initChart() {
+            const COXList = [
+                '5',
+                '10',
+                '15',
+                '20',
+                '25',
+                '30',
+                '35',
+                '40',
+                '45',
+                '50',
+                '55',
+                '60',
+                '65',
+                '70',
+                '75',
+                '80',
+                '85',
+                '90',
+                '95',
+                '100',
+            ]
+            const Y_data = []
+
+            for (let i = 0; i < 20; i++) {
+                Y_data.push(Math.floor(Math.random() * 10))
+            }
+            let COOption = {
+                title: {
+                    top: 0,
+                    left: 0,
+                    text: '施工安全距离',
+                    // subtext: '',
+                    textStyle: {
+                        color: '#000',
+                        fontSize: 16,
+                    },
+                },
+                grid: {
+                    left: '2%', // 左侧留白从默认10%减少到5%
+                    right: '5%',
+                    top: '15%',
+                    bottom: '5%',
+                    containLabel: true, // 包含标签空间
+                },
+                yAxis: {
+                    type: 'value',
+                    name: '距离',
+                    nameLocation: 'end',
+                    axisLabel: {
+                        width: 30,
+                    },
+                },
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow',
+                    },
+                    valueFormatter: (value) => {
+                        return value + ' 距离'
+                    },
+                },
+                xAxis: {
+                    type: 'category',
+                    data: COXList,
+                    name: '时间',
+                },
+                series: [
+                    {
+                        name: '时间',
+                        data: Y_data,
+                        type: 'line',
+                        smooth: true,
+                        lineStyle: {
+                            color: '#FE8511',
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: '#FE8511',
+                            },
+                        },
+                        areaStyle: {
+                            color: {
+                                x: 0,
+                                y: 0,
+                                x2: 0,
+                                y2: 1,
+                                type: 'linear',
+                                colorStops: [
+                                    { offset: 0, color: '#F5CC91' },
+                                    { offset: 1, color: '#F8F6F6' },
+                                ],
+                            },
+                        },
+                    },
+                ],
+            }
+            let Chart = echarts.init(document.querySelector('#Chart'))
+            Chart.setOption(COOption)
+        },
     },
-  }
 }
 </script>
 
-<style lang='less' scoped>
-
+<style lang="less" scoped>
 /deep/ .el-collapse-item__header {
-  background-color: transparent !important;
-  box-sizing: border-box;
-  padding-left: 15px;
-  font-size: 18px;
-  font-weight: bold;
-  border-bottom: 1px solid #BAC4CD;
+    background-color: transparent !important;
+    box-sizing: border-box;
+    padding-left: 15px;
+    font-size: 18px;
+    font-weight: bold;
+    border-bottom: 1px solid #bac4cd;
 }
 
 /deep/ .el-collapse-item__content {
-  padding-bottom: 0;
-  font-size: 16px;
+    padding-bottom: 0;
+    font-size: 16px;
 }
 
 /deep/ .el-collapse-item__wrap {
-  background-color: transparent;
+    background-color: transparent;
 }
 
-
-
 @font-face {
-  font-family: 'YouShe';
-  src: url("../../assets/iconfont/YouSheBiaoTiHei.ttf");
+    font-family: 'YouShe';
+    src: url('../../assets/iconfont/YouSheBiaoTiHei.ttf');
 }
 
 .el-input__inner {
-    background-color: #FFFF;
+    background-color: #ffff;
 }
 
-.hole-page{
-
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  .tower-detect{
-
+.hole-page {
     width: 100%;
     height: 100%;
-    background-color: #F3F7FF;
-    box-sizing: border-box;
-    padding: 15px 20px;
-    border-radius: 5px;
-    border: 1px solid #EFF2FC;
-    box-shadow: 2px 2px 2px #D9E0F3;
     display: flex;
     flex-direction: column;
-    margin-right: 20px;
-
-    .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;
-
-      .tower-lef{
-
+    justify-content: space-between;
+    .tower-detect {
         width: 100%;
-        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{
+        height: 50%;
+        background-color: #f3f7ff;
+        box-sizing: border-box;
+        padding: 15px 20px;
+        border-radius: 5px;
+        border: 1px solid #eff2fc;
+        box-shadow: 2px 2px 2px #d9e0f3;
+        // display: flex;
+        // flex-direction: column;
+        margin-right: 20px;
+        overflow: auto;
 
+        .inner-tit {
+            width: 100%;
+            box-sizing: border-box;
+            padding: 10px 20px;
+            background-color: #eff4fe;
             display: flex;
             align-items: center;
-            margin-right: 12px;
-
-            h4{
-
-              width: 15px;
-              height: 15px;
-              margin-right: 12px;
+            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;
             }
-
-          }
-
         }
 
-        span{
-
-          padding: 15px 0;
-          color: #000;
-          font-size: 16px;
-
-        }
-
-        .lef-tower-pic{
-
-          width: 100%;
-          height: 350px;
-          box-sizing: border-box;
-          padding: 10px;
-          display: flex;
-          justify-content: left;
-          flex-wrap: wrap;
-          overflow-y: auto;
-
-          .single-tower{
-
-            width: 40%;
-            height: 100px;
+        .tower-info {
+            flex: 1;
             display: flex;
-            margin-right: 20px;
-            flex-direction: column; /* 垂直排列内部元素 */
-            justify-content: center;
-            align-items: center;
 
-            img{
+            .tower-lef {
+                width: 100%;
+                height: 100%;
+                margin-right: 15px;
+                display: flex;
+                flex-direction: column;
 
-              width: 60%;
-              height: 70%;
+                .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: 10px;
+                    display: flex;
+                    justify-content: left;
+                    flex-wrap: wrap;
+                    overflow-y: auto;
+
+                    .single-tower {
+                        width: 40%;
+                        height: 100px;
+                        display: flex;
+                        margin-right: 20px;
+                        flex-direction: column; /* 垂直排列内部元素 */
+                        justify-content: center;
+                        align-items: center;
+
+                        img {
+                            width: 60%;
+                            height: 70%;
+                        }
+                        .dev-name {
+                            text-align: center; /* 文本居中对齐 */
+                            margin-top: 5px; /* 根据需要调整间距 */
+                            font-size: 16px;
+                            color: #000;
+                        }
+                    }
+
+                    .isActive {
+                        background: linear-gradient(
+                            135deg,
+                            #eef7ff,
+                            #ddedff,
+                            #c2dcff
+                        );
+                        border: 1px solid #b8d2ed;
+                    }
+                }
             }
-            .dev-name {
-              text-align: center; /* 文本居中对齐 */
-              margin-top: 5px; /* 根据需要调整间距 */
-              font-size: 16px;
-              color: #000;
-            }
-
-          }
-
-          .isActive{
-
-            background: linear-gradient(135deg, #EEF7FF, #DDEDFF, #C2DCFF);
-            border: 1px solid #B8D2ED;
-
-          }
-
         }
-
-      }
-
-
     }
-
-}
 }
 
+.chart-box {
+    height: 50%;
+}
 </style>