首页接口

api/common/home.js

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

pages/index.vue

@@ -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: '',
+        selectWeek: '',
-        dept: '',
+        deptId: '',
-        enterprise: 0
+        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 - 35 - 25
-          this.viewHeigth = data.height - 40 - 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: [
+            data: pieData
-              { name: '一班', value: 50 },
-              { name: '二班', value: 30 },
-              { name: '三班', value: 20 },
-              { name: '四班', value: 18 },
-              { name: '五班', value: 8 },
-              { name: '', value: 2, color: '#fff' }
-            ]
           }
         ]
       }
@@ -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>