xyc
2024-09-13 dea248c9da9f82e4032b6ab4a8ce0a6422a5c2cc
web/src/views/modules/taskReliability/SchemeCompar.vue
@@ -2,72 +2,72 @@
  <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>
@@ -115,21 +115,14 @@
    },
    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()
          })
        }
      },
      // 获取信息
@@ -167,7 +160,7 @@
      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})
@@ -176,7 +169,6 @@
        this.seriesList = res.data.curveList
        this.tableData = res.data.dataList
        this.isShow = true
        this.option = {
          xAxis: {
@@ -184,7 +176,7 @@
            name: '仿真总时长',
            type: 'category',
            axisLabel: {
              formatter: function(value) {
              formatter: function (value) {
                // 将 X 轴刻度值格式化为保留两位小数的字符串
                return parseFloat(value).toFixed(2);
              }
@@ -199,7 +191,7 @@
          },
          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);
        //随着屏幕大小调节图表