index.vue 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <HomeContainer :customStyle="{ background: 'none' }">
  3. <!-- 页面标题 -->
  4. <view class="page-header">
  5. <view class="report-type">{{ reportTypeText }}</view>
  6. <!-- 班组和个人切换按钮 -->
  7. <SelectTag v-if="isTeamLeader" :tags="roleTags" :selected-value="currentQueryParams.scopedType"
  8. @change="handleRoleChange" class="role-selector" />
  9. </view>
  10. <!-- 四个分析组件 -->
  11. <view class="analysis-sections">
  12. <!-- 勤务组织组件 -->
  13. <DutyOrganization :query-form="currentQueryParams" />
  14. <!-- 质控活动组件 -->
  15. <QualityControl :query-form="currentQueryParams" />
  16. <!-- 风险隐患组件 -->
  17. <RiskHazard :query-form="currentQueryParams" />
  18. <!-- 抽问抽答组件 -->
  19. <QaAnalysis :query-form="currentQueryParams" />
  20. </view>
  21. </HomeContainer>
  22. </template>
  23. <script>
  24. import HomeContainer from '@/components/HomeContainer.vue'
  25. import DutyOrganization from './components/dutyOrganization.vue'
  26. import QualityControl from './components/qualityControl.vue'
  27. import RiskHazard from './components/riskHazard.vue'
  28. import QaAnalysis from './components/qaAnalysis.vue'
  29. import SelectTag from '@/components/select-tag/select-tag.vue'
  30. // import { getUsageReport } from '@/api/qualityControlAnalysisReport/qualityControlAnalysisReport'
  31. export default {
  32. name: 'QualityControlAnalysisReport',
  33. components: {
  34. HomeContainer,
  35. DutyOrganization,
  36. QualityControl,
  37. RiskHazard,
  38. QaAnalysis,
  39. SelectTag
  40. },
  41. data() {
  42. return {
  43. // 查询参数
  44. currentQueryParams: {
  45. dateRangeQueryType: 'MONTH', // 默认月度
  46. year: new Date().getFullYear(),
  47. quarter: '',
  48. month: new Date().getMonth() + 1,
  49. scopedType: ''
  50. },
  51. // 页面加载状态
  52. loading: false,
  53. // 报告数据
  54. reportData: {},
  55. // 角色切换相关数据
  56. roleTags: [
  57. { label: '班组', value: 'TEAMS' },
  58. { label: '个人', value: 'USER' }
  59. ]
  60. }
  61. },
  62. computed: {
  63. // 报告类型文本
  64. reportTypeText() {
  65. const now = new Date()
  66. const { dateRangeQueryType } = this.currentQueryParams
  67. switch (dateRangeQueryType) {
  68. case 'MONTH': {
  69. const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1)
  70. const year = lastMonth.getFullYear()
  71. const month = lastMonth.getMonth() + 1
  72. return `${year}年${month}月-月度报告`
  73. }
  74. case 'QUARTER': {
  75. const currentQuarter = Math.floor((now.getMonth()) / 3) + 1
  76. const lastQuarter = currentQuarter === 1 ? 4 : currentQuarter - 1
  77. const year = currentQuarter === 1 ? now.getFullYear() - 1 : now.getFullYear()
  78. return `${year}年第${lastQuarter}季度-季度报告`
  79. }
  80. case 'YEAR': {
  81. const lastYear = now.getFullYear() - 1
  82. return `${lastYear}年-年度报告`
  83. }
  84. default:
  85. return '报告'
  86. }
  87. },
  88. // 时间范围文本
  89. timeRangeText() {
  90. const { dateRangeQueryType, year, quarter, month } = this.currentQueryParams
  91. switch (dateRangeQueryType) {
  92. case 'YEAR':
  93. return `${year}年`
  94. case 'QUARTER':
  95. return `${year}年第${quarter}季度`
  96. case 'MONTH':
  97. return `${year}年${month}月`
  98. default:
  99. return '未知时间范围'
  100. }
  101. },
  102. // 计算属性:检查是否为班组长
  103. isTeamLeader() {
  104. const roles = this.$store.state?.user?.roles || []
  105. return roles.includes('banzuzhang')
  106. }
  107. },
  108. onLoad(options) {
  109. // 设置查询参数
  110. this.setQueryParams(options)
  111. },
  112. onShow() {
  113. },
  114. methods: {
  115. // 设置查询参数
  116. setQueryParams(options) {
  117. const now = new Date()
  118. const currentYear = now.getFullYear()
  119. const currentMonth = now.getMonth() + 1
  120. const currentQuarter = Math.ceil(currentMonth / 3)
  121. // 从路由参数获取查询类型
  122. const dateRangeQueryType = options.dateRangeQueryType || 'MONTH'
  123. // 根据查询类型设置时间参数
  124. let year, quarter, month
  125. // 优先使用路由参数中的时间值,如果没有则使用默认值(取前一期)
  126. switch (dateRangeQueryType) {
  127. case 'YEAR':
  128. if (options.year) {
  129. year = parseInt(options.year)
  130. } else {
  131. year = currentYear - 1
  132. }
  133. quarter = ''
  134. month = ''
  135. break
  136. case 'QUARTER':
  137. if (options.year) {
  138. year = parseInt(options.year)
  139. } else {
  140. year = currentYear
  141. }
  142. if (options.quarter) {
  143. quarter = parseInt(options.quarter)
  144. } else {
  145. quarter = currentQuarter > 1 ? currentQuarter - 1 : 4
  146. if (currentQuarter === 1) {
  147. year = currentYear - 1
  148. }
  149. }
  150. month = ''
  151. break
  152. case 'MONTH':
  153. default:
  154. if (options.year) {
  155. year = parseInt(options.year)
  156. } else {
  157. year = currentYear
  158. }
  159. if (options.month) {
  160. month = parseInt(options.month)
  161. } else {
  162. month = currentMonth > 1 ? currentMonth - 1 : 12
  163. if (currentMonth === 1) {
  164. year = currentYear - 1
  165. }
  166. }
  167. quarter = ''
  168. break
  169. }
  170. // 根据查询类型设置yearOnYear和chainRatio参数
  171. let yearOnYear, chainRatio
  172. if (dateRangeQueryType === 'YEAR') {
  173. yearOnYear = true
  174. chainRatio = undefined
  175. } else {
  176. yearOnYear = true
  177. chainRatio = true
  178. }
  179. // 从store获取当前登录用户的deptId
  180. const { roles, id } = this.$store.state?.user || {};
  181. const { deptId, deptType } = this.$store.state?.user?.userInfo || {};
  182. let stationType = roles.includes('test') || roles.includes('zhijianke')
  183. let finalScopedId, finalScopedType
  184. if (roles.includes('jingli') || roles.includes('xingzheng')) {
  185. finalScopedId = deptId || ''
  186. finalScopedType = 'BRIGADE'
  187. }
  188. // 如果是班组长,默认选择 TEAMS
  189. if (roles.includes('banzuzhang')) {
  190. finalScopedId = deptId || ''
  191. finalScopedType = 'TEAMS'
  192. } else {
  193. // 其他情况按登录角色赋值
  194. finalScopedId = stationType ? '' : roles.includes('SecurityCheck') ? id : (deptId || '')
  195. finalScopedType = stationType ? '' : roles.includes('SecurityCheck') ? 'USER' : (deptType || '')
  196. }
  197. // 一次性赋值给currentQueryParams
  198. this.currentQueryParams = {
  199. dateRangeQueryType,
  200. year,
  201. quarter,
  202. month,
  203. scopedId: finalScopedId,
  204. scopedType: finalScopedType,
  205. yearOnYear,
  206. chainRatio
  207. }
  208. },
  209. // 处理角色切换
  210. handleRoleChange(role) {
  211. const { userId, deptId } = this.$store.state?.user?.userInfo || {};
  212. if (role === 'TEAMS') {
  213. this.currentQueryParams.scopedId = deptId;
  214. this.currentQueryParams.scopedType = 'TEAMS'
  215. } else {
  216. this.currentQueryParams.scopedId = userId
  217. this.currentQueryParams.scopedType = 'USER'
  218. }
  219. }
  220. }
  221. }
  222. </script>
  223. <style lang="scss" scoped>
  224. .page-header {
  225. border-radius: 20rpx;
  226. padding: 32rpx;
  227. text-align: center;
  228. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  229. color: #fff;
  230. }
  231. .report-type {
  232. font-size: 28rpx;
  233. opacity: 0.9;
  234. }
  235. .query-section {
  236. padding: 24rpx 32rpx;
  237. background: #f8f9fa;
  238. border-bottom: 1rpx solid #e9ecef;
  239. }
  240. .query-item {
  241. display: flex;
  242. align-items: center;
  243. margin-bottom: 16rpx;
  244. &:last-child {
  245. margin-bottom: 0;
  246. }
  247. }
  248. .query-label {
  249. font-size: 28rpx;
  250. color: #666;
  251. min-width: 120rpx;
  252. }
  253. .query-value {
  254. font-size: 28rpx;
  255. color: #333;
  256. font-weight: 500;
  257. }
  258. </style>