progres_statistics.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. <!--
  2. *@description: 进度统计
  3. *@author: yh Fu
  4. *@date: 2023-12-25 13:26:18
  5. *@version: V1.0.5
  6. -->
  7. <template>
  8. <div class="ProgreStatistics_Contain">
  9. <el-radio-group v-model="currentMenu" style="margin-bottom: 20px;" @input="toModule">
  10. <el-radio-button label="0">用料统计</el-radio-button>
  11. <el-radio-button label="1">进度统计</el-radio-button>
  12. <el-radio-button label="2">可视化进度</el-radio-button>
  13. </el-radio-group>
  14. <div class="topContain">
  15. <el-select
  16. v-model="currentType"
  17. placeholder="请选择"
  18. class="projectSelect"
  19. popper-class="projectDropDown"
  20. :popper-append-to-body="false"
  21. >
  22. <el-option
  23. v-for="e in typeOptions"
  24. :key="e.value"
  25. :label="e.label"
  26. :value="e.value">
  27. </el-option>
  28. </el-select>
  29. <el-button class="searchBtn">查询</el-button>
  30. </div>
  31. <el-table
  32. class="materialStatisticsTable"
  33. :data="tableData"
  34. header-cell-style="background-color:#199ED8;border: 2px solid #000066"
  35. border
  36. :cell-style="tableRowClassName"
  37. style="width: 100%">
  38. <el-table-column
  39. prop="name"
  40. width="250"
  41. label="小区名称"
  42. >
  43. </el-table-column>
  44. <el-table-column
  45. prop="doing"
  46. label="未开工(户)"
  47. >
  48. </el-table-column>
  49. <el-table-column
  50. prop="willDone"
  51. label="施工(户)">
  52. </el-table-column>
  53. <el-table-column
  54. prop="done"
  55. label="完工(户)">
  56. </el-table-column>
  57. </el-table>
  58. </div>
  59. </template>
  60. <script>
  61. export default {
  62. name:'ProgreStatistics',
  63. data(){
  64. return {
  65. currentMenu:1, // 0:用料管理 1:进度统计 2:可视化进度
  66. typeOptions:[
  67. {
  68. value: '0',
  69. label: '市政工程'
  70. },
  71. {
  72. value: '1',
  73. label: '工业工程'
  74. },
  75. {
  76. value: '2',
  77. label: '民用工程'
  78. },
  79. {
  80. value: '3',
  81. label: '危险作业'
  82. },
  83. {
  84. value: '4',
  85. label: '顶管工程'
  86. },
  87. {
  88. value: '5',
  89. label: '基建工程'
  90. }
  91. ],
  92. tableData: [
  93. {
  94. name: '兰亭湖畔',
  95. doing: '30',
  96. willDone:'19',
  97. done:'20'
  98. },
  99. {
  100. name: '清华园',
  101. doing: '30',
  102. willDone:'19',
  103. done:'20'
  104. },
  105. {
  106. name: '领秀世家',
  107. doing: '30',
  108. willDone:'19',
  109. done:'20'
  110. },
  111. {
  112. name: '上东府里',
  113. doing: '30',
  114. willDone:'19',
  115. done:'20'
  116. },
  117. {
  118. name: '龙腾香格里',
  119. doing: '30',
  120. willDone:'19',
  121. done:'20'
  122. },
  123. ],
  124. currentType:'管'
  125. }
  126. },
  127. methods:{
  128. tableRowClassName(){
  129. return "background:#199ED8;border: 2px solid #000066"
  130. },
  131. toModule(){
  132. console.log(this.$router)
  133. const currentPage = this.currentMenu == 0 ? 'material_statistics' : this.currentMenu == 1 ? 'progres_statistics' : 'progres_visual'
  134. this.$router.push({
  135. path:`/${currentPage}`
  136. })
  137. }
  138. }
  139. }
  140. </script>
  141. <style lang="scss" scoped>
  142. .ProgreStatistics_Contain{
  143. width: 100%;
  144. height: 100%;
  145. padding: 1%;
  146. .topContain{
  147. display: flex;
  148. justify-content: space-between;
  149. width: 38%;
  150. .searchBtn{
  151. width: 11%;
  152. background: linear-gradient(to right , #2197F2, #0BB0DE);
  153. color: #fff;
  154. }
  155. ::v-deep .projectSelect{
  156. .el-input__inner{
  157. background: linear-gradient(to right , #2197F2, #0BB0DE);
  158. color: #fff;
  159. }
  160. }
  161. .projectDropDown{
  162. background: linear-gradient(to right , #2197F2, #0BB0DE);
  163. .el-select-dropdown__item{
  164. background: linear-gradient(to right , #2197F2, #0BB0DE);
  165. color: #fff;
  166. }
  167. ::v-deep .el-select-dropdown__list {
  168. padding-top: 0 !important;
  169. padding-bottom: 0;
  170. }
  171. }
  172. }
  173. .materialStatisticsTable{
  174. margin-top: 1%;
  175. border: 2px solid #000066 !important;
  176. cursor: pointer;
  177. ::v-deep .el-table__row{
  178. background-color: #2F4280;
  179. }
  180. ::v-deep tbody tr:hover>td {
  181. transform: translateX(8px) translateY(-8px);
  182. z-index: 100;
  183. box-shadow: 10px 10px 10px 10px #182652;
  184. background-color: #30478E;
  185. color: #fff;
  186. }
  187. }
  188. .materialStatisticsTable::before{
  189. background-color:#000066 ;
  190. }
  191. .materialStatisticsTable::after{
  192. background-color:#000066 ;
  193. }
  194. }
  195. </style>