企业

pages/index.vue

@@ -1,10 +1,19 @@
 <template>
-  <cs-page :selected="0" title="智慧生态" isTab>
+	<cs-page
+		:selected="0"
+		title="智慧生态"
+		isTab
+	>
 		<view class="view-container">
-      <van-dropdown-menu safe-area-tab-bar active-color="#17C653">
+			<van-dropdown-menu
+				safe-area-tab-bar
+				active-color="#17C653"
+			>
 				<van-dropdown-item
 					:value="queryParams.deptId"
-          :options="getDropdownOption('dept')"
+					:options="dropOption.dept"
+					use-before-toggle
+					@before-toggle="dorpToggle"
 					@change="
 						v => {
 							querySelect(v, 'deptId')
@@ -13,7 +22,7 @@
 				/>
 				<van-dropdown-item
 					:value="queryParams.selectWeek"
-          :options="getDropdownOption('select_week')"
+					:options="dropOption.select_week"
 					@change="
 						v => {
 							querySelect(v, 'selectWeek')
@@ -31,7 +40,10 @@
 				@refresherpulling="refresherpulling"
 			>
 				<view class="box row-1">
-          <view class="wd-flex" style="justify-content: space-around">
+					<view
+						class="wd-flex"
+						style="justify-content: space-around"
+					>
 						<view
 							class="wd-flex wd-flex-col wd-flex-center"
 							style="gap: 4px"
@@ -79,7 +91,10 @@
 						:canvas2d="true"
 						style="height: 144px"
 					></qiun-data-charts>
-          <view class="wd-flex" style="gap: 12px; flex-wrap: wrap">
+					<view
+						class="wd-flex"
+						style="gap: 12px; flex-wrap: wrap"
+					>
 						<view
 							class="wd-flex wd-flex-col wd-flex-center"
 							v-for="item in detail.legendData"
@@ -92,7 +107,10 @@
 								border-radius: 4px;
 							"
 						>
-              <view class="wd-flex wd-flex-col" style="gap: 4px">
+							<view
+								class="wd-flex wd-flex-col"
+								style="gap: 4px"
+							>
 								<view
 									class="wd-flex"
 									style="align-items: center; gap: 4px"
@@ -102,7 +120,7 @@
 											width: '8px',
 											height: '4px',
 											borderRadius: '4px',
-                      backgroundColor: item.color
+											backgroundColor: item.color,
 										}"
 									></view>
 									<view class="">{{ item.name }}</view>
@@ -138,9 +156,7 @@
 								v-for="(item, index) in tabs"
 								:key="index"
 								:style="{
-                  '--index': tabs.findIndex(
-                    i => i.type == queryParams.type
-                  )
+									'--index': tabs.findIndex(i => i.type == queryParams.type),
 								}"
 								@tap="changeTab(item.type)"
 							>
@@ -148,7 +164,7 @@
 									class="name"
 									:style="{
 										color:
-                      queryParams.type == item.type ? '#071437' : '#78829d'
+											queryParams.type == item.type ? '#071437' : '#78829d',
 									}"
 								>
 									{{ item.name }}
@@ -164,7 +180,10 @@
 							style="justify-content: space-between; padding: 12px"
 						>
 							<view class="wd-font-800">{{ item.name }}</view>
-              <view class="wd-font-800" style="color: #ff6f1e">
+							<view
+								class="wd-font-800"
+								style="color: #ff6f1e"
+							>
 								<view>
 									<u-count-to
 										:start-val="0"
@@ -185,16 +204,16 @@
 </template>
 
 <script>
-import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
-import { HomeApi } from '@/api/common/home.js'
-export default {
+	import { getDictBatchByType, getDeptTree } from '@/api/system/dict.js'
+	import { HomeApi } from '@/api/common/home.js'
+	export default {
 		data() {
 			return {
 				dictMap: {},
 				queryParams: {
 					selectWeek: '',
 					deptId: '',
-        type: 1
+					type: 1,
 				},
 				detail: {},
 				opts: {},
@@ -203,22 +222,23 @@ export default {
 				tabs: [
 					{
 						name: '资质逾期',
-          type: 1
+						type: 1,
 					},
 					{
 						name: '整改次数',
-          type: 2
-        }
+						type: 2,
+					},
 				],
 				refresherTriggered: false,
 				list: [],
-      color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653']
+				dropOption: {},
+				color: ['#1B84FF', '#7239EA', '#F6B100', '#F8285A', '#17C653'],
 			}
 		},
 		onLoad: async function () {
 			await uni.hideTabBar()
 			uni.hideTabBar({
-      animation: false
+				animation: false,
 			})
 			this.getDict()
 			if (!this.$roles.checkRole(['director'])) {
@@ -246,43 +266,32 @@ export default {
 			},
 			async getDict() {
 				const dict = await getDictBatchByType({
-        type: ['select_week'].join(',')
+					type: ['select_week'].join(','),
 				})
 				const dept = await getDeptTree()
-      this.dictMap = {
-        ...dict.data,
-        dept: dept.data
-      }
-    },
-    getDropdownOption(key) {
-      if (!this.dictMap[key]) return []
-      const keyMap = {
-        select_week: '周期',
-        dept: '部门'
-      }
-      if (key == 'dept') {
-        const data = [
-          ...this.dictMap[key].map(d => {
+				this.dropOption.dept = [
+					...dept.data.map(i => {
 						return {
-              value: d.id,
-              text: d.name
+							value: i.id,
+							text: i.name,
 						}
-          })
+					}),
+					{
+						value: '',
+						text: '全部',
+					},
 				]
-        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 => {
+				this.dropOption.select_week = [
+					...dict.data.select_week.map(i => {
 						return {
-            value: d.value,
-            text: d.label
+							value: i.value,
+							text: i.label,
 						}
 					}),
-        { value: '', text: keyMap[key] }
+					{
+						value: '',
+						text: '全部',
+					},
 				]
 			},
 			async init() {
@@ -309,19 +318,19 @@ export default {
 				const pieData = data.map(i => {
 					return {
 						name: i.name,
-          value: Number(i.pieValue)
+						value: Number(i.pieValue),
 					}
 				})
 				if (Number(max) < 100) {
 					pieData.push({
 						name: '',
 						value: 100 - Number(max),
-          color: '#fff'
+						color: '#fff',
 					})
 				}
 				this.opts = {
 					legend: {
-          show: false
+						show: false,
 					},
 					color: this.color,
 					rotate: false,
@@ -333,12 +342,12 @@ export default {
 						name: `${max}%`,
 						fontSize: 24,
 						color: '#071437',
-          fontWeight: 'bold'
+						fontWeight: 'bold',
 					},
 					subtitle: {
 						name: '完成率',
 						fontSize: 14,
-          color: '#78829D'
+						color: '#78829D',
 					},
 					extra: {
 						ring: {
@@ -348,16 +357,16 @@ export default {
 							labelWidth: 15,
 							border: false,
 							borderColor: '#FFFFFF',
-            linearType: 'none'
-          }
-        }
+							linearType: 'none',
+						},
+					},
 				}
 				this.chartData = {
 					series: [
 						{
-            data: pieData
-          }
-        ]
+							data: pieData,
+						},
+					],
 				}
 			},
 			sectionChange(index) {
@@ -382,16 +391,27 @@ export default {
 			},
 			refresherrefresh() {
 				this.init()
+			},
+			dorpToggle(e) {
+				if (!this.$roles.checkRole(['director'])) {
+					uni.showToast({
+						icon: 'none',
+						title: '暂无权限',
+					})
+					e.detail.callback(false)
+				} else {
+					e.detail.callback(true)
 				}
+			},
+		},
 	}
-}
 </script>
 
 <style lang="scss" scoped>
-.view-container {
+	.view-container {
 		height: 100%;
-}
-.view {
+	}
+	.view {
 		padding: 0 12px;
 		padding-bottom: 12px;
 		display: flex;
@@ -431,11 +451,11 @@ export default {
 				z-index: 1;
 			}
 		}
-}
-::v-deep .van-dropdown-menu {
+	}
+	::v-deep .van-dropdown-menu {
 		box-shadow: none;
 		height: 35px !important;
 		font-size: 13px;
 		border-bottom: 1px solid #f1f1f4;
-}
+	}
 </style>