newcpms/ui/src/views/sems/specanalysis/PpChart.vue

<template>
  <div class="app-container-Pp">
    <div id="PpChart" :style="{height:height,width:width}"></div>
    <el-dialog :title="title" :visible.sync="open" width="1600px" >
      <el-button
        type="warning"
        icon="el-icon-download"
        size="mini"
        @click="handleExport"
      >{{ $t('导出') }}</el-button>
      <el-table  ref="deviceTable" :data="specYlgdList"
                 border >
        <el-table-column :label="$t('装置名称')" align="center" fixed="left"  prop="plantCode" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('单元')" align="center" fixed="left"  prop="unit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('装置维修组')" align="center" fixed="left"  prop="plantMaint" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('装置维修工程师')" align="center" fixed="left"  prop="engineer" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道名称')" align="center" fixed="left"  prop="devname" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道编号')" align="center" fixed="left"  prop="devno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('注册代码')" align="center" prop="regno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('使用登记证编号')" align="center" prop="useno" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('管道级别')" align="center" prop="grade" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计单位')" align="center" prop="designer" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('安装单位')" align="center" prop="installer" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('安装年月')" align="center" prop="installDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.installDate, '{y}-{m') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('投用年月')" align="center" prop="submitdate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.submitdate, '{y}-{m}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('材质')" align="center" prop="material" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('公称直径')" align="center" prop="dia" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('壁厚(mm)')" align="center" prop="scheduleNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('长度')+'（m）'" align="center" prop="length" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('焊口数量')" align="center" prop="weldNumber" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('起点')" align="center" prop="starting" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('终点')" align="center" prop="ending" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('敷设方式')" align="center" prop="layingMethod" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计压力')+'(MPa)'" align="center" prop="desPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('工作压力')+'(MPa)'" align="center" prop="optPressure" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('设计温度')+'(℃)'" align="center" prop="desTemp" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('工作温度')+'(℃)'" align="center" prop="optTemp" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('绝热层代码')" align="center" prop="adiabatic" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('防腐层代码')" align="center" prop="antiCorrosion" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('是否涉危化品')" align="center" prop="isDanger" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('检验单位')" align="center" prop="checkUnit" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('定期检验日期')" align="center" prop="warnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.warnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('安全状况等级')" align="center" prop="safeClass" :show-overflow-tooltip="true"/>

        <el-table-column :label="$t('下次定期检验日期')" align="center" prop="nextWarnDate" width="100" sortable="custom">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.nextWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('定期检验报告编号')" align="center" prop="reportNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('年度检查日期')" align="center" prop="yearWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yearWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('年度检查结论')" align="center" prop="checkConclusion" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('下次年度检查日期')" align="center" prop="yearNextWarnDate" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.yearNextWarnDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('年度检查报告编号')" align="center" prop="yearReportNo" :show-overflow-tooltip="true"/>
        <el-table-column :label="$t('备注')" align="center" prop="remarks" :show-overflow-tooltip="true"/>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<script>
import {devYlgdData, devYlgdDataByYear,exportSpecYlgd} from "@/api/sems/home";

export default {
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '3.3rem'
    },
    year: {
      type: Number,
    }
  },
  data() {
    return {
      chart: null,
      open: false,
      title: '设备列表',
      // 总条数
      total: 0,
      specYlgdList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        status: 1,
        plantIds: null,
        unitIds: null,
        checkYear: null
      },
      optionYlrq: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
          }
        },
        /* 周围边距 */
        grid: {
          left: '3%',
          right: '3%',
          bottom: '1%',
          top: '13%',
          containLabel: true
        },
        legend: {
          data: [this.$t('devTotalChart'), this.$t('usage')]
        },
        xAxis: [
          {
            type: 'category',
            data: [this.$t('压力容器'), this.$t('压力管道'), this.$t('吊装设备'), this.$t('锅炉'), this.$t('电梯')],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.$t('devTotalChart'),
            min: 0,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: this.$t('devTotalChart'),
            type: 'bar',
            barWidth: 40,
            itemStyle: {
              normal: {
                barBorderRadius: [9, 9, 0, 0],
              }
            },
            stack: this.$t('devTotalChart'),
            data: [2.0, 4.9, 7.0, 23.2, 25.6]
          }
        ],
      },
    }
  },
  mounted() {
    this.chart = this.echarts.init(document.getElementById('PpChart'))
  },
  methods: {
    initChart() {
      this.chart.clear()
      this.chart.setOption(this.optionYlrq)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    },
    devYlgdData(plantIds ,unitIds ){
      let params = {
        'plantIds': plantIds,
        'unitIds': unitIds
      }
      this.queryParams.plantIds = plantIds.join()
      this.queryParams.unitIds = unitIds.join()
      devYlgdData(params).then(response => {
        this.optionYlrq.xAxis[0].data = response.data.ylrqData.yearList
        this.optionYlrq.series[0].data = response.data.ylrqData.countList
        this.initChart()
        let _this = this
        this.chart.on('click', function(params) {
          // 控制台打印数据的名称
          console.log(params);
          _this.open = true
          _this.queryParams.checkYear = params.name
          _this.getList()
        });
      });
    },
    /** 查询特种设备压力容器台账列表 */
    getList() {
      this.loading = true;
      devYlgdDataByYear(this.queryParams).then(response => {
        this.specYlgdList = response.rows;
        this.total = response.total;
        this.$nextTick(() => {
          this.$refs.deviceTable.doLayout(); // 解决表格错位
        });
        this.loading = false;
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm(this.$t('是否确认导出所有特种设备压力管道台账数据项?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: "warning"
      }).then(function() {
        return exportSpecYlgd(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
  }
}
</script>