<template>
|
<div class="indexanalysis">
|
<div class="analysis-top">
|
<div class="title-top">查询条件</div>
|
<div class="value">
|
<el-form ref="form" :model="queryParams" label-width="120px">
|
<el-form-item label="选择指标名称">
|
<el-select
|
remote
|
:remote-method="remoteMethod"
|
default-first-option
|
v-model="targetvalue"
|
@change="Labelstatistics"
|
filterable
|
placeholder="请选择"
|
>
|
<el-option
|
v-for="item in targetList"
|
:key="item.id"
|
:label="item.targetname"
|
:value="item.id"
|
>
|
</el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="formindex">
|
<el-table
|
v-loading="loading"
|
:data="tableData"
|
:span-method="objectSpanMethod"
|
border
|
:summary-method="getSummaries"
|
show-summary
|
style="width: 100%"
|
>
|
<el-table-column prop="targetname" label="指标名称"> </el-table-column>
|
<el-table-column prop="targetShowCount" label="指标出现次数">
|
</el-table-column>
|
<el-table-column prop="matchedtext" label="单项名称"> </el-table-column>
|
<el-table-column prop="count" label="单项选中次数"> </el-table-column>
|
<el-table-column prop="percentage" label="占比">
|
<template slot-scope="scope">
|
<span>{{ (Number(scope.row.percentage) * 100).toFixed(2) }}%</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { gettargetInfo, Labelstatistics } from "@/api/AiCentre/index";
|
export default {
|
name: "indexanalysis",
|
data() {
|
return {
|
targetList: [
|
{
|
value: "选项1",
|
label: "发热有无",
|
},
|
{
|
value: "选项2",
|
label: "咳嗽有无",
|
},
|
{
|
value: "选项3",
|
label: "服药后不良反应",
|
},
|
],
|
tableData: [
|
{
|
date: "发热有无",
|
name: "有",
|
address: 1,
|
times: 2,
|
proportion: "50",
|
},
|
{
|
date: "发热有无",
|
name: "无",
|
address: 1,
|
times: 2,
|
proportion: "50",
|
},
|
{
|
date: "发热有无",
|
name: "其他",
|
address: 0,
|
times: 2,
|
proportion: "0",
|
},
|
],
|
targetvalue: "",
|
queryParams: {
|
pageNum: 1,
|
pageSize: 66,
|
scriptType: "1",
|
},
|
};
|
},
|
|
created() {
|
this.getList();
|
},
|
|
methods: {
|
getList() {
|
this.loading = true;
|
gettargetInfo(this.queryParams).then((res) => {
|
this.targetList = res.rows;
|
this.Labelstatistics(res.rows[0].id);
|
});
|
},
|
Labelstatistics(id) {
|
console.log(id, "id");
|
|
Labelstatistics(id).then((res) => {
|
if (res.data.length > 0) {
|
this.tableData = res.data;
|
} else {
|
gettargetInfo({ id: id }).then((res) => {
|
console.log(res, "替换展示值");
|
this.tableData = [];
|
res.rows[0].targetoptionList.forEach((item) => {
|
this.tableData.push({
|
targetname: res.rows[0].targetname,
|
targetShowCount:0,
|
count:0,
|
percentage:0,
|
matchedtext:item.targetvalue,
|
});
|
});
|
});
|
}
|
this.loading = false;
|
});
|
},
|
remoteMethod(value) {
|
const illnessqueryParams = {
|
pageNum: 1,
|
pageSize: 66,
|
targetname: value,
|
scriptType: "1",
|
};
|
setTimeout(() => {
|
gettargetInfo(illnessqueryParams).then((res) => {
|
this.targetList = res.rows;
|
});
|
}, 200);
|
},
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if (columnIndex === 0 || columnIndex === 1) {
|
const totalRows = this.tableData.length;
|
if (rowIndex === 0) {
|
return [totalRows, 1];
|
} else {
|
// 其他行隐藏
|
return [0, 0];
|
}
|
}
|
},
|
getSummaries(param) {
|
const { columns, data } = param;
|
const sums = [];
|
columns.forEach((column, index) => {
|
console.log(data, "data");
|
|
if (index === 0) {
|
sums[index] = "合计"; // 修改为“合计”更符合语义
|
return;
|
}
|
if (column.property === "percentage") {
|
// 对占比列进行特殊处理
|
const values = data.map((item) => Number(item[column.property]));
|
const total = values.reduce((prev, curr) => {
|
const value = Number(curr);
|
if (!isNaN(value)) {
|
return prev + value;
|
} else {
|
return prev;
|
}
|
}, 0);
|
sums[index] = `${total * 100}%`; // 直接添加百分号
|
} else if (column.property === "targetShowCount") {
|
sums[index] = data[0].targetShowCount + " 次"; // 为次数相关列添加单位
|
} else {
|
const values = data.map((item) => Number(item[column.property]));
|
if (!values.every((value) => isNaN(value))) {
|
sums[index] = values.reduce((prev, curr) => {
|
const value = Number(curr);
|
if (!isNaN(value)) {
|
return prev + curr;
|
} else {
|
return prev;
|
}
|
}, 0);
|
if (column.property === "count") {
|
sums[index] += " 次"; // 为次数相关列添加单位
|
}
|
} else {
|
sums[index] = "/";
|
}
|
}
|
});
|
return sums;
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.analysis-top {
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
margin: 15px;
|
.title-top {
|
background-color: #6784f2;
|
color: #fff;
|
padding: 10px 20px;
|
font-size: 20px;
|
font-weight: 500;
|
margin-bottom: 20px;
|
}
|
}
|
.formindex {
|
margin: 0 15px;
|
border: 1px solid #dcdfe6;
|
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12),
|
0 0 6px 0 rgba(0, 0, 0, 0.04);
|
padding: 20px;
|
}
|
</style>
|
