Newer
Older
KaiFengPC / src / views / project / compensation / mainReward.vue
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. <template>
  2. <div class="app-container home" v-loading="isLoading">
  3. <div class="top">
  4. <div class="topLeft">
  5. <div class="tittle flex">
  6. <img src="@/assets/images/preassess/projectCont.png" alt="" />
  7. <div class="conttittle">奖励项目统计</div>
  8. </div>
  9. <div class="flex cont">
  10. <div v-for="i in projectList">
  11. <div class="box">{{ DaprojectList[i.value] }}<span></span></div>
  12. <div class="label" :style="{ color: i.label == '延期' ? '#FF4F4FFF' : '' }">
  13. {{ i.label }}
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. <div class="topRight">
  19. <div class="tittle flex">
  20. <img src="@/assets/images/preassess/projectMongy.png" alt="" />
  21. <div class="conttittle">累计项目奖励金额</div>
  22. </div>
  23. <div class="flex cont">
  24. <div v-for="i in conttList">
  25. <div class="box">{{ DaprojectList[i.value] }} <span>万元</span></div>
  26. <div class="label">{{ i.label }}</div>
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. <div class="center flex">
  32. <div class="centerLeft">
  33. <div class="ectittle conttittle">项目类型统计</div>
  34. <homeEcharts v-if="isChart4" :data="data1"></homeEcharts>
  35. </div>
  36. <div class="center_div">
  37. <div class="ectittle conttittle">建设单位统计</div>
  38. <project v-if="isChart" :data="data2"></project>
  39. </div>
  40. <div class="centerright">
  41. <div class="ectittle conttittle">月度发放金额统计</div>
  42. <queryChat v-if="isChart2 && data3.xData.length > 0" :data="data3"></queryChat>
  43.  
  44. <div style="text-align: center; margin-top: 30%; color: #ddd" v-else>暂无数据</div>
  45. </div>
  46. </div>
  47. <div class="footer flex">
  48. <div class="footerLeft">
  49. <div class="top">
  50. <div class="topLeft">
  51. <div class="tittle flex">
  52. <div class="conttittle">项目类型发放金额统计</div>
  53. </div>
  54. </div>
  55. </div>
  56. <minxChar v-if="isChart4 && data4.xData.length > 0" :data="data4"></minxChar>
  57. <div style="text-align: center; margin-top: 30%; color: #ddd" v-else>暂无数据</div>
  58. </div>
  59. <div class="footerright" style="position: relative">
  60. <div class="ectittle conttittle">年度发放金额统计</div>
  61. <VBar v-if="isChart5" :data="data5"></VBar>
  62. </div>
  63. </div>
  64. </div>
  65. </template>
  66. <script setup name="Index">
  67. import homeEcharts from './homeEcharts/index.vue';
  68. import VBar from './homeEcharts/VBar.vue';
  69. import queryChat from './homeEcharts/queryChat.vue';
  70. import minxChar from './homeEcharts/minxChar.vue';
  71. import project from './homeEcharts/project.vue';
  72. import {
  73. projectTypeList,
  74. selectProjectCount,
  75. selectProjectMoneyTotal,
  76. selectProjectEchartByYear,
  77. selectProjectQualityHomePage,
  78. selectProjectContractHomePage,
  79. selectProjectPatrolHomePage,
  80. } from '@/api/project/mainReward';
  81. import { data1, data2, data3, data4, data5, conttList, projectCont, projectList } from './homeEcharts/index';
  82. const activeName = ref('build');
  83. let years = ref('');
  84. const isLoading = ref(true);
  85. const data = new Date();
  86. const year = data.getFullYear();
  87. const date1 = ref(data);
  88. const date2 = ref(data);
  89. const date3 = ref(data);
  90. const date4 = ref(data);
  91. const date5 = ref(data);
  92. const date6 = ref(data);
  93. const date7 = ref(data);
  94. const isChart = ref(false);
  95. const isChart1 = ref(false);
  96. const isChart2 = ref(false);
  97. const isChart4 = ref(false);
  98. const isChart5 = ref(false);
  99. const DaprojectList = ref([]);
  100. const DaconttList = ref([]);
  101. const DaprojectCont = ref([]);
  102. //x项目统计
  103. const selectProjectCountM = async p => {
  104. let { data } = await selectProjectCount(p);
  105. DaprojectList.value = data;
  106.  
  107. data5.value.xData = [];
  108. data5.value.yData = [];
  109. data.variousYearStatistics?.forEach(i => {
  110. data5.value.xData.push(i.key + '年');
  111. data5.value.yData.push(i.value);
  112. isChart5.value = true;
  113. });
  114. isLoading.value = false;
  115. isLoading.value = false;
  116. };
  117. //项目金额
  118. const selectProjectMoneyTotalM = async p => {
  119. let { data } = await selectProjectMoneyTotal(p);
  120. DaconttList.value = data;
  121. isLoading.value = false;
  122. };
  123. // 项目类型、项目建设状态、项目状态的统计
  124. const selectProjectEchartByYearM = async p => {
  125. let { data } = await selectProjectEchartByYear(p);
  126. let array1 = [];
  127. let array2 = [];
  128. data.forEach(i => {
  129. array1.push(getprojectTList(i.key));
  130. array2.push(i.value);
  131. });
  132. data2.value.xData = array1;
  133. data2.value.yData = array2;
  134.  
  135. isLoading.value = false;
  136. isChart.value = true;
  137. };
  138. //切换tabs 查询 项目类型、项目建设状态、项目状态的统计
  139. function handleClick({ props: { name } }) {
  140. isLoading.value = true;
  141. isChart1.value = false;
  142. selectProjectEchartByYearM({
  143. year: years.value || year,
  144. searchModel: name,
  145. });
  146. if (name == 'projectStatus') {
  147. data2.value.padding = [0, 108, 0, 0];
  148. } else {
  149. data2.value.padding = [0, 0, 0, 0];
  150. }
  151. }
  152. //项目质量统计
  153. const selectProjectQualityHomePageM = async p => {
  154. let { data } = await selectProjectQualityHomePage(p);
  155. data3.value.xData = [];
  156. data3.value.yData = [];
  157. // let arr1 = [];
  158. let arr2 = [];
  159. data.forEach(i => {
  160. data3.value.xData.push(i.key + '月' || '无标题');
  161. arr2.push(i.totalMoney);
  162. data3.value.yData = {
  163. paymentMoney: arr2,
  164. };
  165. isChart2.value = true;
  166. });
  167. isLoading.value = false;
  168. };
  169. //项目类型发放金额统计
  170. const selectProjectContractHomePageM = async p => {
  171. let { data } = await selectProjectContractHomePage(p);
  172. DaprojectCont.value = data;
  173. let arr1 = [];
  174. let array2 = [];
  175. let arr3 = [];
  176. data4.value.xData = [];
  177. data4.value.yData = [];
  178. data.forEach(i => {
  179. arr1.push(i.totalMoney);
  180. array2.push({ name: getprojectTList(i.key), value: i.value });
  181. arr3.push(i.value);
  182. data4.value.xData.push(getprojectTList(i.key));
  183. data4.value.yData = {
  184. contractMoney: arr1,
  185. contractCount: arr3,
  186. };
  187. data1.value.xData = array2;
  188. isChart4.value = true;
  189. });
  190. isLoading.value = false;
  191. };
  192.  
  193. //获取项目类型
  194. function getprojectTList(i) {
  195. let arr = '';
  196. projectTList.value.forEach(k => {
  197. if (i == k.id) {
  198. arr = k.projectTypeName;
  199. } else {
  200. arr = '其它';
  201. }
  202. });
  203. return arr;
  204. }
  205. const projectTList = ref([]);
  206. async function projectTypeListM(i) {
  207. let { data } = await projectTypeList();
  208. projectTList.value = data;
  209. selectProjectContractHomePageM(year);
  210. }
  211. onMounted(() => {
  212. selectProjectEchartByYearM(year);
  213. selectProjectCountM();
  214. selectProjectMoneyTotalM({ year });
  215. selectProjectQualityHomePageM(year);
  216. projectTypeListM();
  217. });
  218. </script>
  219. <style scoped lang="scss">
  220. @import '@/assets/styles/variables.module.scss';
  221. .home {
  222. height: calc(100vh - 100px);
  223. width: 100%;
  224. overflow: hidden;
  225.  
  226. .top {
  227. display: flex;
  228. justify-content: space-between;
  229. .topLeft,
  230. .topRight {
  231. height: 120px;
  232. box-shadow: 0px 2px 3px 0px $mainColor2;
  233. background-color: $mainColor1;
  234. border-radius: 6px;
  235. margin: 10px 15px;
  236. flex: 1;
  237. .tittle {
  238. font-weight: bold;
  239. color: #fff;
  240. padding: 5px;
  241. position: relative;
  242. .top_time {
  243. position: absolute;
  244. right: 0.5%;
  245. }
  246. div {
  247. margin-left: 10px;
  248. }
  249. }
  250. .label {
  251. font-size: 14px;
  252. }
  253. }
  254. }
  255. .ectittle {
  256. font-size: 18px;
  257. font-weight: bold;
  258. color: #fff;
  259. position: absolute;
  260. left: 3%;
  261. top: 2%;
  262. }
  263. }
  264. .center {
  265. justify-content: space-between;
  266. margin: 10px 10px 10px 15px;
  267. .center_div,
  268. .centerLeft,
  269. .centerright {
  270. height: 270px;
  271. flex: 1;
  272. box-shadow: 0px 2px 3px 0px $mainColor2;
  273. background-color: $mainColor1;
  274. position: relative;
  275.  
  276. .center_time {
  277. position: absolute;
  278. right: 0.5%;
  279. z-index: 1;
  280. }
  281. }
  282. .center_div {
  283. margin: 0 20px;
  284. padding: 0 10px;
  285. }
  286. }
  287.  
  288. .flex {
  289. display: flex;
  290. align-items: center;
  291. }
  292.  
  293. .cont {
  294. justify-content: center;
  295. text-align: center;
  296.  
  297. div {
  298. flex: 1;
  299. }
  300.  
  301. .box {
  302. border-right: none;
  303. font-size: 22px;
  304. font-family: Source Han Sans CN;
  305. font-weight: bold;
  306. color: #fff;
  307. span {
  308. color: '#fff';
  309. font-size: 14px;
  310. font-weight: 500;
  311. }
  312. }
  313. }
  314.  
  315. .footer {
  316. width: 100%;
  317. display: flex;
  318. justify-content: space-between;
  319.  
  320. .footerLeft,
  321. .footerright {
  322. flex: 1;
  323. box-shadow: 0px 2px 3px 0px $mainColor2;
  324. background-color: $mainColor1;
  325.  
  326. .top {
  327. height: 20px;
  328. .topLeft {
  329. box-shadow: 0px 0 0 0;
  330. }
  331. }
  332. }
  333.  
  334. .footerLeft {
  335. width: 65.7%;
  336. margin-left: 10px;
  337. }
  338.  
  339. .footerright {
  340. width: 33%;
  341. margin: 0 20px;
  342. }
  343. }
  344.  
  345. :deep .el-tabs__nav-wrap::after {
  346. background-color: #fff;
  347. }
  348.  
  349. :deep .el-tabs__item.is-active {
  350. font-size: 16px;
  351. font-weight: bold;
  352. }
  353.  
  354. :deep .el-tabs__active-bar {
  355. bottom: 0;
  356. left: 35px;
  357. height: 3px;
  358. width: 30px !important;
  359. }
  360. .conttittle {
  361. font-weight: 800;
  362. font-size: 18px;
  363. }
  364. </style>