123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307 |
- <!--
- * @Author: your name
- * @Date: 2025-01-10 09:10:24
- * @LastEditTime: 2025-01-20 09:23:09
- * @LastEditors: bogon
- * @Description: In User Settings Edit
- * @FilePath: /performance-test/src/views/overview/components/tsr_cp_power/index.vue
- -->
- <template>
- <div class="type-variable">
- <!-- 叶尖速比-风能利用系数-功率分析 -->
- <div class="left">
- <FilterChart
- :windList="windEngineGroupList"
- @getEnfineList="getEnfineList"
- @handlePrevious="handlePrevious"
- @handleNext="handleNext"
- ></FilterChart>
- <el-alert type="info" :closable="false">
- <template v-slot:title>
- <div style="display: flex; align-items: center">
- <i
- class="el-icon-info"
- style="font-size: 20px; margin-right: 5px"
- ></i>
- <h3>分析说明:</h3>
- </div>
- </template>
- <div style="font-size: 12px; margin-top: 10px">
- 风向玫瑰图是一种表示某地不同风向出现频率分布的图表。
- </div>
- </el-alert>
- <div class="titleCharts">分析总图 :</div>
- <VirtualList
- :list="generalFilesDatas"
- keyField="batchCode"
- :itemSize="452"
- v-slot="{ item, index }"
- >
- <lineAndChildLine
- :key="item.batchCode + index"
- :inds="index"
- :ref="item.batchCode"
- :fileAddr="item.fileAddr"
- >
- </lineAndChildLine>
- </VirtualList>
- <div class="titleCharts">分析分图 :</div>
- <VirtualList
- :list="diagramRelationsDatas"
- keyField="fieldEngineCode"
- :itemSize="452"
- v-slot="{ item, index }"
- >
- <lineAndChildLine
- :key="item.fieldEngineCode + index"
- :inds="index"
- :ref="item.fieldEngineCode"
- :fileAddr="item.fileAddr"
- >
- </lineAndChildLine>
- </VirtualList>
- <el-tabs value="first">
- <el-tab-pane label="意见描述" name="first">
- <TinymceEditor
- ref="editor"
- v-model="comment"
- @input="handleEditorInput($event)"
- @onClick="onClick"
- >
- </TinymceEditor>
- </el-tab-pane>
- </el-tabs>
- <el-row type="flex" class="row-bg" justify="end">
- <el-col :span="2" style="margin: 20px">
- <el-button type="primary" size="small" @click="handleComment"
- >提交评论</el-button
- >
- </el-col>
- </el-row>
- </div>
- <div class="right">
- <DicCard
- :batchCode="initBatchCode"
- :analysisTypeCode="analysisTypeCode"
- :commentDescriptionVos="commentDescriptionVos"
- >
- </DicCard>
- </div>
- </div>
- </template>
- <script>
- import DicCard from "@/views/overview/components/dicCard/index.vue";
- import FilterChart from "@/views/overview/components/filterChart/index.vue";
- import lineAndChildLine from "@/views/performance/components/chartsCom/lineAndChildLine.vue";
- import TinymceEditor from "@/components/Tinymce.vue";
- import { analysisDetail, queryAnalysisedEngine } from "@/api/performance";
- export default {
- name: "tsrCpPower",
- components: {
- DicCard,
- FilterChart,
- lineAndChildLine,
- TinymceEditor,
- },
- props: {
- initBatchCode: {
- default: "",
- type: String,
- },
- analysisTypeCode: {
- default: "",
- type: String,
- },
- batchCodeList: {
- default: "",
- type: Array,
- },
- },
- data() {
- return {
- form: {
- value2: "",
- },
- comment: "",
- options: [],
- windEngineGroupList: [], //批次风机列表
- fieldEngineCodes: [], //选中风机
- generalFilesDatas: [], //总图
- diagramRelationsDatas: [], //分图
- commentDescriptionVos: [], //评论列表
- editableTabs: [],
- };
- },
- watch: {
- initBatchCode(newVal) {
- if (newVal) {
- this.fetchData(); // 调用合并后的函数
- }
- },
- analysisTypeCode(newVal) {
- if (newVal) {
- this.fetchData(); // 调用合并后的函数
- }
- },
- },
- mounted() {
- if (this.initBatchCode && this.analysisTypeCode) {
- this.fetchData(); // 调用合并后的函数
- }
- },
- methods: {
- async handleComment() {
- try {
- await analysisCommentEdit({
- batchCode: this.initBatchCode,
- analysisTypeCode: this.analysisTypeCode,
- commentList: this.editableTabs.map((item) => {
- return {
- commentTypeCode: item.commentTypeCode,
- comment: item.commentTypeName === "分析评论" ? this.comment : "",
- };
- }),
- });
- this.$message({
- type: "success",
- message: "保存成功",
- });
- this.comment = "";
- this.getAnalysisDetail();
- } catch (e) {
- console.error(e);
- this.loading = false;
- }
- },
- onSubmit() {
- console.log("submit!");
- },
- // 合并后的函数,处理数据请求
- async fetchData() {
- try {
- // 获取分析详情
- await this.getAnalysisDetail();
- // 获取风机列表
- await this.getWindEnfineList(this.initBatchCode, this.analysisTypeCode);
- } catch (err) {
- console.error("Failed to fetch data:", err);
- }
- },
- // 获取分析详情接口
- async getAnalysisDetail() {
- try {
- const result = await analysisDetail({
- batchCode: this.initBatchCode,
- analysisTypeCode: this.analysisTypeCode,
- fieldEngineCodes:
- this.fieldEngineCodes.length === 0
- ? undefined
- : this.fieldEngineCodes.join(","),
- });
- if (
- result.data &&
- result.data[0] &&
- result.data[0].commentTypeRelations
- ) {
- this.editableTabs = result.data[0].commentTypeRelations;
- }
- //当前评论展示获取
- if (
- result.data &&
- result.data[0] &&
- result.data[0].commentDescriptionVos
- ) {
- this.commentDescriptionVos = result.data[0].commentDescriptionVos;
- }
- this.generalFilesDatas =
- result.data &&
- result.data[0] &&
- result.data[0].generalFiles &&
- result.data[0].generalFiles.filter((item) =>
- item.fileAddr.endsWith(".json")
- ); //总图数据
- this.diagramRelationsDatas =
- result.data &&
- result.data[0] &&
- result.data[0].diagramRelations.filter((item) =>
- item.fileAddr.endsWith(".json")
- );
- } catch (err) {
- console.error("Failed to fetch analysis details:", err);
- }
- },
- // 请求风机列表
- async getWindEnfineList(batchCode, analysisTypeCode) {
- // console.log("请求风机列表 分钟级");
- const resEngineList = await queryAnalysisedEngine({
- batchCode: batchCode,
- analysisTypeCode,
- });
- this.windEngineGroupList = resEngineList.data;
- },
- handleEditorInput(index, newVal) {
- // 更新对应的 comment 值
- // 如果该功能没有实现,可以删除这个方法
- },
- //获取选中风机list
- getEnfineList(data) {
- this.fieldEngineCodes = data;
- this.getAnalysisDetail();
- },
- //下一条
- handleNext() {
- const index = this.batchCodeList.findIndex(
- (item) => item === this.initBatchCode
- );
- if (index === this.batchCodeList.length - 1) {
- this.$message.warning("已经是最后一个分析结果了");
- return;
- }
- this.$emit("setInitBathCode", this.batchCodeList[index + 1]);
- },
- //上一条
- handlePrevious() {
- const index = this.batchCodeList.findIndex(
- (item) => item === this.initBatchCode
- );
- if (index === 0) {
- this.$message.warning("没有上一条了");
- return;
- }
- this.$emit("setInitBathCode", this.batchCodeList[index - 1]);
- },
- onClick() {},
- },
- };
- </script>
- <style scoped lang="scss">
- .type-variable {
- display: flex;
- height: 90%;
- overflow: hidden;
- .left {
- width: 30%;
- height: 100%;
- overflow: auto;
- padding: 20px;
- flex: 1;
- }
- .right {
- width: 250px;
- height: 100%;
- overflow: hidden;
- }
- }
- .titleCharts {
- font-size: 16px;
- font-weight: 500;
- margin-top: 20px;
- }
- </style>
|