HB
/
ruoyi-miniapp
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页接口

master
爱~海~爱海爱海~右 2 months ago
parent
639f0a8200
commit
9b7c6e7f65
2 changed files with 112 additions and 42 deletions
Split View
  1. 14
      api/common/home.js
  2. 140
      pages/index.vue

14
api/common/home.js
Unescape View File

@ -0,0 +1,14 @@
import request from '@/utils/request'
export const HomeApi = {
/**
* 获取饼图相关的数据
*/
getPieData: (params) => {
return request({
url: '/system/home/appCount1',
method: 'GET',
params
})
}
}

140
pages/index.vue
Unescape View File

@ -3,20 +3,20 @@
<view class="view-container">
<van-dropdown-menu safe-area-tab-bar active-color="#17C653">
<van-dropdown-item
:value="queryParams.dept"
:value="queryParams.deptId"
:options="getDropdownOption('dept')"
@change="
v => {
querySelect(v, 'dept')
querySelect(v, 'deptId')
}
"
/>
<van-dropdown-item
:value="queryParams.week"
:value="queryParams.selectWeek"
:options="getDropdownOption('select_week')"
@change="
v => {
querySelect(v, 'week')
querySelect(v, 'selectWeek')
}
"
/>
@ -31,28 +31,53 @@
<view
class="wd-flex wd-flex-col wd-flex-center"
style="gap: 4px"
v-for="item in 3"
:key="item"
>
<u-count-to
:start-val="0"
:end-val="200"
:end-val="detail.taskCount"
bold
font-size="24"
color="#071437"
></u-count-to>
<view class="">任务数量</view>
</view>
<view
class="wd-flex wd-flex-col wd-flex-center"
style="gap: 4px"
>
<u-count-to
:start-val="0"
:end-val="detail.inspectionsCount"
bold
font-size="24"
color="#071437"
></u-count-to>
<view class="">执法记录</view>
</view>
<view
class="wd-flex wd-flex-col wd-flex-center"
style="gap: 4px"
>
<u-count-to
:start-val="0"
:end-val="detail.enterpriseCount"
bold
font-size="24"
color="#071437"
></u-count-to>
<view class="">标题</view>
<view class="">企业数量</view>
</view>
</view>
<qiun-data-charts
type="ring"
:opts="opts"
:chartData="chartData"
style="height: 144px"
></qiun-data-charts>
<view class="wd-flex" style="gap: 12px; flex-wrap: wrap">
<view
class="wd-flex wd-flex-col wd-flex-center"
v-for="item in 5"
v-for="item in detail.legendData"
:key="item"
style="
border: 1px solid #f9f9f9;
@ -72,15 +97,15 @@
width: '8px',
height: '4px',
borderRadius: '4px',
backgroundColor: 'red'
backgroundColor: item.color
}"
></view>
<view class="">部门名称</view>
<view class="">{{ item.name }}</view>
</view>
<view class="wd-flex wd-flex-center">
<u-count-to
:start-val="0"
:end-val="200"
:end-val="Number(item.value)"
bold
font-size="16"
color="#071437"
@ -108,13 +133,13 @@
v-for="(item, index) in tabs"
:key="index"
:style="{ '--index': queryParams.enterprise }"
@tap="queryParams.enterprise = index"
@tap="queryParams.enterprise = item.type"
>
<view
class="name"
:style="{
color:
queryParams.enterprise == index
queryParams.enterprise == item.type
? '#071437'
: '#78829d'
}"
@ -154,26 +179,31 @@
<script>
import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
import { HomeApi } from '@/api/common/home.js'
export default {
data() {
return {
dictMap: {},
queryParams: {
week: '',
dept: '',
enterprise: 0
selectWeek: '',
deptId: '',
type: 1
},
detail: {},
opts: {},
chartData: {},
viewHeigth: 0,
tabs: [
{
name: '资质逾期'
name: '资质逾期',
type: 1
},
{
name: '整改次数'
name: '整改次数',
type: 2
}
]
],
color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653']
}
},
onLoad: async function () {
@ -182,12 +212,12 @@ export default {
animation: false
})
this.getDict()
this.init()
},
onReady() {
this.$nextTick(() => {
this.getPageHeight()
})
this.init()
},
methods: {
getPageHeight() {
@ -195,8 +225,7 @@ export default {
query
.select('.view-container')
.boundingClientRect(data => {
console.log(data)
this.viewHeigth = data.height - 40 - 25
this.viewHeigth = data.height - 35 - 25
})
.exec()
},
@ -217,15 +246,19 @@ export default {
dept: '部门'
}
if (key == 'dept') {
return [
const data = [
...this.dictMap[key].map(d => {
return {
value: d.id,
text: d.name
}
}),
{ value: '', text: keyMap[key] }
})
]
if (!this.$roles.checkRole(['director'])) {
this.queryParams.deptId = this.$store.getters.deptId
return [...data]
}
return [...data, { value: '', text: keyMap[key] }]
}
return [
...this.dictMap[key].map(d => {
@ -237,19 +270,48 @@ export default {
{ value: '', text: keyMap[key] }
]
},
init() {
async init() {
if (!this.$roles.checkRole(['director'])) {
this.queryParams.deptId = this.$store.getters.deptId
}
const res = await HomeApi.getPieData(this.queryParams)
this.detail = res.data
let curIndex = 0
const data = this.detail.completionRate.map((item, index) => {
const res = { ...item, color: this.color[curIndex] }
curIndex > this.color.length ? 0 : curIndex++
return res
})
this.detail.legendData = data
const isMax = data.reduce(
(pre, cur) => pre + Number(cur.pieValue),
0
)
const pieData = data.map(i => {
return {
name: i.name,
value: Number(i.pieValue)
}
})
if (isMax < 100) {
pieData.push({
name: '',
value: 100 - isMax,
color: '#fff'
})
}
this.opts = {
legend: {
show: false
},
color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653'],
color: this.color,
rotate: false,
rotateLock: false,
padding: [5, 5, 5, 5],
padding: [0, 0, 0, 0],
dataLabel: false,
enableScroll: false,
title: {
name: '70%',
name: `${isMax}%`,
fontSize: 24,
color: '#071437',
fontWeight: 'bold'
@ -261,13 +323,11 @@ export default {
},
extra: {
ring: {
ringWidth: 20,
ringWidth: 15,
activeOpacity: 0.5,
activeRadius: 10,
offsetAngle: 90,
labelWidth: 15,
border: false,
customRadius: 80,
borderColor: '#FFFFFF',
linearType: 'none'
}
@ -276,14 +336,7 @@ export default {
this.chartData = {
series: [
{
data: [
{ name: '一班', value: 50 },
{ name: '二班', value: 30 },
{ name: '三班', value: 20 },
{ name: '四班', value: 18 },
{ name: '五班', value: 8 },
{ name: '', value: 2, color: '#fff' }
]
data: pieData
}
]
}
@ -341,6 +394,9 @@ export default {
}
}
::v-deep .van-dropdown-menu {
height: 40px !important;
box-shadow: none;
height: 35px !important;
font-size: 13px;
border-bottom: 1px solid #f1f1f4;
}
</style>

Write Preview
Loading…
Cancel
Save