xyc
2025-02-21 664db98c9e8595ce4dd636a27f480e3a08b81ff5
web/src/views/modules/taskReliability/SimulatCurve.vue
@@ -1,11 +1,11 @@
<template>
  <div class="mod-taskReliability-taskPhase">
    <div class="echart" id="mychart" :style="myChartStyle"></div>
    <div id="myChart" :style="myChartStyle"></div>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import echart from "echarts";
  export default {
    name: 'SimulatCurve',
@@ -13,55 +13,129 @@
      return {
        xDataList: [],
        yDataList: [],
        mttr: '',
        mtbf: '',
        msr: '',
        mttfMle: '',
        mttrMle: '',
        myChart: {},
        myChartStyle: {float: "left", width: "100%", height: "600px"}, //图表样式
        myChartStyle: {width: "100%", height: "750px"}, //图表样式
        option: {}
      }
    },
    components: {},
    methods: {
      initEcharts(id,taskId, samplPeriod) {
      async initEcharts(Param) {
        console.log(Param)
        let res = await this.$http.post(`/taskReliability/SimulatAssess/getResultXML`, Param)
        console.log(res.data)
        if (res.data) {
          this.yDataList = res.data.curveParam.ydata
          this.xDataList = res.data.curveParam.xdata
          this.mttr = res.data.mttr.toFixed(4)
          this.mtbf = res.data.mtbf.toFixed(4)
          this.msr = res.data.msr.toFixed(4)
          this.mttfMle = res.data.mttfMle.toFixed(4)
          this.mttrMle = res.data.mttrMle.toFixed(4)
        }
        this.option = {
          title: {
            text: '',
            text: "mttf:" + this.mtbf + "  mttr:" + this.mttr + "  msr:" + this.msr + "  节点寿命:" + this.mttfMle + "  平均维修时间:" + this.mttrMle,
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial',
              fontSize: 20,
              fontSize: 27,
              fontStyle: 'normal',
              fontWeight: 'normal',
            }
            },
            textAlign: 'auto',//整体(包括 text 和 subtext)的水平对齐
            textVerticalAlign: 'auto',//整体(包括 text 和 subtext)的垂直对齐
            left: 'center',//'5' | '5%',title 组件离容器左侧的距离
            right: 'auto',//'title 组件离容器右侧的距离
            top: '20px'
          },
          grid:{
            top:'15%'
          },
          xAxis: {
            data: [],
            name: '仿真次数'
            data: this.xDataList,
            name: '仿真总时长',
            type: 'category',
            axisLabel: {
              formatter: function (value) {
                // 将 X 轴刻度值格式化为保留两位小数的字符串
                return parseFloat(value).toFixed(2);
              }
            }
          },
          yAxis: {},
          yAxis: {
            type: "value",
            name: '可靠度',
          },
          series: [
            {
              data: [],
              symbol: "none",
              data: this.yDataList,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.getEchart(id,taskId, samplPeriod)
        this.myChart = echart.init(document.getElementById("myChart"));
        console.log(this.option, ' this.option ')
        this.myChart.setOption(this.option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
      async getEchart(id,taskId, samplPeriod) {
        let task = await this.$http.get(`/taskReliability/Task/${taskId}`)
        samplPeriod = samplPeriod / 60
        let i = 0
        for (i = 0; i + samplPeriod <= task.taskDuration; i += samplPeriod) {
          this.series[0].data.push(i);
      async getProductEcharts(Param) {
        let res = await this.$http.post(`/taskReliability/SimulatAssess/getResultData`, Param)
        console.log(res.data)
        if (res.data) {
          this.yDataList = res.data.curveParam.ydata
          this.xDataList = res.data.curveParam.xdata
          this.mttr = res.data.mttr.toFixed(4)
          this.mtbf = res.data.mtbf.toFixed(4)
          this.msr = res.data.msr.toFixed(4)
          this.mttfMle = res.data.mttfMle.toFixed(4)
          this.mttrMle = res.data.mttrMle.toFixed(4)
        }
        if (i !== task.taskDuration) {
          this.series[0].data.push(task.taskDuration);
        }
        let res = await this.$http.get(`/taskReliability/SimulatAssess/${id}`)
        this.myChart = echarts.init(document.getElementById("mychart"));
        this.option = {
          title: {
            text: "mttf:" + this.mtbf + "  mttr:" + this.mttr + "  msr:" + this.msr + "  节点寿命:" + this.mttfMle + "  平均维修时间:" + this.mttrMle,
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial',
              fontSize: 27,
              fontStyle: 'normal',
              fontWeight: 'normal',
            },
            textAlign: 'auto',//整体(包括 text 和 subtext)的水平对齐
            textVerticalAlign: 'auto',//整体(包括 text 和 subtext)的垂直对齐
            left: 'center',//'5' | '5%',title 组件离容器左侧的距离
            right: 'auto',//'title 组件离容器右侧的距离
            top: '20px'
          },
          grid:{
            top:'15%'
          },
          xAxis: {
            data: this.xDataList,
            name: '仿真总时长',
            splitNumber: 10
          },
          yAxis: {
            name: '可靠度',
          },
          series: [
            {
              data: this.yDataList,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.myChart = echart.init(document.getElementById("myChart"));
        console.log(this.option, ' this.option ')
        this.myChart.setOption(this.option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {