走航融合（待完成）

feiyu02

2025-03-20 419fe50acad4674f50c6639b3ec7ccbcaf2cbf44

 src/views/underwaymix/component/GridStyleTool.vue

@@ -12,53 +12,81 @@
    <el-col span="2">
      <BaseCard v-show="show" direction="right" borderless="r">
        <template #content>
          <div class="content-wrap">
          <el-scrollbar class="content-wrap">
            <div v-for="(g, i) in gridCtrlList" :key="i">
              {{ g.name }}
              <div v-for="(value, t) in g.views" :key="t">
                <!-- {{ value[0] }} -->
                {{ value[1].extData.name }}
                {{ value.extData.name }}
                <!-- {{ key }} -->
                <!-- <el-text>{{ g.name }}</el-text> -->
                <!-- <div class="m-t-8">网格要素</div> -->
                <el-row class="m-t-8">
                <el-row class="m-t-8" justify="space-between">
                  <CheckButton
                    active-text="显示网格"
                    inactive-text="隐藏网格"
                    :default-value="true"
                    @change="handleGridClick"
                    @change="(e) => handleGridClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    active-text="显示排名"
                    inactive-text="隐藏排名"
                    :default-value="false"
                    @change="handleGridClick"
                    @change="(e) => handleRankClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    active-text="显示数据"
                    inactive-text="隐藏数据"
                    :default-value="false"
                    @change="handleGridClick"
                    @change="(e) => handleDataClick(e, i, value)"
                  >
                  </CheckButton>
                </el-row>
                <el-row class="m-b-8" gap="2">
                  <div class="m-t-8">网格透明度</div>
                <el-row class="m-t-8" justify="space-between">
                  <CheckButton
                    active-text="绘制对比色"
                    inactive-text="绘制标准色"
                    :default-value="false"
                    @change="(e) => handleColorClick(e, i, value)"
                  >
                  </CheckButton>
                  <CheckButton
                    active-text="显示走航轨迹"
                    inactive-text="隐藏走航轨迹"
                    :default-value="false"
                    @change="(e) => handleUnderwayClick(e, i, value)"
                  >
                  </CheckButton>
                </el-row>
                <!-- <el-row class="m-b-8" align="middle"> -->
                <el-form-item label="透明度">
                  <!-- <div class="m-t-8">网格透明度</div> -->
                  <el-slider
                    v-model="opacityValue"
                    v-model="value.opacityValue"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    show-stops
                    @change="handleOpacityChange"
                    style="width: 200px"
                    @change="(e) => handleOpacityChange(e, i, value)"
                    style="width: 150px"
                  />
                </el-row>
                  <el-input-number
                    class="m-l-16"
                    size="small"
                    v-model="value.opacityValue"
                    :min="0"
                    :max="1"
                    :step="0.1"
                    @change="(e) => handleOpacityChange(e, i, value)"
                  />
                </el-form-item>
                <!-- </el-row> -->
                <el-divider />
              </div>
            </div>
          </div>
          </el-scrollbar>
        </template>
      </BaseCard>
    </el-col>
@@ -68,7 +96,7 @@
/**
 * 网格样式控制工具
 */
import { ref, watch, computed } from 'vue';
import { ref, reactive, onMounted, onUnmounted, computed, toRaw } from 'vue';

const props = defineProps({
  // 网格管理对象[SatelliteGrid]数组
@@ -78,63 +106,87 @@
  }
});

const emits = defineEmits(['showUnderway']);

const gridCtrlList = computed(() => {
  return props.gridCtrls.map((g) => {
    return {
    return reactive({
      name: g.name,
      views: Array.from(g.mapViewsMap)
    };
      views: Array.from(g.mapViewsMap).map((v) => {
        return {
          tag: v[0],
          extData: v[1].extData,
          opacityValue: 1
        };
      })
    });
  });
});

// watch(
//   () => props.gridCtrls,
//   (nV, oV) => {
//     gridCtrlList.value = nV.map((v) => {
//       return Array.from(v.infoMap);
//     });
//   },
//   { deep: true }
// );

const show = ref(true);

const gridVisible = ref(false);
const rankVisible = ref(false);
const dataVisible = ref(false);
const isStandardColor = ref(true);
const isOpacity = ref(false);
const opacityValue = ref(0.7);
// const gridVisible = ref(false);
// const rankVisible = ref(false);
// const dataVisible = ref(false);
// const isStandardColor = ref(true);
// const isOpacity = ref(false);
// const opacityValue = ref(0.7);

const emits = defineEmits([
  'showRank',
  'showData',
  'changeColor',
  'changeOpacity'
]);
// const emits = defineEmits([
//   'showRank',
//   'showData',
//   'changeColor',
//   'changeOpacity'
// ]);

function handleRankClick() {
  rankVisible.value = !rankVisible.value;
  emits('showRank', rankVisible.value);
function handleGridClick(e, index, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showGridViews: e
  });
}

function handleDataClick() {
  dataVisible.value = !dataVisible.value;
  emits('showData', dataVisible.value);
function handleRankClick(e, index, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showRankTxt: e
  });
}

function handleColorClick() {
  isStandardColor.value = !isStandardColor.value;
  emits('changeColor', isStandardColor.value);
function handleDataClick(e, index, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeVisibility({
    tags: [key],
    showDataTxt: e
  });
}

function handleOpacityClick() {
  // isOpacity.value = !isOpacity.value;
  // emits('changeOpacity', isOpacity.value);
function handleColorClick(e, index, value) {
  const key = value.tag;
  toRaw(props.gridCtrls[index]).changeGridColor({
    tag: key,
    useCustomColor: e
  });
}

function handleOpacityChange(value) {
  emits('changeOpacity', value);
function handleOpacityChange(e, index, value) {
  console.log(e, index, value);

  const key = value.tag;
  // value.opacityValue = e;
  toRaw(props.gridCtrls[index]).changeGridOpacity({
    tag: key,
    opacityValue: toRaw(value.opacityValue)
  });
}

function handleUnderwayClick(e, index, value) {
  emits('showUnderway', {
    isShow: e,
    dataId: value.tag
  });
}
</script>
<style scoped>
@@ -142,4 +194,8 @@
  min-width: 300px;
  min-height: 600px;
}

:deep(.el-input-number) {
  width: 80px;
}
</style>