Skip to content

S
smart_gov_platform
Commit 85c90fe7 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 优化用户分析页面

parent 846d3e94
Show whitespace changes
Inline Side-by-side
Showing with 283 additions and 234 deletions
portal-manager-ui/admin/src/views/dataActuary/portrayal/portrayalAnalysis/index.vue
View file @ 85c90fe7
......@@ -10,25 +10,57 @@
<a-col :span="8">
<div class="inside_card">
<div class="head_title mb_15">用户信息</div>
<a-form layout="horizontal" :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<a-form-item label="openID：">{{ formState.openid || '--' }}</a-form-item>
<a-form-item label="姓名：">{{ formState.idcard_Name || '--' }}</a-form-item>
<a-form-item label="城市：">{{ formState.city || '--' }}</a-form-item>
<a-form-item label="联系电话：">{{ formState.phone || '--' }}</a-form-item>
<a-form-item label="身份证号：">{{ formState.idcard_IDCardNo || '--' }}</a-form-item>
<a-form-item label="注册时间：">{{ formState.update_time || '--' }}</a-form-item>
<a-form-item label="注册来源：">{{ regType[formState.register_type] || '现场注册' }}</a-form-item>
<a-form-item label="户籍地址：">{{ formState.idcard_Address || '--' }}</a-form-item>
<a-form
layout="horizontal"
:model="formState"
:label-col="{ span: 5 }"
:wrapper-col="{ span: 19 }"
>
<a-form-item label="openID：">{{
formState.openid || "--"
}}</a-form-item>
<a-form-item label="姓名：">{{
formState.idcard_Name || "--"
}}</a-form-item>
<a-form-item label="城市：">{{
formState.city || "--"
}}</a-form-item>
<a-form-item label="联系电话：">{{
formState.phone || "--"
}}</a-form-item>
<a-form-item label="身份证号：">{{
formState.idcard_IDCardNo || "--"
}}</a-form-item>
<a-form-item label="注册时间：">{{
formState.update_time || "--"
}}</a-form-item>
<a-form-item label="注册来源：">{{
regType[formState.register_type] || "现场注册"
}}</a-form-item>
<a-form-item label="户籍地址：">{{
formState.idcard_Address || "--"
}}</a-form-item>
</a-form>
</div>
<div class="inside_card">
<div class="head_title mb_15">关键数据</div>
<a-form layout="horizontal" :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
<a-form-item label="预约最多：" v-if="formState.yymax">{{ formState.yymax ? formState.yymax.name : ''
}}<span style="color: #FF5F5F;">（{{ formState.yymax ? formState.yymax.count :
'' }}）</span></a-form-item>
<a-form-item label="取号最多：" v-if="formState.qhmax">{{ formState.qhmax ? formState.qhmax.name : ''
}} <span style="color: #FF5F5F;">（{{ formState.qhmax ? formState.qhmax.count : '' }}）</span>
<a-form
layout="horizontal"
:model="formState"
:label-col="{ span: 4 }"
:wrapper-col="{ span: 20 }"
>
<a-form-item label="预约最多：" v-if="formState.yymax"
>{{ formState.yymax ? formState.yymax.name : ""
}}<span style="color: #ff5f5f"
>（{{ formState.yymax ? formState.yymax.count : "" }}）</span
></a-form-item
>
<a-form-item label="取号最多：" v-if="formState.qhmax"
>{{ formState.qhmax ? formState.qhmax.name : "" }}
<span style="color: #ff5f5f"
>（{{ formState.qhmax ? formState.qhmax.count : "" }}）</span
>
</a-form-item>
<!-- <a-form-item label="申报最多：">{{ formState.appointment.name }}（{{ formState.appointment.value
}}）</a-form-item>
......@@ -37,12 +69,18 @@
</a-form>
<div class="evaluate_box" v-if="formState.pjdata">
<div class="good_box">
<div class="good_title">{{ formState.pjdata.good_count }}（{{ formState.pjdata.good_lv }}%）
<div class="good_title">
{{ formState.pjdata.good_count }}（{{
formState.pjdata.good_lv
}}%）
</div>
<div class="good_desc">好评次数</div>
</div>
<div class="bad_box">
<div class="bad_title">{{ formState.pjdata.bad_count }}（{{ formState.pjdata.bad_lv }}%）
<div class="bad_title">
{{ formState.pjdata.bad_count }}（{{
formState.pjdata.bad_lv
}}%）
</div>
<div class="bad_desc">差评次数</div>
</div>
......@@ -50,100 +88,116 @@
</div>
</a-col>
<a-col :span="8" class="f_center">
<img src="@/assets/images/man.png" alt="" style="height: 31.25rem" v-if="formState.idcard_Sex == '男'">
<img src="@/assets/images/woman.png" alt="" style="height: 31.25rem" v-else>
<img
src="@/assets/images/man.png"
alt=""
style="height: 31.25rem"
v-if="formState.idcard_Sex == '男'"
/>
<img
src="@/assets/images/woman.png"
alt=""
style="height: 31.25rem"
v-else
/>
<div class="information">
<div class="info_name">
{{ formState.idcard_Name }}<a-tag color="green" class="info_tag">实名认证</a-tag>
{{ formState.idcard_Name
}}<a-tag color="green" class="info_tag">实名认证</a-tag>
</div>
<a-row>
<a-col :span="8">年龄：{{ formState.age }}岁</a-col>
<a-col :span="8">性别：{{ formState.idcard_Sex || '--' }}</a-col>
<a-col :span="8">性别：{{ formState.idcard_Sex || "--" }}</a-col>
<a-col :span="8">民族：{{ formState.idcard_Nation }}</a-col>
</a-row>
<div> </div>
<div></div>
</div>
</a-col>
<a-col :span="8">
<div class="inside_card">
<Radar :id="`radar`" :height="350" :width="500" :datas="radarData" />
</div>
<div>
<Radar
:id="`radar`"
:height="350"
:width="500"
:datas="radarData"
/>
</div>
<div></div>
</a-col>
</a-row>
</a-card>
</div>
</template>
<script >
<script>
import Radar from "../../business/Component/radar/index.vue";
import { userAnalysis } from "@/api/userPortrait"
import { userAnalysis } from "@/api/userPortrait";
export default {
components: {
Radar
Radar,
},
data() {
return {
options: [
{
value: '0',
label: '今天',
value: "0",
label: "今天",
},
{
value: '1',
label: '近7日',
value: "1",
label: "近7日",
},
{
value: '2',
label: '近30日',
value: "2",
label: "近30日",
},
{
value: '3',
label: '近3个月',
value: "3",
label: "近3个月",
},
{
value: '4',
label: '本年度',
value: "4",
label: "本年度",
},
],
radarData: {},
useNumber: '0',
useNumber: "0",
formState: {
openId: '4568782121245',
name: '张张那个张',
city: '四川省成都市',
phone: '13088088888',
ID: '513822199302034567',
registerTime: '2023-03-01 10:00:00',
source: '排队叫号系统',
address: '四川省宜宾市叙州区林南路23号',
appointment: { name: '机动车违章业务办理', value: '25' },
good: { value: '36', percent: '20' },
bad: { value: '2', percent: '10' }
openId: "4568782121245",
name: "张张那个张",
city: "四川省成都市",
phone: "13088088888",
ID: "513822199302034567",
registerTime: "2023-03-01 10:00:00",
source: "排队叫号系统",
address: "四川省宜宾市叙州区林南路23号",
appointment: { name: "机动车违章业务办理", value: "25" },
good: { value: "36", percent: "20" },
bad: { value: "2", percent: "10" },
},
regType: {
Applets: '小程序',
wechat: '公众号',
app: '自助服务终端'
}
}
Applets: "小程序",
wechat: "公众号",
app: "自助服务终端",
},
};
},
mounted() {
this.getRadarData()
this.userAnalysisFn(this.$route.query.peopleid)
this.getRadarData();
this.userAnalysisFn(this.$route.query.peopleid);
},
methods: {
async userAnalysisFn(peopleid) {
let res = await userAnalysis({ siteid: localStorage.getItem('siteId'), peopleid })
let res = await userAnalysis({
siteid: localStorage.getItem("siteId"),
peopleid,
});
// console.log(res)
if (res.code == 1) {
this.formState = res.data
this.formState = res.data;
// console.log(this.formState.xwph)
let arr = Object.values(this.formState.xwph)
let nameArr = Object.keys(this.formState.xwph)
let arr = Object.values(this.formState.xwph);
let nameArr = Object.keys(this.formState.xwph);
// console.log(arr, nameArr)
// console.log(arr)
......@@ -152,45 +206,40 @@ export default {
data: [
{
value: arr,
name: '偏好',
name: "偏好",
areaStyle: {
color: '#a6c5fc'
}
color: "#a6c5fc",
},
},
],
}
};
} else {
this.$message.error('查询失败')
this.$router.push({ path: 'portrayalBase' })
this.$message.error("查询失败");
this.$router.push({ path: "portrayalBase" });
}
},
handleChange() { },
getRadarData() {
}
handleChange() {},
getRadarData() {},
},
}
};
</script>
<style lang="less" scoped>
/deep/ .ant-form-item {
margin-bottom: 0
margin-bottom: 0;
}
.head {
display: flex;
justify-content: flex-start;
align-items: center;
}
.head_title {
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
color: #0595FD;
color: #0595fd;
margin-right: 1.25rem;
}
......@@ -203,8 +252,8 @@ export default {
.inside_card {
background: #f3faff;
margin: .9375rem;
padding: .9375rem;
margin: 0.9375rem;
padding: 0.9375rem;
}
.evaluate_box {
......@@ -218,21 +267,21 @@ export default {
width: 10rem;
background: #d0f3ee;
text-align: center;
padding: .9375rem;
padding: 0.9375rem;
.good_title {
font-size: 1.25rem;
font-weight: 400;
font-style: normal;
color: #04CA8F;
margin-bottom: .625rem;
color: #04ca8f;
margin-bottom: 0.625rem;
}
.good_desc {
font-size: .875rem;
font-size: 0.875rem;
font-weight: 400;
font-style: normal;
color: #04CA8F;
color: #04ca8f;
}
}
......@@ -240,21 +289,21 @@ export default {
width: 10rem;
background: #f5e3e7;
text-align: center;
padding: .9375rem;
padding: 0.9375rem;
.bad_title {
font-size: 1.25rem;
font-weight: 400;
font-style: normal;
color: #FF5F5F;
margin-bottom: .625rem;
color: #ff5f5f;
margin-bottom: 0.625rem;
}
.bad_desc {
font-size: .875rem;
font-size: 0.875rem;
font-weight: 400;
font-style: normal;
color: #FF5F5F;
color: #ff5f5f;
}
}
......@@ -273,12 +322,12 @@ export default {
.info_tag {
position: absolute;
top: .9375rem;
margin-left: .9375rem;
top: 0.9375rem;
margin-left: 0.9375rem;
}
.mb_15 {
margin-bottom: .9375rem;
margin-bottom: 0.9375rem;
}
.f_40 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment