index.vue 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
  1. <!--
  2. * @Author: your name
  3. * @Date: 2025-01-10 09:10:24
  4. * @LastEditTime: 2025-01-20 09:23:09
  5. * @LastEditors: bogon
  6. * @Description: In User Settings Edit
  7. * @FilePath: /performance-test/src/views/overview/components/tsr_cp_power/index.vue
  8. -->
  9. <template>
  10. <div class="type-variable">
  11. <!-- 叶尖速比-风能利用系数-功率分析 -->
  12. <div class="left">
  13. <FilterChart
  14. :windList="windEngineGroupList"
  15. @getEnfineList="getEnfineList"
  16. @handlePrevious="handlePrevious"
  17. @handleNext="handleNext"
  18. ></FilterChart>
  19. <el-alert type="info" :closable="false">
  20. <template v-slot:title>
  21. <div style="display: flex; align-items: center">
  22. <i
  23. class="el-icon-info"
  24. style="font-size: 20px; margin-right: 5px"
  25. ></i>
  26. <h3>分析说明:</h3>
  27. </div>
  28. </template>
  29. <div style="font-size: 12px; margin-top: 10px">
  30. 风向玫瑰图是一种表示某地不同风向出现频率分布的图表。
  31. </div>
  32. </el-alert>
  33. <div class="titleCharts">分析总图 :</div>
  34. <VirtualList
  35. :list="generalFilesDatas"
  36. keyField="batchCode"
  37. :itemSize="452"
  38. v-slot="{ item, index }"
  39. >
  40. <lineAndChildLine
  41. :key="item.batchCode + index"
  42. :inds="index"
  43. :ref="item.batchCode"
  44. :fileAddr="item.fileAddr"
  45. >
  46. </lineAndChildLine>
  47. </VirtualList>
  48. <div class="titleCharts">分析分图 :</div>
  49. <VirtualList
  50. :list="diagramRelationsDatas"
  51. keyField="fieldEngineCode"
  52. :itemSize="452"
  53. v-slot="{ item, index }"
  54. >
  55. <lineAndChildLine
  56. :key="item.fieldEngineCode + index"
  57. :inds="index"
  58. :ref="item.fieldEngineCode"
  59. :fileAddr="item.fileAddr"
  60. >
  61. </lineAndChildLine>
  62. </VirtualList>
  63. <el-tabs value="first">
  64. <el-tab-pane label="意见描述" name="first">
  65. <TinymceEditor
  66. ref="editor"
  67. v-model="comment"
  68. @input="handleEditorInput($event)"
  69. @onClick="onClick"
  70. >
  71. </TinymceEditor>
  72. </el-tab-pane>
  73. </el-tabs>
  74. <el-row type="flex" class="row-bg" justify="end">
  75. <el-col :span="2" style="margin: 20px">
  76. <el-button type="primary" size="small" @click="handleComment"
  77. >提交评论</el-button
  78. >
  79. </el-col>
  80. </el-row>
  81. </div>
  82. <div class="right">
  83. <DicCard
  84. :batchCode="initBatchCode"
  85. :analysisTypeCode="analysisTypeCode"
  86. :commentDescriptionVos="commentDescriptionVos"
  87. >
  88. </DicCard>
  89. </div>
  90. </div>
  91. </template>
  92. <script>
  93. import DicCard from "@/views/overview/components/dicCard/index.vue";
  94. import FilterChart from "@/views/overview/components/filterChart/index.vue";
  95. import lineAndChildLine from "@/views/performance/components/chartsCom/lineAndChildLine.vue";
  96. import TinymceEditor from "@/components/Tinymce.vue";
  97. import { analysisDetail, queryAnalysisedEngine } from "@/api/performance";
  98. export default {
  99. name: "tsrCpPower",
  100. components: {
  101. DicCard,
  102. FilterChart,
  103. lineAndChildLine,
  104. TinymceEditor,
  105. },
  106. props: {
  107. initBatchCode: {
  108. default: "",
  109. type: String,
  110. },
  111. analysisTypeCode: {
  112. default: "",
  113. type: String,
  114. },
  115. batchCodeList: {
  116. default: "",
  117. type: Array,
  118. },
  119. },
  120. data() {
  121. return {
  122. form: {
  123. value2: "",
  124. },
  125. comment: "",
  126. options: [],
  127. windEngineGroupList: [], //批次风机列表
  128. fieldEngineCodes: [], //选中风机
  129. generalFilesDatas: [], //总图
  130. diagramRelationsDatas: [], //分图
  131. commentDescriptionVos: [], //评论列表
  132. editableTabs: [],
  133. };
  134. },
  135. watch: {
  136. initBatchCode(newVal) {
  137. if (newVal) {
  138. this.fetchData(); // 调用合并后的函数
  139. }
  140. },
  141. analysisTypeCode(newVal) {
  142. if (newVal) {
  143. this.fetchData(); // 调用合并后的函数
  144. }
  145. },
  146. },
  147. mounted() {
  148. if (this.initBatchCode && this.analysisTypeCode) {
  149. this.fetchData(); // 调用合并后的函数
  150. }
  151. },
  152. methods: {
  153. async handleComment() {
  154. try {
  155. await analysisCommentEdit({
  156. batchCode: this.initBatchCode,
  157. analysisTypeCode: this.analysisTypeCode,
  158. commentList: this.editableTabs.map((item) => {
  159. return {
  160. commentTypeCode: item.commentTypeCode,
  161. comment: item.commentTypeName === "分析评论" ? this.comment : "",
  162. };
  163. }),
  164. });
  165. this.$message({
  166. type: "success",
  167. message: "保存成功",
  168. });
  169. this.comment = "";
  170. this.getAnalysisDetail();
  171. } catch (e) {
  172. console.error(e);
  173. this.loading = false;
  174. }
  175. },
  176. onSubmit() {
  177. console.log("submit!");
  178. },
  179. // 合并后的函数,处理数据请求
  180. async fetchData() {
  181. try {
  182. // 获取分析详情
  183. await this.getAnalysisDetail();
  184. // 获取风机列表
  185. await this.getWindEnfineList(this.initBatchCode, this.analysisTypeCode);
  186. } catch (err) {
  187. console.error("Failed to fetch data:", err);
  188. }
  189. },
  190. // 获取分析详情接口
  191. async getAnalysisDetail() {
  192. try {
  193. const result = await analysisDetail({
  194. batchCode: this.initBatchCode,
  195. analysisTypeCode: this.analysisTypeCode,
  196. fieldEngineCodes:
  197. this.fieldEngineCodes.length === 0
  198. ? undefined
  199. : this.fieldEngineCodes.join(","),
  200. });
  201. if (
  202. result.data &&
  203. result.data[0] &&
  204. result.data[0].commentTypeRelations
  205. ) {
  206. this.editableTabs = result.data[0].commentTypeRelations;
  207. }
  208. //当前评论展示获取
  209. if (
  210. result.data &&
  211. result.data[0] &&
  212. result.data[0].commentDescriptionVos
  213. ) {
  214. this.commentDescriptionVos = result.data[0].commentDescriptionVos;
  215. }
  216. this.generalFilesDatas =
  217. result.data &&
  218. result.data[0] &&
  219. result.data[0].generalFiles &&
  220. result.data[0].generalFiles.filter((item) =>
  221. item.fileAddr.endsWith(".json")
  222. ); //总图数据
  223. this.diagramRelationsDatas =
  224. result.data &&
  225. result.data[0] &&
  226. result.data[0].diagramRelations.filter((item) =>
  227. item.fileAddr.endsWith(".json")
  228. );
  229. } catch (err) {
  230. console.error("Failed to fetch analysis details:", err);
  231. }
  232. },
  233. // 请求风机列表
  234. async getWindEnfineList(batchCode, analysisTypeCode) {
  235. // console.log("请求风机列表 分钟级");
  236. const resEngineList = await queryAnalysisedEngine({
  237. batchCode: batchCode,
  238. analysisTypeCode,
  239. });
  240. this.windEngineGroupList = resEngineList.data;
  241. },
  242. handleEditorInput(index, newVal) {
  243. // 更新对应的 comment 值
  244. // 如果该功能没有实现,可以删除这个方法
  245. },
  246. //获取选中风机list
  247. getEnfineList(data) {
  248. this.fieldEngineCodes = data;
  249. this.getAnalysisDetail();
  250. },
  251. //下一条
  252. handleNext() {
  253. const index = this.batchCodeList.findIndex(
  254. (item) => item === this.initBatchCode
  255. );
  256. if (index === this.batchCodeList.length - 1) {
  257. this.$message.warning("已经是最后一个分析结果了");
  258. return;
  259. }
  260. this.$emit("setInitBathCode", this.batchCodeList[index + 1]);
  261. },
  262. //上一条
  263. handlePrevious() {
  264. const index = this.batchCodeList.findIndex(
  265. (item) => item === this.initBatchCode
  266. );
  267. if (index === 0) {
  268. this.$message.warning("没有上一条了");
  269. return;
  270. }
  271. this.$emit("setInitBathCode", this.batchCodeList[index - 1]);
  272. },
  273. onClick() {},
  274. },
  275. };
  276. </script>
  277. <style scoped lang="scss">
  278. .type-variable {
  279. display: flex;
  280. height: 90%;
  281. overflow: hidden;
  282. .left {
  283. width: 30%;
  284. height: 100%;
  285. overflow: auto;
  286. padding: 20px;
  287. flex: 1;
  288. }
  289. .right {
  290. width: 250px;
  291. height: 100%;
  292. overflow: hidden;
  293. }
  294. }
  295. .titleCharts {
  296. font-size: 16px;
  297. font-weight: 500;
  298. margin-top: 20px;
  299. }
  300. </style>