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