jinlin
2024-08-02 826cd5b51d5106cfea07e397eda184fb15ec7a30
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 class="echart" id="myChart" :style="myChartStyle"></div>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import echart from "echarts";
  export default {
    name: 'SimulatCurve',
@@ -13,6 +13,8 @@
      return {
        xDataList: [],
        yDataList: [],
        mttr: '',
        mtbf: '',
        myChart: {},
        myChartStyle: {float: "left", width: "100%", height: "600px"}, //图表样式
        option: {}
@@ -20,47 +22,102 @@
    },
    components: {},
    methods: {
      initEcharts(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.option = {
          title: {
            text: '',
            text: "mttr:" + this.mttr + "    mtbf:" + this.mtbf,
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial',
              fontSize: 20,
              fontSize: 30,
              fontStyle: 'normal',
              fontWeight: 'normal',
            }
            },
            textAlign:'auto',//整体(包括 text 和 subtext)的水平对齐
            textVerticalAlign:'auto',//整体(包括 text 和 subtext)的垂直对齐
            padding:0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
            left:'center',//'5' | '5%',title 组件离容器左侧的距离
            right:'auto',//'title 组件离容器右侧的距离
            top:'auto',//title 组件离容器上侧的距离
            bottom:'auto',//title 组件离容器下侧的距离
          },
          xAxis: {
            data: [],
            name: '仿真次数'
            data: this.xDataList,
            name: '仿真总时长'
          },
          yAxis: {},
          yAxis: {
            name: '',
          },
          series: [
            {
              data: [],
              data: this.yDataList,
              type: 'line',
              smooth: true
            }
          ]
        };
        this.getEchart(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(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)
        }
        if (i !== task.taskDuration) {
          this.series[0].data.push(task.taskDuration);
        }
        this.option = {
          title: {
            text: "mttr:" + this.mttr + "    mtbf:" + this.mtbf,
            textStyle: { // 主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
              fontFamily: 'Arial',
              fontSize: 30,
              fontStyle: 'normal',
              fontWeight: 'normal',
            },
            textAlign: 'auto',//整体(包括 text 和 subtext)的水平对齐
            textVerticalAlign: 'auto',//整体(包括 text 和 subtext)的垂直对齐
            padding: 0,//[5,10] | [ 5,6, 7, 8] ,标题内边距
            left: 'center',//'5' | '5%',title 组件离容器左侧的距离
            right: 'auto',//'title 组件离容器右侧的距离
            top: 'auto',//title 组件离容器上侧的距离
            bottom: 'auto',//title 组件离容器下侧的距离
          },
          xAxis: {
            data: this.xDataList,
            name: '仿真总时长',
            splitNumber: 10
          },
          yAxis: {
        this.myChart = echarts.init(document.getElementById("mychart"));
            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", () => {