index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <el-card shadow="always" class="box-card" v-loading="loading">
  3. <div class="box-header">
  4. <h4>分析介绍:</h4>
  5. <div class="box-header-min">
  6. <el-descriptions>
  7. <el-descriptions-item label="分析主题">{{
  8. analysisInfo.analysisName
  9. }}</el-descriptions-item>
  10. <el-descriptions-item label="分析人">{{
  11. analysisInfo.updateByName
  12. }}</el-descriptions-item>
  13. <el-descriptions-item label="分析简述">{{
  14. analysisInfo.sketch
  15. }}</el-descriptions-item>
  16. <el-descriptions-item label="分析创建时间">
  17. {{ analysisInfo.createTime }}
  18. </el-descriptions-item>
  19. <el-descriptions-item label="分析开始执行时间">{{
  20. analysisInfo.analysisStartTime
  21. }}</el-descriptions-item>
  22. <el-descriptions-item label="分析完成时间">{{
  23. analysisInfo.analysisFinishTime
  24. }}</el-descriptions-item>
  25. </el-descriptions>
  26. <!-- <div v-if="analysisInfo.dataEndTime || analysisInfo.dataStartTime">
  27. 分析数据时间跨度为{{ analysisInfo.dataEndTime }}至{{
  28. analysisInfo.dataStartTime
  29. }}。
  30. </div>
  31. <div v-if="analysisInfo.analysisFinishTime">
  32. 分析完成时间为{{ analysisInfo.analysisFinishTime }}。数据分析人
  33. <span class="headerMessage">{{ analysisInfo.updateByName }}</span
  34. >。
  35. </div> -->
  36. </div>
  37. </div>
  38. <div class="box-header">
  39. <h4>风场信息:</h4>
  40. <div class="box-header-min">
  41. <div>
  42. {{ fieldInfo.fieldName }}位于{{ fieldInfo.provinceName
  43. }}{{ fieldInfo.cityName }}
  44. ,海拔高度为
  45. <span class="headerMessage"> {{ fieldInfo.elevationHeight }} </span>米
  46. ,所在经纬度为经度
  47. <span class="headerMessage"> {{ fieldInfo.longitude }} </span>° ,纬度
  48. <span class="headerMessage">{{ fieldInfo.latitude }} </span>°
  49. </div>
  50. <div>
  51. <!-- 该风电场由{{ fieldInfo.companyName }}管理, -->
  52. 风场总容量为
  53. <span class="headerMessage"
  54. >{{ fieldInfo.ratedCapacityNumber }} MW
  55. </span>
  56. ,共安装
  57. <span class="headerMessage">{{ fieldInfo.engineCount }} 台</span>
  58. 风机,使用的机型为
  59. <span class="headerMessage">
  60. {{
  61. fieldInfo.engineMillTypes && fieldInfo.engineMillTypes.join(",")
  62. }}
  63. </span>
  64. </div>
  65. <div v-if="analysisInfo.dataEndTime || analysisInfo.dataStartTime">
  66. 分析数据时间跨度为{{ analysisInfo.dataStartTime }}至{{
  67. analysisInfo.dataEndTime
  68. }}。
  69. </div>
  70. <div v-if="analysisInfo.analysisFinishTime">
  71. 分析完成时间为{{ analysisInfo.analysisFinishTime }}。数据分析人
  72. <span class="headerMessage">{{ analysisInfo.updateByName }}</span
  73. >。
  74. </div>
  75. </div>
  76. </div>
  77. <div class="content">
  78. <div class="left">
  79. <div class="box-content-min">
  80. <h4>分析完成机组:</h4>
  81. <div
  82. class="analysisCompletionUnit"
  83. v-if="analysisInfo && analysisInfo.windEngineGroups?.length > 0"
  84. >
  85. <div
  86. class="itemAnalysisCompletionUnit"
  87. v-for="itemData in analysisInfo.windEngineGroups"
  88. :key="itemData.engineCode"
  89. >
  90. <el-popover
  91. placement="right"
  92. width="600"
  93. trigger="hover"
  94. @show="getEngineInfo(itemData.engineCode)"
  95. >
  96. <el-descriptions class="margin-top" size="mini" border>
  97. <!-- :column="3" -->
  98. <el-descriptions-item>
  99. <template slot="label"> 风机名称 </template>
  100. {{ windDetail.engineName }}
  101. </el-descriptions-item>
  102. <!-- <el-descriptions-item>
  103. <template slot="label"> 机型编号 </template>
  104. {{ windDetail.millTypeCode }}
  105. </el-descriptions-item> -->
  106. <el-descriptions-item>
  107. <template slot="label"> 额定容量 </template>
  108. {{ windDetail.ratedCapacity }}/KW
  109. </el-descriptions-item>
  110. <el-descriptions-item>
  111. <template slot="label"> 轮毂高度 </template>
  112. {{ windDetail.hubHeight }}/米
  113. </el-descriptions-item>
  114. <el-descriptions-item>
  115. <template slot="label"> 海拔高度 </template>
  116. {{ windDetail.elevationHeight }}/米
  117. </el-descriptions-item>
  118. <el-descriptions-item>
  119. <template slot="label"> 经度 </template>
  120. {{ windDetail.longitude }}
  121. </el-descriptions-item>
  122. <el-descriptions-item>
  123. <template slot="label"> 纬度 </template>
  124. {{ windDetail.latitude }}
  125. </el-descriptions-item>
  126. <el-descriptions-item>
  127. <template slot="label"> 是否标杆风机 </template>
  128. {{ windDetail.sightcing == 1 ? "是" : "否" }}
  129. </el-descriptions-item>
  130. <el-descriptions-item>
  131. <template slot="label"> 额定风速 </template>
  132. {{ windDetail.rated_wind_speed }} m/s
  133. </el-descriptions-item>
  134. <el-descriptions-item>
  135. <template slot="label"> 切入风速 </template>
  136. {{ windDetail.ratedCutInWindspeed }} m/s
  137. </el-descriptions-item>
  138. <el-descriptions-item>
  139. <template slot="label"> 切出风速 </template>
  140. {{ windDetail.ratedCutOutWindspeed }} m/s
  141. </el-descriptions-item>
  142. </el-descriptions>
  143. <div slot="reference">
  144. <SvgIcons
  145. name="WindPower3"
  146. class="WindPower3"
  147. width="40px"
  148. height="42px"
  149. color="#222"
  150. ></SvgIcons>
  151. <span>{{ itemData.engineName }}机组</span>
  152. </div>
  153. <!-- <el-button>click 激活</el-button> -->
  154. </el-popover>
  155. </div>
  156. </div>
  157. <el-empty v-else description="暂无分析完成机组"></el-empty>
  158. </div>
  159. </div>
  160. <div class="right">
  161. <Map :batchCode="initBatchCode" :fieldCode="fieldInfo.fieldCode"></Map>
  162. </div>
  163. </div>
  164. <div class="box-min">
  165. <h4>完成分析模型:</h4>
  166. <template v-if="analysisInfo && analysisInfo.analysisTypes?.length > 0">
  167. <div
  168. class="analysisTypes"
  169. v-for="analysis in analysisInfo.analysisTypes"
  170. :key="analysis.id"
  171. >
  172. <h6>{{ analysis.typeName }}:</h6>
  173. <div class="completeAssetssType">
  174. <el-tag
  175. v-for="analysisChild in analysis.children"
  176. :key="analysisChild.id"
  177. type="warning"
  178. >{{ analysisChild.typeName }}
  179. </el-tag>
  180. </div>
  181. </div>
  182. </template>
  183. <el-empty v-else description="暂无完成分析模型"></el-empty>
  184. </div>
  185. </el-card>
  186. </template>
  187. <script>
  188. import Map from "../map/index.vue";
  189. import { getFieldInfo } from "@/api/overview";
  190. import { getWindEngineGroup } from "@/api/ledger";
  191. export default {
  192. name: "AnalysisInformation",
  193. components: {
  194. Map,
  195. },
  196. props: {
  197. initBatchCode: {
  198. default: "",
  199. type: String,
  200. },
  201. },
  202. data() {
  203. return {
  204. loading: false,
  205. fieldInfo: {
  206. fieldCode: "",
  207. }, //风场信息
  208. fieldCode: "", //风场编号
  209. analysisInfo: {}, //分析模型编号
  210. activeNames: ["1", "2", "3"],
  211. data: [
  212. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  213. ],
  214. windDetail: {},
  215. };
  216. },
  217. watch: {
  218. initBatchCode(newVal, oldVal) {
  219. if (newVal) {
  220. this.getFieldInfoMess();
  221. }
  222. },
  223. },
  224. mounted() {
  225. if (this.$route.query.batchCode) {
  226. this.initBatchCode = this.$route.query.batchCode;
  227. }
  228. if (this.$route.query.fieldCode) {
  229. this.fieldInfo.fieldCode = this.$route.query.fieldCode;
  230. }
  231. },
  232. created() {
  233. if (this.initBatchCode !== "") {
  234. this.getFieldInfoMess();
  235. }
  236. },
  237. methods: {
  238. //获取风机信息
  239. async getEngineInfo(engineCode) {
  240. await getWindEngineGroup({ engineCode }).then((res) => {
  241. if (res.code === 200) {
  242. this.windDetail = res.data;
  243. }
  244. });
  245. },
  246. async getWindEngList() {
  247. this.loading = true;
  248. try {
  249. const res = await getWindEngineGroup({
  250. engineCode: this.engineCode,
  251. });
  252. this.loading = false;
  253. this.windDetail = res.data;
  254. } catch (error) {
  255. this.loading = false;
  256. console.error(error);
  257. }
  258. },
  259. //获取分析信息
  260. async getFieldInfoMess() {
  261. //分析详情
  262. try {
  263. this.loading = true;
  264. const res = await getFieldInfo({ batchCode: this.initBatchCode });
  265. if (res.code === 200) {
  266. this.fieldInfo = res.data.fieldInfo; //风场信息
  267. this.analysisInfo = res.data.analysisInfo; //分析模型编号
  268. }
  269. } catch (err) {
  270. } finally {
  271. this.loading = false;
  272. }
  273. },
  274. handleChange(val) {
  275. console.log(val);
  276. },
  277. },
  278. };
  279. </script>
  280. <style scoped lang="scss">
  281. .completeAssetssType {
  282. display: flex;
  283. flex-wrap: wrap;
  284. .el-tag {
  285. margin-right: 10px;
  286. margin-bottom: 10px;
  287. }
  288. ::v-deep .el-tag--warning {
  289. background-color: #0080803a !important;
  290. border-color: #0080803a !important;
  291. color: #008080 !important;
  292. }
  293. }
  294. .el-card__body {
  295. width: 100%;
  296. height: 100%;
  297. // margin-bottom: 20px !important;
  298. }
  299. .content {
  300. width: 100%;
  301. display: flex;
  302. justify-content: space-between;
  303. // align-items: flex-start;
  304. /* 上对齐 */
  305. height: 100%;
  306. border-bottom: 1px solid #ebeef5;
  307. /* 确保内容区域有高度 */
  308. }
  309. .box-min {
  310. padding: 10px;
  311. color: #303133;
  312. h4 {
  313. color: #303133;
  314. // border-bottom: 1px solid #ebeef5;
  315. font-size: 14px;
  316. font-weight: 500;
  317. margin-bottom: 10px;
  318. }
  319. ::v-deep .analysisTypes {
  320. h6 {
  321. font-weight: 500 !important;
  322. font-size: 12px;
  323. margin: 5px 0;
  324. }
  325. }
  326. .analysisTypes:last-child {
  327. margin-bottom: 50px;
  328. }
  329. }
  330. .left {
  331. width: 70%;
  332. // flex: 1;
  333. .box-content-min {
  334. padding: 10px;
  335. // border-bottom: 1px solid #ebeef5;
  336. color: #303133;
  337. h4 {
  338. color: #303133;
  339. // border-bottom: 1px solid #ebeef5;
  340. font-size: 14px;
  341. font-weight: 500;
  342. margin-bottom: 10px;
  343. }
  344. }
  345. .analysisCompletionUnit {
  346. display: flex;
  347. flex-wrap: wrap;
  348. margin: 20px 0;
  349. padding-bottom: 10px;
  350. .itemAnalysisCompletionUnit {
  351. text-align: center;
  352. margin-bottom: 10px;
  353. border: #eaeef6 solid 1px;
  354. margin-right: 10px;
  355. border-radius: 10px;
  356. padding: 10px 5px;
  357. span {
  358. font-size: 12px;
  359. }
  360. .WindPower3 {
  361. padding: 10px 5px;
  362. text-align: center;
  363. }
  364. }
  365. }
  366. }
  367. .right {
  368. width: 30%;
  369. height: 100%;
  370. /* 确保容器高度为100% */
  371. // flex: 1;
  372. display: flex;
  373. justify-content: center;
  374. align-items: center;
  375. }
  376. .right .map-ditu {
  377. width: 100%;
  378. /* 设置地图的宽度 */
  379. height: 40vh;
  380. border-radius: 90px;
  381. /* 设置地图的高度 */
  382. }
  383. .box-card {
  384. width: 100%;
  385. height: 100%;
  386. overflow-y: scroll;
  387. /* 滚动条整体样式 */
  388. &::-webkit-scrollbar {
  389. width: 6px; /* 滚动条宽度 */
  390. }
  391. /* 滚动条轨道 */
  392. &::-webkit-scrollbar-track {
  393. background: #f5f7fa;
  394. border-radius: 3px;
  395. }
  396. /* 滚动条滑块 */
  397. &::-webkit-scrollbar-thumb {
  398. background: #c0c4cc;
  399. border-radius: 3px;
  400. }
  401. /* 滚动条滑块悬停时 */
  402. &::-webkit-scrollbar-thumb:hover {
  403. background: #909399;
  404. }
  405. .box-header {
  406. padding: 10px;
  407. border-bottom: 1px solid #ebeef5;
  408. color: #303133;
  409. h4 {
  410. color: #303133;
  411. font-size: 14px;
  412. font-weight: 500;
  413. // margin-bottom: 10px;
  414. }
  415. }
  416. .box-header-min {
  417. padding: 10px;
  418. font-size: 14px;
  419. color: #606266;
  420. line-height: 22px;
  421. .headerMessage {
  422. font-size: 16px;
  423. }
  424. }
  425. }
  426. </style>