<template>
  <div class="app-container">
    <div class="btn-condition">
      <div class="condition-left" v-show="showSearch">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="主机编号" prop="deviceNum">
            <el-select
              v-model="queryParams.deviceNum"
              placeholder="请选择主机编号"
              clearable
            >
              <el-option label="1号主机" value="1" />
              <el-option label="2号主机" value="2" />
              <el-option label="3号主机" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围" prop="timeArr">
            <el-date-picker
              style="width: 220px"
              v-model="timeArr"
              type="daterange"
              unlink-panels
              range-separator="~"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="dateChange"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div class="primary-btn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </div>
        <div class="cancel-btn">
          <el-button
            type="cancel"
            icon="el-icon-refresh"
            size="mini"
            @click="resetQuery"
            >重置</el-button
          >
        </div>
      </div>
    </div>

    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <div class="success-btn">
          <el-button
            type="success"
            @click="leadingPrint"
            icon="el-icon-printer"
            size="mini"
            >打印</el-button
          >
        </div>
      </el-col> -->
      <el-col :span="1.5">
        <div class="warning-btn">
          <el-button
            type="warning"
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </div>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="postList" stripe>
      <!-- <el-table-column label="主机id" align="center" prop="deviceNum" /> -->
      <el-table-column label="时间" align="center" prop="curTime" />
      <el-table-column label="蒸发器">
        <el-table-column
          label="冷冻水进水温度(℃)"
          align="center"
          prop="tempInChillerWater" />
        <el-table-column
          label="冷冻水出水温度(℃)"
          align="center"
          prop="tempOutChillerWater" />
        <el-table-column label="设计流量(%)" align="center" prop="designFlow" />
        <el-table-column
          label="蒸发器压力(kpa)"
          align="center"
          prop="pressEvapSaturation" />
        <el-table-column
          label="蒸发器饱和温度(℃)"
          align="center"
          prop="tempEvapSaturation" />
        <el-table-column
          label="蒸发器趋近温度(℃)"
          align="center"
          prop="tempEvapApproaching"
      /></el-table-column>
      <el-table-column label="冷凝器">
        <el-table-column
          label="冷却水进水温度(℃)"
          align="center"
          prop="tempInCoolingWater"
        />
        <el-table-column
          label="冷却水出水温度(℃)"
          align="center"
          prop="tempOutCoolingWater"
        />
        <el-table-column
          label="冷凝器压力(kpa)"
          align="center"
          prop="pressCondenserSaturation"
        />
        <el-table-column
          label="冷凝器饱和温度(℃)"
          align="center"
          prop="tempCondenserSaturation"
        />
        <el-table-column
          label="冷凝器趋近温度(℃)"
          align="center"
          prop="tempCondenserApproaching"
        />
      </el-table-column>
      <el-table-column label="系统">
        <el-table-column
          label="冷冻水设定值(℃)"
          align="center"
          prop="setChillerWater"
        />
        <el-table-column label="冷水机需求(%)" align="center" prop="setLoad" />
        <el-table-column label="总电流(%)" align="center" prop="currentTotal" />
        <el-table-column
          label="总输入功率(kw)"
          align="center"
          prop="inputPowerTotal"
        />
        <el-table-column
          label="压缩机1_压缩比"
          align="center"
          prop="ratioCompOne"
        />
        <el-table-column
          label="压缩机2_压缩比"
          align="center"
          prop="ratioCompTwo"
        />
        <el-table-column
          label="压缩机3_压缩比"
          align="center"
          prop="ratioCompThree"
        />
        <el-table-column label="膨胀阀开度(%)" align="center" prop="openExv" />
        <el-table-column
          label="运行中的压缩机数量"
          align="center"
          prop="runCompNum"
        />
      </el-table-column>
      <el-table-column label="冷冻泵">
        <el-table-column
          label="冷冻水泵频率(hz)"
          align="center"
          prop="frequencyChiller"
        />
        <el-table-column
          label="冷冻水出水压力(kpa)"
          align="center"
          prop="pressOutChillerWater"
        />
        <el-table-column
          label="冷冻水进水压力(kpa)"
          align="center"
          prop="pressInChillerWater"
        />
      </el-table-column>
      <el-table-column label="冷却泵">
        <el-table-column
          label="冷却水泵频率(hz)"
          align="center"
          prop="frequencyCooling"
        />
        <el-table-column
          label="冷却水出水压力(kpa)"
          align="center"
          prop="pressOutCoolingWater"
        />
        <el-table-column
          label="冷却水进水压力(kpa)"
          align="center"
          prop="pressInCoolingWater"
        />
      </el-table-column>
      <el-table-column label="冷却塔">
        <el-table-column
          label="冷却塔水泵频率(hz)"
          align="center"
          prop="frequencyCoolingTower"
        />
        <el-table-column
          label="冷却塔运行数量"
          align="center"
          prop="runCoolingTower"
        />
      </el-table-column>
      <el-table-column label="室外温度(℃)" align="center" prop="tempOutdoor" />
      <el-table-column
        label="室外湿度(%)"
        align="center"
        prop="humidityOutdoor"
      />
      <el-table-column
        label="恒压补水罐压力(Mpa)"
        align="center"
        prop="pressConstantWaterTank"
      />
      <el-table-column label="巡查记录人" align="center" prop="recorder" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['device:ledger:edit']"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

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

    <!-- 添加或修改设备台账对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form ref="form" :model="form" :rules="rules">
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="主机编号" prop="deviceNum">
              <el-select
                v-model="form.deviceNum"
                placeholder="请选择主机编号"
                disabled
              >
                <el-option label="1号主机" value="1" />
                <el-option label="2号主机" value="2" />
                <el-option label="3号主机" value="3" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="设计流量(%)" prop="designFlow">
              <el-input v-model="form.designFlow" placeholder="请输入流量(%)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="冷冻水进水温度(℃)" prop="tempInChillerWater">
              <el-input
                v-model="form.tempInChillerWater"
                placeholder="请输入温度(℃)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="冷冻水出水温度(℃)" prop="tempOutChillerWater">
              <el-input
                v-model="form.tempOutChillerWater"
                placeholder="请输入温度(℃)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="蒸发器饱和温度(℃)" prop="tempEvapSaturation">
              <el-input
                v-model="form.tempEvapSaturation"
                placeholder="请输入温度(℃)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="蒸发器趋近温度(℃)" prop="tempEvapApproaching">
              <el-input
                v-model="form.tempEvapApproaching"
                placeholder="请输入温度(℃)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="蒸发器压力(kpa)" prop="pressEvapSaturation">
              <el-input
                v-model="form.pressEvapSaturation"
                placeholder="请输入压力(kpa)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="冷凝器压力(kpa)"
              prop="pressCondenserSaturation"
            >
              <el-input
                v-model="form.pressCondenserSaturation"
                placeholder="请输入压力(kpa)"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="冷却水进水温度(℃)" prop="tempInCoolingWater">
              <el-input
                v-model="form.tempInCoolingWater"
                placeholder="请输入温度(℃)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="冷却水出水温度(℃)" prop="tempOutCoolingWater">
              <el-input
                v-model="form.tempOutCoolingWater"
                placeholder="请输入温度(℃)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item
              label="冷凝器饱和温度(℃)"
              prop="tempCondenserSaturation"
            >
              <el-input
                v-model="form.tempCondenserSaturation"
                placeholder="请输入温度(℃)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="冷凝器趋近温度(℃)"
              prop="tempCondenserApproaching"
            >
              <el-input
                v-model="form.tempCondenserApproaching"
                placeholder="请输入温度(℃)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="冷冻水设定值(℃)" prop="setChillerWater">
              <el-input
                v-model="form.setChillerWater"
                placeholder="请输入温度(℃)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="冷水机需求(%)" prop="setLoad">
              <el-input v-model="form.setLoad" placeholder="请输入(%)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="总输入功率(kw)" prop="inputPowerTotal">
              <el-input
                v-model="form.inputPowerTotal"
                placeholder="请输入功率(kw)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="总电流(%)" prop="currentTotal">
              <el-input v-model="form.currentTotal" placeholder="请输入(%)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="压缩机1_压缩比" prop="ratioCompOne">
              <el-input
                v-model="form.ratioCompOne"
                placeholder="请输入压缩比"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="压缩机2_压缩比" prop="ratioCompTwo">
              <el-input
                v-model="form.ratioCompTwo"
                placeholder="请输入压缩比"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="压缩机3_压缩比" prop="ratioCompThree">
              <el-input
                v-model="form.ratioCompThree"
                placeholder="请输入压缩比"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="膨胀阀开度(%)" prop="openExv">
              <el-input v-model="form.openExv" placeholder="请输入(%)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="运行中的压缩机数量" prop="runCompNum">
              <el-input
                v-model="form.runCompNum"
                placeholder="请输入数量"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="冷冻水泵频率(hz)" prop="frequencyChiller">
              <el-input v-model="form.openExv" placeholder="请输入频率(hz)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item
              label="冷冻水出水压力(kpa)"
              prop="pressOutChillerWater"
            >
              <el-input
                v-model="form.pressOutChillerWater"
                placeholder="请输入压力(kpa)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="冷冻水进水压力(kpa)"
              prop="pressInChillerWater"
            >
              <el-input
                v-model="form.pressInChillerWater"
                placeholder="请输入压力(kpa)"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item
              label="冷却水出水压力(kpa)"
              prop="pressOutCoolingWater"
            >
              <el-input
                v-model="form.pressOutCoolingWater"
                placeholder="请输入压力(kpa)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="冷却水进水压力(kpa)"
              prop="pressInCoolingWater"
            >
              <el-input
                v-model="form.pressInCoolingWater"
                placeholder="请输入压力(kpa)"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="冷却水泵频率(hz)" prop="frequencyCooling">
              <el-input
                v-model="form.frequencyCooling"
                placeholder="请输入频率(hz)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="冷却塔水泵频率(hz)"
              prop="frequencyCoolingTower"
            >
              <el-input
                v-model="form.frequencyCoolingTower"
                placeholder="请输入频率(hz)"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="冷却塔运行数量" prop="runCoolingTower">
              <el-input
                v-model="form.runCoolingTower"
                placeholder="请输入数量"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item
              label="恒压补水罐压力(Mpa)"
              prop="pressConstantWaterTank"
            >
              <el-input
                v-model="form.pressConstantWaterTank"
                placeholder="请输入压力(Mpa)"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="室外温度" prop="tempOutdoor">
              <el-input
                v-model="form.tempOutdoor"
                placeholder="请输入温度(℃)"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="室外湿度(%)" prop="humidityOutdoor">
              <el-input
                v-model="form.humidityOutdoor"
                placeholder="请输入湿度(%)"
              /> </el-form-item
          ></el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-form-item label="巡查记录人" prop="recorder">
              <el-input
                v-model="form.recorder"
                placeholder="请输入巡查记录人"
              /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
              <el-input
                v-model="form.remark"
                placeholder="请输入备注"
              /> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogPrintVisible"
      title="打印预览"
      class="print-dialog"
    >
      <div id="report" ref="report" class="report">
        <table
          border="1"
          style="
            table-layout: fixed;
            width: 100%;
            border: 1px solid #e2e6f0;
            margin-bottom: 35px;
          "
        >
          <thead>
            <tr>
              <th rowspan="1" colspan="32">磁悬浮水冷冷水机组数据运行记录表</th>
            </tr>
            <tr>
              <th>主机id</th>
              <th>时间</th>
              <th colspan="6">蒸发器</th>
              <th colspan="5">冷凝器</th>
              <th colspan="7">系统</th>
              <th colspan="3">冷冻泵</th>
              <th colspan="3">冷却泵</th>
              <th colspan="2">冷却塔</th>
              <th>室外温度(℃)</th>
              <th>室外湿度(%)</th>
              <th>恒压补水罐压力(Mpa)</th>
              <th>巡查记录人</th>
            </tr>
            <tr>
              <th></th>
              <th></th>
              <th>冷冻水进水温度(℃)</th>
              <th>冷冻水出水温度(℃)</th>
              <th>设计流量(%)</th>
              <th>蒸发器压力(kpa)</th>
              <th>蒸发器饱和温度(℃)</th>
              <th>蒸发器趋近温度(℃)</th>
              <th>冷却水进水温度(℃)</th>
              <th>冷却水出水温度(℃)</th>
              <th>冷凝器压力(kpa)</th>
              <th>冷凝器饱和温度(℃)</th>
              <th>冷凝器趋近温度(℃)</th>
              <th>冷冻水设定值(℃)</th>
              <th>冷水机需求(%)</th>
              <th>总电流(%)</th>
              <th>总输入功率(kw)</th>
              <th>压缩机1_压缩比</th>
              <th>膨胀阀开度(%)</th>
              <th>运行中的压缩机数量</th>
              <th>冷冻水泵频率(hz)</th>
              <th>冷冻水出水压力(kpa)</th>
              <th>冷冻水进水压力(kpa)</th>
              <th>冷却水泵频率(hz)</th>
              <th>冷却水出水压力(kpa)</th>
              <th>冷却水进水压力(kpa)</th>
              <th>冷却塔水泵频率(hz)</th>
              <th>冷却塔运行数量</th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
            </tr>
          </thead>
          <tr v-for="(item, index) in postList" :key="index">
            <td align="center" v-for="(value, key) in item" :key="key">
              {{ value }}
            </td>
          </tr>
        </table>
        <div
          class="detail"
          style="
            display: flex;
            flex-direction: row;
            font-size: 14px;
            justify-content: space-between;
            flex-wrap: nowrap;
            width: 40%;
            color: #ffffff;
          "
        >
          <div>操作员: {{ this.userName }}</div>
          <div class="print-date">日期： {{ this.operationDate }}</div>
        </div>
      </div>
      <el-row type="flex" justify="end" style="margin-top: 0.2rem">
        <el-col :span="2">
          <el-button type="info" @click="dialogPrintVisible = false"
            >取消</el-button
          >
        </el-col>
        <el-col :span="2" style="margin-left: 60px">
          <el-button type="success" @click="surePrint">确认</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  reportSysList,
  reportSysEdit,
  reportSysExport,
} from "@/api/centerairC/hostRunReport";
import { format2, getDay } from "@/utils/datetime";
export default {
  name: "ledger",
  data() {
    return {
      timeArr: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      postList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        deviceNum: "",
        params: {
          startTime: "",
          endTime: "",
        },
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        deviceName: [
          { required: true, message: "设备名称不能为空", trigger: "blur" },
        ],
      },
      dialogPrintVisible: false,
      userName: "", //操作员
      operationDate: getDay(0), //操作日期
      titleDate: "",
    };
  },
  created() {
    this.userName = sessionStorage.getItem("userName");
    this.queryParams.deviceNum = "1";
    this.getList();
  },
  methods: {
    // 选中日期事件
    dateChange() {
      // console.log("打印时间", this.timeArr);
      if (!this.timeArr) {
        this.$nextTick(() => {
          this.timeArr = [];
          this.queryParams.params.startTime = "";
          this.queryParams.params.endTime = "";
        });
      } else {
        this.queryParams.params.startTime = this.timeArr[0];
        this.queryParams.params.endTime = this.timeArr[1];
      }
    },
    /** 查询设备台账列表 */
    getList() {
      this.loading = true;
      reportSysList(this.queryParams).then((response) => {
        if (response.code == 200) {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        } else {
          this.postList = [];
          this.total = 0;
          this.loading = false;
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
      this.form.id = "";
    },
    // 表单重置
    reset() {
      this.form = {
        id: "",
        deviceNum: "",
        curTime: "",
        tempInChillerWater: "",
        tempOutChillerWater: "",
        designFlow: "",
        pressEvapSaturation: "",
        tempEvapSaturation: "",
        tempEvapApproaching: "",
        tempInCoolingWater: "",
        tempOutCoolingWater: "",
        pressCondenserSaturation: "",
        tempCondenserSaturation: "",
        tempCondenserApproaching: "",
        setChillerWater: "",
        setLoad: "",
        currentTotal: "",
        inputPowerTotal: "",
        ratioCompOne: "",
        openExv: "",
        runCompNum: "",
        frequencyChiller: "",
        pressOutChillerWater: "",
        pressInChillerWater: "",
        frequencyCooling: "",
        pressOutCoolingWater: "",
        pressInCoolingWater: "",
        frequencyCoolingTower: "",
        runCoolingTower: "",
        pressConstantWaterTank: "",
        tempOutdoor: "",
        humidityOutdoor: "",
        recorder: "",
        remark: "",
        ratioCompTwo: "",
        ratioCompThree: "",
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = Object.assign({}, row);
      this.open = true;
      this.title = "修改主机运行记录";
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            reportSysEdit(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            console.log("新增参数", this.form);
          }
        }
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      reportSysExport(this.queryParams).then((res) => {
        console.log("导出返回", res);
        // 请求的结果就是文件
        // 创建一个blob URL，用于生成下载链接
        const url = window.URL.createObjectURL(new Blob([res]));
        // 创建一个<a>元素，并设置其href和download属性
        const link = document.createElement("a");
        link.href = url;
        link.setAttribute("download", "主机运行记录报表.xls"); // 设置下载的文件名
        // 模拟点击下载链接
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        // 释放blob URL资源
        window.URL.revokeObjectURL(url);
        this.$message({
          type: "success",
          message: "导出成功!",
        });
      });
    },
    // 打印
    leadingPrint() {
      this.dialogPrintVisible = true;
    },
    // 打印
    surePrint() {
      const printHTML = document.querySelector("#report").innerHTML;
      // 将打印的区域赋值，进行打印
      window.document.body.innerHTML = printHTML;
      window.print(); // 调用window打印方法
      window.location.reload(); // 打印完成后重新加载页面
    },
  },
};
</script>
<style scoped lang="scss">
/* 媒体查询，适配大于2000px分辨率的大屏样式 - element样式 */
@media (max-width: 2000px) {
  ::v-deep .el-dialog {
    width: 800px !important;
  }
  ::v-deep .print-dialog .el-dialog {
    width: 1200px !important;
  }
  ::v-deep .el-dialog .el-form-item__label {
    width: 150px !important;
  }
  ::v-deep .el-dialog .el-form-item {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}
@media (min-width: 2000px) {
  //   ::v-deep .el-dialog {
  //     width: 8rem !important;
  //   }

  //   ::v-deep .el-dialog .el-form-item__label {
  //     width: 1.5rem !important;
  //   }
  //   ::v-deep .el-dialog .el-form-item {
  //     display: flex;
  //     flex-direction: row;
  //     align-items: center;
  //   }
}
</style>
