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

企业

master
爱~海~爱海爱海~右 1 month ago
parent
2fa5358ce3
commit
b380fde2bc
1 changed files with 453 additions and 433 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 886
      pages/index.vue

886
pages/index.vue
Unescape View File

@ -1,441 +1,461 @@
<template> <template>
<cs-page :selected="0" title="智慧生态" isTab> <cs-page
<view class="view-container"> :selected="0"
<van-dropdown-menu safe-area-tab-bar active-color="#17C653"> title="智慧生态"
<van-dropdown-item isTab
:value="queryParams.deptId" >
:options="getDropdownOption('dept')" <view class="view-container">
@change=" <van-dropdown-menu
v => { safe-area-tab-bar
querySelect(v, 'deptId') active-color="#17C653"
} >
" <van-dropdown-item
/> :value="queryParams.deptId"
<van-dropdown-item :options="dropOption.dept"
:value="queryParams.selectWeek" use-before-toggle
:options="getDropdownOption('select_week')" @before-toggle="dorpToggle"
@change=" @change="
v => { v => {
querySelect(v, 'selectWeek') querySelect(v, 'deptId')
} }
" "
/> />
</van-dropdown-menu> <van-dropdown-item
<scroll-view :value="queryParams.selectWeek"
:scroll-y="true" :options="dropOption.select_week"
:style="{ maxHeight: `${viewHeigth}px` }" @change="
class="view" v => {
:refresher-enabled="true" querySelect(v, 'selectWeek')
@refresherrefresh="refresherrefresh" }
:refresher-triggered="refresherTriggered" "
@refresherpulling="refresherpulling" />
> </van-dropdown-menu>
<view class="box row-1"> <scroll-view
<view class="wd-flex" style="justify-content: space-around"> :scroll-y="true"
<view :style="{ maxHeight: `${viewHeigth}px` }"
class="wd-flex wd-flex-col wd-flex-center" class="view"
style="gap: 4px" :refresher-enabled="true"
> @refresherrefresh="refresherrefresh"
<u-count-to :refresher-triggered="refresherTriggered"
:start-val="0" @refresherpulling="refresherpulling"
:end-val="detail.taskCount" >
bold <view class="box row-1">
font-size="24" <view
color="#071437" class="wd-flex"
></u-count-to> style="justify-content: space-around"
<view class="">任务数量</view> >
</view> <view
<view class="wd-flex wd-flex-col wd-flex-center"
class="wd-flex wd-flex-col wd-flex-center" style="gap: 4px"
style="gap: 4px" >
> <u-count-to
<u-count-to :start-val="0"
:start-val="0" :end-val="detail.taskCount"
:end-val="detail.inspectionsCount" bold
bold font-size="24"
font-size="24" color="#071437"
color="#071437" ></u-count-to>
></u-count-to> <view class="">任务数量</view>
<view class="">执法记录</view> </view>
</view> <view
<view class="wd-flex wd-flex-col wd-flex-center"
class="wd-flex wd-flex-col wd-flex-center" style="gap: 4px"
style="gap: 4px" >
> <u-count-to
<u-count-to :start-val="0"
:start-val="0" :end-val="detail.inspectionsCount"
:end-val="detail.enterpriseCount" bold
bold font-size="24"
font-size="24" color="#071437"
color="#071437" ></u-count-to>
></u-count-to> <view class="">执法记录</view>
<view class="">企业数量</view> </view>
</view> <view
</view> class="wd-flex wd-flex-col wd-flex-center"
<qiun-data-charts style="gap: 4px"
type="ring" >
:opts="opts" <u-count-to
:chartData="chartData" :start-val="0"
:canvas2d="true" :end-val="detail.enterpriseCount"
style="height: 144px" bold
></qiun-data-charts> font-size="24"
<view class="wd-flex" style="gap: 12px; flex-wrap: wrap"> color="#071437"
<view ></u-count-to>
class="wd-flex wd-flex-col wd-flex-center" <view class="">企业数量</view>
v-for="item in detail.legendData" </view>
:key="item" </view>
style=" <qiun-data-charts
border: 1px solid #f9f9f9; type="ring"
width: calc(100% / 3 - 8px); :opts="opts"
padding: 12px; :chartData="chartData"
gap: 4px; :canvas2d="true"
border-radius: 4px; style="height: 144px"
" ></qiun-data-charts>
> <view
<view class="wd-flex wd-flex-col" style="gap: 4px"> class="wd-flex"
<view style="gap: 12px; flex-wrap: wrap"
class="wd-flex" >
style="align-items: center; gap: 4px" <view
> class="wd-flex wd-flex-col wd-flex-center"
<view v-for="item in detail.legendData"
:style="{ :key="item"
width: '8px', style="
height: '4px', border: 1px solid #f9f9f9;
borderRadius: '4px', width: calc(100% / 3 - 8px);
backgroundColor: item.color padding: 12px;
}" gap: 4px;
></view> border-radius: 4px;
<view class="">{{ item.name }}</view> "
</view> >
<view class="wd-flex wd-flex-center"> <view
<u-count-to class="wd-flex wd-flex-col"
:start-val="0" style="gap: 4px"
:end-val="Number(item.value)" >
bold <view
font-size="16" class="wd-flex"
color="#071437" style="align-items: center; gap: 4px"
></u-count-to> >
% <view
</view> :style="{
</view> width: '8px',
</view> height: '4px',
</view> borderRadius: '4px',
</view> backgroundColor: item.color,
<view class="box row-1"> }"
<view ></view>
class="wd-flex" <view class="">{{ item.name }}</view>
style="margin-top: 12px; justify-content: center" </view>
> <view class="wd-flex wd-flex-center">
<view <u-count-to
style=" :start-val="0"
background-color: #f9f9f9; :end-val="Number(item.value)"
display: inline-flex; bold
padding: 4px; font-size="16"
" color="#071437"
> ></u-count-to>
<view %
class="tab" </view>
v-for="(item, index) in tabs" </view>
:key="index" </view>
:style="{ </view>
'--index': tabs.findIndex( </view>
i => i.type == queryParams.type <view class="box row-1">
) <view
}" class="wd-flex"
@tap="changeTab(item.type)" style="margin-top: 12px; justify-content: center"
> >
<view <view
class="name" style="
:style="{ background-color: #f9f9f9;
color: display: inline-flex;
queryParams.type == item.type ? '#071437' : '#78829d' padding: 4px;
}" "
> >
{{ item.name }} <view
</view> class="tab"
</view> v-for="(item, index) in tabs"
</view> :key="index"
</view> :style="{
<view style="min-height: 220px"> '--index': tabs.findIndex(i => i.type == queryParams.type),
<view }"
v-for="(item, index) in list" @tap="changeTab(item.type)"
:key="index" >
class="wd-flex" <view
style="justify-content: space-between; padding: 12px" class="name"
> :style="{
<view class="wd-font-800">{{ item.name }}</view> color:
<view class="wd-font-800" style="color: #ff6f1e"> queryParams.type == item.type ? '#071437' : '#78829d',
<view> }"
<u-count-to >
:start-val="0" {{ item.name }}
:end-val="item.count" </view>
bold </view>
font-size="14" </view>
color="#FF6F1E" </view>
></u-count-to> <view style="min-height: 220px">
<text>{{ queryParams.type == 1 ? '天' : '次' }}</text> <view
</view> v-for="(item, index) in list"
</view> :key="index"
</view> class="wd-flex"
</view> style="justify-content: space-between; padding: 12px"
</view> >
</scroll-view> <view class="wd-font-800">{{ item.name }}</view>
</view> <view
</cs-page> class="wd-font-800"
style="color: #ff6f1e"
>
<view>
<u-count-to
:start-val="0"
:end-val="item.count"
bold
font-size="14"
color="#FF6F1E"
></u-count-to>
<text>{{ queryParams.type == 1 ? '天' : '次' }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</cs-page>
</template> </template>
<script> <script>
import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js' import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
import { HomeApi } from '@/api/common/home.js' import { HomeApi } from '@/api/common/home.js'
export default { export default {
data() { data() {
return { return {
dictMap: {}, dictMap: {},
queryParams: { queryParams: {
selectWeek: '', selectWeek: '',
deptId: '', deptId: '',
type: 1 type: 1,
}, },
detail: {}, detail: {},
opts: {}, opts: {},
chartData: {}, chartData: {},
viewHeigth: 0, viewHeigth: 0,
tabs: [ tabs: [
{ {
name: '资质逾期', name: '资质逾期',
type: 1 type: 1,
}, },
{ {
name: '整改次数', name: '整改次数',
type: 2 type: 2,
} },
], ],
refresherTriggered: false, refresherTriggered: false,
list: [], list: [],
color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653'] dropOption: {},
} color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653'],
}, }
onLoad: async function () { },
await uni.hideTabBar() onLoad: async function () {
uni.hideTabBar({ await uni.hideTabBar()
animation: false uni.hideTabBar({
}) animation: false,
this.getDict() })
if (!this.$roles.checkRole(['director'])) { this.getDict()
this.queryParams.deptId = this.$store.getters.deptId if (!this.$roles.checkRole(['director'])) {
} this.queryParams.deptId = this.$store.getters.deptId
this.init() }
}, this.init()
onReady() { },
this.$nextTick(() => { onReady() {
this.getPageHeight() this.$nextTick(() => {
}) this.getPageHeight()
}, })
onShow() { },
this.init() onShow() {
}, this.init()
methods: { },
getPageHeight() { methods: {
const query = uni.createSelectorQuery().in(this) getPageHeight() {
query const query = uni.createSelectorQuery().in(this)
.select('.view-container') query
.boundingClientRect(data => { .select('.view-container')
this.viewHeigth = data.height - 35 - 25 .boundingClientRect(data => {
}) this.viewHeigth = data.height - 35 - 25
.exec() })
}, .exec()
async getDict() { },
const dict = await getDictBatchByType({ async getDict() {
type: ['select_week'].join(',') const dict = await getDictBatchByType({
}) type: ['select_week'].join(','),
const dept = await getDeptTree() })
this.dictMap = { const dept = await getDeptTree()
...dict.data, this.dropOption.dept = [
dept: dept.data ...dept.data.map(i => {
} return {
}, value: i.id,
getDropdownOption(key) { text: i.name,
if (!this.dictMap[key]) return [] }
const keyMap = { }),
select_week: '周期', {
dept: '部门' value: '',
} text: '全部',
if (key == 'dept') { },
const data = [ ]
...this.dictMap[key].map(d => { this.dropOption.select_week = [
return { ...dict.data.select_week.map(i => {
value: d.id, return {
text: d.name value: i.value,
} text: i.label,
}) }
] }),
if (!this.$roles.checkRole(['director'])) { {
this.queryParams.deptId = this.$store.getters.deptId value: '',
return [...data] text: '全部',
} },
return [...data, { value: '', text: keyMap[key] }] ]
} },
return [ async init() {
...this.dictMap[key].map(d => { // if (!this.$roles.checkRole(['director'])) {
return { // this.queryParams.deptId = this.$store.getters.deptId
value: d.value, // }
text: d.label const res = await HomeApi.getPieData(this.queryParams)
} this.detail = res.data
}), let curIndex = 0
{ value: '', text: keyMap[key] } const data = this.detail.completionRate.map((item, index) => {
] const res = { ...item, color: this.color[curIndex] }
}, curIndex > this.color.length ? 0 : curIndex++
async init() { return res
// if (!this.$roles.checkRole(['director'])) { })
// this.queryParams.deptId = this.$store.getters.deptId this.detail.legendData = data
// } this.setPieData(data, this.detail.taskCompletionRate)
const res = await HomeApi.getPieData(this.queryParams) this.getList()
this.detail = res.data },
let curIndex = 0 async getList() {
const data = this.detail.completionRate.map((item, index) => { const res = await HomeApi.getListData(this.queryParams)
const res = { ...item, color: this.color[curIndex] } this.list = res.data
curIndex > this.color.length ? 0 : curIndex++ },
return res setPieData(data, max) {
}) const pieData = data.map(i => {
this.detail.legendData = data return {
this.setPieData(data, this.detail.taskCompletionRate) name: i.name,
this.getList() value: Number(i.pieValue),
}, }
async getList() { })
const res = await HomeApi.getListData(this.queryParams) if (Number(max) < 100) {
this.list = res.data pieData.push({
}, name: '',
setPieData(data, max) { value: 100 - Number(max),
const pieData = data.map(i => { color: '#fff',
return { })
name: i.name, }
value: Number(i.pieValue) this.opts = {
} legend: {
}) show: false,
if (Number(max) < 100) { },
pieData.push({ color: this.color,
name: '', rotate: false,
value: 100 - Number(max), rotateLock: false,
color: '#fff' padding: [0, 0, 0, 0],
}) dataLabel: false,
} enableScroll: false,
this.opts = { title: {
legend: { name: `${max}%`,
show: false fontSize: 24,
}, color: '#071437',
color: this.color, fontWeight: 'bold',
rotate: false, },
rotateLock: false, subtitle: {
padding: [0, 0, 0, 0], name: '完成率',
dataLabel: false, fontSize: 14,
enableScroll: false, color: '#78829D',
title: { },
name: `${max}%`, extra: {
fontSize: 24, ring: {
color: '#071437', ringWidth: 15,
fontWeight: 'bold' activeOpacity: 0.5,
}, offsetAngle: 90,
subtitle: { labelWidth: 15,
name: '完成率', border: false,
fontSize: 14, borderColor: '#FFFFFF',
color: '#78829D' linearType: 'none',
}, },
extra: { },
ring: { }
ringWidth: 15, this.chartData = {
activeOpacity: 0.5, series: [
offsetAngle: 90, {
labelWidth: 15, data: pieData,
border: false, },
borderColor: '#FFFFFF', ],
linearType: 'none' }
} },
} sectionChange(index) {
} this.queryParams.enterprise = index
this.chartData = { },
series: [ querySelect(v, key) {
{ this.queryParams[key] = v.detail
data: pieData this.init()
} },
] changeTab(type) {
} this.queryParams.type = type
}, this.getList()
sectionChange(index) { },
this.queryParams.enterprise = index refresherpulling() {
}, const that = this
querySelect(v, key) { if (!this.refresherTriggered) {
this.queryParams[key] = v.detail this.refresherTriggered = true
this.init() setTimeout(() => {
}, that.refresherTriggered = false
changeTab(type) { }, 1000)
this.queryParams.type = type }
this.getList() },
}, refresherrefresh() {
refresherpulling() { this.init()
const that = this },
if (!this.refresherTriggered) { dorpToggle(e) {
this.refresherTriggered = true if (!this.$roles.checkRole(['director'])) {
setTimeout(() => { uni.showToast({
that.refresherTriggered = false icon: 'none',
}, 1000) title: '暂无权限',
} })
}, e.detail.callback(false)
refresherrefresh() { } else {
this.init() e.detail.callback(true)
} }
} },
} },
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.view-container { .view-container {
height: 100%; height: 100%;
} }
.view { .view {
padding: 0 12px; padding: 0 12px;
padding-bottom: 12px; padding-bottom: 12px;
display: flex; display: flex;
gap: 12px; gap: 12px;
flex-flow: column nowrap; flex-flow: column nowrap;
.box { .box {
padding: 12px; padding: 12px;
background-color: #fff; background-color: #fff;
border: 1px solid #f9f9f9; border: 1px solid #f9f9f9;
border-radius: 12px; border-radius: 12px;
margin-top: 12px; margin-top: 12px;
&:last-child { &:last-child {
margin-bottom: 12px; margin-bottom: 12px;
} }
} }
.row-1 { .row-1 {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
gap: 12px; gap: 12px;
} }
.tab { .tab {
position: relative; position: relative;
padding: 4px 16px; padding: 4px 16px;
.name { .name {
z-index: 2; z-index: 2;
position: inherit; position: inherit;
font-weight: bold; font-weight: bold;
} }
&:first-child::before { &:first-child::before {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background-color: #fff; background-color: #fff;
border-radius: 2px; border-radius: 2px;
transform: translateX(calc(var(--index) * 100%)); transform: translateX(calc(var(--index) * 100%));
transition: 0.2s all; transition: 0.2s all;
z-index: 1; z-index: 1;
} }
} }
} }
::v-deep .van-dropdown-menu { ::v-deep .van-dropdown-menu {
box-shadow: none; box-shadow: none;
height: 35px !important; height: 35px !important;
font-size: 13px; font-size: 13px;
border-bottom: 1px solid #f1f1f4; border-bottom: 1px solid #f1f1f4;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save