Newer
Older
DH_Apicture / src / views / pictureOnMap / page / DrainageSystem / YSIndex_right.vue
@leishan leishan on 12 Dec 4 KB youhua
  1. <template>
  2. <div id="YSIndex_right">
  3. <div class="canalAll flex flex-justcontent-spacebetween flex-align-center">
  4. 全区合计<span><b class="lus">{{gqData.portChannelNum}}</b></span><span><b class="las">{{gqData.lengthSum}}</b>km</span>
  5. </div>
  6. <div class="canalList">
  7. <div class="list flex" v-for="i in allList" :key="i">
  8. <div class="name flex flex-justcontent-center flex-align-center"><div>{{i.waterRegionName}}<br/><span>{{i.lengthSum}}km</span></div></div>
  9. <div class="info flex-1">
  10. <div class="ditch flex flex-justcontent-center" v-for="e in i.portChannelList" :key="e">
  11. <div class="one">{{e.name}}</div>
  12. <div class="two flex-1 flex flex-align-center"><div class="inBra" :style="{width:`${e.length/8*100}%`}"><span :style="{right:e.length<2?'-24px':''}">{{e.length}}</span></div></div>
  13. <div class="tre">目标:<span :class="`color${e.targetQuality}`">{{getChineseFun(level,'label', e.targetQuality,'value')||'--'}}</span></div>
  14. </div>
  15. </div>
  16. </div>
  17. </div>
  18. </div>
  19. </template>
  20.  
  21. <script setup name="YSIndex_right">
  22. import { getChineseFun } from '@/utils/ruoyi';
  23. import { getPortChannelLengthSum } from '@/api/MonitorAssetsOnMap';
  24. import { ref, reactive, toRefs, onMounted } from "vue";
  25. const props = defineProps({
  26. //分区编号
  27. waterRegionCode: {
  28. type: [String],
  29. default: "",
  30. },
  31. });
  32. const level=[
  33. {
  34. label:'1',
  35. value:'Ⅰ',
  36. },{
  37. label:'2',
  38. value:'Ⅱ',
  39. },{
  40. label:'3',
  41. value:'Ⅲ',
  42. },{
  43. label:'4',
  44. value:'Ⅳ',
  45. },{
  46. label:'5',
  47. value:'Ⅴ',
  48. },
  49. ]
  50. const AllData = reactive({});
  51. watch(
  52. () => props.waterRegionCode,
  53. (val) => {
  54. console.log("YSIndex_right:分区编号变了", val);
  55. // debugger
  56. if(val!=''){
  57. filetData(val)
  58. }else{
  59. getData()
  60. }
  61. },
  62. { immediate: true ,deep:true}
  63. );
  64. let gqData=ref({})
  65. let allList=ref([])
  66. function getData(){
  67. getPortChannelLengthSum().then(res=>{
  68. if(res.code==200){
  69. gqData.value=res.data
  70. allList.value=gqData.value.waterRegionList
  71. }
  72. })
  73. }
  74. function filetData(id){
  75. let list=gqData.value.waterRegionList.find(i=>{return i.waterRegionId==id})
  76. allList.value=[list]
  77. }
  78. onMounted(() => {
  79. // getData()
  80. });
  81. </script>
  82.  
  83. <style lang="scss" scoped>
  84. #YSIndex_right {
  85. width: 100%;
  86. height: 100%;
  87. }
  88. .canalAll{
  89. height: 54px;
  90. background: url('@/assets/images/pictureOnMap/ystjbg.png') no-repeat;
  91. background-size:100% 100%;
  92. font-weight: bold;
  93. font-size: 16px;
  94. color: #FFFFFF;
  95. padding: 0 45px 0 25px;
  96. position: relative;
  97. &::before{
  98. content: '';
  99. width:47px;
  100. height:14px;
  101. background: url('@/assets/images/pictureOnMap/ystj.png') no-repeat;
  102. background-size:100% 100%;
  103. position: absolute;
  104. left: 30%;
  105. top: 50%;
  106. transform: translate(-50%,-50%);
  107. }
  108. span{
  109. font-weight: 400;
  110. font-size: 14px;
  111. color: #CCDFFF;
  112. }
  113. b{
  114. font-weight: bold;
  115. font-size: 24px;
  116. margin-right:8px;
  117. font-family:'DINPro';
  118. }
  119. .lus{
  120. color: #27F388;
  121. }
  122. .las{
  123. color: #2FE9FF;
  124. }
  125. }
  126. .canalList{
  127. height: calc(100% - 64px);
  128. margin-top: 10px;
  129. overflow: auto;
  130. .list{
  131. background: linear-gradient(0deg, #00134F 0%, #003065 100%);
  132. border-radius: 6px;
  133. border: 1px solid #163F80;
  134. border-radius: 6px;
  135. overflow: hidden;
  136. margin-bottom: 10px;
  137. }
  138. .info{
  139. min-height:70px;
  140. padding: 10px 0 10px 10px;
  141. overflow: hidden;
  142. }
  143. .name{
  144. width: 80px;
  145. background: linear-gradient(0deg, rgba(0,98,183,0.9) 0%, rgba(0,98,183,0.3) 100%);
  146. border-radius: 6px;
  147. overflow: hidden;
  148. font-size: 16px;
  149. color: #FFFFFF;
  150. line-height:22px;
  151. text-align: center;
  152. padding: 0 12px;
  153. span{
  154. white-space: nowrap;
  155. }
  156. }
  157. .ditch{
  158. height: 24px;
  159. .one{
  160. font-weight: bold;
  161. font-size: 14px;
  162. color: #CCDFFF;
  163. width: 120px;
  164. }
  165. .tre{
  166. width: 80px;
  167. font-weight: bold;
  168. font-size: 14px;
  169. color: #CCDFFF;
  170. padding-left: 4px;
  171. }
  172. }
  173. .inBra{
  174. width: 30%;
  175. position: relative;
  176. height: 12px;
  177. border-radius: 0 6px 6px 0px;
  178. background: linear-gradient(90deg, #0066E5, #00B6FF);
  179. span{
  180. position: absolute;
  181. right:4px;
  182. top: 0;
  183. line-height: 12px;
  184. font-weight: 400;
  185. font-size: 12px;
  186. color: #FFFFFF;
  187. }
  188. }
  189. }
  190. .color1{
  191. color: #2AD4FF;
  192. }
  193. .color2{
  194. color: #2AFFB1;
  195. }
  196. .color3{
  197. color: #2AFFFC;
  198. }
  199. .color4{
  200. color: #FFB61A;;
  201. }
  202. .color5{
  203. color: #FD4D62;
  204. }
  205. </style>