Vue实现动态数据透视表（交叉表）

需求:需要根据前端选择的横维度、竖维度、值去生成一个动态的表格，然后把交叉的值放入到对应的横维度和竖维度之下，其实就是excel里面的数据透视表功能，查询交叉语句为sql语句。

实现页面：

选择一下横维度、竖维度、值之后点击查询即可出现交叉结果

其余的条件都是过滤条件

后端实现：后端是用Hutool工具包连接数据库拼的sql查出来的entityList在转化成前端所需要的Map集合生成动态表头，代码如下：

获取动态表头方法：通过前端传过来的数据库字段的值，distinct查出这个字段有什么值，然后转化成对应的map集合发给前端实现动态表格

getDropdownItemForOne：

@RequestMapping("/getDropdownItemForOne")public ResultData getDropdownItemForOne(@Param("columnName") String columnName) {Map<String, List<String>> dropdownItems = new HashMap<>();List<Map<String,String>> items = new ArrayList<>();//线上String dbUrl = DatsSourceUrl;String user = DataSourceUser;String password = DataSourcePassword;try (Connection conn = DriverManager.getConnection(dbUrl, user, password);Statement stmt = conn.createStatement();ResultSet rs = stmt.executeQuery("SELECT * FROM report_changjingku_list WHERE 1=2")) { // 只查询字段，不查询数据ResultSetMetaData metaData = rs.getMetaData();String query = "SELECT DISTINCT " + columnName + " FROM report_changjingku_list";try (ResultSet columnResultSet = stmt.executeQuery(query)) {int keyValue = 1; // 初始化键值，从1开始while (columnResultSet.next()) {String value = columnResultSet.getString(1); // 获取查询结果的值Map<String,String> itemMap = new HashMap<>();itemMap.put("name", value);itemMap.put("key", "key" + keyValue);items.add(itemMap);keyValue++; // 键值加1}}} catch (SQLException e) {e.printStackTrace();}return ResultData.success("ok",items);}

查询交叉表拼Sql方法：

test：

@PostMapping("/test")public ResultData test(@RequestAttribute Long _userId,  @RequestBody MixTable mixTable) throws SQLException {//引入hutool工具包创建数据源对象DruidDataSource ds = new DruidDataSource();String verticalDimension = "";String horizontalDimension = "";String value = "";if (mixTable.getVerticalDimension() != null){verticalDimension = mixTable.getVerticalDimension();}if (mixTable.getHorizontalDimension() != null){horizontalDimension = mixTable.getHorizontalDimension();}if (mixTable.getPrice() != null){value = mixTable.getPrice().toString();}ds.setUrl(DatsSourceUrl);ds.setUsername(DataSourceUser);ds.setPassword(DataSourcePassword);StringBuilder sqlSelect = new StringBuilder();sqlSelect.append("select tc.shuweidu, tc.hengweidu, group_concat(tc.xqsl order by tc.xh) as xqhb from (");sqlSelect.append("select @pnum:=case when ta.hengweidu=@pejcj then @pnum+1 else 1 end as xh, @pejcj:=ta.hengweidu, ta.shuweidu, ta.hengweidu, concat(ta.zhi,'(', ta.tnum, ')') as xqsl from (");sqlSelect.append("select ").append(verticalDimension).append(" as shuweidu, ").append(horizontalDimension).append(" as hengweidu, ").append(value).append(" as zhi, count(*) as tnum from report_changjingku_list where 1=1 and ").append(value).append("!=''");// 动态添加条件//年龄if (mixTable.getAge() != null) {sqlSelect.append(" and r_nl=").append("'").append(mixTable.getAge()).append("'");}//行业if (mixTable.getIndustry() != null && !mixTable.getIndustry().isEmpty() ){sqlSelect.append(" and r_hy=").append("'").append(mixTable.getIndustry()).append("'");}//性别if (mixTable.getSex() != null && !mixTable.getSex().isEmpty() ){sqlSelect.append(" and r_xb=").append("'").append(mixTable.getSex()).append("'");}//婚姻状况if (mixTable.getMaritalStatus() != null && !mixTable.getMaritalStatus().isEmpty() ){sqlSelect.append(" and r_hyzk=").append("'").append(mixTable.getMaritalStatus()).append("'");}//小孩数量if (mixTable.getChildNum() != null && !mixTable.getChildNum().isEmpty() ){sqlSelect.append(" and r_xhsl=").append("'").append(mixTable.getChildNum()).append("'");}//小孩年龄段if (mixTable.getChildAgeScope() != null && !mixTable.getChildAgeScope().isEmpty() ){sqlSelect.append(" and r_xhnld=").append("'").append(mixTable.getChildAgeScope()).append("'");}//职业属性if (mixTable.getOccupationAttribute() != null && !mixTable.getOccupationAttribute().isEmpty() ){sqlSelect.append(" and r_zysx=").append("'").append(mixTable.getOccupationAttribute()).append("'");}//家庭年收入情况（万）if (mixTable.getHomeIncome() != null && !mixTable.getHomeIncome().isEmpty() ){sqlSelect.append(" and r_jtnsrqk=").append("'").append(mixTable.getHomeIncome()).append("'");}//学历情况if (mixTable.getEducationalBack() != null && !mixTable.getEducationalBack().isEmpty() ){sqlSelect.append(" and r_xlqk=").append("'").append(mixTable.getEducationalBack()).append("'");}//车系if (mixTable.getCarSeries() != null && !mixTable.getCarSeries().isEmpty() ){sqlSelect.append(" and r_cx=").append("'").append(mixTable.getCarSeries()).append("'");}//级别if (mixTable.getCarLevel() != null && !mixTable.getCarLevel().isEmpty() ){sqlSelect.append(" and r_jb=").append("'").append(mixTable.getCarLevel()).append("'");}//车身类别if (mixTable.getCarBody() != null && !mixTable.getCarBody().isEmpty() ){sqlSelect.append(" and r_cslb=").append("'").append(mixTable.getCarBody()).append("'");}//车型级别if (mixTable.getCarModelLevel() != null && !mixTable.getCarModelLevel().isEmpty() ){sqlSelect.append(" and r_cxjl=").append("'").append(mixTable.getCarModelLevel()).append("'");}//TP价格段（万）if (mixTable.getTpPrice() != null && !mixTable.getTpPrice().isEmpty() ){sqlSelect.append(" and r_tpjgd=").append("'").append(mixTable.getTpPrice()).append("'");}//能源类型if (mixTable.getEnergyType() != null && !mixTable.getEnergyType().isEmpty() ){sqlSelect.append(" and r_nylx=").append("'").append(mixTable.getEnergyType()).append("'");}//一级场景if (mixTable.getOneScene() != null && !mixTable.getOneScene().isEmpty() ){sqlSelect.append(" and r_yjcj=").append("'").append(mixTable.getOneScene()).append("'");}//二级场景描述if (mixTable.getTwoSceneDescription() != null && !mixTable.getTwoSceneDescription().isEmpty() ){sqlSelect.append(" and r_ejcjms=").append("'").append(mixTable.getTwoSceneDescription()).append("'");}//出行阶段if (mixTable.getTravelStage() != null && !mixTable.getTravelStage().isEmpty() ){sqlSelect.append(" and r_cxjd=").append("'").append(mixTable.getTravelStage()).append("'");}//出行人数if (mixTable.getTravelNum() != null && !mixTable.getTravelNum().isEmpty() ){sqlSelect.append(" and r_cxrs=").append(mixTable.getTravelNum());}//用户角色if (mixTable.getUserRole() != null && !mixTable.getUserRole().isEmpty() ){sqlSelect.append(" and r_yhjs=").append("'").append(mixTable.getUserRole()).append("'");}//用户特征if (mixTable.getUserFeature() != null && !mixTable.getUserFeature().isEmpty() ){sqlSelect.append(" and r_yhtz=").append("'").append(mixTable.getUserFeature()).append("'");}//驾驶状态if (mixTable.getDriveStatus() != null && !mixTable.getDriveStatus().isEmpty() ){sqlSelect.append(" and r_jszt=").append("'").append(mixTable.getDriveStatus()).append("'");}//驾驶道路if (mixTable.getDriveRoad() != null && !mixTable.getDriveRoad().isEmpty() ){sqlSelect.append(" and r_jsdl=").append("'").append(mixTable.getDriveRoad()).append("'");}//驾驶区域if (mixTable.getDriveArea() != null && !mixTable.getDriveArea().isEmpty() ){sqlSelect.append(" and r_jsqy=").append("'").append(mixTable.getDriveArea()).append("'");}//天气环境if (mixTable.getWeather() != null && !mixTable.getWeather().isEmpty() ){sqlSelect.append(" and r_tqhj=").append("'").append(mixTable.getWeather()).append("'");}//时间if (mixTable.getTime() != null && !mixTable.getTime().isEmpty() ){sqlSelect.append(" and r_sj=").append("'").append(mixTable.getTime()).append("'");}//季节if (mixTable.getSeason() != null && !mixTable.getSeason().isEmpty() ){sqlSelect.append(" and r_jj=").append("'").append(mixTable.getSeason()).append("'");}//数据采集地点if (mixTable.getDataLocality() != null && !mixTable.getDataLocality().isEmpty() ){sqlSelect.append(" and r_sjcjdd=").append("'").append(mixTable.getDataLocality()).append("'");}//城市等级if (mixTable.getCityLevel() != null && !mixTable.getCityLevel().isEmpty() ){sqlSelect.append(" and r_csdj=").append("'").append(mixTable.getCityLevel()).append("'");}//隶属省份if (mixTable.getProvince() != null && !mixTable.getProvince().isEmpty() ){sqlSelect.append(" and r_lssf=").append("'").append(mixTable.getProvince()).append("'");}//一级指标if (mixTable.getOneIndex() != null && !mixTable.getOneIndex().isEmpty() ){sqlSelect.append(" and r_yjzb=").append("'").append(mixTable.getOneIndex()).append("'");}//二级指标if (mixTable.getTwoIndex() != null && !mixTable.getTwoIndex().isEmpty() ){sqlSelect.append(" and r_ejzb=").append("'").append(mixTable.getTwoIndex()).append("'");}//三级指标if (mixTable.getThreeIndex() != null && !mixTable.getThreeIndex().isEmpty() ){sqlSelect.append(" and r_sjzb=").append("'").append(mixTable.getThreeIndex()).append("'");}//感知价值if (mixTable.getFeelPrice() != null && !mixTable.getFeelPrice().isEmpty() ){sqlSelect.append(" and r_gzjz=").append("'").append(mixTable.getFeelPrice()).append("'");}//感知时刻if (mixTable.getFeelTime() != null && !mixTable.getFeelTime().isEmpty() ){sqlSelect.append(" and r_gzsk=").append("'").append(mixTable.getFeelTime()).append("'");}//当前解决方案if (mixTable.getWorkOutScheme() != null && !mixTable.getWorkOutScheme().isEmpty() ){sqlSelect.append(" and r_dqjjfa=").append("'").append(mixTable.getWorkOutScheme()).append("'");}//数据来源if (mixTable.getDataResource() != null && !mixTable.getDataResource().isEmpty() ){sqlSelect.append(" and r_sjly=").append("'").append(mixTable.getDataResource()).append("'");}sqlSelect.append(" group by ").append(verticalDimension).append(",").append(horizontalDimension).append(",").append(value).append(" order by ").append(verticalDimension).append(",").append(horizontalDimension).append(", tnum desc ) ta inner join (select @pejcj:='', @pnum:=0) tb ) tc where tc.xh<=10 group by tc.shuweidu, tc.hengweidu order by tc.shuweidu, tc.hengweidu");Connection conn = ds.getConnection();List<Entity> entityList = SqlExecutor.query(conn, sqlSelect.toString(), new EntityListHandler());// 处理查询结果Map<String, Map<String, String>> groupedResult = new HashMap<>();for (Entity entity : entityList) {String shuweidu = entity.getStr("shuweidu");String xqhb = entity.getStr("xqhb");// 如果 shuweidu 不存在于结果中，初始化一个新对象if (!groupedResult.containsKey(shuweidu)) {groupedResult.put(shuweidu, new HashMap<>());groupedResult.get(shuweidu).put("name", shuweidu);}// 获取当前对象Map<String, String> itemMap = groupedResult.get(shuweidu);// 动态生成 keyint keyIndex = itemMap.size() - 1; // 已有的键数量String key = "key" + (keyIndex + 1);itemMap.put(key, xqhb);}// 将结果转换为列表List<Map<String, String>> resultList = new ArrayList<>(groupedResult.values());// 打印结果System.out.println(resultList);return ResultData.success("ok", resultList);}

前端：

<!--  -->
<template><div><el-formref="formRef":model="reqUser"label-width="180px"v-loading="formLoading"style="background: #f3f3f3;"><el-row><el-col><ContenWrap><el-row style="margin-top: 0"><div style="background: #fff;"><h1 style="margin-left: 30px; padding-top: 10px;">布局</h1><el-form ><el-row :gutter="24"><el-col :span="12"><el-form-itemprop="verticalDimension"label-width="80px"><div slot="label">竖维度<font color="red">*</font></div><el-selectv-model="reqUser.verticalDimension"class="filter-item"placeholder="请选择竖维度"clearablestyle="width: 230%;"@change="changeVerticalDimension"><el-optionv-for="item in peopleList2":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col><el-col :span="12"><el-form-itemprop="horizontalDimension"label-width="80px"><div slot="label">横维度<font color="red">*</font></div><el-selectv-model="reqUser.horizontalDimension"class="filter-item"placeholder="请选择横维度"clearablestyle="width: 230%;"@change="changeHorizontalDimension"><el-optionv-for="item in sceneList2":key="item.value":label="item.label":value="item.value"/></el-select></el-form-item></el-col></el-row><el-row :gutter="24"><el-col :span="6"><el-form-itemlabel="数据来源"prop="dataResource"label-width="80px"><el-selectv-model="reqUser.dataResource"class="filter-item"placeholder="请选择数据来源"clearablestyle="width: 260%;"><el-optionv-for="item in selectSource.r_sjly":key="item":label="item":value="item"/></el-select></el-form-item></el-col><el-col :span="6"><el-form-item label="值" prop="price" label-width="80px"><div slot="label">值<font color="red">*</font></div><el-selectv-model="reqUser.price"class="filter-item"placeholder="请选择值"clearablestyle="width: 260%;"><el-optionv-for="item in statusValueList":key="item.name":label="item.comment":value="item.name"/></el-select></el-form-item></el-col><el-col :span="12"><el-form-item label="时间" prop="time" label-width="80px"><el-date-pickerv-model.trim="reqUser.time"type="datetime"style="width: 230%;"placeholder="选择时间"/></el-form-item></el-col></el-row></el-form></div></el-row></ContenWrap><ContenWrap><el-row :gutter="24" class="downThree"><el-col :span="8"><h1 style="margin-left: 30px;">人群筛选</h1><el-table :data="tableData" border style="width: 100%"><el-table-column prop="label" label="项" width="180" /><el-table-column label="值"><template #default="scope"><el-selectv-model="scope.row.tag"class="filter-item"placeholder="请选择值"clearablestyle="width: 100%;"@change="addValue(scope.row)"><el-optionv-for="item in scope.row.list":key="item":label="item":value="item"/></el-select></template></el-table-column></el-table><el-selectv-model="value1"@change="addForm1(value1)"placeholder="选择项"style="width: 240px;margin-left: 20px;"><el-optionv-for="dict in peopleList":key="dict.value":label="dict.label":value="dict.value"/></el-select></el-col><el-col :span="8"><div><h1 style="margin-left: 30px;">车型筛选</h1><el-table:data="tableData2"borderstyle="width: 100%; margin-right: 20px"><el-table-column prop="label" label="项" width="180" /><el-table-column label="值"><template #default="scope"><el-selectv-model="scope.row.tag"class="filter-item"placeholder="请选择值"clearablestyle="width: 100%;"@change="addValue2(scope.row)"><el-optionv-for="item in scope.row.list":key="item":label="item":value="item"/></el-select></template></el-table-column></el-table><el-selectv-model="value2"@change="addForm2(value2)"placeholder="选择项"style="width: 240px;margin-left: 20px;"><el-optionv-for="dict in carList":key="dict.value":label="dict.label":value="dict.value"/></el-select></div></el-col><el-col :span="8"><div><h1 style="margin-left: 30px;">场景筛选</h1><el-table :data="tableData3" border style="width: 100%"><el-table-column prop="label" label="项" width="180px" /><el-table-column label="值"><template #default="scope"><el-selectv-model="scope.row.tag"class="filter-item"placeholder="请选择值"clearablestyle="width: 100%;"@change="addValue3(scope.row)"><el-optionv-for="item in scope.row.list":key="item":label="item":value="item"/></el-select></template></el-table-column></el-table><el-selectv-model="value3"@change="addForm3(value3)"placeholder="选择项"style="width: 240px;margin-left: 20px;"><el-optionv-for="dict in sceneList":key="dict.value":label="dict.label":value="dict.value"/></el-select></div></el-col></el-row></ContenWrap></el-col></el-row><el-buttontype="primary"@click="save"style="margin-left: 47%;margin-bottom: 0.5%;">查询</el-button></el-form><el-table :data="tableDataList" border height="550px" v-loading="loading"><el-table-columnv-for="(item, index) in headerList"align="center":label="item.mon":key="index":prop="item.key_str"><!-- 自定义第一个表头 --><template v-if="index === 0" #header><div class="header-div"><div class="header-col1">{{ tableVertial }}</div><div class="header-col2">{{ tableHorizontal }}</div><div class="header-line1"></div></div></template></el-table-column><el-table-columnalign="center":label="item1.name"v-for="(item1, index1) in headerList2":key="index1"><template #default="scope"><div>{{scope.row[`${item1.key}`]}}</div></template></el-table-column></el-table></div>
</template><script>
import { tableHeight5 } from "@/utils/tableHeight";
import {addMixTable,getDictLabel,getDropdownItems,getValueDropdownItems,getDictLabelValue,test,getDropdownItemForOne
} from "@/api/mixTableAdd";
import Pagination from "@/components/Pagination";
import { Message, MessageBox } from "element-ui";
import { getToken } from "@/utils/auth";
import { getPage, deleteData } from "@/api/mixTableAdd";
export default {components: { Pagination },mixins: [tableHeight5],data() {return {listLoading: false,total: 0,queryPage: {page: 1,limit: 20,createTime: undefined},reqUser: {verticalDimension: "",horizontalDimension: "",price: "",age: null,industry: "",sex: "",maritalStatus: "",childNum: "",childAgeScope: "",occupationAttribute: "",homeIncome: null,educationalBack: "",carSeries: "",carLevel: "",carBody: "",carModelLevel: "",oneScene: "",twoSceneDescription: "",tpPrice: "",energyType: "",travelStage: "",travelNum: "",userRole: "",userFeature: "",driveStatus: "",driveRoad: "",driveArea: "",time: undefined,weather: "",season: "",dataLocality: "",cityLevel: "",province: "",oneIndex: "",twoIndex: "",threeIndex: "",feelPrice: "",feelTime: undefined,workOutScheme: "",dataResource: ""},exportData: {},tableVertial:"",tableHorizontal:"",tableVertial2:"",tableHorizontal2:"",multipleSelection: [],uploadPath: "http://pbm.langtaosoft.com/questDeal/importData", // 上传urluploadHeaders: "", // 上传头tableData: [], // 列表数据statusList: [], // 状态列表statusValueList: [], // 状态列表dataResource: [], // 数据来源selectSource: {r_nl: []},selectValueSource: {},batchNoList: [], // 数据批次号carList: [], // 车型名称urlOptions: [], // url列表dialogVisibleImport: false, // 导入显示dialogVisibleDeal: false, // 处理弹出peopleList: [{label: "年龄",value: "0",list: [],tag: ""},{label: "TP价格段(万)",value: "1",list: [],tag: ""},{label: "职业属性",value: "2"},{label: "婚姻状况",value: "3"},{label: "小孩数量",value: "4"},{label: "小孩年龄段",value: "5"},{label: "性别",value: "6",list: [],tag: ""},{label: "家庭年收入(万)",value: "7"},{label: "学历情况",value: "8"},{label: "行业",value: "9",list: [],tag: ""},{label: "隶属省份",value: "10",list: [],tag: ""},{label: "城市等级",value: "11",list: [],tag: ""},{label: "用户特征",value: "12",list: [],tag: ""}],peopleList2: [{label: "年龄",value: "r_nl",list: [],tag: ""},{label: "TP价格段(万)",value: "r_tpjgd",list: [],tag: ""},{label: "职业属性",value: "r_zysx"},{label: "婚姻状况",value: "r_hyzk"},{label: "小孩数量",value: "r_xhsl"},{label: "小孩年龄段",value: "r_xhnld"},{label: "性别",value: "r_xb",list: [],tag: ""},{label: "家庭年收入(万)",value: "r_jtnsrqk"},{label: "学历情况",value: "r_xlqk"},{label: "行业",value: "r_hy",list: [],tag: ""},{label: "隶属省份",value: "r_lssf",list: [],tag: ""},{label: "城市等级",value: "r_csdj",list: [],tag: ""},{label: "用户特征",value: "r_yhtz",list: [],tag: ""}],carList: [{label: "能源类型",value: "0",list: [],tag: ""},{label: "级别",value: "1",list: [],tag: ""},{label: "车身类别",value: "2",list: [],tag: ""},{label: "一级指标",value: "3",list: [],tag: ""},{label: "二级指标",value: "4",list: [],tag: ""},{label: "三级指标",value: "5",list: [],tag: ""}],sceneList: [{label: "一级场景",value: "0",list: [],tag: ""},{label: "二级场景描述",value: "1"},{label: "用车阶段",value: "2"},{label: "出行人数",value: "3"},{label: "用户角色",value: "4"},{label: "用户特征",value: "5"},{label: "驾驶状态",value: "6"},{label: "驾驶道路",value: "7"},{label: "驾驶区域",value: "8"},{label: "天气环境",value: "9"},{label: "季节",value: "10"},{label: "出行阶段",value: "11"}],sceneList2: [{label: "一级场景",value: "r_yjcj",list: [],tag: ""},{label: "二级场景描述",value: "r_ejcjms"},{label: "出行阶段",value: "r_cxjd"},{label: "出行人数",value: "r_cxrs"},{label: "用户角色",value: "r_yhjs"},{label: "用户特征",value: "r_yhtz"},{label: "驾驶状态",value: "r_jszt"},{label: "驾驶道路",value: "r_jsdl"},{label: "驾驶区域",value: "r_jsqy"},{label: "天气环境",value: "r_tqhj"},{label: "季节",value: "r_jj"}],painList: [{label: "痛点描述",value: "0",list: [],tag: ""},{label: "痛点备注",value: "1"},{label: "痛点频次",value: "2"},{label: "痛点程度",value: "3"}],indexList: [{label: "一级指标",value: "0",list: [],tag: ""},{label: "二级指标",value: "1"},{label: "三级指标",value: "2"},{label: "感知价值",value: "3"}],solveList: [{label: "当前解决方案",value: "0",list: [],tag: ""}],tableData: [],tableData2: [],tableData3: [],tableData4: [],tableData5: [],tableData6: [],headerList2: [],headercopy: [],headerList: [{mon: '',key_str: 'name'}],tableDataList: [],};},created() {this.getDictLabel();this.getDictLabelValue();this.getDropdownItems();this.loadList();this.tableData = this.peopleList.splice(0, 3);this.tableData2 = this.carList.splice(0, 3);this.tableData3 = this.sceneList.splice(0, 3);this.tableData4 = this.painList.splice(0, 3);this.tableData5 = this.indexList.splice(0, 3);this.tableData6 = this.solveList.splice(0, 3);},methods: {reload() {this.queryPage = { page: 1, limit: 20 };this.loadList();},save() {var data = this.reqUser;// const url =//   "p_shuweidu="+//   data.verticalDimension +//   "&p_hengweidu=" +//   data.horizontalDimension +//   "&p_zhi=" +//   data.price +//   "&p_nl=" +//   data.age +//   "&p_hy=" +//   data.industry +//   "&p_xb=" +//   data.sex +//   "&p_hyzk=" +//   data.maritalStatus +//   "&p_xhsl=" +//   data.childNum +//   "&p_xhnld=" +//   data.childAgeScope +//   "&p_zysx=" +//   data.occupationAttribute +//   "&p_jtnsrqk=" +//   data.homeIncome +//   "&p_xlqk=" +//   data.educationalBack +//   "&p_cx=" +//   data.carSeries +//   "&p_jb=" +//   data.carLevel +//   "&p_cslb=" +//   data.carBody +//   "&p_cxjl=" +//   data.carModelLevel +//   "&p_tpjgd=" +//   data.tpPrice +//   "&p_nylx=" +//   data.energyType +//   "&p_yjcj=" +//   data.oneScene +//   "&p_ejcjms=" +//   data.twoSceneDescription +//   "&p_cxjd=" +//   data.travelStage +//   "&p_cxrs=" +//   data.travelNum +//   "&p_yhjs=" +//   data.userRole +//   "&p_yhtz=" +//   data.userFeature +//   "&p_jszt=" +//   data.driveStatus +//   "&p_jsdl=" +//   data.driveRoad +//   "&p_jsqy=" +//   data.driveArea +//   "&p_tqhj=" +//   data.weather +//   "&p_sj=" +//   data.time +//   "&p_jj=" +//   data.season +//   "&p_sjcjdd=" +//   data.dataLocality +//   "&p_csdj=" +//   data.cityLevel +//   "&p_lssf=" +//   data.province +//   "&p_yjzb=" +//   data.oneIndex +//   "&p_ejzb=" +//   data.twoIndex +//   "&p_sjzb=" +//   data.threeIndex +//   "&p_gzjz=" +//   data.feelPrice +//   "&p_gzsk=" +//   data.feelTime +//   "&p_dqjjfa=" +//   data.workOutScheme +//   "&p_sjly=" +//   data.dataResource;console.log(data.verticalDimension, "123123");if (data.verticalDimension == "") {Message({message: "请选择竖维度",type: "error",duration: 5 * 1000});return;}else if (data.horizontalDimension == "") {Message({message: "请选择横维度",type: "error",duration: 5 * 1000});return;}else if (data.price == "") {Message({message: "请选择值",type: "error",duration: 5 * 1000});return;}else{test(data).then(response => {this.tableDataList = response.datathis.headerList2 = this.headercopythis.tableVertial = this.tableVertial2this.tableHorizontal = this.tableHorizontal2Message({message: "查询成功",type: "success",duration: 5 * 1000});this.dialogVisible = false;// 重新加载表格this.loadList();});}},changeHorizontalDimension(e) {getDropdownItemForOne(e).then(response => {this.headercopy = response.datathis.sceneList2.forEach(item => {if (e === item.value) {console.log(item.label, "123122222223");this.tableHorizontal2 = item.label}})})},changeVerticalDimension(e) {getDropdownItemForOne(e).then(response => {this.peopleList2.forEach(item => {if (e === item.value) {this.tableVertial2 = item.label}})})},// 加载列表loadList() {this.listLoading = true;getPage(this.queryPage).then(response => {const { data } = response;this.exportData = data;this.tableDataValue = data.records;this.total = parseInt(data.total);this.listLoading = false;}).catch(response => {this.listLoading = false;});},handleDelete(row) {console.log(row, "asdsa");MessageBox.confirm("确认删除", "确定", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning"}).then(() => {const loading = this.$loading({lock: true,text: "Loading",spinner: "el-icon-loading",background: "rgba(0, 0, 0, 0.7)"});// 确保 id 是一个数字deleteData(row).then(response => {Message({message: "删除成功",type: "success",duration: 5 * 1000});// 重新加载表格this.loadList();loading.close();}).catch(response => {loading.close();});});},openReport() {const url ="http://192.168.1.176:8084/report//share/share.html?_key=17e534f26cc79add3a2feb14396267b8ad3ade52725c22939e733c79b23835878741bcbe62826c703f60c349fc327322b09ac10474a43b53f1a3f9bd460f2283&p_shuweidu=" +this.reqUser.verticalDimension +"&p_hengweidu=" +this.reqUser.horizontalDimension +"&p_zhi=" +this.reqUser.price +"&p_nl=" +this.reqUser.age +"&p_hy=" +this.reqUser.industry +"&p_xb=" +this.reqUser.sex +"&p_hyzk=" +this.reqUser.maritalStatus +"&p_xhsl=" +this.reqUser.childNum +"&p_xhnld=" +this.reqUser.childAgeScope +"&p_zysx=" +this.reqUser.occupationAttribute +"&p_jtnsrqk=" +this.reqUser.homeIncome +"&p_xlqk=" +this.reqUser.educationalBack +"&p_cx=" +this.reqUser.carSeries +"&p_jb=" +this.reqUser.carLevel +"&p_cslb=" +this.reqUser.carBody +"&p_cxjl=" +this.reqUser.carModelLevel +"&p_tpjgd=" +this.reqUser.tpPrice +"&p_nylx=" +this.reqUser.energyType +"&p_yjcj=" +this.reqUser.oneScene +"&p_ejcjms=" +this.reqUser.twoSceneDescription +"&p_cxjd=" +this.reqUser.travelStage +"&p_cxrs=" +this.reqUser.travelNum +"&p_yhjs=" +this.reqUser.userRole +"&p_yhtz=" +this.reqUser.userFeature +"&p_jszt=" +this.reqUser.driveStatus +"&p_jsdl=" +this.reqUser.driveRoad +"&p_jsqy=" +this.reqUser.driveArea +"&p_tqhj=" +this.reqUser.weather +"&p_sj=" +this.reqUser.time +"&p_jj=" +this.reqUser.season +"&p_sjcjdd=" +this.reqUser.dataLocality +"&p_csdj=" +this.reqUser.cityLevel +"&p_lssf=" +this.reqUser.province +"&p_yjzb=" +this.reqUser.oneIndex +"&p_ejzb=" +this.reqUser.twoIndex +"&p_sjzb=" +this.reqUser.threeIndex +"&p_gzjz=" +this.reqUser.feelPrice +"&p_gzsk=" +this.reqUser.feelTime +"&p_dqjjfa=" +this.reqUser.workOutScheme +"&p_sjly=" +this.reqUser.dataResource;},getDicName(code, flag) {var dict = [];if (flag === "YW_DEAL_STATUS") {dict = this.statusList;}for (var i in dict) {if (dict[i].code === code) {return dict[i].name;}}},// 查询search() {this.loadList();},addForm1(value1) {this.peopleList.forEach(item1 => {if (value1 == item1.value) {this.tableData.push(item1);this.peopleList.splice(this.peopleList.indexOf(item1), 1);this.tableDataCompare();}});},addForm2(value2) {this.carList.forEach(item1 => {if (value2 == item1.value) {this.tableData2.push(item1);this.carList.splice(this.carList.indexOf(item1), 1);this.tableData2Compare();} else {}});},addForm3(value3) {this.sceneList.forEach(item1 => {if (value3 == item1.value) {this.tableData3.push(item1);this.sceneList.splice(this.sceneList.indexOf(item1), 1);this.tableData3Compare();} else {}});},addForm4(value4) {this.painList.forEach(item1 => {if (value4 == item1.value) {this.tableData4.push(item1);this.painList.splice(this.painList.indexOf(item1), 1);} else {}});},addForm5(value5) {this.indexList.forEach(item1 => {if (value5 == item1.value) {this.tableData5.push(item1);this.indexList.splice(this.indexList.indexOf(item1), 1);this.tableData5Compare();} else {}});},addForm6(value6) {this.solveList.forEach(item1 => {if (value6 == item1.value) {this.tableData6.push(item1);this.solveList.splice(this.solveList.indexOf(item1), 1);this.tableData6Compare();} else {}});},getDictLabel() {getDictLabel().then(response => {this.statusList = response.data;});},getDictLabelValue() {getDictLabelValue().then(response => {this.statusValueList = response.data;});},tableDataCompare() {this.tableData.forEach(item => {if (item.value === "0") {item.list = this.selectSource.r_nl;} else if (item.value === "1") {item.list = this.selectSource.r_tpjgd;} else if (item.value === "2") {item.list = this.selectSource.r_zysx;} else if (item.value === "3") {item.list = this.selectSource.r_hyzk;} else if (item.value === "4") {item.list = this.selectSource.r_xhsl;} else if (item.value === "5") {item.list = this.selectSource.r_xhnld;} else if (item.value === "6") {item.list = this.selectSource.r_xb;} else if (item.value === "7") {item.list = this.selectSource.r_jtnsrqk;} else if (item.value === "8") {item.list = this.selectSource.r_xlqk;} else if (item.value === "9") {item.list = this.selectSource.r_hy;} else if (item.value === "10") {item.list = this.selectSource.r_lssf;} else if (item.value === "11") {item.list = this.selectSource.r_csdj;} else if (item.value === "12") {item.list = this.selectSource.r_yhtz;}});},tableData2Compare() {this.tableData2.forEach(item => {if (item.value === "0") {item.list = this.selectSource.r_nylx;} else if (item.value === "1") {item.list = this.selectSource.r_jb;} else if (item.value === "2") {item.list = this.selectSource.r_cslb;} else if (item.value === "3") {item.list = this.selectSource.r_yjzb;} else if (item.value === "4") {item.list = this.selectSource.r_ejzb;} else if (item.value === "5") {item.list = this.selectSource.r_sjzb;}});},tableData3Compare() {this.tableData3.forEach(item => {if (item.value === "0") {item.list = this.selectSource.r_yjcj;} else if (item.value === "1") {item.list = this.selectSource.r_ejcjms;} else if (item.value === "2") {item.list = this.selectSource.r_ycjd;} else if (item.value === "3") {item.list = this.selectSource.r_cxrs;} else if (item.value === "4") {item.list = this.selectSource.r_yhjs;} else if (item.value === "5") {item.list = this.selectSource.r_yhtz;} else if (item.value === "6") {item.list = this.selectSource.r_jszt;} else if (item.value === "7") {item.list = this.selectSource.r_jsdl;} else if (item.value === "8") {item.list = this.selectSource.r_jsqy;} else if (item.value === "9") {item.list = this.selectSource.r_tqhj;} else if (item.value === "10") {item.list = this.selectSource.r_jj;} else if (item.value === "11") {item.list = this.selectSource.r_cxjd;}});},tableData5Compare() {this.tableData5.forEach(item => {if (item.value === "0") {item.list = this.selectSource.r_yjzb;} else if (item.value === "1") {item.list = this.selectSource.r_ejzb;} else if (item.value === "2") {item.list = this.selectSource.r_sjzb;} else if (item.value === "3") {item.list = this.selectSource.r_gzjz;}});},tableData6Compare() {this.tableData6.forEach(item => {if (item.value === "0") {item.list = this.selectSource.r_dqjjfa;}});},getDropdownItems() {getDropdownItems().then(response => {this.selectSource = response.data;this.tableDataCompare();this.tableData2Compare();this.tableData3Compare();this.tableData5Compare();this.tableData6Compare();});},getValueDropdownItems() {getValueDropdownItems().then(response => {this.selectValueSource = response.data;});},addValue(e) {if (e.value === "0") {this.reqUser.age = e.tag;} else if (e.value === "1") {this.reqUser.industry = e.tag;} else if (e.value === "2") {this.reqUser.sex = e.tag;} else if (e.value === "3") {this.reqUser.maritalStatus = e.tag;} else if (e.value === "4") {this.reqUser.childNum = e.tag;} else if (e.value === "5") {this.reqUser.childAgeScope = e.tag;} else if (e.value === "6") {this.reqUser.occupationAttribute = e.tag;} else if (e.value === "7") {this.reqUser.homeIncome = e.tag;} else if (e.value === "8") {this.reqUser.educationalBack = e.tag;}},addValue2(e) {if (e.value === "0") {this.reqUser.carSeries = e.tag;} else if (e.value === "1") {this.reqUser.carLevel = e.tag;} else if (e.value === "2") {this.reqUser.carBody = e.tag;} else if (e.value === "3") {this.reqUser.tpPrice = e.tag;} else if (e.value === "4") {this.reqUser.energyType = e.tag;}},addValue3(e) {if (e.value === "0") {this.reqUser.oneScene = e.tag;} else if (e.value === "1") {this.reqUser.twoSceneDescription = e.tag;} else if (e.value === "2") {this.reqUser.travelStage = e.tag;} else if (e.value === "3") {this.reqUser.travelNum = e.tag;} else if (e.value === "4") {this.reqUser.userRole = e.tag;} else if (e.value === "5") {this.reqUser.userFeature = e.tag;} else if (e.value === "6") {this.reqUser.driveStatus = e.tag;} else if (e.value === "7") {this.reqUser.driveRoad = e.tag;} else if (e.value === "8") {this.reqUser.driveArea = e.tag;} else if (e.value === "9") {this.reqUser.weather = e.tag;} else if (e.value === "10") {this.reqUser.season = e.tag;} else if (e.value === "11") {this.reqUser.dataLocality = e.tag;} else if (e.value === "12") {this.reqUser.cityLevel = e.tag;} else if (e.value === "13") {this.reqUser.province = e.tag;}},addValue5(e) {if (e.value === "0") {this.reqUser.oneIndex = e.tag;} else if (e.value === "1") {this.reqUser.twoIndex = e.tag;} else if (e.value === "2") {this.reqUser.threeIndex = e.tag;} else if (e.value === "3") {this.reqUser.feelPrice = e.tag;}},// 重置reload() {this.queryPage = { page: 1, limit: 20 };this.loadList();},addValue6(e) {if (e.value === "0") {this.reqUser.workOutScheme = e.tag;}}}
};
</script>
<style lang="scss" scoped>
:deep(.input-textarea) {width: 94% !important;
}
:deep(.phone) {width: 60px;
}
.time {margin-top: 1%;
}
.relation1 {margin-left: 0;margin-right: 100px;
}
.el-row {margin-left: 0;margin-right: 0;
}
.el-table {margin: 0 30px;
}
.el-form-item {width: 50%;
}
:deep(.el-select) {--el-select-width: 80%;
}
.el-form-item {width: 47%;
}
:deep(.el-form-item__label) {width: 130px !important;
}
.bold {width: 20px;height: 20px;border-radius: 50%;background: #85afd5;text-align: center;margin-top: 5px;margin-left: -10px;color: #fff;
}
.btitle {line-height: 30px;margin-left: 10px;color: #84b0d5;
}
.tip {border: 1px solid #84b0d5;border-radius: 0 20px 20px 0;width: 140px;height: 30px;display: flex;margin-left: 30px;margin-bottom: 20px;
}
.form-container {display: flex;align-items: center;
}
.m-2 {margin-left: 0;margin-right: 0;
}:deep(.relation .el-form-item__label) {line-height: 48px;
}
:deep(.relation .el-input) {line-height: 48px;display: initial;
}
:deep(.el-input) {width: 100%;
}
:deep(.el-select) {width: 100%;
}
:deep(.el-input-number) {width: 100%;
}
.follow {margin-left: 30px;border: 1px solid #84b0d5;padding: 10px 15px;width: 85px;color: #84b0d5;border-radius: 10px;
}
.foow {background: azure;margin: 0 20px;width: calc(100% - 40px);padding: 21px 0;
}
.el-row {padding: 0 0 10px 0;margin: 0 10px;
}
.el-col-8 {background: #fff;padding-bottom: 10px;margin: 0 10px;
}
.el-table {margin: 5px 20px;width: calc(100% - 40px) !important;
}
.downThree {display: flex;justify-content: space-around;
}
/* 全局标题样式 */
h1 {color: #29c5ab;font-size: 24px;text-align: left;margin-bottom: 20px;
}
::v-deep .el-table thead.is-group th {background: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {border-bottom: none;
}
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {padding: 0;
}
.header-div {height: 80px;position: relative;
}
.header-col1 {position: absolute;left: 10px;bottom: 10px;
}
.header-col2 {position: absolute;right: 10px;top: 10px;
}
.header-col3 {position: absolute;right: 0;bottom: 0;
}
.header-line1 {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to top right, transparent 49%, #b3b1b1 50%, transparent 52%);
}
.header-line2 {width: 1px;height: 150px;transform: rotate(-41deg);transform-origin: top;background-color: blue;position: absolute;top: 0;left: 0;
}
::v-deep.el-table--default .el-table__cell {padding: 0 !important;
}
::v-deep.el-table .cell {padding: 0 !important;
}
</style>