Merge remote-tracking branch 'origin/dev' into dev
This commit is contained in:
@@ -27,7 +27,7 @@ export default {
|
||||
},
|
||||
onLoad(options) {
|
||||
this.id = options.id
|
||||
this.id = '7a4701d5641543cca4419488db368d3e'
|
||||
// this.id = '7a4701d5641543cca4419488db368d3e'
|
||||
this.getAppInfo()
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -54,9 +54,15 @@
|
||||
<span class="label" v-if="userIdList.length">已选择</span>
|
||||
<span v-else style="color:#999;">请选择</span>
|
||||
<u-icon name="arrow-right" color="#303133" size="24" style="margin-left:8px;"/>
|
||||
</div>
|
||||
</div>
|
||||
</AiPagePicker>
|
||||
</div>
|
||||
<div class="type-list">
|
||||
<div class="type-title">任务状态</div>
|
||||
<div class="items">
|
||||
<AiSelect dict="mstStatus" v-model="status"></AiSelect>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-list">
|
||||
<div class="type-title">群发时间</div>
|
||||
<div class="item">
|
||||
@@ -107,7 +113,8 @@ export default {
|
||||
taskTitle: '',
|
||||
createUserId: '',
|
||||
userList: [],
|
||||
userIdList: []
|
||||
userIdList: [],
|
||||
status: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -399,6 +406,12 @@ export default {
|
||||
::v-deep .uni-input-placeholder {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.items {
|
||||
::v-deep .AiSelect .display {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
@@ -428,6 +441,9 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .uicon-arrow-right::before {
|
||||
color: #606266 !important;
|
||||
}
|
||||
.page_picker {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<div><span class="color_red">*</span><span class="title">发送范围</span></div>
|
||||
<div @click="toSleectScoped">
|
||||
<span>
|
||||
<span v-if="!form.sendScope">请选择</span>
|
||||
<span class="color_gray" v-if="!form.sendScope">请选择</span>
|
||||
<span v-if="form.sendScope">已选择</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||||
</span>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="cooperationDetail">
|
||||
<AiTopFixed>
|
||||
<!-- <AiTopFixed>
|
||||
<div class="tab-select">
|
||||
<div
|
||||
class="item"
|
||||
@@ -12,7 +12,7 @@
|
||||
{{ item }}<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
</AiTopFixed> -->
|
||||
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
@@ -66,29 +66,19 @@
|
||||
|
||||
<div class="list_content">
|
||||
<div class="list_card">
|
||||
<div class="tab" v-show="update0">
|
||||
<div class="tab" v-show="update">
|
||||
<u-subsection
|
||||
:list="subsection0"
|
||||
:list="subsection"
|
||||
mode="button"
|
||||
activeColor="#3c9cff"
|
||||
:current="subIndex0"
|
||||
@change="changeSub0"
|
||||
></u-subsection>
|
||||
</div>
|
||||
|
||||
<div class="tab" v-show="update1">
|
||||
<u-subsection
|
||||
:list="subsection1"
|
||||
mode="button"
|
||||
activeColor="#3c9cff"
|
||||
:current="subIndex1"
|
||||
@change="changeSub1"
|
||||
:current="subIndex"
|
||||
@change="changeSub"
|
||||
></u-subsection>
|
||||
</div>
|
||||
|
||||
<AiTable
|
||||
:data="tableData"
|
||||
:colConfigs="tabIndex == 0 ? colConfigs0 : colConfigs1"
|
||||
:colConfigs="colConfigs"
|
||||
v-if="tableData.length"
|
||||
>
|
||||
<u-td slot="groupOwnerId" slot-scope="{ row }" style="border: none;">
|
||||
@@ -125,34 +115,28 @@ export default {
|
||||
currentClickTime: "",
|
||||
detail: {},
|
||||
|
||||
subsection0: [
|
||||
subsection: [
|
||||
{ name: "未执行" },
|
||||
{ name: "已执行" },
|
||||
{ name: "无法执行" },
|
||||
],
|
||||
subsection1: [
|
||||
{ name: "未送达" },
|
||||
{ name: "已送达" },
|
||||
{ name: "无法送达" },
|
||||
],
|
||||
update0: true,
|
||||
update1: false,
|
||||
update: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
colConfigs0() {
|
||||
colConfigs() {
|
||||
return [
|
||||
{ slot: "groupOwnerId", label: "成员" },
|
||||
{ label: "预计送达居民群", prop: "groupCount" },
|
||||
];
|
||||
},
|
||||
colConfigs1() {
|
||||
return [
|
||||
{ label: "居民群", prop: "groupName" },
|
||||
{ label: "群人数", prop: "memberCount" },
|
||||
{ slot: "groupOwnerId", label: "群主" },
|
||||
{ label: "预计送达居民", prop: "groupCount" },
|
||||
];
|
||||
},
|
||||
// colConfigs1() {
|
||||
// return [
|
||||
// { label: "居民群", prop: "groupName" },
|
||||
// { label: "群人数", prop: "memberCount" },
|
||||
// { slot: "groupOwnerId", label: "群主" },
|
||||
// ];
|
||||
// },
|
||||
},
|
||||
onLoad(o) {
|
||||
this.id = o.id;
|
||||
@@ -239,12 +223,8 @@ export default {
|
||||
}
|
||||
},
|
||||
// 切换分段器
|
||||
changeSub0(index) {
|
||||
this.subIndex0 = index;
|
||||
this.getStatistics();
|
||||
},
|
||||
changeSub1(index) {
|
||||
this.subIndex1 = index;
|
||||
changeSub(index) {
|
||||
this.subIndex = index;
|
||||
this.getStatistics();
|
||||
},
|
||||
// 获取数据
|
||||
@@ -389,7 +369,6 @@ export default {
|
||||
}
|
||||
|
||||
.header {
|
||||
// height: 160px;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
@@ -504,14 +483,6 @@ export default {
|
||||
|
||||
.tab {
|
||||
margin-bottom: 34px;
|
||||
|
||||
::v-deep .u-subsection uni-view{
|
||||
background: #eeef !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-select {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="item">
|
||||
<div>添加人</div>
|
||||
<div @click="selectUser">
|
||||
<span v-if="selectedUser.length">已选择{{ selectedUser.length || userListIds.length }}名成员</span>
|
||||
<span v-if="selectedUser.length || userListIds.length">已选择{{ selectedUser.length || userListIds.length }}名成员</span>
|
||||
<span class="color_gray" v-else>请选择</span>
|
||||
<u-icon name="arrow-right" color="#CCD0D3"></u-icon>
|
||||
</div>
|
||||
@@ -81,10 +81,11 @@ export default {
|
||||
fromDepartmentId: 0,
|
||||
mode: "multi",
|
||||
type: ["user"],
|
||||
selectedUserIds: this.userList?.map(e => e.id)
|
||||
selectedUserIds: this.userListIds?.map(e => e.id)
|
||||
}).then((res)=>{
|
||||
if(res?.userList) {
|
||||
this.userListIds = res.userList.map(e => e.id)
|
||||
this.userListIds = res.userList
|
||||
console.log(this.userListIds,'userListIds');
|
||||
}
|
||||
}
|
||||
).catch((err) => {
|
||||
|
||||
@@ -152,7 +152,7 @@ export default {
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
background: #F3F4F7;
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
117
src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
Normal file
117
src/project/saas/AppResidentStatistics/AppResidentStatistics.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="AppResidentStatistics">
|
||||
<AiTopFixed>
|
||||
<div class="area-content">
|
||||
<AiAreaPicker v-model="areaId" :name.sync="areaName">
|
||||
<div flex>
|
||||
<img src="./img/location.png" alt="" class="icon-img">
|
||||
<AiMore v-model="areaName" icon="arrow-down"/>
|
||||
</div>
|
||||
</AiAreaPicker>
|
||||
</div>
|
||||
</AiTopFixed>
|
||||
<div class="tab-list">
|
||||
<div :class="index == tabIndex ? 'tab-item active' : 'tab-item'" v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">{{ item.text }}<span></span></div>
|
||||
</div>
|
||||
<component :is="tabList[tabIndex].component" class="component" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Files from './components/Files'
|
||||
import Message from './components/Message'
|
||||
import People from './components/People'
|
||||
export default {
|
||||
name: "AppResidentStatistics",
|
||||
appName: "居民统计",
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
{
|
||||
text: '人群统计',
|
||||
component: People
|
||||
},
|
||||
{
|
||||
text: '档案统计',
|
||||
component: Files
|
||||
},
|
||||
{
|
||||
text: '会话统计',
|
||||
component: Message
|
||||
},
|
||||
],
|
||||
tabIndex: 0,
|
||||
areaId: '',
|
||||
areaName: '',
|
||||
}
|
||||
},
|
||||
components: {Files, Message, People},
|
||||
methods: {
|
||||
tabClick(index) {
|
||||
this.tabIndex = index
|
||||
},
|
||||
},
|
||||
onShow() {
|
||||
document.title = "居民统计"
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppResidentStatistics {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #F5F6F7;
|
||||
padding-bottom: 112px;
|
||||
::v-deep .AiTopFixed {
|
||||
.content {
|
||||
background-color: #3975C6;
|
||||
color: #fff;
|
||||
}
|
||||
.icon-img{
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
::v-deep .AiMore{
|
||||
span{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.tab-list {
|
||||
width: 100%;
|
||||
line-height: 88px;
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
z-index: 9;
|
||||
|
||||
.tab-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
position: relative;
|
||||
}
|
||||
.active {
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
width: 50px;
|
||||
height: 6px;
|
||||
background: #3399FF;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.component{
|
||||
padding-top: 88px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/project/saas/AppResidentStatistics/components/Files.vue
Normal file
115
src/project/saas/AppResidentStatistics/components/Files.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="Files">
|
||||
<div class="title">特殊人群</div>
|
||||
<div class="chart-content" style="height: 264px;" id="echartDataSpecial"></div>
|
||||
<div class="title">年龄分布</div>
|
||||
<div class="chart-content" style="height: 244px;" id="echartDataAge"></div>
|
||||
<div class="title">男女比例</div>
|
||||
<div class="chart-content" style="height: 264px;" id="echartDataSex"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: "Files",
|
||||
data() {
|
||||
return {
|
||||
echartDataSpecial: null,
|
||||
echartDataAge: null,
|
||||
echartDataSex: null
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
methods: {
|
||||
chartInit() {
|
||||
this.echartDataSpecial = echarts.init(document.getElementById('echartDataSpecial'))
|
||||
this.echartDataAge = echarts.init(document.getElementById('echartDataAge'))
|
||||
this.echartDataSex = echarts.init(document.getElementById('echartDataSex'))
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataSpecial.setOption(option)
|
||||
this.echartDataSex.setOption(option)
|
||||
|
||||
var option2 = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
120,
|
||||
{
|
||||
value: 200,
|
||||
itemStyle: {
|
||||
color: '#a90000'
|
||||
}
|
||||
},
|
||||
150,
|
||||
80,
|
||||
70,
|
||||
110,
|
||||
130
|
||||
],
|
||||
type: 'bar'
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataAge.setOption(option2)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.chartInit()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Files {
|
||||
padding: 0 32px;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
padding: 40px 0 24px 0;
|
||||
}
|
||||
.chart-content{
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
199
src/project/saas/AppResidentStatistics/components/Message.vue
Normal file
199
src/project/saas/AppResidentStatistics/components/Message.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<template>
|
||||
<div class="Message">
|
||||
<div class="title">消息回复率</div>
|
||||
<div class="title">单聊统计</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||||
<p>{{ item.label }}</p>
|
||||
<h3>{{ item.value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartFriend"></div>
|
||||
<div class="title">单聊统计</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in groupList" :key="index">
|
||||
<p>{{ item.label }}</p>
|
||||
<h3>{{ item.value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartGroup"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: "Message",
|
||||
data() {
|
||||
return {
|
||||
friendList: [
|
||||
{
|
||||
label: '单聊会话',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '单聊消息',
|
||||
value: '23500'
|
||||
}
|
||||
],
|
||||
groupList: [
|
||||
{
|
||||
label: '活跃群聊',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '活跃群成员',
|
||||
value: '23'
|
||||
},
|
||||
{
|
||||
label: '群聊消息',
|
||||
value: '255,625'
|
||||
},
|
||||
],
|
||||
echartDataFriend: null,
|
||||
echartDataGroup: null
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
methods: {
|
||||
chartInit() {
|
||||
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||||
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||||
var option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E1E5EF', //x轴的颜色
|
||||
width: 1, //轴线的宽度
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
data: ['4月', '5月', '6月', '7月', '8月',]
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{ //y轴
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
type: 'value',
|
||||
minInterval: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [155, 130, 120, 160, 120, 130, 110],
|
||||
type: 'line',
|
||||
areaStyle: {//覆盖区域的渐变色
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2891FF'
|
||||
}
|
||||
},
|
||||
itemStyle : {
|
||||
normal : {
|
||||
color:'#2891FF',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataFriend.setOption(option)
|
||||
this.echartDataGroup.setOption(option)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.chartInit()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Message {
|
||||
padding: 0 30px;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
padding: 40px 0 24px 0;
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
p {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 517px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
210
src/project/saas/AppResidentStatistics/components/People.vue
Normal file
210
src/project/saas/AppResidentStatistics/components/People.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div class="People">
|
||||
<div class="title">
|
||||
居民好友统计<span>(统计数据为去重后的数据)</span>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in friendList" :key="index">
|
||||
<p>{{ item.label }}</p>
|
||||
<h3>{{ item.value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartFriend"></div>
|
||||
<div class="title">
|
||||
居民群统计<span>(统计数据为去重后的数据)</span>
|
||||
</div>
|
||||
<div class="tab-content">
|
||||
<div class="item" v-for="(item, index) in groupList" :key="index">
|
||||
<p>{{ item.label }}</p>
|
||||
<h3>{{ item.value }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-content" id="chartGroup"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
name: "People",
|
||||
data() {
|
||||
return {
|
||||
friendList: [
|
||||
{
|
||||
label: '居民好友',
|
||||
value: '235,625'
|
||||
},
|
||||
{
|
||||
label: '昨日新增',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '昨日流失',
|
||||
value: '18'
|
||||
}
|
||||
],
|
||||
groupList: [
|
||||
{
|
||||
label: '居民群',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '居民群',
|
||||
value: '235,625'
|
||||
},
|
||||
{
|
||||
label: '昨日新增',
|
||||
value: '235'
|
||||
},
|
||||
{
|
||||
label: '昨日流失',
|
||||
value: '18'
|
||||
}
|
||||
],
|
||||
echartDataFriend: null,
|
||||
echartDataGroup: null
|
||||
}
|
||||
},
|
||||
computed: { ...mapState(['user']) },
|
||||
methods: {
|
||||
chartInit() {
|
||||
this.echartDataFriend = echarts.init(document.getElementById('chartFriend'))
|
||||
this.echartDataGroup = echarts.init(document.getElementById('chartGroup'))
|
||||
var option = {
|
||||
grid: {
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#E1E5EF', //x轴的颜色
|
||||
width: 1, //轴线的宽度
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
data: ['4月', '5月', '6月', '7月', '8月',]
|
||||
},
|
||||
yAxis: {
|
||||
axisLine:{ //y轴
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: '#666',
|
||||
},
|
||||
},
|
||||
type: 'value',
|
||||
minInterval: 50,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [155, 130, 120, 160, 120, 130, 110],
|
||||
type: 'line',
|
||||
areaStyle: {//覆盖区域的渐变色
|
||||
normal: {
|
||||
color: {
|
||||
type: 'linear',x: 0,y: 0,x2: 0,y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0, color: 'rgba(58,132,255, 0.8)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
global: false // 缺省为 false
|
||||
},
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: '#2891FF'
|
||||
}
|
||||
},
|
||||
itemStyle : {
|
||||
normal : {
|
||||
color:'#2891FF',
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
this.echartDataFriend.setOption(option)
|
||||
this.echartDataGroup.setOption(option)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.chartInit()
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.People {
|
||||
padding: 0 30px;
|
||||
.title {
|
||||
font-size: 32px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 44px;
|
||||
padding: 40px 0 24px 0;
|
||||
span {
|
||||
font-size: 26px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #999;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
display: flex;
|
||||
padding: 24px 0;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 16px;
|
||||
.item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
p {
|
||||
font-size: 24px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
color: #666;
|
||||
line-height: 48px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 36px;
|
||||
font-family: PingFangSC-Medium, PingFang SC;
|
||||
font-weight: 500;
|
||||
color: #000;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chart-content {
|
||||
width: 100%;
|
||||
height: 517px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/project/saas/AppResidentStatistics/img/location.png
Normal file
BIN
src/project/saas/AppResidentStatistics/img/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 766 B |
Reference in New Issue
Block a user