diff --git a/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue b/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue index 42f29b0a..8b2c26c0 100644 --- a/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue +++ b/packages/conv/creditScore/AppGridMemberScore/AppGridMemberScore.vue @@ -2,7 +2,9 @@ + + + + + + + 关闭 + + @@ -102,7 +126,8 @@ export default { data() { return { name: "积分统计", - myChart: null, + myChart1: null, + myChart2: null, tableData: [], search: { current: 1, @@ -112,7 +137,9 @@ export default { page: {current: 1, size: 10, total: 0}, girdList: [], time: '', - timeCheck: ['昨日','近7天','近30天','自定义'] + timeCheck: ['昨日','近7天','近30天','自定义'], + currrntTime: '0', + dialog: false, } }, computed: { @@ -125,6 +152,7 @@ export default { { prop: "", label: '积分变动', align: "center", }, { prop: "", label: '剩余积分', align: "center", }, { prop: "", label: '时间', align: "center", }, + { slot: "options" } ] } }, @@ -132,39 +160,53 @@ export default { this.$dict.load('epidemicDangerousAreaLevel') }, methods: { - getColEcherts() { - let chartDom = document.getElementById('chart1'); - chartDom.style.width = (window.innerWidth - 328) / 2 + "px"; - this.myChart = echarts.init(chartDom); - this.myChart.setOption({ - dataZoom: [ - { - type: "slider", - xAxisIndex: [0], - filterMode: "filter", - }, - ], + getColEcherts1() { + let chartDom1 = document.getElementById('chart1'); + chartDom1.style.width = (window.innerWidth - 344) / 2 + "px"; + this.myChart1 = echarts.init(chartDom1); + this.myChart1.setOption({ + + title: { + text: '个人积分排行' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '16px', + right: '28px', + bottom: '14px', + top: '50px', + containLabel: true + }, xAxis: { - type: 'category', - data: ['每日签到', '事件上报', '特殊人员跟进', '群发任务', '邀请居民进群'] + type: 'value', + boundaryGap: [0, 0.01], }, yAxis: { - type: 'value' + type: 'category', + data: ['Brazil', 'Indonesia', 'India', 'China', 'World'], + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, }, + series: [ { data: [120, 200, 150, 80, 70,], type: 'bar', - showBackground: true, - backgroundStyle: { - color: 'rgba(180, 180, 180, 0.2)' - }, itemStyle: { normal: { color: "#5087ec", label: { show: true, //开启显示 - position: 'top', //在上方显示 + position: 'right', //在上方显示 textStyle: { fontSize: 13, color: '#666' @@ -172,23 +214,104 @@ export default { }, }, }, + barWidth: 10, + barGap: '20%', } ] }, true); window.addEventListener("resize", this.onResize) }, - onResize() { - this.myChart.resize() + getColEcherts2() { + let chartDom2 = document.getElementById('chart2'); + chartDom2.style.width = (window.innerWidth - 344) / 2 + "px"; + this.myChart2 = echarts.init(chartDom2); + this.myChart2.setOption({ + title: { + text: '网格积分排行' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '16px', + right: '28px', + bottom: '14px', + top: '50px', + containLabel: true + }, + xAxis: { + type: 'value', + boundaryGap: [0, 0.01], + }, + yAxis: { + type: 'category', + data: ['Brazil', 'Indonesia', 'India', 'China', 'World'], + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + }, + series: [ + { + data: [120, 200, 150, 80, 70,], + type: 'bar', + itemStyle: { + normal: { + color: "#5087ec", + label: { + show: true, //开启显示 + position: 'right', //在上方显示 + textStyle: { + fontSize: 13, + color: '#666' + } + }, + }, + }, + barWidth: 10, + barGap: '20%', + } + ] + }, true); + window.addEventListener("resize", this.onResize2) + }, + onResize1() { + this.myChart1.resize() + }, + onResize2() { + this.myChart2.resize() }, getListInit() {}, getTableData() {}, + timeChange(index) { + this.currrntTime = index + }, + open(id) { + this.dialog = true + this.getDetail(id) + }, + getDetail(id) { + + } + + + + }, mounted() { - this.getColEcherts() + this.getColEcherts1() + this.getColEcherts2() }, destroyed () { - window.removeEventListener('resize', this.onResize) + window.removeEventListener('resize', this.onResize1) + window.removeEventListener('resize', this.onResize2) }, + } @@ -223,9 +346,16 @@ export default { display: inline-block; width: 70px; height: 32px; + line-height: 32px; border-radius: 2px; border: 1px solid #D0D4DC; margin-right: 8px; + text-align: center; + cursor: pointer; + } + .active { + color: #2266FF; + border: 1px solid #2266FF; } } } @@ -267,27 +397,38 @@ export default { .echertsBox { width: 100%; margin-top: 20px; - background: #F9F9F9; - box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500); - border-radius: 4px; - padding: 16px; - box-sizing: border-box; - h4 { - color: #222222; - font-style: 16px; - font-weight: 600; + background: #FFF; + display: flex; + .left_Box { + margin-right: 16px; + } + .right_Box { + width: 100%; } - .bar_Box { - width: 100%; - #chartDom { + .left_Box, + .right_Box { + background: #F9F9F9; + box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500); + border-radius: 4px; + padding: 16px; + box-sizing: border-box; + #chart1, + #chart2 { width: 100%; - height: 300px; - margin-top: 16px; + height: 260px; } } - } } + ::v-deep .el-dialog__footer { + text-align: center; + } + ::v-deep .el-dialog__header { + border-bottom: 1px solid #DDD; + } + ::v-deep .ai-detail { + background: #FFF; + } } \ No newline at end of file