| | |
| | | <div class="fa-card-a"> |
| | | <el-row :gutter="5"> |
| | | <el-form :inline="true" :model="dataForm" ref="dataForm" :disabled="dataForm.disabled"> |
| | | <zt-form-item label="产品节点" prop="productId" width="100px"> |
| | | <zt-select v-model="dataForm.productId" :datas="productList" @change="onProductSelected"/> |
| | | </zt-form-item> |
| | | <zt-form-item label="可靠性方案" prop="taskModelId" width="500px"> |
| | | <zt-select style="width: 400px" v-model="dataForm.taskModelId" :datas="schemeList" |
| | | @change="onTaskSelected" :multiple="true"/> |
| | | </zt-form-item> |
| | | <zt-form-item> |
| | | <zt-button @click="compair()">方案对比</zt-button> |
| | | </zt-form-item> |
| | | </el-form> |
| | | <el-col :span="4"> |
| | | <div style="margin-right: 5px;height: calc(100vh - 230px)" v-if="isSelect"> |
| | | <product-model-tree @on-selected="onTreeSelected" showXdy="false" |
| | | ref="ProductModelTree" :isShow="false" basic="4" :productId="dataForm.productId"/> |
| | | <zt-form-item label="产品节点" prop="productId" width="100px"> |
| | | <zt-select v-model="dataForm.productId" :datas="productList" @change="onProductSelected"/> |
| | | </zt-form-item> |
| | | <zt-form-item label="可靠性方案" prop="taskModelId" width="500px"> |
| | | <zt-select style="width: 400px" v-model="dataForm.taskModelId" :datas="schemeList" |
| | | @change="onTaskSelected" :multiple="true"/> |
| | | </zt-form-item> |
| | | <zt-form-item> |
| | | <zt-button @click="compair()">方案对比</zt-button> |
| | | </zt-form-item> |
| | | </el-form> |
| | | <el-col :span="4"> |
| | | <div style="margin-right: 5px;height: calc(100vh - 230px)" v-if="isSelect"> |
| | | <product-model-tree @on-selected="onTreeSelected" showXdy="false" |
| | | ref="ProductModelTree" :isShow="false" basic="4" :productId="dataForm.productId"/> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="20"> |
| | | <div class="fa-card-a" style="position: relative;height: calc(100vh - 230px)"> |
| | | <div v-if="isShow"> |
| | | <el-button v-if="isZk" type="info" size="small" icon="el-icon-caret-bottom" |
| | | style="position: absolute;right: 10%;top: 9%;z-index: 1" @click="zk()"></el-button> |
| | | <el-button v-if="!isZk" type="info" size="small" icon="el-icon-caret-right" |
| | | style="position: absolute;right: 10%;top: 9%;z-index: 1" @click="zk()"></el-button> |
| | | <div v-if="isZk" style="position: absolute;right: 10%;top: 13%"> |
| | | <el-table :data="tableData" border style="width: 500px"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="方案名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="mtbf" |
| | | label="MTBF" |
| | | width="100px" |
| | | align="right"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ keepNumber(scope.row.mtbf) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="mttr" |
| | | label="MTTR" |
| | | width="100px" |
| | | align="right"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ keepNumber(scope.row.mttr) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="msr" |
| | | label="MSR" |
| | | width="100px" |
| | | align="right"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ keepNumber(scope.row.mttr) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </el-col> |
| | | <el-col :span="20"> |
| | | <div class="fa-card-a" style="position: relative;height: calc(100vh - 230px)"> |
| | | <div v-if="isShow"> |
| | | <el-button v-if="isZk" type="info" size="small" icon="el-icon-caret-bottom" |
| | | style="position: absolute;right: 10%;top: 10%;z-index: 1" @click="zk()"></el-button> |
| | | <el-button v-if="!isZk" type="info" size="small" icon="el-icon-caret-right" |
| | | style="position: absolute;right: 10%;top: 10%;z-index: 1" @click="zk()"></el-button> |
| | | <div v-if="isZk" style="position: absolute;right: 10%;top: 15%"> |
| | | <el-table :data="tableData" border style="width: 500px"> |
| | | <el-table-column |
| | | prop="name" |
| | | label="方案名称" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="mtbf" |
| | | label="MTBF" |
| | | width="100px" |
| | | align="right"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ keepNumber(scope.row.mtbf) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="mttr" |
| | | label="MTTR" |
| | | width="100px" |
| | | align="right"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ keepNumber(scope.row.mttr) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="msr" |
| | | label="MSR" |
| | | width="100px" |
| | | align="right"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ keepNumber(scope.row.mttr) }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | | <div :disabled="isShow"> |
| | | <div class="echart" id="myChart" :style="myChartStyle"></div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </div> |
| | | <div :disabled="isShow"> |
| | | <div class="echart" id="SchemeCompar" :style="myChartStyle"></div> |
| | | </div> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | </template> |
| | |
| | | }, |
| | | |
| | | methods: { |
| | | async onTreeSelected(data) { |
| | | onTreeSelected(data) { |
| | | if (this.dataForm.taskModelId.length > 0) { |
| | | console.log(this.dataForm.taskModelId) |
| | | console.log(data, 'onProductSelected') |
| | | this.dataForm.showProductId = data.id |
| | | let params = { |
| | | taskList: this.dataForm.taskModelId, |
| | | showProductId: this.dataForm.showProductId |
| | | } |
| | | console.log(this.dataForm.taskModelId, 'this.dataForm.taskModelId') |
| | | let res = await this.$http.get('/taskReliability/SimulatAssess/SchemeCompar', {params: params}) |
| | | console.log(res.data, "res") |
| | | this.xDataList = res.data.xdataList |
| | | this.seriesList = res.data.curveList |
| | | this.tableData = res.data.dataList |
| | | this.$nextTick(() => { |
| | | this.compair() |
| | | }) |
| | | } |
| | | }, |
| | | // 获取信息 |
| | |
| | | async compair() { |
| | | let params = { |
| | | taskList: this.dataForm.taskModelId, |
| | | showProductId: null |
| | | showProductId: this.dataForm.showProductId |
| | | } |
| | | console.log(this.dataForm.taskModelId, 'this.dataForm.taskModelId') |
| | | let res = await this.$http.get('/taskReliability/SimulatAssess/SchemeCompar', {params: params}) |
| | |
| | | this.seriesList = res.data.curveList |
| | | this.tableData = res.data.dataList |
| | | |
| | | |
| | | this.isShow = true |
| | | this.option = { |
| | | xAxis: { |
| | |
| | | name: '仿真总时长', |
| | | type: 'category', |
| | | axisLabel: { |
| | | formatter: function(value) { |
| | | formatter: function (value) { |
| | | // 将 X 轴刻度值格式化为保留两位小数的字符串 |
| | | return parseFloat(value).toFixed(2); |
| | | } |
| | |
| | | }, |
| | | series: this.seriesList |
| | | }; |
| | | this.myChart = echart.init(document.getElementById("myChart")); |
| | | this.myChart = echart.init(document.getElementById("SchemeCompar")); |
| | | console.log(this.option, ' this.option ') |
| | | this.myChart.setOption(this.option); |
| | | //随着屏幕大小调节图表 |