Merge remote-tracking branch 'origin/develop-rmd' into develop

PHM-web/package.json

@@ -45,9 +45,11 @@
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
+    "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",
     "js-cookie": "3.0.1",
     "jsencrypt": "3.0.0-rc.1",
+    "jspdf": "^2.5.1",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
@@ -87,4 +89,4 @@
     "> 1%",
     "last 2 versions"
   ]
-}
+}

PHM-web/src/components/ECharts/index.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <div id='main'></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+} from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  LabelLayout,
+  UniversalTransition,
+])
+export default {
+  name: 'dataPlayBack',
+  data() {
+    return {
+      //eCharts
+      myChart: '',
+      //开始和结束时间
+      // 查询参数
+      startTime: '2023-01-02 00:00:00',
+      endTime: '2023-01-02 06:00:00',
+    }
+  },
+  mounted() {
+    this.creatECharts()
+  },
+  methods: {
+    creatECharts() {
+      if (this.myChart) {
+        this.myChart.dispose()
+      }
+      var dom = document.getElementById('main')
+      this.myChart = echarts.init(dom, null, {
+        renderer: 'canvas',
+        useDirtyRect: false,
+      })
+      let option
+      const a = [
+        ['Income', 'Life Expectancy', 'Population', 'Country', 'Year'],
+        [615, 34.05, 251014, 'Finland', '2023-01-02 00:00:00'],
+        [315, 34.05, 251014, 'Finland', '2023-01-02 01:00:00'],
+        [725, 34.05, 251014, 'Finland', '2023-01-02 02:00:00'],
+        [315, 34.05, 251014, 'Finland', '2023-01-02 03:00:00'],
+        [515, 34.05, 251014, 'Finland', '2023-01-02 04:00:00'],
+        [815, 34.05, 351014, 'Finland', '2023-01-02 05:00:00'],
+        [1815, 34.05, 351014, 'Finland', '2023-01-02 06:00:00'],
+        [814, 39, 645526, 'France', '2023-01-02 00:00:00'],
+        [144, 39, 645526, 'France', '2023-01-02 01:00:00'],
+        [454, 39, 645526, 'France', '2023-01-02 02:00:00'],
+        [734, 39, 645526, 'France', '2023-01-02 03:00:00'],
+        [144, 39, 645526, 'France', '2023-01-02 04:00:00'],
+        [999, 39, 645526, 'France', '2023-01-02 05:00:00'],
+        [814, 39, 645526, 'France', '2023-01-02 06:00:00'],
+      ]
+      let that = this
+      run(a)
+
+      function run(_rawData) {
+        const countries = ['Finland', 'France']
+        const datasetWithFilters = []
+        const seriesList = []
+        echarts.util.each(countries, function (country) {
+          var datasetId = 'dataset_' + country
+          datasetWithFilters.push({
+            id: datasetId,
+            fromDatasetId: 'dataset_raw',
+            transform: {
+              type: 'filter',
+              config: {
+                and: [
+                  {
+                    dimension: 'Year',
+                    gte: that.startTime,
+                    parser: 'time',
+                  },
+                  {
+                    dimension: 'Year',
+                    lt: that.endTime,
+                    parser: 'time',
+                  },
+                  { dimension: 'Country', '=': country },
+                ],
+              },
+            },
+          })
+          seriesList.push({
+            type: 'line',
+            datasetId: datasetId,
+            showSymbol: false,
+            name: country,
+            endLabel: {
+              show: true,
+              formatter: function (params) {
+                return params.value[3] + ': ' + params.value[0]
+              },
+            },
+            labelLayout: {
+              moveOverlap: 'shiftY',
+            },
+            emphasis: {
+              focus: 'series',
+            },
+            encode: {
+              x: 'Year',
+              y: 'Income',
+              label: ['Country', 'Income'],
+              itemName: 'Year',
+              tooltip: ['Income'],
+            },
+          })
+        })
+        option = {
+          animationDuration: that.speed,
+          dataset: [
+            {
+              id: 'dataset_raw',
+              source: _rawData,
+            },
+            ...datasetWithFilters,
+          ],
+          title: {
+            text: '',
+          },
+          tooltip: {
+            order: 'valueDesc',
+            trigger: 'axis',
+          },
+          xAxis: {
+            type: 'category',
+            nameLocation: 'middle',
+          },
+          yAxis: {
+            name: 'Income',
+          },
+          grid: {
+            right: 140,
+          },
+          series: seriesList,
+        }
+        that.myChart.setOption(option)
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+#main {
+  width: 1200px;
+  height: 500px;
+}
+</style>

PHM-web/src/router/index.js

@@ -142,10 +142,10 @@ export const dynamicRoutes = [
     permissions: ['manage:enhancedFaultDiagnosis'],
     children: [
       {
-        path: 'faultAnalysis/:info',
-        component: () => import('@/views/manage/faultAnalysis'),
-        name: 'faultAnalysis',
-        meta: { title: '故障分析', activeMenu: '' }
+        path: 'diagnosisResultDetail/',
+        component: () => import('@/views/manage/diagnosisResultDetail'),
+        name: 'diagnosisResultDetail',
+        meta: { title: '诊断结果详情', activeMenu: '' }
       }
     ]
   },

PHM-web/src/views/manage/diagnoseResult/index.vue

@@ -2,42 +2,19 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="故障模式" prop="faultMode">
-        <el-input
-          v-model="queryParams.faultMode"
-          placeholder="请输入故障模式"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.faultMode" placeholder="请输入故障模式" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="故障对象" prop="faultObject">
-        <el-input
-          v-model="queryParams.faultObject"
-          placeholder="请输入故障对象"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.faultObject" placeholder="请输入故障对象" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="故障编码" prop="faultCode">
-        <el-input
-          v-model="queryParams.faultCode"
-          placeholder="请输入故障编码"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.faultCode" placeholder="请输入故障编码" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="故障源" prop="faultSource">
-        <el-input
-          v-model="queryParams.faultSource"
-          placeholder="请输入故障源"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
+        <el-input v-model="queryParams.faultSource" placeholder="请输入故障源" clearable @keyup.enter.native="handleQuery" />
       </el-form-item>
       <el-form-item label="分析时间" prop="analysisTime">
-        <el-date-picker clearable
-          v-model="queryParams.analysisTime"
-          type="date"
-          value-format="yyyy-MM-dd"
+        <el-date-picker clearable v-model="queryParams.analysisTime" type="date" value-format="yyyy-MM-dd"
           placeholder="请选择分析时间">
         </el-date-picker>
       </el-form-item>
@@ -49,53 +26,30 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['manage:diagnoseResult:add']"
-        >新增</el-button>
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
+          v-hasPermi="['manage:diagnoseResult:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="success"
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['manage:diagnoseResult:edit']"
-        >修改</el-button>
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
+          v-hasPermi="['manage:diagnoseResult:edit']">修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="danger"
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['manage:diagnoseResult:remove']"
-        >删除</el-button>
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
+          v-hasPermi="['manage:diagnoseResult:remove']">删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['manage:diagnoseResult:export']"
-        >导出</el-button>
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
+          v-hasPermi="['manage:diagnoseResult:export']">导出</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="analysisDialog=true"
+          v-hasPermi="['manage:faultAnalyzeResult:export']">自定义分析</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="diagnoseResultList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
-      
       <el-table-column label="故障模式" align="center" prop="faultMode" />
       <el-table-column label="故障对象" align="center" prop="faultObject" />
       <el-table-column label="故障编码" align="center" prop="faultCode" />
@@ -108,31 +62,16 @@
       <el-table-column label="批注注解" align="center" prop="comment" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['manage:diagnoseResult:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['manage:diagnoseResult:remove']"
-          >删除</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
+            v-hasPermi="['manage:diagnoseResult:edit']">修改</el-button>
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['manage:diagnoseResult:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
-    
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
+
+    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
+      @pagination="getList" />
 
     <!-- 添加或修改诊断结果对话框 -->
     <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="500px" append-to-body>
@@ -150,10 +89,7 @@
           <el-input v-model="form.faultSource" placeholder="请输入故障源" />
         </el-form-item>
         <el-form-item label="分析时间" prop="analysisTime">
-          <el-date-picker clearable
-            v-model="form.analysisTime"
-            type="date"
-            value-format="yyyy-MM-dd"
+          <el-date-picker clearable v-model="form.analysisTime" type="date" value-format="yyyy-MM-dd"
             placeholder="请选择分析时间">
           </el-date-picker>
         </el-form-item>
@@ -166,14 +102,25 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <!-- 自定义分析的对话框 -->
+    <el-dialog title="分析页面" :visible.sync="analysisDialog" width="27%" :show-close='false'>
+      <faultAnalysis :flag="flag" :close='close'/>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { listDiagnoseResult, getDiagnoseResult, delDiagnoseResult, addDiagnoseResult, updateDiagnoseResult } from "@/api/manage/diagnoseResult";
-
+import {
+  listDiagnoseResult,
+  getDiagnoseResult,
+  delDiagnoseResult,
+  addDiagnoseResult,
+  updateDiagnoseResult,
+} from '@/api/manage/diagnoseResult'
+import faultAnalysis from '@/views/manage/faultAnalysis'
 export default {
-  name: "DiagnoseResult",
+  name: 'DiagnoseResult',
+  components:{ faultAnalysis },
   data() {
     return {
       // 遮罩层
@@ -191,9 +138,13 @@ export default {
       // 诊断结果表格数据
       diagnoseResultList: [],
       // 弹出层标题
-      title: "",
+      title: '',
       // 是否显示弹出层
       open: false,
+      //自定义弹出框
+      analysisDialog:false,
+      //1是自定义的，0是列表信息进入的
+      flag:1,
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -207,27 +158,30 @@ export default {
       // 表单参数
       form: {},
       // 表单校验
-      rules: {
-      }
-    };
+      rules: {},
+    }
   },
   created() {
-    this.getList();
+    this.getList()
   },
   methods: {
     /** 查询诊断结果列表 */
     getList() {
-      this.loading = true;
+      this.loading = true
       listDiagnoseResult(this.queryParams).then(response => {
-        this.diagnoseResultList = response.rows;
-        this.total = response.total;
-        this.loading = false;
-      });
+        this.diagnoseResultList = response.rows
+        this.total = response.total
+        this.loading = false
+      })
     },
     // 取消按钮
     cancel() {
-      this.open = false;
-      this.reset();
+      this.open = false
+      this.reset()
+    },
+    //自定义对话框关闭
+    close(){
+      this.analysisDialog=false
     },
     // 表单重置
     reset() {
@@ -243,78 +197,86 @@ export default {
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
-      };
-      this.resetForm("form");
+        updateTime: null,
+      }
+      this.resetForm('form')
     },
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
+      this.queryParams.pageNum = 1
+      this.getList()
     },
     /** 重置按钮操作 */
     resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+      this.resetForm('queryForm')
+      this.handleQuery()
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加诊断结果";
+      this.reset()
+      this.open = true
+      this.title = '添加诊断结果'
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-      this.reset();
+      this.reset()
       const id = row.id || this.ids
       getDiagnoseResult(id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改诊断结果";
-      });
+        this.form = response.data
+        this.open = true
+        this.title = '修改诊断结果'
+      })
     },
     /** 提交按钮 */
     submitForm() {
-      this.$refs["form"].validate(valid => {
+      this.$refs['form'].validate(valid => {
         if (valid) {
           if (this.form.id != null) {
             updateDiagnoseResult(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
           } else {
             addDiagnoseResult(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
+              this.$modal.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
           }
         }
-      });
+      })
     },
     /** 删除按钮操作 */
     handleDelete(row) {
-      const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除诊断结果编号为"' + ids + '"的数据项？').then(function() {
-        return delDiagnoseResult(ids);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      const ids = row.id || this.ids
+      this.$modal
+        .confirm('是否确认删除诊断结果编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delDiagnoseResult(ids)
+        })
+        .then(() => {
+          this.getList()
+          this.$modal.msgSuccess('删除成功')
+        })
+        .catch(() => {})
     },
     /** 导出按钮操作 */
     handleExport() {
-      this.download('manage/diagnoseResult/export', {
-        ...this.queryParams
-      }, `diagnoseResult_${new Date().getTime()}.xlsx`)
-    }
-  }
-};
+      this.download(
+        'manage/diagnoseResult/export',
+        {
+          ...this.queryParams,
+        },
+        `diagnoseResult_${new Date().getTime()}.xlsx`
+      )
+    },
+  },
+}
 </script>

PHM-web/src/views/manage/diagnosisResultDetail/index.vue

@@ -1,31 +1,61 @@
 <template>
-  <div class="resultDetail">
-    <el-descriptions title="诊断结果详情" class="info">
-      <el-descriptions-item label="模型名称">虚警抑制</el-descriptions-item>
-      <el-descriptions-item label="架次号">FM111</el-descriptions-item>
-      <el-descriptions-item label="步长数据">步长</el-descriptions-item>
-      <el-descriptions-item
-        label="诊断结果">这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果</el-descriptions-item>
-    </el-descriptions>
-    <el-input type="textarea" :rows="3" placeholder="请输入批注" v-model="textarea" ></el-input>
-    
+  <div class="box">
+    <div ref="contentToExport"  class="resultDetail">
+      <el-descriptions title="诊断结果详情" class="info">
+        <el-descriptions-item label="模型名称">虚警抑制</el-descriptions-item>
+        <el-descriptions-item label="架次号">FM111</el-descriptions-item>
+        <el-descriptions-item label="步长数据">步长</el-descriptions-item>
+        <el-descriptions-item
+          label="诊断结果">这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果这是诊断结果结果结果结果</el-descriptions-item>
+      </el-descriptions>
+      <el-input type="textarea" :rows="3" placeholder="请输入批注" v-model="textarea" class="note"></el-input>
+      <eChart />
+    </div>
+    <el-row>
+      <el-button type="success" @click="Save">保存</el-button>
+      <el-button type="success" @click="exportToPDF">输出为pdf</el-button>
+    </el-row>
   </div>
+
 </template>
 
 <script>
+import html2canvas from 'html2canvas'
+import jsPDF from 'jspdf'
+import eChart from '@/components/ECharts'
 export default {
   name: 'diagnosisResultDetail',
-  data(){
-    return{
+  components: { eChart },
+  data() {
+    return {
       //批注内容
-      textarea:''
+      textarea: '批注批注这是批注',
+      //
+    }
+  },
+  methods: {
+    async exportToPDF() {
+      const content = this.$refs.contentToExport
+      const canvas = await html2canvas(content)
+      // 设置页面尺寸和方向
+      const pdf = new jsPDF('p', 'mm', 'a4')
+      // 将canvas转换为图像
+      const imageData = canvas.toDataURL('image/png')
+      // 添加图像到PDF
+      pdf.addImage(imageData, 'PNG', 10, 10, 190, 0)
+      // 保存PDF文件
+      pdf.save('exported.pdf')
+    },
+    Save(){
+      //保存批注的内容
     }
-  }
+  },
 }
 </script>
 
 <style scoped>
-.resultDetail {
+.resultDetail,
+.box {
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -33,6 +63,17 @@ export default {
   padding-top: 20px;
 }
 .info {
-  width: 1000px;
+  width: 70%;
+}
+.note {
+  width: 63%;
+}
+.note::before {
+  content: '批注：'; /* 这里替换为你想要显示的前缀文字 */
+  position: absolute;
+  top: 20%;
+  left: -5%; /* 调整文字与输入框之间的距离 */
+  transform: translateY(-50%);
+  color: black; /* 可根据需要设置文字颜色 */
 }
 </style>

PHM-web/src/views/manage/faultAnalysis/index.vue

@@ -1,35 +1,38 @@
 <template>
   <div class="app-container" id="box">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form :model="queryParams" ref="queryForm" size="small" v-show="showSearch" label-width="100px">
       <el-form-item label="模型" prop="model">
-        <el-select v-model="queryParams.model" placeholder="请选择模型" style="width:100%" :disabled="disabled">
+        <el-select v-model="queryParams.model" placeholder="请选择模型" :disabled="disabled">
           <el-option v-for="item in modelOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="架次" prop="sortie">
-        <el-select v-model="queryParams.sortie" placeholder="请选择架次" style="width:100%">
+        <el-select v-model="queryParams.sortie" placeholder="请选择架次" :disabled="disabled">
           <el-option v-for="item in sortieOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="步长" prop="step">
-        <el-select v-model="queryParams.step" placeholder="请选择模型" style="width:100%">
+        <el-select v-model="queryParams.step" placeholder="请选择模型" :disabled="disabled">
           <el-option v-for="item in stepOptions" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" :disabled='btnIsDisabled'>开始分析</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button type="primary" @click="handleQuery">开始分析</el-button>
+        <el-button @click="cancel">取消</el-button>
       </el-form-item>
     </el-form>
-    <div  v-if="isShow" class="ProgressBar">
+    <div v-if="isShow" class="ProgressBar">
       <el-progress type="circle" :percentage="percentage" :color="colors"></el-progress>
       <p>{{tipText}}</p>
-    </div>
-    <div  v-if='resultShow' class="result">
-      <ResultDetail/>
+      <el-form>
+        <el-form-item>
+          <el-button type="primary" @click="stop" :disabled='isSuccess'>{{btnText}}</el-button>
+          <el-button @click="termination" :disabled='isSuccess'>终止</el-button>
+        </el-form-item>
+      </el-form>
     </div>
   </div>
 </template>
@@ -38,7 +41,8 @@
 import ResultDetail from '@/views/manage/diagnosisResultDetail'
 export default {
   name: 'faultAnalysis',
-  components:{ ResultDetail },
+  components: { ResultDetail },
+  props: ['flag', 'close'],
   data() {
     return {
       // 遮罩层
@@ -61,7 +65,7 @@ export default {
       //选择框是否禁用
       disabled: true,
       //
-      percentage: 10,
+      percentage: 0,
       colors: [
         { color: '#f56c6c', percentage: 20 },
         { color: '#e6a23c', percentage: 40 },
@@ -70,13 +74,16 @@ export default {
         { color: '#6f7ad3', percentage: 100 },
       ],
       //进度条显示
-      isShow:false,
-      //分析按钮的禁用
-      btnIsDisabled:false,
+      isShow: false,
       //进度条提示信息
-      tipText:"分析中...",
-      //结果显示
-      resultShow:false
+      tipText: '分析中...',
+      //定时器
+      timer: null,
+      //按钮暂停和开始标记
+      isStop: 'stop',
+      btnText: '暂停',
+      // 成功跳转时按钮禁用
+      isSuccess:false
     }
   },
   created() {
@@ -85,55 +92,82 @@ export default {
   methods: {
     //判断选择框是否禁用
     isDisabled() {
-      if (this.$route.params.info === '000') {
+      if (this.flag === 1) {
         this.disabled = false
       }
     },
     /** 分析按钮操作 */
     handleQuery() {
-      this.isShow=true;
-      this.btnIsDisabled=true;
-      var timer=setInterval(() => {
-        this.percentage += 1
-        if(this.percentage == 90){
-          clearInterval(timer);
-        }
-        if(200==200){
-          this.percentage=100
-          clearInterval(timer);
-          this.btnIsDisabled=false;
-          this.tipText='分析成功,正在生成分析结果'
-          setTimeout(()=>{
-            this.isShow=false;
-            this.resultShow=true
-          },1000)
-        }
-      }, 200)
+      this.isShow = true
+      this.showSearch = false
+      this.btnIsDisabled = true
+      if (!this.timer) {
+        // this.startTimer()
+        this.timer = setInterval(() => {
+          this.percentage += 1
+          if (this.percentage >= 90) {
+            this.stopTimer()
+          }
+          if (200 == 200) {
+            this.percentage = 100
+            clearInterval(this.timer)
+            this.isSuccess=true
+            this.tipText = '分析成功,正在生成分析结果'
+            setTimeout(() => {
+              this.$router.push('/manage/diagnosisResultDetail/')
+            }, 2000)
+          }
+        }, 200)
+      }
+    },
+    //关闭定时器
+    stopTimer() {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null // 清除定时器引用
+      }
+    },
+    // 取消
+    cancel() {
+      this.close()
+    },
+    //分析暂停
+    stop() {
+      if (this.isStop === 'stop') {
+        this.stopTimer()
+        this.isStop = 'start'
+        this.btnText = '开始'
+        return
+      }
+      if (this.isStop === 'start') {
+        this.isStop = 'stop'
+        this.btnText = '暂停'
+        this.handleQuery()
+        return
+      }
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm('queryForm')
-      this.handleQuery()
+    //分析终止
+    termination() {
+      this.stopTimer()
+      this.close()
+      this.percentage = 0
+      this.isShow = false
+      this.showSearch = true
     },
   },
 }
 </script>
 
 <style scoped>
-#box{
-  width: 100%;
-  height: 100%;
+.ProgressBar {
+  width: 350px;
+  height: 200px;
+  margin-top: 40px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
-.ProgressBar{
-  width: 300px;
-  height: 250px;
-  margin-top: 50px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+::v-deep .el-form-item__label {
+  width: 90px !important;
 }
-
 </style>

PHM-web/src/views/manage/sortie/dataPlayBack.vue

@@ -27,8 +27,29 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
-import { mapMutations } from 'vuex'
+import * as echarts from 'echarts/core'
+import {
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+} from 'echarts/components'
+import { LineChart } from 'echarts/charts'
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+import { CanvasRenderer } from 'echarts/renderers'
+
+echarts.use([
+  DatasetComponent,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  TransformComponent,
+  LineChart,
+  CanvasRenderer,
+  LabelLayout,
+  UniversalTransition,
+])
 export default {
   name: 'dataPlayBack',
   data() {
@@ -54,14 +75,10 @@ export default {
       showSearch: true,
     }
   },
-  created() {
-    this.Render()
-  },
   mounted() {
     this.creatECharts()
   },
   methods: {
-    ...mapMutations('app', ['TOGGLE_SIDEBAR']),
     creatECharts() {
       if (this.myChart) {
         this.myChart.dispose()
@@ -179,10 +196,6 @@ export default {
       }
     },
     //重新渲染侧边导航栏
-    Render() {
-      this.TOGGLE_SIDEBAR()
-      // this.$store.state.app.commit
-    },
     // 表单重置
     reset() {
       this.form = {