|
|
@@ -77,9 +77,9 @@
|
|
|
<el-row type="flex" justify="start" align="top">
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="数据项" prop="">
|
|
|
- <el-checkbox-group v-model="noOptions" size="medium">
|
|
|
- <el-checkbox v-for="item in filterOption" :key="item.id" :label="item.id" :checked="item.checked" @change="checkedBoxChange">{{item.label}}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
+ <el-checkbox v-for="item in allOption" v-show="!item.checked" :key="item.id" :label="item.id" v-model="item.checked" @change="checkedBoxChange">
|
|
|
+ <span >{{ item.label }}</span>
|
|
|
+ </el-checkbox>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -89,9 +89,10 @@
|
|
|
<el-col :span="12">
|
|
|
<el-form-item label="展示数据项" prop="">
|
|
|
<div>
|
|
|
- <el-checkbox-group v-model="checkedOptions" size="medium">
|
|
|
- <el-checkbox v-for="item in dataOption" :key="item.id" :label="item.id" :checked="item.checked" @change="checkedBoxChange">{{item.label}}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
+ <el-checkbox v-for="item in allOption" v-show="item.checked" :key="item.id" :label="item.id" v-model="item.checked" @change="checkedBoxChange">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ </el-checkbox>
|
|
|
+
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
@@ -100,8 +101,8 @@
|
|
|
</el-form>
|
|
|
</el-row>
|
|
|
<div slot="footer">
|
|
|
- <el-button @click="close">取消</el-button>
|
|
|
- <el-button type="primary" @click="handleConfirm">确定</el-button>
|
|
|
+ <el-button type="primary" @click="close">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirm">确定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
@@ -169,14 +170,14 @@ export default {
|
|
|
datacolumntitle:"",
|
|
|
chartData:[],
|
|
|
dataOption: [],
|
|
|
+ tempallOption:[],
|
|
|
allOption:[],
|
|
|
- filteroption:[],
|
|
|
+ filterOption:[],
|
|
|
selectedItems: [],
|
|
|
isViewResultClicked: false,
|
|
|
checkedOptions: [],
|
|
|
noOptions:[],
|
|
|
- noOption:[],
|
|
|
- flag:1,
|
|
|
+ noOption:[],
|
|
|
checkOption:[]
|
|
|
};
|
|
|
},
|
|
|
@@ -221,6 +222,9 @@ export default {
|
|
|
|
|
|
return [data1, data2, data3, data4];
|
|
|
},
|
|
|
+ filterOption() { // 未选中的数据项
|
|
|
+ return this.dataOption.filter(item => !item.checked)
|
|
|
+ }
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -336,12 +340,10 @@ export default {
|
|
|
this.chartData = rows.map(row => row.split(','));
|
|
|
const firstRow = this.chartData[0]; // 获取第一行数据
|
|
|
this.allOption = firstRow.map((label, id) => ({ id, label })); // 将第一行数据转换为allOption格式
|
|
|
- this.dataOption = this.allOption
|
|
|
+ this.allOption = this.allOption.map(option => ({ ...option, checked: true }));
|
|
|
+ this.dataOption = this.allOption
|
|
|
+ this.tempallOption = JSON.parse(JSON.stringify(this.allOption)); // 保存allOption到tempallOption
|
|
|
// 设置默认选中状态
|
|
|
- this.filterOption = this.allOption.filter(option => option.id === this.dataOption.id);
|
|
|
- this.dataOption = this.allOption.map(option => ({ ...option, checked: true }));
|
|
|
- this.filterOption = this.filteroption.map(option => ({ ...option, checked: false }));
|
|
|
-
|
|
|
},
|
|
|
viewResult(filepath){
|
|
|
this.DatavisTitle = this.aircraftdetail.id + "---飞参数据可视化"
|
|
|
@@ -368,39 +370,25 @@ export default {
|
|
|
},
|
|
|
|
|
|
onOpen() {
|
|
|
+ this.allOption = JSON.parse(JSON.stringify(this.tempallOption)); // 使用副本初始化allOption
|
|
|
+
|
|
|
this.opendatacolumn = true;
|
|
|
},
|
|
|
onClose() {
|
|
|
+
|
|
|
+ this.allOption = JSON.parse(JSON.stringify(this.tempallOption)); // 使用副本初始化allOption
|
|
|
this.opendatacolumn = false;
|
|
|
+
|
|
|
},
|
|
|
close() {
|
|
|
+ this.allOption = JSON.parse(JSON.stringify(this.tempallOption)); // 使用副本初始化allOption
|
|
|
this.opendatacolumn = false;
|
|
|
},
|
|
|
- handleConfirm() {
|
|
|
- this.checkOption=[]
|
|
|
- this.noOption = []
|
|
|
- this.allOption = this.allOption.map(option => ({ ...option, checked: true }));
|
|
|
- this.checkOption = this.allOption.map(option => ({ ...option, checked: true }));
|
|
|
- this.noOption = this.allOption.map(option => ({ ...option, checked: true }));
|
|
|
-
|
|
|
- this.checkOption = this.allOption.filter(option => this.checkedOptions.includes(option.id));
|
|
|
- this.noOption = this.allOption.filter(option => this.noOptions.includes(option.id))
|
|
|
- this.dataOption=[]
|
|
|
- // 将checkOption数组中的元素合并到dataOption数组中
|
|
|
- this.dataOption.push(...this.checkOption);
|
|
|
-
|
|
|
- // 将noOption数组中的元素合并到dataOption数组中
|
|
|
- this.dataOption.push(...this.noOption);
|
|
|
- // console.log(this.checkOption)
|
|
|
- // console.log(this.noOption)
|
|
|
- // console.log(this.dataOption)
|
|
|
- this.filterOption = [];
|
|
|
- this.filterOption = [...this.allOption];
|
|
|
- this.filterOption = this.filterOption.filter(option => !this.dataOption.includes(option));
|
|
|
- this.filterOption = this.filterOption.map(option => ({ ...option, checked: false }));
|
|
|
- this.opendatacolumn = false;
|
|
|
-
|
|
|
- },
|
|
|
+ confirm() {
|
|
|
+ this.dataOption = this.allOption.filter(item => item.checked);
|
|
|
+ this.tempallOption = JSON.parse(JSON.stringify(this.allOption)); // 保存allOption到tempallOption
|
|
|
+ this.opendatacolumn = false;
|
|
|
+},
|
|
|
checkedBoxChange(){
|
|
|
this.$forceUpdate(); //强制渲染多选框样式，否则值变了样式没有选中
|
|
|
},
|
