bcfz-ui/src/views/planningSchem/comprehensive/components/autoPlanCreate.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="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 flex-col p-4 bg-black bg-opacity-20 mb-2">
            <div class="">
              <p>已布设BB数量: <span class="text-blue-300">0</span></p>
              <p>当前算法: <span class="text-blue-300">随机布设</span></p>
              <p>布设密度: <span class="text-blue-300">中等</span></p>
              <p>覆盖面积: <span class="text-blue-300">0%</span></p>
            </div>
          </div>

          <div class="flex items-center mb-4">
            <h3 class="text-lg font-bold" style="color: #4fc2f7">方案信息</h3>
          </div>
          <div class="grid gap-4 grid-cols-4 p-4 mb-4 bg-black bg-opacity-20 rounded-md">
            <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>BB布设方案-001</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>2025-08-20 11：05：30</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>编制中</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>张三</span>
              </div>
            </el-card>
          </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">BB装备</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="max-w-full max-h-full object-contain" style="max-height: 500px" />-->
            <iframe
                src="/CherryMarkdown/CherryMarkdown/drawio_demo.html"
            class="border-none"
            style="height: 700px;width: 100%"
            frameborder="0"
            allowfullscreen
            ></iframe>
          </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"
              style="max-width: 1350px"
              :disabled="false"
              @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"
export default {
  components:{
    WangEditor,
    QAChat
  },
  data() {
    return {

      content:'',
      selectedTemplate: null,

      templateSearch: '',
      templates: [
        {
          name: '标准模板',
          description: '系统默认标准配置',
          applicableScenario: '常规试验'
        },
        {
          name: '高密度模板',
          description: '高密度部署配置方案',
          applicableScenario: '密集目标'
        },
        {
          name: '分散式模板',
          description: '大范围分散部署',
          applicableScenario: '分散目标'
        },
        {
          name: '自定义模板',
          description: '用户自定义配置',
          applicableScenario: '特殊需求'
        },
        {
          name: '快速部署模板',
          description: '快速临时部署方案',
          applicableScenario: '应急测试'
        },
        {
          name: '高精度模板',
          description: '高精度测量配置',
          applicableScenario: '精密试验'
        }
      ],
      selectedAlgorithm: 'random',
      equipmentTypes: [
        '陆地模拟蓝军B系统',
        '发烟罐模拟蓝军模拟系统',
        '无人机蓝军系统',
        '大气状态分析仪'
      ],
      planInfo: [
        {
          name: 'BB布设方案-001',
          createTime: '2024-01-15 14:30',
          status: '编制中',
          editor: '张三'
        }
      ],
      activeTab: 'random',
      randomParams: {
        randomCenter: '1,1,1',
        randomSeed: '12345',
        layoutDensity: 'medium',
        minSpacing: 50,
      },
      // 悬浮球相关
      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: '张三' }
      ]
    };
  },
  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: {
    handleUse(plan) {
      // 执行“使用”逻辑
      console.log('正在使用方案:', plan.planName);

      // 或：弹出提示
      this.$message({
        type: 'success',
        message: `已应用模板：${plan.name}`
      });
    },
    handleContentChange(html) {
      console.log('编辑器内容变化:', html)
      // 可以在这里处理内容，如实时保存等
    },
    back(){
      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() {
    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>