Newer
Older
KaiFengPC / src / views / dataAnalysis / syntheticData / stationBase.vue
@zhangdeliang zhangdeliang on 23 May 6 KB 初始化项目
  1. <template>
  2. <!-- 基本信息查看更多 -->
  3. <div class="stationBase">
  4. <table cellpadding="0" cellspacing="0">
  5. <tr>
  6. <td rowspan="3">基础信息</td>
  7. <td>
  8. <p>
  9. <span>站点名称</span><span class="value">{{ stationInfo.stName }}</span>
  10. </p>
  11. </td>
  12. <td>
  13. <p>
  14. <span>站点编号</span><span class="value">{{ stationInfo.stCode }}</span>
  15. </p>
  16. </td>
  17. <td>
  18. <p>
  19. <span>安装地址</span><span class="value" :title="stationInfo.address">{{ stationInfo.address }}</span>
  20. </p>
  21. </td>
  22. </tr>
  23. <tr>
  24. <td>
  25. <p>
  26. <span>安装类型</span>
  27. <span class="value">
  28. {{
  29. stationInfo.monitorTargetType == 'river'
  30. ? '河道'
  31. : stationInfo.monitorTargetType == 'lake'
  32. ? '湖泊'
  33. : stationInfo.monitorTargetType == 'pipeline'
  34. ? '管网'
  35. : stationInfo.monitorTargetType == 'channel'
  36. ? '港渠'
  37. : stationInfo.monitorTargetType == 'typical_land'
  38. ? '典型地块'
  39. : '--'
  40. }}
  41. </span>
  42. </p>
  43. </td>
  44. <td>
  45. <p>
  46. <span>关联对象</span><span class="value">{{ stationInfo.belongName || '--' }}</span>
  47. </p>
  48. </td>
  49. <td>
  50. <p>
  51. <span>安装时间</span><span class="value">{{ stationInfo.installDate }}</span>
  52. </p>
  53. </td>
  54. </tr>
  55. <tr>
  56. <td>
  57. <p>
  58. <span>经纬度</span><span class="value" :title="stationInfo.lonLat">{{ stationInfo.lonLat }}</span>
  59. </p>
  60. </td>
  61. <td>
  62. <p>
  63. <span>坐标系</span>
  64. <span class="value">
  65. {{
  66. stationInfo.elevationSystem == 'yellow_sea'
  67. ? '黄海'
  68. : stationInfo.elevationSystem == '85'
  69. ? '85国标'
  70. : stationInfo.elevationSystem == 'wusong'
  71. ? '吴淞'
  72. : '--'
  73. }}
  74. </span>
  75. </p>
  76. </td>
  77. <td>
  78. <p>
  79. <span>所属水系</span><span class="value">{{ stationInfo.drainageSystem }}</span>
  80. </p>
  81. </td>
  82. </tr>
  83. <tr>
  84. <td rowspan="2">监测配置</td>
  85. <td>
  86. <p>
  87. <span>监测高程</span>
  88. <span class="value">
  89. {{
  90. stationInfo.elevationSystem == 'yellow_sea'
  91. ? '黄海'
  92. : stationInfo.elevationSystem == '85'
  93. ? '85国标'
  94. : stationInfo.elevationSystem == 'wusong'
  95. ? '吴淞'
  96. : '--'
  97. }}
  98. </span>
  99. </p>
  100. </td>
  101. <td>
  102. <p>
  103. <span>安装高度</span><span class="value">{{ stationInfo.installHeight }}</span>
  104. </p>
  105. </td>
  106. <td>
  107. <p>
  108. <span>监测指标</span>
  109. <span class="value" :title="extendInfo.monitorPropertyNames">{{ extendInfo.monitorPropertyNames }}</span>
  110. </p>
  111. </td>
  112. </tr>
  113. <tr>
  114. <td>
  115. <p>
  116. <span>预警公式</span><span class="value">{{ extendInfo.earlyWarnFormulaName || '--' }}</span>
  117. </p>
  118. </td>
  119. <td>
  120. <p>
  121. <span>告警公式</span><span class="value">{{ extendInfo.warnFormulaName || '--' }}</span>
  122. </p>
  123. </td>
  124. <td>
  125. <p>
  126. <span>数据完整率</span><span class="value">{{ stationInfo.requireDataCompleteRate || '--' }}</span>
  127. </p>
  128. </td>
  129. </tr>
  130. <tr>
  131. <td rowspan="2" style="border-bottom: 1px solid #d8ddef">运维相关</td>
  132. <td>
  133. <p>
  134. <span>截止时间</span><span class="value">{{ stationInfo.contractDate }}</span>
  135. </p>
  136. </td>
  137. <td>
  138. <p>
  139. <span>责任人</span><span class="value">{{ stationInfo.chargeUser }}</span>
  140. </p>
  141. </td>
  142. <td>
  143. <p><span>运维单位</span><span class="value">武汉新烽光电</span></p>
  144. </td>
  145. </tr>
  146. <tr>
  147. <td>
  148. <p><span>年故障数</span><span class="value">--</span></p>
  149. </td>
  150. <td>
  151. <p><span>年运维数</span><span class="value">--</span></p>
  152. </td>
  153. <td>
  154. <p><span>联系人</span><span class="value">朱方仁 18907171008</span></p>
  155. </td>
  156. </tr>
  157. </table>
  158. <div class="title">现场照片</div>
  159. <div class="xcImage" v-if="stationInfo.coverPhotosFileList.length > 0">
  160. <ImagePreview :src="item.url" :width="100" :height="100" v-for="item in stationInfo.coverPhotosFileList" :key="item.id" />
  161. </div>
  162. </div>
  163. </template>
  164. <script setup>
  165. import { getStationDetailExtend } from '@/api/dataAnalysis/syntherticData';
  166.  
  167. const props = defineProps({
  168. stationInfo: Object,
  169. });
  170. const { proxy } = getCurrentInstance();
  171. const myChart = shallowRef(null);
  172. const extendInfo = ref({});
  173. // 获取详情数据 扩展
  174. const getDetailData = id => {
  175. getStationDetailExtend(props.stationInfo.stCode).then(res => {
  176. extendInfo.value = res.data;
  177. });
  178. };
  179.  
  180. onMounted(() => {
  181. getDetailData();
  182. });
  183. </script>
  184. <style lang="scss">
  185. .stationBase {
  186. width: 100%;
  187. padding-bottom: 50px;
  188. max-height: 80vh;
  189. overflow-y: auto;
  190. table {
  191. width: 98%;
  192. tr {
  193. td:nth-of-type(1) {
  194. border-left: 1px solid #d8ddef;
  195. }
  196. }
  197. tr:last-child {
  198. td {
  199. border-bottom: 1px solid #d8ddef;
  200. }
  201. }
  202. td {
  203. border-top: 1px solid #d8ddef;
  204. border-right: 1px solid #d8ddef;
  205. text-align: center;
  206. width: 30%;
  207. color: #c6c6c6;
  208. &:nth-of-type(1) {
  209. width: 100px;
  210. }
  211. p {
  212. display: flex;
  213. justify-content: space-around;
  214. margin: 8px 0px;
  215. span:nth-of-type(1) {
  216. display: inline-block;
  217. width: 75px;
  218. }
  219. .value {
  220. flex: 1;
  221. display: inline-block;
  222. font-weight: bold;
  223. color: #d8ddef;
  224. max-width: 200px;
  225. overflow: hidden;
  226. white-space: nowrap;
  227. text-overflow: ellipsis;
  228. }
  229. }
  230. }
  231. }
  232. .xcImage {
  233. .el-image {
  234. width: 150px;
  235. margin-right: 10px;
  236. }
  237. }
  238. .title {
  239. font-weight: bold;
  240. color: #d8ddef;
  241. margin: 10px 0px;
  242. }
  243. #baseEchart {
  244. width: 98%;
  245. height: 300px;
  246. }
  247. }
  248. </style>