Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
aixianling
2022-09-06 17:50:00 +08:00
11 changed files with 686 additions and 57 deletions

View File

@@ -27,7 +27,7 @@ export default {
},
onLoad(options) {
this.id = options.id
this.id = '7a4701d5641543cca4419488db368d3e'
// this.id = '7a4701d5641543cca4419488db368d3e'
this.getAppInfo()
},
methods: {

View File

@@ -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;

View File

@@ -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>

View File

@@ -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 {
}
}
}

View File

@@ -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) => {

View File

@@ -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;

View 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>

View 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>

View 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>

View 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 766 B