microwave-project-unite/src/views/Daichuli/Feedback/Inspection/index.vue

<template>
  <div>
    <transition name="Fade" mode="out-in">
      <router-view></router-view>
    </transition>
    <!-- 订单展示 -->
    <div
      class="page"
      v-show="pageshow"
      v-loading="checkRealityWait"
      element-loading-text="正在检验..."
      element-loading-spinner="el-icon-loading"
    >
      <div class="cardfrist">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">订单信息</span>
        </div>
        <el-table
          :header-cell-style="{ background: '#E4E9F1' }"
          :cell-style="tableRowClassName"
          :data="orderData"
          style="width: 98%; margin-left: 1%; margin-top: 15px"
        >
          <el-table-column
            prop="orderCode"
            label="订单编号"
            sortable
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="orderSource"
            label="订单来源"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="uploadDate"
            label="提交时间"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="文件名"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fileSize"
            label="产品大小"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fileFormat"
            label="文件格式"
            sortable
            align="center"
          >
          </el-table-column>
          <el-table-column label="元数据" align="center">
            <el-button type="primary" @click="changeshow">查看</el-button>
          </el-table-column>
        </el-table>
      </div>
      <!-- 元数据展示 -->
      <div class="cardsecond" v-show="isShow">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">元数据查看</span>
        </div>
        <div class="cstop">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            :disabled="true"
          >
            <el-form-item label="卫星" class="ysjMsg">
              <el-input
                class="ysjMsgMrg"
                v-model="formInline.satellite"
                placeholder="卫星名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="载荷名称" class="ysjMsg">
              <el-input
                v-model="formInline.load"
                placeholder="载荷方式"
              ></el-input>
            </el-form-item>
            <el-form-item label="空间分辨率" class="ysjMsg2">
              <el-input
                v-model="formInline.resRatio"
                placeholder="空间分辨率"
              ></el-input>
            </el-form-item>
            <el-form-item label="时间" class="ysjMsg">
              <el-input
                class="ysjMsgMrg"
                v-model="formInline.producedDate"
                placeholder="生产时间"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="级别"
              prop="resource"
              style="width: 20%"
              class="ysjMsg2"
            >
              <el-radio-group v-model="formInline.proLevel">
                <el-radio label="3"></el-radio>
                <el-radio label="4"></el-radio>
                <el-radio label="5"></el-radio>
              </el-radio-group> </el-form-item
            ><br />
            <el-form-item label="坐标系统" class="ysjMsg">
              <el-input
                v-model="formInline.coordinateSys"
                placeholder="坐标系统"
              ></el-input>
            </el-form-item>
            <el-form-item label="最小纬度" class="ysjMsg">
              <el-input
                v-model="formInline.minLat"
                placeholder="最小纬度"
              ></el-input>
            </el-form-item>
            <el-form-item label="最大纬度" class="ysjMsg2">
              <el-input
                style="margin-left: 6px"
                v-model="formInline.maxLat"
                placeholder="最大纬度"
              ></el-input>
            </el-form-item>
            <el-form-item label="最小经度" class="ysjMsg">
              <el-input
                v-model="formInline.minLon"
                placeholder="最小经度"
              ></el-input>
            </el-form-item>
            <el-form-item label="最大经度" class="ysjMsg2">
              <el-input
                v-model="formInline.maxLon"
                placeholder="最大经度"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 正射校正 -->
      <OtgCorrection
        :sampleFun="sampleFun"
        :sampleCldFun="sampleCldFun"
        :pixelFun="pixelFun"
        :pixelNum="pixelNum"
        :geoWorkSpace="geoWorkSpace"
        :geoLayerName="geoLayerName"
        :geoLayerPos="geoLayerPos"
        :orderId="orderId"
        :productSubType="productSubType"
        ref="otgCorrectionPanel"
        v-if="productSubType === 45"
      ></OtgCorrection>
      <!-- 地表覆盖 -->
      <Qualitative
        :sampleFun="sampleFun"
        :sampleCldFun="sampleCldFun"
        :pixelFun="pixelFun"
        :pixelNum="pixelNum"
        :geoWorkSpace="geoWorkSpace"
        :geoLayerName="geoLayerName"
        :geoLayerPos="geoLayerPos"
        :orderId="orderId"
        :productSubType="productSubType"
        ref="qualitativePanel"
        v-else-if="productSubType === 39 || productSubType === 47"
      ></Qualitative>
      <!-- 土壤水份等 -->
      <SoilMositure
        :sampleFun="sampleFun"
        :sampleCldFun="sampleCldFun"
        :pixelFun="pixelFun"
        :pixelNum="pixelNum"
        :geoWorkSpace="geoWorkSpace"
        :geoLayerName="geoLayerName"
        :geoLayerPos="geoLayerPos"
        :orderId="orderId"
        :productSubType="productSubType"
        ref="soilMositurePanel"
        v-else
      ></SoilMositure>
      <!-- 真实性检验方法 -->
      <div class="cardfive" v-if="!hasPixelFun">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">真实性检验方法</span>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="检验方法">
            <el-select
              v-model="formInline.truthCheckFun"
              multiple
              :disabled="truthFun"
              placeholder="请选择"
            >
              <el-option
                v-for="item in truthCheckFunOpt"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="btngroup">
          <el-button class="shbtn" type="primary" @click="todaichuli"
            >取消</el-button
          >
          <el-button class="shbtn" type="primary" @click="changepage"
            >确定</el-button
          >
        </div>
      </div>
      <div class="card2" v-if="hasPixelFun">
        <div class="leftCard">
          <div class="pixelDeal">
            <div class="box1">
              <span class="sp1"></span>
              <span class="sp22">像元级处理模型设置</span>
            </div>
            <div>
              <span class="cardsp">目标分辨率：{{ pixelNum }}</span>
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="像元级处理模型:">
                  <el-select
                    v-model="pixelFun"
                    placeholder="选择像元级处理方法"
                    :disabled="pdShow"
                    @change="pixelFunChanged"
                    ref="pixelSel"
                  >
                    <el-option label="" value=""></el-option>
                    <el-option
                      label="均值法"
                      value="1"
                      v-if="
                        (globalSampleFun !== 1 && globalSampleFun !== '1') ||
                        globalSampleFun === null ||
                        globalSampleFun === ''
                      "
                    ></el-option>
                    <el-option
                      label="最邻近法"
                      value="6"
                      v-if="
                        (globalSampleFun !== 1 && globalSampleFun !== '1') ||
                        globalSampleFun === null ||
                        globalSampleFun === ''
                      "
                    ></el-option>
                    <el-option
                      label="克里格法"
                      value="7"
                      v-if="
                        (globalSampleFun !== 1 && globalSampleFun !== '1') ||
                        globalSampleFun === null ||
                        globalSampleFun === ''
                      "
                    ></el-option>
                    <el-option
                      label="块克里格法"
                      value="9"
                      v-if="
                        (globalSampleFun !== 1 && globalSampleFun !== '1') ||
                        globalSampleFun === null ||
                        globalSampleFun === ''
                      "
                    ></el-option>
                    <el-option label="MSN法" value="10"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <div class="rightCard">
          <div class="box1">
            <span class="sp11"></span>
            <span class="sp22">真实性检验方法</span>
          </div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="检验方法:">
              <el-select
                v-model="formInline.truthCheckFun"
                multiple
                :disabled="truthFun"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in truthCheckFunOpt"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="cardfive">
          <div class="btngroup">
            <el-button class="shbtn" type="primary" @click="todaichuli"
              >取消</el-button
            >
            <el-button class="shbtn" type="primary" @click="changepage"
              >确定</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SoilMositure from "@/components/ration/soilMoisture/index.vue";
import OtgCorrection from "@/components/ration/otgCorrection/index.vue";
import Qualitative from "@/components/ration/qualitative/index.vue";
import {
  getAnalyseMethod,
  delSampleData,
  upDateAnalyseMethod,
  checkReality,
  exportWord,
} from "@/api/lang/pendingOrder";
import qs from "qs";

import { productSubTypeVal, truthFunVal } from "@/lib/contract.js";

export default {
  name: "Inspection",
  components: {
    SoilMositure,
    OtgCorrection,
    Qualitative,
  },
  created() {
    if (
      Object.keys(this.$route.params).length > 0 &&
      sessionStorage.getItem("prePage") ===
        this.configration.path.orderUnprocessed
    ) {
      this.queryParams = this.$route.params;
    } else {
      this.queryParams = JSON.parse(
        localStorage.getItem(this.configration.path.orderUnprocessed)
      );
    }
    document.body.scrollTop = 0;
    this.initOrderPMsg();
    this.setTruthFunOpt();
  },
  data() {
    return {
      queryParams: null,
      orderMsg: "",
      productMsg: null,
      allMsg: null,
      pageshow: true,
      checkRealityWait: false,
      isShow: false,
      truthFun: false,
      productSubType: undefined,
      orderId: undefined,
      userId: null,
      formInline: {
        truthCheckFun: [],
        satellite: "", //卫星
        load: "", //载荷
        resRatio: "0.000307", //空间分辨率
        producedDate: "",
        proLevel: "4", //产品级别
        coordinateSys: "WGS84", //坐标系
        minLat: "116.13622332", //最小经度
        maxLat: "118.342222", //最大经度
        minLon: "34.211234", //最小纬度
        maxLon: "35.3455666", //最大纬度
      },
      truthCheckFunOpt: [],
      sampleFun: "",
      sampleCldFun: null,
      pixelFun: "",
      pixelNum: "",
      geoWorkSpace: "",
      geoLayerName: "",
      geoLayerPos: [],
      tifPath: "",
      orderData: [],
      sampleList: [],
      pdShow: false,
    };
  },
  methods: {
    initOrderPMsg() {
      let self = this;
      const am = (self.allMsg = this.queryParams);
      self.userId = localStorage.userId;
      const om = (self.orderMsg = self.allMsg.orderMsg);

      self.orderId = om.orderId;
      const pdType = om.productSubClassId;
      this.productSubType = pdType;

      self.formInline = am.metaMsg;
      self.orderData = am.orderData;
      self.pixelNum = am.metaMsg.resRatio;

      self.geoLayerPos = [
        am.metaMsg.minLon,
        am.metaMsg.minLat,
        am.metaMsg.maxLon,
        am.metaMsg.maxLat,
      ];

      const pm = (this.productMsg = am.productMsg);
      self.geoWorkSpace = pm.geoWorkspace;
      self.geoLayerName = pm.geoLayerName;
      self.tifPath = pm.ftpPath;

      // 赋值真实性检验方法
      getAnalyseMethod(self.orderId).then((res) => {
        // console.log('真实性检验',res);
        if (res.code === 200) {
          let truthFun = res.data.default;
          if (res.data.selected.length !== 0) truthFun = res.data.selected;
          if (truthFun.length !== 0) {
            const tfArr = [];
            for (let i in truthFun) {
              tfArr.push(truthFun[i].id);
            }
            self.formInline.truthCheckFun = tfArr;
            self.truthFun = true;
          }
        }
      });

      // 赋值像元级处理方法
      if (om.processMethods !== null) {
        const pm = om.processMethods;
        const pmVal = Object.keys(pm)[0];
        self.pixelFun = pmVal.toString();
      }
      if (this.pixelFun !== "") {
        this.pdShow = true;
        this.$store.commit("setPixelFun", this.pixelFun);
      }

      // 赋值样本抽样方法
      if (om.samplingMethodId !== null)
        self.sampleFun = om.samplingMethodId + "";
      if (this.sampleFun !== "") {
        this.$store.commit("setSampleFun", this.sampleFun);
      }

      if (om.samplingMethodCldId !== null) {
        self.sampleCldFun = om.samplingMethodCldId + "";
      }
    },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA";
      } else {
        return "background:#FFFFFF";
      }
    },
    todaichuli() {
      this.$router.push(this.configration.path.daichuli);
    },
    changepage() {
      if (this.hasPixelFun && this.pixelFun === "") {
        this.$message.error("请选择像元级处理模型设置");
        return false;
      }
      var smpVal = undefined;
      var featureMapData = [];
      const pdType = this.productSubType;

      if (pdType === productSubTypeVal.ACS_ORTHOPHOTO) {
        smpVal = this.$refs.otgCorrectionPanel;
      } else if (
        pdType === productSubTypeVal.ACS_TYPESOFLANDCOVER ||
        pdType === productSubTypeVal.ACS_VEGETATIONPHENOLOGY
      ) {
        smpVal = this.$refs.qualitativePanel;
        featureMapData = smpVal.featureMapData;
      } else {
        smpVal = this.$refs.soilMositurePanel;
      }

      this.sampleList = smpVal.multipleSelection;

      if (featureMapData !== [] || featureMapData.length !== 0)
        this.updateCoverType(featureMapData);

      const orderId = this.orderId;
      const tcf = this.formInline.truthCheckFun;

      if (this.sampleList.length === 0) {
        this.$message.error("请选择样本数据");
        return false;
      }
      if (tcf.length === 0) {
        this.$message.error("真实性检验方法");
        return false;
      }
      // 关联的样本数据入库
      // const allSampleData = smpVal.allSampleData;
      // this.addCotSamples(this.sampleList,allSampleData,orderId)
      //更新真实性检验方法
      // this.updateTruthFun(orderId, tcf);

      this.checkRealityWait = true;
      // 真实性校验方法
      var formData = new FormData();
      formData.append("orderId", orderId); //订单ID
      formData.append("productType", this.productSubType); //产品类型
      formData.append("isHttpUrl", true); //产品路径
      // formData.append("dataPath", this.tifPath); //产品路径
      formData.append(
        "dataPath",
        "http://60.10.61.212:18030/inspection/files/4be870ee1a6b458da6c0201f9f217a091652339249444.tif"
      ); //产品路径
      formData.append("samples", JSON.stringify(this.sampleList)); //样本数据
      if (this.pixelFun !== "")
        formData.append("pixelHandleType", this.pixelFun); //像元级处理方法（正射校正产品不需要）
      formData.append("truthCheckFuns", JSON.stringify(tcf)); //真实性校验
      formData.append("featureMapping", JSON.stringify(featureMapData));
      checkReality(formData).then((res) => {
        console.log("真实性校验：", res);
        this.checkRealityWait = false;
        if (res?.code === 200 && res.message === "success") {
          this.$message({
            message: "真实性检验完成",
            type: "success",
          });
          const rm = res.data;
          const reportMsg = {
            pdSubType: this.productSubType,
            reportResult: rm,
            geoWS: this.geoWorkSpace,
            geoLN: this.geoLayerName,
            geoLayerPos: this.geoLayerPos,
            tifPath: this.tifPath,
            metaData: this.formInline,
            sampleList: this.sampleList,
            orderId: this.orderId,
            userId: this.userId,
            orderMsg: this.orderMsg,
            productMsg: this.productMsg,
          };
          localStorage.setItem(
            this.configration.path.inspection,
            JSON.stringify(reportMsg)
          );
          this.$router.push({ name: "报告生成", params: reportMsg });
        } else {
          this.$message({
            message: res.message,
            type: "error",
          });
        }
      });
    },
    addCotSamples(samplesList, allSampleData, orderId) {
      for (let i in samplesList) {
        allSampleData = allSampleData.filter(function (o) {
          return o.id !== samplesList[i].id;
        });
      }
      const isDel = [];
      for (let i in allSampleData) {
        isDel.push(allSampleData[i].id);
      }
      const dsForm = new FormData();
      dsForm.append("orderId", orderId);
      dsForm.append("idList", isDel);
      delSampleData(dsForm);
    },
    // 更新真实性检验方法
    updateTruthFun(orderId, tcf) {
      upDateAnalyseMethod(
        qs.stringify({ list: tcf, orderId: orderId }, { indices: false })
      );
    },
    updateCoverType(featureMapData) {
      for (let i in featureMapData) {
        const fi = featureMapData[i];
        if (fi.typeIdKg !== null) {
          const fParams = new FormData();
          fParams.append("coverId", fi.id);
          fParams.append("kgTypeId", Number(fi.typeIdKg));
          fParams.append("kgTypeName", fi.typeNameKg);
          updateFeature(fParams);
        }
      }
    },
    changeshow() {
      this.isShow = !this.isShow;
    },
    // 获取产品子分类
    setTruthFunOpt() {
      const opt = this.productSubType;
      const pst = productSubTypeVal;
      const tf = truthFunVal;
      if (opt === pst.ACS_ORTHOPHOTO) {
        this.truthCheckFunOpt = [
          { value: tf.ACM_MEANERROR, label: "平均误差" },
          { value: tf.ACM_MEANABSOLUTEERROR, label: "平均绝对误差" },
          { value: tf.ACM_RELATIVEERROR, label: "相对误差" },
          { value: tf.ACM_MEANRELATIVEERROR, label: "平均相对误差" },
          {
            value: tf.ACM_MEANABSOLUTERELATIVEERROR,
            label: "平均绝对相对误差",
          },
          { value: tf.ACM_ROOTMANSQUAREERROR, label: "均方根误差" },
          { value: tf.ACM_PLANENESSERROR, label: "平面中误差" },
        ];
      } else if (
        opt === pst.ACS_TYPESOFLANDCOVER ||
        opt === pst.ACS_VEGETATIONPHENOLOGY
      ) {
        this.truthCheckFunOpt = [
          { value: tf.ACM_ERRORMATRIX, label: "误差矩阵" },
          { value: tf.ACM_OVERALLACCURACY, label: "总体分类精度" },
          { value: tf.ACM_KAPPA, label: "Kappa系数" },
        ];
      } else {
        this.truthCheckFunOpt = [
          { value: tf.ACM_MEANERROR, label: "平均误差" },
          { value: tf.ACM_MEANABSOLUTEERROR, label: "平均绝对误差" },
          { value: tf.ACM_RELATIVEERROR, label: "相对误差" },
          { value: tf.ACM_MEANRELATIVEERROR, label: "平均相对误差" },
          {
            value: tf.ACM_MEANABSOLUTERELATIVEERROR,
            label: "平均绝对相对误差",
          },
          { value: tf.ACM_ROOTMANSQUAREERROR, label: "均方根误差" },
          { value: tf.ACM_CORRELATIONCOEFFICIENT, label: "相关系数" },
        ];
      }
    },
    pixelFunChanged() {
      //更新状态
      this.$store.commit("setPixelFun", this.pixelFun);
    },
  },
  beforeDestroy() {
    //恢复初始状态
    this.$store.commit("setSampleFun", null);
    this.$store.commit("setPixelFun", null);
    this.$store.commit("setAltRange", null);
  },
  computed: {
    hasPixelFun: function () {
      return (
        this.productSubType !== 45 &&
        this.productSubType !== 39 &&
        this.productSubType !== 47
      );
    },
    globalSampleFun: function () {
      if (this.allMsg.orderMsg.processMethods == null) {
        this.pixelFun = "";
      }
      return this.$store.state.sampleFun;
    },
    globalPixelFun: function () {
      return this.$store.state.pixelFun;
    },
  },
};
</script>

<style scoped lang="less">
.Fade-enter,
.Fade-leave-to {
  opacity: 0;
}
.Fade-enter-to,
.Fade-leave {
  opacity: 1;
}

.Fade-enter-active,
.Fade-leave-active {
  transition: all 0.4s;
}

/deep/.cardsecond .el-input.is-disabled .el-input__inner {
  width: 140px;
  height: 33px;
}
/deep/.el-form--inline .el-form-item__label {
  text-align: justify;
  // text-align-last: justify;
  font-size: 15px;
}
.shbtn:hover,
.shbtn:active,
.shbtn:focus {
  background-color: rgba(97, 115, 206, 0.5);
}
.shbtn {
  width: 150px;
  height: 35px;
  background-color: #354595;
  border: 0;
}
.btngroup {
  margin-bottom: 20px;
  // margin-left: 40%;
  text-align: center;
}
/deep/.el-textarea__inner {
  margin-left: 20px;
  width: 98%;
}
/deep/.el-textarea__inner:focus {
  border-color: #354595;
}
/deep/.el-radio {
  margin-right: 10px;
}
/deep/.el-radio__inner::after {
  background-color: #354595;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #354595;
  background: white;
}
/deep/.el-radio__input.is-disabled .el-radio__inner {
  border-color: #354595;
}
/deep/.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #354595;
}
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #606266;
}
/deep/.el-radio__inner {
  border: 2px solid #354595;
}

/deep/.el-icon-close:before {
  content: none;
}
/deep/.el-tag .el-icon-close {
  width: 0;
  height: 0;
}
/deep/.cardfive .el-form-item {
  margin-top: 15px;
  width: 100%;
}
/deep/.cardfive .el-form--inline .el-form-item__content {
  width: 90%;
  height: 60px;
}
/deep/.cardfive .el-select {
  width: 100%;
  height: 60px;
  line-height: 60px;
}
/deep/.cardfive .el-input--suffix .el-input__inner {
  width: 100%;
  height: 60px;
  line-height: 60px;
}

/deep/.cardfive .el-form--inline .el-form-item__label {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
}
/deep/.cardfive .el-button--primary:hover {
  background-color: #354595;
}
/deep/.cardfive .el-button--primary:focus {
  background-color: #6979cc;
  border-color: #6979cc;
}
.box2 {
  margin-top: 10px;
  margin-bottom: 10px;
  height: 30px;
  width: 300px;
  display: inline-block;
}
.bxtitle {
  margin-top: 2.5px;
  display: inline-block;
  vertical-align: top;
  font-size: 18px;
  width: 80px;
  text-align: justify;
  text-align-last: justify;
}
.bxinput {
  display: inline-block;
  vertical-align: top;
  width: 200px;
}
/deep/.cardfive .el-input__inner {
  height: 60px;
}
.cstop {
  margin-top: 20px;
  margin-bottom: 0;
  position: relative;
  text-align: center;
}
.ysjMsg {
  width: 18%;
}
.ysjMsgMrg {
  margin-left: 14px;
}
.ysjMsg2 {
  width: 20%;
}
.cardsecond {
  width: 100%;
  background-color: white;
  font-size: 20px;
  margin-top: 20px;
}
.cardfrist {
  width: 100%;
  background-color: white;
  font-size: 20px;
  padding-bottom: 15px;
  // margin-top: 20px;
}
.cardfive {
  margin-top: 20px;
  background-color: white;
  padding: 0 0 10px 0;
  clear: both;
}
.box1 {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid rgb(205, 205, 205, 0.5);
}
.sp1 {
  display: inline-block;
  width: 7px;
  height: 26px;
  background-color: #354595;
  vertical-align: top;
  // position: absolute;
  margin-left: 20px;
  margin-top: 8px;
}
.sp11 {
  display: inline-block;
  width: 7px;
  height: 26px;
  background-color: #354595;
  vertical-align: top;
  // position: absolute;
  margin-left: 24px;
  margin-top: 8px;
}
.sp2 {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
  vertical-align: top;
}
.sp22 {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
  vertical-align: top;
}
.page {
  /* height: 1000px; */
  width: 100%;
  /* background-color: goldenrod; */
}
/deep/.el-button {
  line-height: 0;
}
.leftCard {
  width: 54%;
  height: 230px;
  background-color: white;
  float: left;
}
.rightCard {
  width: 46%;
  height: 230px;
  background-color: white;
  float: left;
}
.pixelDeal {
  height: 165px;
  background-color: white;
}
/deep/.leftCard .el-form-item {
  margin-top: 15px;
  width: 100%;
}
/deep/.leftCard .el-input__inner {
  height: 38px;
}
/deep/.leftCard .el-select {
  width: 100%;
  height: 38px;
  line-height: 38px;
}
/deep/.leftCard .el-form--inline .el-form-item__content {
  width: 50%;
  height: 38px;
}
/deep/.leftCard .el-form--inline .el-form-item__label {
  height: 38px;
  line-height: 38px;
  margin-left: 20px;
}
/deep/.rightCard .demo-form-inline .el-form-item {
  margin-top: 15px;
  width: 100%;
}
/deep/.rightCard .demo-form-inline .el-form-item__content {
  width: 80%;
}
/deep/.rightCard .demo-form-inline .el-select {
  width: 100%;
}

// /deep/.rightCard .el-form-item {
//   margin-top: 15px;
//   width: 100%;
// }
// /deep/.rightCard .el-input__inner {
//   height: 30px;
// }
// /deep/.rightCard .el-select {
//   width: 100%;
//   height: 30px;
//   line-height: 30px;
// }
// /deep/.rightCard .el-form--inline .el-form-item__content {
//   width: 70%;
//   height: 30px;
// }
// /deep/.rightCard .el-form--inline .el-form-item__label {
//   height: 30px;
//   margin-left: 24px;
// }
.cardsp {
  display: block;
  margin: 5px 0 0 20px;
  font-size: 15px;
  color: #606266;
  line-height: 40px;
}
.selectBox {
  height: 65px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  line-height: 22px;
}
.selTxt {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  box-sizing: border-box;
  margin: 2px 0 2px 6px;
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
  font-size: 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 4px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  align-items: center;
  flex-wrap: wrap;
}
</style>