需求:需要根据前端选择的横维度、竖维度、值去生成一个动态的表格，然后把交叉的值放入到对应的横维度和竖维度之下，其实就是excel里面的数据透视表功能，查询交叉语句为sql语句。
实现页面：
选择一下横维度、竖维度、值之后点击查询即可出现交叉结果
其余的条件都是过滤条件
后端实现：后端是用Hutool工具包连接数据库拼的sql查出来的entityList在转化成前端所需要的Map集合生成动态表头，代码如下：
获取动态表头方法：通过前端传过来的数据库字段的值，distinct查出这个字段有什么值，然后转化成对应的map集合发给前端实现动态表格
getDropdownItemForOne：
java
@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：
java
@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);
// 动态生成 key
int 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);
}前端：
html
<!-- -->
<template>
<div>
<el-form
ref="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-item
prop="verticalDimension"
label-width="80px"
>
<div slot="label">竖维度<font color="red">*</font></div>
<el-select
v-model="reqUser.verticalDimension"
class="filter-item"
placeholder="请选择竖维度"
clearable
style="width: 230%;"
@change="changeVerticalDimension"
>
<el-option
v-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-item
prop="horizontalDimension"
label-width="80px"
>
<div slot="label">横维度<font color="red">*</font></div>
<el-select
v-model="reqUser.horizontalDimension"
class="filter-item"
placeholder="请选择横维度"
clearable
style="width: 230%;"
@change="changeHorizontalDimension"
>
<el-option
v-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-item
label="数据来源"
prop="dataResource"
label-width="80px"
>
<el-select
v-model="reqUser.dataResource"
class="filter-item"
placeholder="请选择数据来源"
clearable
style="width: 260%;"
>
<el-option
v-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-select
v-model="reqUser.price"
class="filter-item"
placeholder="请选择值"
clearable
style="width: 260%;"
>
<el-option
v-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-picker
v-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-select
v-model="scope.row.tag"
class="filter-item"
placeholder="请选择值"
clearable
style="width: 100%;"
@change="addValue(scope.row)"
>
<el-option
v-for="item in scope.row.list"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</template>
</el-table-column>
</el-table>
<el-select
v-model="value1"
@change="addForm1(value1)"
placeholder="选择项"
style="width: 240px;margin-left: 20px;"
>
<el-option
v-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"
border
style="width: 100%; margin-right: 20px"
>
<el-table-column prop="label" label="项" width="180" />
<el-table-column label="值">
<template #default="scope">
<el-select
v-model="scope.row.tag"
class="filter-item"
placeholder="请选择值"
clearable
style="width: 100%;"
@change="addValue2(scope.row)"
>
<el-option
v-for="item in scope.row.list"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</template>
</el-table-column>
</el-table>
<el-select
v-model="value2"
@change="addForm2(value2)"
placeholder="选择项"
style="width: 240px;margin-left: 20px;"
>
<el-option
v-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-select
v-model="scope.row.tag"
class="filter-item"
placeholder="请选择值"
clearable
style="width: 100%;"
@change="addValue3(scope.row)"
>
<el-option
v-for="item in scope.row.list"
:key="item"
:label="item"
:value="item"
/>
</el-select>
</template>
</el-table-column>
</el-table>
<el-select
v-model="value3"
@change="addForm3(value3)"
placeholder="选择项"
style="width: 240px;margin-left: 20px;"
>
<el-option
v-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-button
type="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-column
v-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-column
align="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", // 上传url
uploadHeaders: "", // 上传头
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.data
this.headerList2 = this.headercopy
this.tableVertial = this.tableVertial2
this.tableHorizontal = this.tableHorizontal2
Message({
message: "查询成功",
type: "success",
duration: 5 * 1000
});
this.dialogVisible = false;
// 重新加载表格
this.loadList();
});
}
},
changeHorizontalDimension(e) {
getDropdownItemForOne(e).then(response => {
this.headercopy = response.data
this.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>