Newer
Older
KaiFengPC / src / views / project / projectInformation / components / progressCont.vue
@zhangdeliang zhangdeliang on 23 May 8 KB 初始化项目
  1. <template>
  2. <div class="water-analysis-page">
  3. <div class="top">
  4. <div class="LeftBox1">
  5. <el-progress
  6. type="circle"
  7. :percentage="(postList.totalProgress * 1).toFixed(2)"
  8. :width="120"
  9. style="margin: 10px 10px 20px 70px"
  10. :stroke-width="20"
  11. striped
  12. striped-flow
  13. />
  14. <el-progress
  15. type="circle"
  16. :percentage="
  17. stapesDate.totalInvest == 0 ? '0.00' : (((postList.completeTotalInvest * 1) / (stapesDate.totalInvest * 1)) * 100).toFixed(2)
  18. "
  19. :width="120"
  20. style="margin: 10px 10px 20px 130px"
  21. :stroke-width="20"
  22. striped
  23. striped-flow
  24. >
  25. </el-progress>
  26. <el-progress
  27. type="circle"
  28. :percentage="
  29. stapesDate.spongeInvest == 0 ? '0.00' : (((postList.completeSpongeInvest * 1) / (stapesDate.spongeInvest * 1)) * 100).toFixed(2)
  30. "
  31. :width="120"
  32. style="margin: 10px 10px 20px 120px"
  33. :stroke-width="20"
  34. striped
  35. striped-flow
  36. />
  37. <div style="" class="Top_cont">
  38. <div class="HTMoney1">
  39. <div class="JENum">{{ postList.totalProgress || 0 }}<span style="font-size: 14px">(%)</span></div>
  40. <div class="JEName">项目进度</div>
  41. </div>
  42. <div class="HTMoney1">
  43. <div class="JENum">{{ postList.completeTotalInvest || 0 }}</div>
  44. <div class="JEName">完成项目总投资(万元)</div>
  45. </div>
  46.  
  47. <div class="HTMoney1">
  48. <div class="JENum">{{ postList.completeSpongeInvest || 0 }}</div>
  49. <div class="JEName">完成海绵相关投资(万元)</div>
  50. </div>
  51.  
  52. <div class="HTMoney1">
  53. <div class="JENum">{{ typeList.startTime?.substring(0, 10) }}</div>
  54. <div class="JEName">项目开始日期</div>
  55. </div>
  56. <div class="HTMoney1">
  57. <div class="JENum">{{ build_statusM(typeList.buildStatus) }}</div>
  58. <div class="JEName">项目建设状态</div>
  59. </div>
  60. <div class="HTMoney1" :class="{ HTMoney2: Time > 0 }">
  61. <div class="JENum">
  62. {{ typeList.endTime?.substring(0, 10) || '2024-12-15' }}
  63. </div>
  64. <div class="JEName">项目交付日期</div>
  65. </div>
  66. </div>
  67. </div>
  68. <el-table :data="postList.details" style="width: 100%" row-key="id" default-expand-all :tree-prop="{ children: 'children' }">
  69. <el-table-column prop="nodeName" label="一级节点" width="180" show-overflow-tooltip />
  70. <el-table-column prop="status" label="状态" show-overflow-tooltip>
  71. <template #default="{ row }">
  72. <el-tag :key="row.status" class="mx-1" :type="row.status == 0 ? 'success' : 'danger'">
  73. {{ row.status == 0 ? '正常' : '超期' }}
  74. </el-tag>
  75. </template>
  76. </el-table-column>
  77. <el-table-column prop="schedule" label="进度" show-overflow-tooltip>
  78. <template #default="{ row }"> {{ row.schedule || 0 }}% </template>
  79. </el-table-column>
  80. <el-table-column prop="planStartTime" label="计划日期起" show-overflow-tooltip>
  81. <template #default="{ row }">
  82. {{ row.planStartTime?.substring(0, 10) }}
  83. </template>
  84. </el-table-column>
  85. <el-table-column prop="planEndTime" label="计划日期止" show-overflow-tooltip>
  86. <template #default="{ row }">
  87. {{ row.planEndTime?.substring(0, 10) }}
  88. </template>
  89. </el-table-column>
  90. <el-table-column prop="estimatedWorkHours" label="预算工时H" show-overflow-tooltip />
  91. <el-table-column prop="planStartTime" label="实际日期起">
  92. <template #default="{ row }">
  93. {{ row.planStartTime?.substring(0, 10) }}
  94. </template>
  95. </el-table-column>
  96. <el-table-column prop="planEndTime" label="实际日期止" show-overflow-tooltip>
  97. <template #default="{ row }">
  98. {{ row.planEndTime?.substring(0, 10) }}
  99. </template>
  100. </el-table-column>
  101. <el-table-column prop="manHour" label="实际工时H" show-overflow-tooltip />
  102. <el-table-column prop="dutyUserId" label="负责人" show-overflow-tooltip>
  103. <template #default="{ row }">
  104. <span>{{ getStateName(row.dutyUserId) }}</span>
  105. </template>
  106. </el-table-column>
  107. <el-table-column prop="fileSaveRequestList" label="输出资料" show-overflow-tooltip>
  108. <template #default="{ row }">
  109. <span @click="handlePreview(i, 2, '详情')" class="projectName" v-for="i in row?.fileSaveRequestList">
  110. {{ i.originalName }}</span
  111. >
  112. </template>
  113. </el-table-column>
  114. <el-table-column prop="remark" label="备注" />
  115. </el-table>
  116. </div>
  117. </div>
  118. </template>
  119. <script setup>
  120. import { projectInfoAdd, userList } from '@/api/project/projectInformation';
  121. import { projectPlanMonthlyInfolast } from '@/api/project/xmbglishi';
  122. import { ElMessageBox } from 'element-plus';
  123. import { projectInfoGetProjectStatistics } from '@/api/project/tenderReview';
  124. const { proxy } = getCurrentInstance();
  125. const { build_status } = proxy.useDict('build_status');
  126. const emits = defineEmits();
  127. const typeList = inject('typeList1');
  128. const postList = ref([]);
  129. const stapesDate = ref({});
  130. const personList = ref([]);
  131. let FormList = ref({
  132. pageNum: 1,
  133. pageSize: 10,
  134. });
  135.  
  136. function handlePreview(file) {
  137. return ElMessageBox.confirm(`下载此文件: ${file.name}?`).then(
  138. () => window.open(file.url),
  139. () => false
  140. );
  141. }
  142. const submit = () => {
  143. proxy.$refs.ruleForm.validate(valid => {
  144. if (valid) {
  145. if (typeList.type == 3) {
  146. FormList.value.operation = 'add';
  147. projectInfoAdd(FormList.value).then(({ code }) => {
  148. if (code == 200) {
  149. emits('onModalClose');
  150. proxy.$refs.ruleForm.resetFields();
  151. }
  152. });
  153. } else if (typeList.type == 5) {
  154. FormList.value.operation = 'update';
  155. projectInfoAdd(FormList.value).then(({ code }) => {
  156. if (code == 200) {
  157. emits('onModalClose');
  158. proxy.$refs.ruleForm.resetFields();
  159. }
  160. });
  161. }
  162. }
  163. });
  164. };
  165. function closeds() {
  166. proxy.$refs.ruleForm.resetFields();
  167. }
  168. defineExpose({ submit, closeds });
  169.  
  170. const userListM = async () => {
  171. let { data } = await userList();
  172. personList.value = data;
  173. FormList.value = typeList.value;
  174. };
  175. const getStateName = r => {
  176. let a = '';
  177. personList.value.map(i => {
  178. if (i.userId == r) {
  179. a = i;
  180. }
  181. });
  182. return a.nickName;
  183. };
  184. const projectPlanMonthlyInfolastM = async p => {
  185. let { data } = await projectPlanMonthlyInfolast(p);
  186. postList.value = data;
  187. };
  188. function build_statusM(v) {
  189. const arr = build_status.value.filter(i => {
  190. return v == i.value;
  191. });
  192. return arr[0]?.label;
  193. }
  194. const Time = computed(() => {
  195. return Date.now() - new Date(typeList.value.endTime?.substring(0, 10));
  196. });
  197. const projectInfoGetProjectStatisticsM = async p => {
  198. let { data } = await projectInfoGetProjectStatistics(p);
  199. stapesDate.value = data;
  200. };
  201. onMounted(() => {
  202. userListM();
  203. projectPlanMonthlyInfolastM({ projectNo: typeList.value.projectNo });
  204. projectInfoGetProjectStatisticsM(typeList.value.projectNo);
  205. });
  206. </script>
  207. <style lang="scss" scoped>
  208. .water-analysis-page {
  209. padding: 20px;
  210. }
  211.  
  212. .iconCLass {
  213. :deep .el-input__wrapper {
  214. box-shadow: 0 0 0 0;
  215. }
  216. }
  217. .tabs {
  218. :deep .el-input__wrapper {
  219. box-shadow: 0 0 0 0;
  220. }
  221. }
  222. .LeftBox1 {
  223. // width: 280px;
  224. height: 100%;
  225.  
  226. .HTMoney1 {
  227. flex: 1;
  228. text-align: center;
  229. .JENum {
  230. height: 40px;
  231. font-size: 18px;
  232. font-weight: 400;
  233. color: #409eff;
  234. }
  235.  
  236. .JEName {
  237. width: 100%;
  238. height: 40px;
  239. font-size: 16px;
  240. color: black;
  241. }
  242. }
  243. .HTMoney2 {
  244. background: red;
  245. .JEName {
  246. color: #fff;
  247. }
  248. .JENum {
  249. color: #fff;
  250. }
  251. }
  252. }
  253. .Top_cont {
  254. display: flex;
  255. width: 80vw;
  256. justify-content: center;
  257. align-itemas: center;
  258. margin-bottom: 35px;
  259. }
  260. </style>