对比图总结：搜索框的三个选择项；

原始状态

原始状态是空白的；

正常状态

输入数据后，点击多对象对比按钮后，出现后面三个echarts图表；

这个过程是如何实现的

一、搜索框的功能实现

（一）区域选项

• 区域的数据是树结构形式，展示出来是树结构；

• 能源分类的数据是普通排列数据，也要展示出来为树结构；

• 接下来就看看，两种不同形式的数据，如何显示为树结构。

代码显示

• 区域代码

<el-form-item label="区域" prop="deptId">
	 <treeselect
		 v-model="queryParams.deptId"
		 :options="treeselect"
		 :show-count="true"
		 z-index="9999"
		 placeholder="请选择归属部门"
		 style="width: 220px"
		 @select="handleSelectDept"
		 />
	</el-form-item>

• 能源选项代码

	<treeselect
	 v-model="energyClassificationName"
	 :options="energyOptions"
	 :show-count="true"
	 :normalizer="normalizer"
	 placeholder="请选择归属部门"
	 style="width: 220px"
	 @select="handleSelectEnergy" />

转换数据结构，转成树结构需要的形式

• 上面两种方式的区别：
  • 下面普通结构多了一个 :normalizer="normalizer",这个代码有什么功能呢？
    • normalizer属性，是用于将options的值，转换为符合vue-treeselect要求的数据格式；
    • 后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换;
    • 此处的数据转换格式为：

    	normalizer(node) {
        	console.log('node',node)// 打印出来，里面有很多数据
     	 return {
        	id: node.id,
        	label: node.name,
        	children: node.children,
      		}
    	},
    

    • 树结构的标准类型：就是上面图片上有的：id,children,label，取得这个node里面的数据;

• 获取数据后，上传，后台接收的参数是energyClassificationId,通过queryparams,上传过去：

	handleSelectEnergy(node) {
   		console.log('node',node)//这里面有很多东西
   		this.queryParams.energyClassificationId = node.id
   		 
   	},
              

折算方式

• 通过字典配置选项,需要了解的是change的作用；

	<el-form-item label="折算方式" prop="convertType">
   				<el-select v-model="convertTypeName" placeholder="请选择" @change="onTypeChange">
   					<el-option v-for="item in dict.type.egy_object_type" :key="item.value" :label="item.label" :value="item.value"> </el-option>
   				</el-select>
   			</el-form-item>

find的功能

• find（）方法返回数组中满足提供的测试函数的第一个元素的值，否则返回undefined;
  • 它的关键功能是只返回一个元素的值；因为我们的选择只需要一个值，所以用find;

  	onTypeChange(value) {
   		console.log('value1111',value)
   			console.log('this.dict.type.egy_object_type',this.dict.type.egy_object_type)
  
   		if (value) {
   			const option = this.dict.type.egy_object_type.find(item => item.value === value)
   			this.queryParams.convertType = Number(option.value)
   			this.convertTypeName = option.label
   		} else {
   			this.queryParams.convertType = null
   			this.convertTypeName = ''
   		}
   	},
  

• 把这个选中的value赋值给item.value,让他选择出这一项；