| | |
| | | <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', |
| | |
| | | return { |
| | | xDataList: [], |
| | | yDataList: [], |
| | | mttr: '', |
| | | mtbf: '', |
| | | myChart: {}, |
| | | myChartStyle: {float: "left", width: "100%", height: "600px"}, //图表样式 |
| | | option: {} |
| | |
| | | }, |
| | | components: {}, |
| | | methods: { |
| | | initEcharts(id,taskId, samplPeriod) { |
| | | async initEcharts(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: [], |
| | | data: this.xDataList, |
| | | name: '仿真次数' |
| | | }, |
| | | yAxis: {}, |
| | | yAxis: { |
| | | |
| | | name: '', |
| | | }, |
| | | series: [ |
| | | { |
| | | data: [], |
| | | 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) |
| | | } |
| | | 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: { |
| | | |
| | | name: '', |
| | | }, |
| | | series: [ |
| | | { |
| | | data: this.yDataList, |
| | | type: 'line', |
| | | smooth: true |
| | | } |
| | | |
| | | let res = await this.$http.get(`/taskReliability/SimulatAssess/${id}`) |
| | | |
| | | |
| | | |
| | | this.myChart = echarts.init(document.getElementById("mychart")); |
| | | ] |
| | | }; |
| | | this.myChart = echart.init(document.getElementById("myChart")); |
| | | console.log(this.option, ' this.option ') |
| | | this.myChart.setOption(this.option); |
| | | //随着屏幕大小调节图表 |
| | | window.addEventListener("resize", () => { |