bcfz-ui/src/views/programPlanning/collaborativePlanning/collaborativeCreate_CL.vue

<template>
  <div>
    <div class="w-full p-4" style="background-color: #162d55">
      <!-- 顶部信息栏 -->
      <div class="flex justify-end items-center text-sm text-blue-200">
      <span class="flex flex-1 text-2xl font-bold">
        测量装备布设⽅案编制
      </span>
        <span class="mr-4">任务编号: TASK-2024-001</span>
        <span class="mr-4">任务名称: 综合试验任务</span>
        <span>当前状态: 方案编制中</span>
      </div>
    </div>
    <div class="bb-layout-page text-white min-h-screen p-4">


      <div class="flex gap-4">
        <!-- 左侧侧边栏 -->
        <div class="relative max-w-md mx-auto p-6 bg-gray-400 bg-opacity-20 backdrop-blur-lg border-gray-50 rounded-xl">
          <div class="flex items-center border-blue-400 border-b mb-4">
            <h3 class="text-lg font-bold" style="color: #4fc2f7">任务信息</h3>
          </div>

          <div class="p-4 mb-4 bg-black bg-opacity-20 rounded-md">
            <el-card shadow="hover" class="p-3 mb-2 text-white bg-gray-100 bg-opacity-20 border-l-8 border-blue-400">
              <div class="flex justify-between items-center mb-2">
                <span class="text-blue-300 font-blod">任务名称</span>
              </div>
              <div class="flex text-sm mt-2">
                <span>{{ planInfo.taskName }}</span>
              </div>
            </el-card>
            <el-card shadow="hover" class="p-3 mb-2 text-white bg-gray-100 bg-opacity-20 border-l-8 border-blue-400">
              <div class="flex justify-between items-center mb-2">
                <span class="text-blue-300 font-blod">任务类型</span>
              </div>
              <div class="flex text-sm mt-2">
                <span>{{ $getDictNameByValue('task_type',planInfo.taskType+'') || "-" }}</span>
              </div>
            </el-card>
            <el-card shadow="hover" class="p-3 mb-2 text-white bg-gray-100 bg-opacity-20 border-l-8 border-blue-400">
              <div class="flex justify-between items-center mb-2">
                <span class="text-blue-300 font-blod">布设算法</span>
              </div>
              <div class="flex text-sm mt-2">
                <span>{{ activeTab }}</span>
              </div>
            </el-card>
            <el-card shadow="hover" class="p-3 text-white bg-gray-100 bg-opacity-20 border-l-8 border-blue-400">
              <div class="flex justify-between items-center mb-2">
                <span class="text-blue-300 font-blod">设备数量</span>
              </div>
              <div class="flex text-sm mt-2">
                <span>{{ algorithmParams.eqNumber1 }}</span>
              </div>
            </el-card>
          </div>

          <!-- 方案模板 -->
          <div class="flex items-center border-blue-400 border-b mb-4">
            <h3 class="text-lg font-bold" style="color: #4fc2f7">方案模板</h3>
          </div>
          <!-- 搜索栏 -->
          <div class="mb-4">
            <el-input
                v-model="templateSearch"
                placeholder="搜索模板..."
                prefix-icon="el-icon-search"
                size="small"
                class="bg-gray-800 bg-opacity-50 border-gray-600 text-white"
            ></el-input>
          </div>

          <!-- 模板表格 -->
          <el-table
              :data="filteredTemplates"
              border
              size="small"
              highlight-current-row
              @row-click="selectTemplate"
              class="mb-4 bg-gray-800 bg-opacity-30 border-gray-600"
          >
            <el-table-column
                prop="name"
                label="模板名称"
                width="140"
                show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
                prop="description"
                show-overflow-tooltip
                label="描述">
            </el-table-column>

            <el-table-column label="操作" width="80" align="center">
              <template #default="scope">
                <!-- 使用按钮 -->
                <el-button
                    type="success"
                    size="small"
                    @click="handleUse(scope.row)"
                >
                  应用
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--<div-->
          <!--    class="flex flex-col p-4 mb-4 align-center justify-center rounded-md bg-gray-400 bg-opacity-30 border-none cursor-pointer hover:bg-opacity-40 transition-all">-->
          <!--  <span class="flex justify-center mb-2 text-lg font-bold">标准模板</span>-->
          <!--  <span class="flex justify-center text-sm">常用于常规试验</span>-->
          <!--</div>-->
          <!--<div-->
          <!--    class="flex flex-col p-4 mb-4 align-center justify-center rounded-md bg-gray-400 bg-opacity-30 border-none cursor-pointer hover:bg-opacity-40 transition-all">-->
          <!--  <span class="flex justify-center mb-2 text-lg font-bold">高密度模板</span>-->
          <!--  <span class="flex justify-center text-sm">常用于密集目标</span>-->
          <!--</div>-->
          <!--<div-->
          <!--    class="flex flex-col p-4 mb-4 align-center justify-center rounded-md bg-gray-400 bg-opacity-30 border-none cursor-pointer hover:bg-opacity-40 transition-all">-->
          <!--  <span class="flex justify-center mb-2 text-lg font-bold">分散式模板</span>-->
          <!--  <span class="flex justify-center text-sm">常用于分散目标</span>-->
          <!--</div>-->
          <!--<div class="flex flex-col p-4 mb-4 align-center justify-center rounded-md bg-gray-400 bg-opacity-30 border-none cursor-pointer hover:bg-opacity-40 transition-all">-->
          <!--  <span class="flex justify-center mb-2 text-lg font-bold">自定义模板</span>-->
          <!--  <span class="flex justify-center text-sm">手动配置参数</span>-->
          <!--</div>-->

          <!-- 布设算法 -->
          <div class="flex items-center border-blue-400 border-b mb-4">
            <h3 class="text-lg font-bold" style="color: #4fc2f7">布设算法</h3>
          </div>
          <el-tabs type="card" stretch v-model="activeTab" class="mb-6">
            <el-tab-pane label="随机布设" name="随机布设">
              <div class="bg-gray-400 bg-opacity-30 p-4 rounded">
                <h2 class="text-lg font-semibold mb-4">随机布设参数</h2>
                <el-form :model="algorithmParams" :disabled="!isEdit" label-width="120px">
                  <el-form-item label="随机种子">
                    <el-input v-model="algorithmParams.randomSeed" placeholder="请输入随机种子"></el-input>
                  </el-form-item>
                  <el-form-item label="布设密度">
                    <el-select v-model="algorithmParams.layoutDensity" placeholder="请选择布设密度">
                      <el-option label="低等密度" value="low"></el-option>
                      <el-option label="中等密度" value="medium"></el-option>
                      <el-option label="高等密度" value="high"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="最小间距(m)">
                    <el-input v-model.number="algorithmParams.minSpacing1" placeholder="请输入最小间距"></el-input>
                  </el-form-item>
                  <div style="border-top: 1px solid #737877;margin-bottom: 10px"></div>
                  <el-form-item label="装备数量">
                    <el-input v-model.number="algorithmParams.eqNumber1"></el-input>
                  </el-form-item>
                  <el-form-item label="装备类型">
                    <el-input v-model="algorithmParams.eqType1"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="网格布设" name="网格布设">
              <div class="bg-gray-400 bg-opacity-30 p-4 rounded">
                <h2 class="text-lg font-semibold mb-4">网格布设参数</h2>
                <!-- 可根据需求添加网格布设相关表单元素 -->
                <el-form :model="algorithmParams" :disabled="!isEdit" label-width="120px">
                  <el-form-item label="布设密度">
                    <el-select v-model="algorithmParams.layoutDensity2" placeholder="请选择布设密度">
                      <el-option label="低等密度" value="low"></el-option>
                      <el-option label="中等密度" value="medium"></el-option>
                      <el-option label="高等密度" value="high"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="网格间距(m)">
                    <el-input v-model.number="algorithmParams.minSpacing2" ></el-input>
                  </el-form-item>
                  <div style="border-top: 1px solid #737877;margin-bottom: 10px"></div>
                  <el-form-item label="装备数量">
                    <el-input v-model.number="algorithmParams.eqNumber2" ></el-input>
                  </el-form-item>
                  <el-form-item label="装备类型">
                    <el-input v-model="algorithmParams.eqType2"></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
            <el-tab-pane label="聚类布设" name="聚类布设">
              <div class="bg-gray-400 bg-opacity-30 p-4 rounded">
                <h2 class="text-lg font-semibold mb-4">聚类布设参数</h2>
                <!-- 可根据需求添加聚类布设相关表单元素 -->
                <el-form :model="algorithmParams" :disabled="!isEdit" label-width="120px">
                  <el-form-item label="聚类中心">
                    <el-input v-model="algorithmParams.randomCenter" placeholder="请输入聚类中心"></el-input>
                  </el-form-item>
                  <el-form-item label="聚类半径(m)">
                    <el-input v-model.number="algorithmParams.minSpacing3" ></el-input>
                  </el-form-item>
                  <div style="border-top: 1px solid #737877;margin-bottom: 10px"></div>
                  <el-form-item label="装备数量">
                    <el-input v-model.number="algorithmParams.eqNumber3" ></el-input>
                  </el-form-item>
                  <el-form-item label="装备类型">
                    <el-input v-model="algorithmParams.eqType3" ></el-input>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
          </el-tabs>
          <!--<el-tabs type="card" stretch v-model="activeTab" class="mb-6">-->
          <!--  <el-tab-pane label="视场覆盖" name="random">-->
          <!--    <div class="bg-gray-400 bg-opacity-30 p-4 rounded">-->
          <!--      <h2 class="text-lg font-semibold mb-4">视场覆盖参数</h2>-->
          <!--      <el-form :model="randomParams" label-width="120px">-->
          <!--        <el-form-item label="随机种子">-->
          <!--          <el-input v-model="randomParams.randomSeed" placeholder="请输入随机种子"></el-input>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="布设密度">-->
          <!--          <el-select v-model="randomParams.layoutDensity" placeholder="请选择布设密度">-->
          <!--            <el-option label="低等密度" value="low"></el-option>-->
          <!--            <el-option label="中等密度" value="medium"></el-option>-->
          <!--            <el-option label="高等密度" value="high"></el-option>-->
          <!--          </el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="最小间距(m)">-->
          <!--          <el-input v-model.number="randomParams.minSpacing" placeholder="请输入最小间距"></el-input>-->
          <!--        </el-form-item>-->
          <!--      </el-form>-->
          <!--    </div>-->
          <!--  </el-tab-pane>-->
          <!--  <el-tab-pane label="路径追踪" name="grid">-->
          <!--    <div class="bg-gray-400 bg-opacity-30 p-4 rounded">-->
          <!--      <h2 class="text-lg font-semibold mb-4">路径追踪参数</h2>-->
          <!--      &lt;!&ndash; 可根据需求添加网格布设相关表单元素 &ndash;&gt;-->
          <!--      <el-form :model="randomParams" label-width="120px">-->
          <!--        <el-form-item label="布设密度">-->
          <!--          <el-select v-model="randomParams.layoutDensity" placeholder="请选择布设密度">-->
          <!--            <el-option label="低等密度" value="low"></el-option>-->
          <!--            <el-option label="中等密度" value="medium"></el-option>-->
          <!--            <el-option label="高等密度" value="high"></el-option>-->
          <!--          </el-select>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="网格间距(m)">-->
          <!--          <el-input v-model.number="randomParams.minSpacing" placeholder="请输入最小间距"></el-input>-->
          <!--        </el-form-item>-->
          <!--      </el-form>-->
          <!--    </div>-->
          <!--  </el-tab-pane>-->
          <!--  <el-tab-pane label="多传感器融合布设" name="cluster">-->
          <!--    <div class="bg-gray-400 bg-opacity-30 p-4 rounded">-->
          <!--      <h2 class="text-lg font-semibold mb-4">多传感器融合布设参数</h2>-->
          <!--      &lt;!&ndash; 可根据需求添加聚类布设相关表单元素 &ndash;&gt;-->
          <!--      <el-form :model="randomParams" label-width="120px">-->
          <!--        <el-form-item label="聚类中心">-->
          <!--          <el-input v-model="randomParams.randomCenter" placeholder="请输入聚类中心"></el-input>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="聚类半径(m)">-->
          <!--          <el-input v-model.number="randomParams.minSpacing" placeholder="请输入最小间距"></el-input>-->
          <!--        </el-form-item>-->
          <!--      </el-form>-->
          <!--    </div>-->
          <!--  </el-tab-pane>-->
          <!--  <el-tab-pane label="动态调整" name="auto">-->
          <!--    <div class="bg-gray-400 bg-opacity-30 p-4 rounded">-->
          <!--      <h2 class="text-lg font-semibold mb-4">动态调整参数</h2>-->
          <!--      &lt;!&ndash; 可根据需求添加聚类布设相关表单元素 &ndash;&gt;-->
          <!--      <el-form :model="randomParams" label-width="120px">-->
          <!--        <el-form-item label="聚类中心">-->
          <!--          <el-input v-model="randomParams.randomCenter" placeholder="请输入聚类中心"></el-input>-->
          <!--        </el-form-item>-->
          <!--        <el-form-item label="聚类半径(m)">-->
          <!--          <el-input v-model.number="randomParams.minSpacing" placeholder="请输入最小间距"></el-input>-->
          <!--        </el-form-item>-->
          <!--      </el-form>-->
          <!--    </div>-->
          <!--  </el-tab-pane>-->
          <!--</el-tabs>-->

          <!--&lt;!&ndash; BB装备配置 &ndash;&gt;-->
          <!--<el-card class="bg-gray-400 bg-opacity-30 border-none">-->
          <!--  <div class="text-lg font-bold mb-2">装备配置</div>-->
          <!--  <el-form label-position="top" size="small" label-width="60px">-->
          <!--    <el-form-item label="装备数量">-->
          <!--      <el-input value="12"></el-input>-->
          <!--    </el-form-item>-->
          <!--    <el-form-item label="装备类型">-->
          <!--      <el-select placeholder="请选择" style="width: 100%">-->
          <!--        <el-option-->
          <!--            v-for="type in equipmentTypes"-->
          <!--            :key="type"-->
          <!--            :label="type"-->
          <!--            :value="type"-->
          <!--        ></el-option>-->
          <!--      </el-select>-->
          <!--    </el-form-item>-->
          <!--  </el-form>-->
          <!--</el-card>-->

          <!-- 操作控制 -->
          <div v-if="isEdit" class="space-y-2 mt-4">
            <el-button type="success" size="small" @click="back">完成编制</el-button>
            <el-button type="warning" size="small" @click="back">保存草稿</el-button>
            <!--<el-button type="danger" size="small" @click="back">清空布设</el-button>-->
          </div>
        </div>

        <!-- 右侧主内容区 -->
        <div class="flex-1 space-y-4 p-6 bg-gray-400 bg-opacity-20 backdrop-blur-lg border-gray-50 rounded-xl">

          <div class="flex items-center mb-4">
            <h3 class="text-lg font-bold" style="color: #4fc2f7">方案信息</h3>
          </div>
          <div class="flex p-4 mb-4 bg-black bg-opacity-20 rounded-md">
            <span class="mr-4">{{ schemeInfo.measurementRequirements }}</span>
          </div>
          <!-- 图例 -->
          <div class="flex items-center text-base mb-2">
            <span class="inline-block w-3 h-3 bg-orange-500 rounded-full mr-1"></span>
            <span class="mr-4">测量装备</span>
            <span class="inline-block w-3 h-3 bg-blue-500 rounded-full mr-1"></span>
            <span class="mr-4">选中状态</span>
            <span class="inline-block w-3 h-3 bg-purple-500 rounded-full mr-1"></span>
            <span class="mr-4">聚类中心</span>
            <span class="inline-block w-3 h-3 bg-green-500 rounded-full mr-1"></span>
            <span>判别线</span>
          </div>
          <!-- 网格画布（模拟） -->
          <div class="w-full bg-black bg-opacity-20 bg-blue-850 border border-blue-700 flex items-center justify-center" style="min-height: 400px">
            <!--<span class="text-blue-400">网格画布区域（可结合Canvas等实现交互）</span>-->
            <!--<img src="@/assets/plan_images/观测方案.jpg" class="w-full h-full" />-->
            <DrawioEmbed ref="drawioRef" />
            <!--<img v-else :src="" class="w-full h-full" />-->
          </div>

          <!--<div class="text-sm bg-blue-400 bg-opacity-20 rounded-md p-4 mt-2">-->
          <!--  操作提示: 点击BB区位可选中，拖拽可调整位置，双击可查看详情，使用右侧配置区设置参数后点击"生成方案"按钮。-->
          <!--</div>-->

          <!-- 方案信息 -->
          <WangEditor
              v-model="content"
              :height="400"
              :disabled="!isEdit"
              @change="handleContentChange"
          />
        </div>
      </div>
    </div>

    <!-- 可拖动悬浮球 -->
    <div
        class="floating-button"
        :style="{ top: floatTop + 'px', left: floatLeft + 'px' }"
        @mousedown="startDrag"
        @click="toggleDrawer"
    >
      <i class="el-icon-s-opportunity text-2xl"></i>
    </div>

    <!-- 抽屉组件 -->
    <el-drawer
        title="AI助手"
        :with-header="false"
        :z-index="9999999"
        :visible.sync="drawerVisible"
        :direction="drawerDirection"
        style="z-index: 100;color:white;font-size: 16px"
        size="40%"
    >
      <div class="h-full w-full">
        <QAChat :messages="qaMessages" @question="handleQuestion" />
      </div>
    </el-drawer>
  </div>

</template>

<script>
import WangEditor from "@/components/Components/WangEditor.vue";
import QAChat from "@/components/Components/QAChat.vue"
import DrawioEmbed from "@/components/DrawioEmbed/index.vue";
import {getSynergismScheme, planningSchemeUpdate} from "@/api/planningScheme";
export default {
  components:{
    DrawioEmbed,
    WangEditor,
    QAChat
  },
  data() {
    return {
      dist:{},
      content:'',
      selectedTemplate: null,

      templateSearch: '',
      templates: [
        {
          name: '标准模板',
          description: '系统默认标准配置',
          applicableScenario: '常规试验'
        },
        {
          name: '高密度模板',
          description: '高密度部署配置方案',
          applicableScenario: '密集目标'
        },
        {
          name: '分散式模板',
          description: '大范围分散部署',
          applicableScenario: '分散目标'
        },
        {
          name: '自定义模板',
          description: '用户自定义配置',
          applicableScenario: '特殊需求'
        },
        {
          name: '快速部署模板',
          description: '快速临时部署方案',
          applicableScenario: '应急测试'
        },
        {
          name: '高精度模板',
          description: '高精度测量配置',
          applicableScenario: '精密试验'
        }
      ],
      equipmentTypes: [
        '陆地模拟蓝军B系统',
        '发烟罐模拟蓝军模拟系统',
        '无人机蓝军系统',
        '大气状态分析仪'
      ],
      planInfo: JSON.parse(this.$route.query.plan),
      isEdit:this.$route.query.isEdit === 'true' ? true : false,
      activeTab: '随机布设',
      algorithmParams: {
        randomCenter: '1,1,1',
        randomSeed: '12345',
        layoutDensity: 'medium',
        layoutDensity2: 'medium',
        minSpacing1: 50,
        minSpacing2: 50,
        minSpacing3: 50,
        eqNumber1:5,
        eqNumber2:5,
        eqNumber3:5,
        eqType1:'',
        eqType2:'',
        eqType3:'',
      },
      // 悬浮球相关
      floatTop: 200,
      floatLeft: window.innerWidth - 80,
      isDragging: false,
      startX: 0,
      startY: 0,
      // 抽屉相关
      drawerVisible: false,
      drawerDirection: 'rtl', // 从右侧滑出
      // 历史记录数据
      historyData: [
        { time: '2025-08-20 11:05', operation: '创建方案', user: '张三' },
        { time: '2025-08-20 11:10', operation: '修改随机参数', user: '张三' },
        { time: '2025-08-20 11:15', operation: '保存草稿', user: '张三' }
      ],
      schemeInfo:{},
    };
  },
  computed: {
    // 过滤模板数据
    filteredTemplates() {
      if (!this.templateSearch) {
        return this.templates;
      }
      const searchStr = this.templateSearch.toLowerCase();
      return this.templates.filter(template =>
          template.name.toLowerCase().includes(searchStr) ||
          template.description.toLowerCase().includes(searchStr) ||
          template.applicableScenario.toLowerCase().includes(searchStr)
      );
    }
  },
  methods: {
    async fetchData(){
      await getSynergismScheme({id:this.planInfo.id}).then((res)=>{
        this.schemeInfo = res.data;
        if(res.data.schemeContent){
          const data = JSON.parse(res.data.schemeContent)
          this.algorithmParams = data.algorithmJson;
          this.content = data.textJson;
          this.loadDefaultData(data.xml.xmlData);
        }
      })
    },
    async loadDefaultData(xml) {
      try {
        await this.$refs.drawioRef.setData(xml)
        console.log('数据加载成功')
      } catch (err) {
        console.error('加载失败:', err)
      }
    },
    async getXmlData() {
      try {
        const data = await this.$refs.drawioRef.getData()
        console.log('获取数据成功:', data)
        return data
      } catch (err) {
        console.error('获取失败:', err)
      }
    },
    handleUse(plan) {
      // 执行“使用”逻辑
      console.log('正在使用方案:', plan.planName);

      // 或：弹出提示
      this.$message({
        type: 'success',
        message: `已应用模板：${plan.name}`
      });
    },
    handleContentChange(html) {
      console.log('编辑器内容变化:', html)
      // 可以在这里处理内容，如实时保存等
    },
    async back(){
      const xml = await this.getXmlData()
      const planJson = JSON.stringify({
        algorithmJson:this.algorithmParams,   // 布设算法
        textJson: this.content,   // 富文本
        xml: xml
      })

      await planningSchemeUpdate({id:this.schemeInfo.id,schemeContent:planJson,version:this.schemeInfo.version})

      this.$message.success('操作成功')
      this.$router.push({ path: '/scheme/collaborative' })
    },
    // 悬浮球拖动相关方法
    startDrag(e) {
      // 阻止事件冒泡，避免点击事件触发
      e.stopPropagation();
      this.isDragging = true;
      this.startX = e.clientX;
      this.startY = e.clientY;

      // 添加鼠标移动和释放事件监听
      document.addEventListener('mousemove', this.handleDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    handleDrag(e) {
      if (!this.isDragging) return;

      // 计算移动距离
      const deltaX = e.clientX - this.startX;
      const deltaY = e.clientY - this.startY;

      // 更新位置，限制在窗口内
      let newLeft = this.floatLeft + deltaX;
      let newTop = this.floatTop + deltaY;

      // 限制在窗口范围内
      newLeft = Math.max(20, Math.min(newLeft, window.innerWidth - 80));
      newTop = Math.max(20, Math.min(newTop, window.innerHeight - 80));

      this.floatLeft = newLeft;
      this.floatTop = newTop;

      // 更新起始位置
      this.startX = e.clientX;
      this.startY = e.clientY;
    },
    stopDrag() {
      this.isDragging = false;
      // 移除事件监听
      document.removeEventListener('mousemove', this.handleDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    // 切换抽屉显示/隐藏
    toggleDrawer() {
      if (!this.isDragging) { // 只有在非拖动状态下才切换抽屉
        this.drawerVisible = !this.drawerVisible;
      }
    }
  },
  // 监听窗口大小变化，调整悬浮球位置
  mounted() {
    console.log(this.$route.query.isEdit)
    this.fetchData()
    window.addEventListener('resize', () => {
      this.floatLeft = Math.min(this.floatLeft, window.innerWidth - 80);
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', () => {
      this.floatLeft = Math.min(this.floatLeft, window.innerWidth - 80);
    });
  }
};
</script>

<style scoped>
.bb-layout-page {
  font-size: 16px;
  background-color: #030d1e;
  position: relative; /* 确保悬浮球相对于此容器定位 */
  min-height: calc(100vh - 64px); /* 减去顶部栏高度 */
}

.el-card {
  border-radius: 4px;
}

/* 悬浮球样式 */
.floating-button {
  position: fixed;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #4fc2f7;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: move;
  z-index: 1000;
  transition: all 0.3s ease;
}

.floating-button:hover {
  transform: scale(1.1);
  background-color: #3ba8e0;
}

/* 抽屉样式调整 */
::v-deep .el-drawer__header {
  border-bottom: 1px solid #4fc2f7;
  padding-bottom: 10px;
  margin-bottom: 0px;
}

::v-deep .el-drawer__body {
  padding: 0;
  display: flex;
}

::v-deep .el-card__header {
  background-color: rgba(79, 194, 247, 0.1);
  border-bottom: 1px solid rgba(79, 194, 247, 0.3);
}

::v-deep .el-tabs__nav-wrap{
  background: #09264c;
}
</style>