yjdp-web/src/views/globalMap/RightMenu/OnlinePlotting.vue

<template>
  <div class="gradient-text title">实时标绘</div>
  <el-select v-model="mouseToolState.lineWidth" placeholder="Select" style="width: 240px">
    <el-option v-for="item in lineWidthOptions" :key="item.value" :label="item.name" :value="item.value">
      <span>{{ item.name }}</span>
    </el-option>
  </el-select>
  <el-color-picker v-model="mouseToolState.color" popper-class="custom-color-picker" show-alpha size="large" />
  <el-button size="large" @click="changeDrawing">{{ drawing ? '关闭' : '开启' }}</el-button>
  <div class="tabs1">
    <div v-for="(item, index) in menu" :key="index" :class="menuActive1 === index ? 'tab tab_active' : 'tab'" @click="clickTab(index)">
      {{ item.name }}
    </div>
  </div>
  <div v-show="menuActive1 === 0" class="tab-content">
    <div class="tabs2">
      <div
        v-for="(item, index) in menu[menuActive1].children"
        :key="index"
        :class="menuActive2 === index ? 'tab tab_active' : 'tab'"
        @click="clickTab2(index)"
      >
        {{ item.name }}
      </div>
      <div class="tab-content2">
        <div
          v-for="(item, index) in menu[menuActive1].children[menuActive2].children"
          :key="index"
          :class="menuActive2 === index ? 'tab tab_active' : 'tab'"
          @click="clickTab3(item.value)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
  <div v-show="menuActive1 === 1" class="tab-content">历史记录</div>
  <div v-show="textEditState.showTextEdit" class="text-edit-container">
    <el-input v-model="textEditState.text" :rows="8" type="textarea" />
    <div class="edit-box">
      <div class="flex">
        <div class="text">字号</div>
        <el-input v-model="textEditState.fonSize" />
      </div>
      <div class="flex">
        <div class="text">颜色</div>
        <el-color-picker v-model="textEditState.fontColor" popper-class="custom-color-picker" show-alpha size="large" />
      </div>
    </div>
    <div class="edit-btn-box">
      <el-button size="large" @click="textEditState.show = false">取消</el-button>
      <el-button type="primary" size="large" @click="addText">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  drawing: boolean;
  mouseToolState: MouseTool;
}

const props = withDefaults(defineProps<Props>(), {});
const emits = defineEmits(['updateDrawing', 'updateMouseToolState']);

const menuActive1 = ref(0);
const menuActive2 = ref(0);
const menu = ref([
  {
    name: '标绘工具',
    children: [
      {
        name: '基本工具',
        value: 'basicTools',
        children: [
          {
            name: '直箭头',
            value: 'straightArrow'
          },
          {
            name: '矩形',
            value: 'rectangle'
          },
          {
            name: '任意面',
            value: 'polygon'
          },
          {
            name: '任意线',
            value: 'anyLine'
          },
          {
            name: '圆',
            value: 'circle'
          },
          {
            name: '直线',
            value: 'straightLine'
          },
          {
            name: '文字',
            value: 'text'
          },
          {
            name: '面积',
            value: ''
          }
        ]
      },
      { name: '火点', value: 'firePoint', children: [] },
      { name: '火线', value: 'firewire', children: [] },
      { name: '火场', value: 'fireGround', children: [] },
      { name: '箭头', value: 'arrow', children: [] },
      { name: '导航', value: 'navigation', children: [] },
      { name: '扑救队伍', value: 'firefightingTeam', children: [] },
      { name: '飞机车辆', value: 'aircraftVehicles', children: [] },
      { name: '基础设置', value: 'basicSetting', children: [] },
      { name: '其他', value: 'other', children: [] }
    ]
  },
  {
    name: '历史记录',
    children: []
  }
]);
const lineWidthOptions = reactive([
  { name: '1像素', value: '1' },
  { name: '2像素', value: '2' },
  { name: '3像素', value: '3' }
]);
const textEditState = reactive({
  showTextEdit: false,
  fontColor: '#f80102',
  fontSize: '36',
  text: ''
});

// 点击一级菜单
const clickTab = (value: number) => {
  menuActive1.value = value;
};
// 点击二级菜单
const clickTab2 = (value: number) => {
  menuActive2.value = value;
};
// 点击三级菜单
const clickTab3 = (type) => {
  if (props.mouseToolState.graphicsType === type) {
    emits('updateDrawing', false);
    props.mouseToolState.graphicsType = '';
  } else {
    emits('updateDrawing', true);
    props.mouseToolState.graphicsType = type;
  }
};
const handleClick = () => {
  textEditState.fontColor = props.mouseToolState.color;
  textEditState.fontSize = props.mouseToolState.fontSize;
  textEditState.showTextEdit = true;
};
const addText = () => {
  emits('updateMouseToolState', {
    color: props.mouseToolState.color,
    lineWidth: props.mouseToolState.lineWidth,
    drawType: props.mouseToolState.drawType,
    graphicsType: 'text',
    fontColor: textEditState.fontColor,
    fontSize: textEditState.fontSize
  });
  textEditState.showTextEdit = false;
};
const changeDrawing = () => {
  emits('updateDrawing', !props.drawing);
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 60px;
  position: absolute;
  top: 12px;
  left: 210px;
}

:deep(.el-color-dropdown__link-btn) {
  display: none;
}
.text-edit-container {
  position: fixed;
  top: 500px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  font-size: 36px;
  .edit-box {
    margin-top: 20px;
    display: flex;
    .flex {
      flex: 1;
      margin-right: 20px;
    }
    .text {
      white-space: nowrap;
      margin-right: 8px;
    }
    .edit-btn-box {
      margin-top: 20px;
      display: flex;
    }
  }
}
</style>