风险等级相关

父子控件如何进行数据双向绑定

在父控件中获取了数据库lkt_factory_setting中的数据后，需要在子控件的图表中进行填充，所以就需要进行父子控件的传值

父控件传值部分代码：

<template>
	<div class="w-1/3">
        <safeMap :chartDatas="chartData"/>
    </div>
</template>

<script setup lang="ts">
    const chartData = ref<any[]>([]) // chartData为调用数据库后处理的数据
</script>

子控件传值部分代码：

<script setup lang="ts">
interface Data {
    chartDatas: number[][],
}

const props = defineProps<Data>()
// 调用后就可以在子控件中使用父控件调用的数据库数据了
props.chartDatas // 数据
</script>

---

子控件调用父控件的数据无法在图表中进行显示

在从数据库lkt_factory_setting获取数据后，需要进行数据的父子调用，在子控件调用到父控件的数据后，子控件中的数据无法填充到图表中，在经过排查后，发现在父控件中的被调用数据仅仅是数组对象的声明，没有对其进行响应式绑定：

const chartData = ref<any[]>([])

在对图表数据chartData进行响应式绑定后，就能正常的进行图表数据的填充

---

点击启用编辑按钮前保证不能编辑图表内容

在原先的界面中，在没有点击启用编辑按钮前，点击图表内容，其数据是可编辑的，为了解决这个问题，需要设置一个flag标志来控制其可编辑状态：

在父控件进行传值绑定，来传递其编辑状态：

<template>
	<div class="w-1/3">
        <safeMap :chartDatas="chartData" :flag="editable"/>
    </div>
</template>

在子控件的编辑函数中引入可编辑标志来控制图表是否可编辑：

interface Data {
    chartDatas: number[][],
    flag: boolean
}

const props = defineProps<Data>()

function handleClick(params: any) {
  if(props.flag){
    params.data[2] = (params.data[2] + 1) % 5
    option.value.series[0].data[params.dataIndex] = params.data
    chartEl.value.setOption(option.value)
  }
}