Newer
Older
KaiFengPC / src / views / sponeScreen / evaluationKH / yuShuiZiYuanHua.vue
@zhangdeliang zhangdeliang on 17 Oct 6 KB update
  1. <template>
  2. <!-- 雨水资源化利用 -->
  3. <div class="rainLYPage">
  4. <div class="ListBoxHeader">
  5. <div class="partTitleHM">
  6. 雨水资源化利用
  7. <div class="tabs flex">
  8. <div class="tabItem" v-for="item in tabList" :key="item.id" :class="{ active: curTab === item.id }" @click="tabClick(item)">
  9. {{ item.name }}
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. <div class="ConstrucClass">
  15. <div class="content">
  16. <div class="target flex flex-j-left flex-align-center">
  17. <div class="titles titlesmb">
  18. <div class="mbs">目标</div>
  19. </div>
  20. <div class="valsText">{{ quotaInfo.improveGoals }}</div>
  21. </div>
  22. <div class="measures flex flex-j-left flex-align-center">
  23. <div class="titles titlecs">
  24. <div class="mbs">措施</div>
  25. </div>
  26. <div class="valsText">{{ quotaInfo.reformMethod }}</div>
  27. </div>
  28. <el-table ref="table" :data="tableData" max-height="120">
  29. <el-table-column label="改造工程" prop="reformProjectName" show-overflow-tooltip />
  30. <el-table-column label="提升成效" prop="reformAchievement" show-overflow-tooltip />
  31. </el-table>
  32.  
  33. <div class="achievements flex flex-j-left flex-align-center">
  34. <div class="titles titlecg">
  35. <div class="mbs">成果</div>
  36. </div>
  37. <div class="vals" :class="quotaInfo.isCompliance == '1' ? 'colors1' : 'colors2'">
  38. {{ quotaInfo.isCompliance == '1' ? '达标' : '不达标' }}
  39. </div>
  40. </div>
  41. <div class="bottom flex-v">
  42. <span v-for="item in quotaInfo.remarkData">{{ item }}</span>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. </template>
  48. <script setup>
  49. import kaifengRainUse from '@/assets/geojson/kaifeng/kaifengRainUse.json'; //雨水利用
  50. import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
  51. import tuLi72X from '@/assets/newImgs/tuLi72X.png';
  52. import bus from '@/bus';
  53.  
  54. const { proxy } = getCurrentInstance();
  55. import { quotaCommomInfoList, hmyztQuotaDataList } from '@/api/sponeScreen/jxkh.js';
  56.  
  57. const quotaInfo = ref({}); //改造措施数据
  58. const tableData = ref([]);
  59. const tabList = ref([{ id: '1', name: '雨水资源化利用' }]);
  60. const curTab = ref('1');
  61. const tabClick = item => {
  62. curTab.value = item.id;
  63. getjb();
  64. getkhzn();
  65. // 渲染图层
  66. bus.emit('removeKHLayer'); //清除图层
  67. newfiberMapBoxVectorLayer.addGeojsonSymbol('kaifengRainUse', kaifengRainUse, tuLi72X, 20, 1.3); //图层名、图层geojson,图标,标注每行多少个字,行间距
  68. setTimeout(() => {
  69. newfiberMapbox.map.easeTo({
  70. center: [114.305, 34.802],
  71. zoom: 12.2,
  72. });
  73. }, 500);
  74. };
  75.  
  76. // 产出绩效公共指标信息
  77. async function getjb() {
  78. let res = await quotaCommomInfoList({
  79. quotaCode: 'yszyhly',
  80. });
  81. if (res && res.code == 200) {
  82. let data = res.data;
  83. quotaInfo.value = data && data.length ? data[0] : {};
  84. quotaInfo.value.remarkData = quotaInfo.value.remark ? quotaInfo.value.remark.split(';') : [];
  85. }
  86. }
  87. // 产出绩效公共指标信息
  88. async function getkhzn() {
  89. let res = await hmyztQuotaDataList({
  90. quotaType: 'yszyhly',
  91. });
  92. if (res && res.code == 200) {
  93. tableData.value = res.data;
  94. }
  95. }
  96.  
  97. onMounted(() => {
  98. getjb();
  99. getkhzn();
  100. });
  101. </script>
  102. <style lang="scss" scoped>
  103. .rainLYPage {
  104. width: 460px;
  105. margin: 5px auto;
  106. .ConstrucClass {
  107. background: rgba(8, 75, 125, 1);
  108. padding: 10px;
  109. margin-top: -3px;
  110. .content {
  111. width: 100%;
  112. height: 100%;
  113.  
  114. .target,
  115. .measures,
  116. .achievements {
  117. background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
  118. border-radius: 3px;
  119. width: 100%;
  120. height: 40px;
  121. padding: 0 10px;
  122.  
  123. .titles {
  124. width: 50px;
  125. font-size: 16px;
  126. color: #ffffff;
  127. position: relative;
  128. height: 20px;
  129. margin-top: 15px;
  130.  
  131. .mbs {
  132. position: absolute;
  133. top: -10px;
  134. left: 5px;
  135. }
  136. }
  137.  
  138. .titlesmb {
  139. background: url('@/assets/newImgs/HMScreen/jxkh/mb.png') no-repeat;
  140. }
  141.  
  142. .titlecs {
  143. background: url('@/assets/newImgs/HMScreen/jxkh/cs.png') no-repeat;
  144. }
  145.  
  146. .titlecg {
  147. background: url('@/assets/newImgs/HMScreen/jxkh/cg.png') no-repeat;
  148. }
  149. }
  150.  
  151. .measures {
  152. margin-top: 5px;
  153. }
  154.  
  155. .valsText {
  156. width: 350px;
  157. color: #58d6ff;
  158. margin-left: 10px;
  159. font-size: 14px;
  160. overflow: hidden;
  161. text-overflow: ellipsis;
  162. white-space: nowrap;
  163. }
  164.  
  165. .achievements {
  166. font-family: Source Han Sans CN;
  167. font-size: 18px;
  168.  
  169. margin-top: 10px !important;
  170.  
  171. .vals {
  172. color: #00fe00 !important;
  173. margin-left: 20px;
  174. }
  175. .colors1 {
  176. color: #00fe00;
  177. }
  178. .colors2 {
  179. color: #ff5e66;
  180. }
  181. }
  182.  
  183. .bottom {
  184. width: 100%;
  185. height: 50px;
  186. background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%) !important;
  187. color: #58d6ff;
  188. font-size: 14px;
  189. padding: 5px;
  190. justify-content: flex-start;
  191. display: flex;
  192. span {
  193. overflow: hidden;
  194. text-overflow: ellipsis;
  195. white-space: nowrap;
  196. }
  197. }
  198. }
  199. }
  200.  
  201. .tabs {
  202. float: right;
  203. margin: 8px 40px 0px 0px;
  204. .tabItem {
  205. width: 105px;
  206. height: 24px;
  207. line-height: 24px;
  208. background: url('@/assets/newImgs/HMScreen/jxkh/normal.png') no-repeat;
  209. background-size: 100% 100%;
  210. margin-left: 10px;
  211. font-size: 14px;
  212. color: #ffffff;
  213. text-align: center;
  214. cursor: pointer;
  215.  
  216. &:first-of-type {
  217. margin-left: 0;
  218. }
  219.  
  220. &.active {
  221. background: url('@/assets/newImgs/HMScreen/jxkh/active.png') no-repeat;
  222. background-size: 100% 100%;
  223. }
  224. }
  225. }
  226. }
  227. </style>