microwave-project-unite/src/components/ration/qualitative/index.vue

<template>
  <div class="qualitative">
    <div class="featureMap">
      <div class="box1">
        <span class="sp1"></span><span class="sp2">{{
          productSubType == 39 ? "地表覆盖类型表" : "植被物候类型表"
        }}</span>
      </div>
      <el-table ref="featureMapMultipleTable" :data="featureMapData" tooltip-effect="dark"
        :header-cell-style="headerRowClass" style="width: 98%; margin-left: 1%; margin-top: 15px" :stripe="true"
        :cell-style="tableRowClassName" height="230">
        <el-table-column label="序号" type="index" width="70">
        </el-table-column>
        <el-table-column prop="coverName" :label="productSubType == 39 ? '地物类型名称' : '物候类型名称'" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="typeNameKg" label="空基类型名称" show-overflow-tooltip v-if="false">
          <template slot-scope="scope">
            <el-select v-model="scope.row.typeNameKg" placeholder="请选择" @change="selectRfName(scope.row)">
              <el-option v-for="item in rfNameOpt" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="用户类型实际值">
          <template slot-scope="scope">{{ scope.row.coverId }}</template>
        </el-table-column>
        <el-table-column label="空基代码实际值">
          <template slot-scope="scope">{{ scope.row.imageValue }}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="qualiteSample">
      <div class="qsLeft">
        <div class="smps">
          <div class="box1">
            <span class="sp1"></span><span class="sp2">样本库</span>
          </div>
          <div>
            <el-form :inline="true" :model="simpleForm" class="demo-form-inline">
              <el-form-item>
                <el-cascader v-model="simpleForm.sampleFun" :disabled="sampleFun !== ''" :options="funcOpt" size="mini"
                  placeholder="请选择抽样方法" popper-class="cascader-popper" @change="changeSampleFun" clearable
                  :show-all-levels="false"></el-cascader>
                <el-button v-if="isDeepSpace" class="edit-btn" plain size="mini" type="primary"
                  icon="el-icon-edit-outline" @click="editDeepSpace"></el-button>
              </el-form-item>
              <el-form-item>
                <el-input v-model="simpleForm.sampleNum" size="mini" placeholder="请输入样本个数"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="samplesCk">确定</el-button>
              </el-form-item>
            </el-form>
            <el-table ref="multipleTable" v-loading="loading" element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
              :data="simpleData" tooltip-effect="dark" :header-cell-style="headerRowClass"
              style="width: 98%; margin-left: 1%" @selection-change="handleSelectionChange" :stripe="true"
              :cell-style="tableRowClassName" height="400" size="medium">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="序号" type="index" width="70">
              </el-table-column>
              <el-table-column prop="samplesId" label="样本编号" show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="lat" label="纬度" sortable show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="lng" label="经度" sortable show-overflow-tooltip>
              </el-table-column>
              <el-table-column prop="coverName" label="类别" show-overflow-tooltip sortable>
                <template slot-scope="scope">{{
                  scope.row.paramStr | getCoverName
                }}</template>
              </el-table-column>
              <el-table-column prop="collectDate" label="采样时间" sortable show-overflow-tooltip min-width="120px;">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope"><i class="el-icon-delete"
                    @click="deleteSelected(scope.$index, simpleData)"></i></template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="pixelDeal" v-if="false">
          <div class="box1">
            <span class="sp1"></span><span class="sp2">像元级处理模型设置</span>
          </div>
          <div>
            <span class="cardsp">目标分辨率：{{ pixelNum }}</span>
            <el-form :inline="true" :model="pixelFormData" class="demo-form-inline">
              <el-form-item label="像元级处理模型:">
                <el-select size="mini" v-model="pixelFormData.pixelDealFun" placeholder="选择像元级处理方法" :disabled="pdShow">
                  <el-option label="" value=""></el-option>
                  <el-option label="均值法" value="1"></el-option>
                  <el-option label="最邻近法" value="6"></el-option>
                  <el-option label="克里格法" value="7"></el-option>
                  <el-option label="块克里格法" value="9"></el-option>
                  <el-option label="MSN法" value="10"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">确认</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="qsRight">
        <div class="box1">
          <span class="sp1"></span><span class="sp2">待检验产品及样本分布结果</span>
        </div>
        <div id="sceneShowContent" @click="pickValue" style="overflow: hidden; position: relative"></div>
      </div>
    </div>
    <SampleSetting :stepSampling="stepSampling" @handleStepSampling="handleStepSampling"
      @handleDepthList="handleDepthList" :sampleCldFun="sampleCldFun" ref="sampleSettingPanel"></SampleSetting>
  </div>
</template>

<script>
// import {
//   getCoverTypes,
//   getSampleData,
//   getOrderSamples,
//   getSamplesByLayer,
// } from "@/api/pendingOrder";
import {
  getSamplesList,
  getSampleData,
  getSamplesByLayer,
} from "@/api/lang/pendingOrder";

import cu from "@/lib/cesiumUtils";
import SampleSetting from "@/components/ration/sampleSetting/index.vue";
import WKT from "terraformer-wkt-parser";
import Formator from "@/mixins/formator";

export default {
  components: {
    SampleSetting,
  },
  mixins: [Formator],
  props: {
    sampleFun: {
      require: true,
      type: String,
    },
    sampleCldFun: {
      require: false,
      type: String,
    },
    pixelFun: {
      require: true,
      type: String,
    },
    geoWorkSpace: {
      require: true,
      type: String,
    },
    geoLayerName: {
      require: true,
      type: String,
    },
    geoLayerPos: {
      require: true,
    },
    pixelNum: {
      require: true,
    },
    orderId: {
      require: true,
    },
    productSubType: {
      require: true,
    },
    featureMapData: {
      require: true,
    }
  },
  filters: {
    getCoverName(paramStr) {
      return JSON.parse(paramStr).covernm;
    },
  },
  data() {
    return {
      // featureMapData: [],
      rfNameOpt: [],
      simpleForm: {
        sampleFun: "",
        sampleNum: "",
      },
      simpleData: [],
      loading: true,
      allSampleData: [],
      simpleDataTotal: 0,
      multipleSelection: [],
      pixelFormData: {
        pixelDealFun: "",
      },
      stepSampling: false,
      funcOpt: [],
      isDeepSpace: false,
      depthList: [],
    };
  },
  mounted() {
    cu.initCesium("sceneShowContent");
    cu.handleClick();
    cu.addlayer(this.geoWorkSpace, this.geoLayerName);
    let gp = this.geoLayerPos;
    cu.flyToLayerRect(gp[0], gp[1], gp[2], gp[3]);
  },
  created() {
    if (this.productSubType === 39) {
      this.rfNameOpt = this.configration.groTypeName;
    } else if (this.productSubType === 47) {
      this.rfNameOpt = this.configration.vegetationPhenologyGroTypeName;
    }

    this.funcOpt = this.configration.funcOpt;
    // this.getCoverType();
    this.getSqlData();
    this.initParam();
  },
  methods: {
    handleStepSampling(newVal) {
      this.stepSampling = newVal;
    },
    handleDepthList(newVal) {
      // console.log('handleDepthList', newVal)
      this.depthList = newVal;
    },
    editDeepSpace() {
      this.stepSampling = true;
    },
    initParam() {
      if (this.pixelFun !== "") this.pdShow = true;
      this.pixelFormData.pixelDealFun = this.pixelFun;
      if (this.sampleCldFun) {
        this.simpleForm.sampleFun = new Array(
          this.sampleFun,
          this.sampleCldFun
        );
      } else {
        this.simpleForm.sampleFun = new Array(this.sampleFun);
      }
      const ssf = Number(this.simpleForm.sampleFun[0]);
      if (
        this.simpleForm.sampleFun.length >= 1 &&
        ssf === 2 &&
        Number(this.simpleForm.sampleFun[1]) === 0
      ) {
        this.isDeepSpace = true;
      } else {
        this.isDeepSpace = false;
      }
      // this.stepSampling = this.sampleFun == "1" && this?.sampleCldFun == "0";
    },
    onSubmit() { },
    tableRowClassName({ rowIndex }) {
      if ((rowIndex + 1) % 2 !== 0) {
        return "background:#F5F7FA;text-align:center";
      } else {
        return "background:#FFFFFF;text-align:center";
      }
    },
    headerRowClass() {
      return "background: #E4E9F1;text-align:center";
    },
    handleSelectionChange(val) {
      cu.removePoint();
      if (val.length !== 0) {
        for (let i in val) {
          const alt = JSON.parse(val[i].paramStr).alt;
          cu.addPoint(val[i].lng, val[i].lat, alt !== "null" ? alt : 10);
        }
      }
      this.multipleSelection = val;
    },
    selectRfName(row) {
      const typeNameMap = {
        城市: "01",
        水体: "02",
        森林: "03",
        灌木地: "20",
        草地: "10",
        水域: "60",
        山地: "80",
        出芽期: "1",
        分蘖期: "2",
        越冬期: "3",
        返青期: "4",
        起身期: "5",
        拔节期: "6",
        孕穗期: "7",
        抽穗期: "8",
        扬花期: "9",
        灌浆期: "10",
        成熟期: "11",
      };
      row.typeIdKg = typeNameMap[row.typeNameKg];
    },
    getRealVal(name) {
      const typeNameMap = {
        城市: "01",
        水体: "02",
        森林: "03",
        灌木地: "20",
        草地: "10",
        水域: "60",
        山地: "80",
        出芽期: "1",
        分蘖期: "2",
        越冬期: "3",
        返青期: "4",
        起身期: "5",
        拔节期: "6",
        孕穗期: "7",
        抽穗期: "8",
        扬花期: "9",
        灌浆期: "10",
        成熟期: "11",
      };
      return typeNameMap[name];
    },
    getCoverType() {
      getCoverTypes(this.orderId).then((res) => {
        if (res.msg === "操作成功" && res?.data) {
          const rd = res.data;
          if (rd.length > 0) {
            for (let i = 0; i < rd.length; i++) {
              rd[i].typeNameKg = rd[i].typeName;
              rd[i].typeIdKg = this.getRealVal(rd[i].typeName);
            }
          }
          this.featureMapData = rd;
        }
      });
    },
    getSqlData() {
      getSamplesList(this.orderId).then((res) => {
        // console.log("111111111", res);
        if (res.code == 200) {
          this.multipleSelection =
            this.allSampleData =
            this.simpleData =
            res.data.list;
          this.loading = false;
          this.$refs.multipleTable.toggleAllSelection();
          let min = Number.MAX_SAFE_INTEGER;
          let max = Number.MIN_SAFE_INTEGER;
          this.$store.commit("setAltRange", null);
          this.allSampleData.forEach((k, v) => {
            k.dataTime = this.formatDatetime(k.dataTime);
            min = min > k.alt ? k.alt : min;
            max = max < k.alt ? k.alt : max;
          });
          if (this.allSampleData.length > 0) {
            this.$store.commit("setAltRange", min + "," + (max + 1));
          }
          this.simpleDataTotal = res.data.list.length;
        }
      });
    },
    changeSampleFun(sfVal) {
      if (Array.isArray(sfVal)) {
        const ssf = Number(sfVal[0]);
        this.$store.commit("setSampleFun", sfVal.length === 0 ? null : ssf);
        if (sfVal.length >= 1 && ssf === 2 && Number(sfVal[1]) === 0) {
          this.isDeepSpace = true;
        } else {
          this.isDeepSpace = false;
        }
      }
    },
    samplesCk() {
      const self = this;
      if (self.simpleForm.sampleFun[0] === "") {
        self.$message.error("请选择抽样方法");
        return false;
      }
      const ssf = self.simpleForm.sampleFun,
        st = self.simpleDataTotal,
        ssn = self.simpleForm.sampleNum;
      if (ssn == "") {
        this.$message.error("请选择抽样个数");
        this.getSqlData();
        return false;
      }
      if (ssn > st) {
        this.$message.error("抽样数不可大于总样本数量");
        return false;
      }
      if (ssn < 0) {
        this.$message.error("样本个数不可为负数");
        return false;
      }
      if (Number(ssf[0]) === 2) {
        const stepSampParams = self.$refs.sampleSettingPanel;
        const hierarchyVal = ssf[1];
        if (hierarchyVal === "" || hierarchyVal === undefined) {
          self.stepSampling = true;
          return false;
        }
        const ssForm = new FormData();
        ssForm.append("samplesList", JSON.stringify(this.allSampleData));
        ssForm.append("stepType", Number(hierarchyVal));
        ssForm.append("orderID", this.orderId);
        if (hierarchyVal === "0") {
          const depthList = this.depthList;
          ssForm.append("condition", JSON.stringify(depthList));
        } else if (hierarchyVal === "2") {
          const jsonContent = JSON.parse(stepSampParams.jsonContent);
          const jg = jsonContent.geometries;
          const newPolygon = [];
          for (let i in jg) {
            const jsonContentWKT = WKT.convert(jg[i]);
            newPolygon.push({ coordinates: jsonContentWKT });
          }
          ssForm.append("condition", JSON.stringify(newPolygon));
        }
        ssForm.append("splCount", ssn);
        getSamplesByLayer(ssForm).then((res) => {
          if (res.length === 0 || res === []) {
            self.multipleSelection = self.simpleData = [];
            cu.removePoint();
            this.$message.error("当前分层设置返回列表为空");
            return false;
          } else {
            const dl = [];
            for (let i in res) {
              const ri = res[i];
              for (let j in ri) {
                dl.push(ri[j]);
              }
            }
            self.multipleSelection = self.simpleData = dl;
            self.$refs.multipleTable.toggleAllSelection();
            cu.removePoint();
            for (let i in dl) {
              const alt = JSON.parse(dl[i].paramStr).alt;
              cu.addPoint(dl[i].lng, dl[i].lat, alt !== "null" ? alt : 10);
            }
          }
        });
      } else {
        const spFrom = new FormData();
        spFrom.append("sampleFun", Number(ssf[0])); //抽样方法
        spFrom.append("minNum", 0);
        spFrom.append("MaxNum", st - 1); //样本总数
        spFrom.append("splCount", ssn); //抽样个数
        getSampleData(spFrom).then((res) => {
          const dl = [];
          for (const i in res) {
            dl.push(self.allSampleData[res[i]]);
          }
          self.multipleSelection = self.simpleData = dl;
          self.$refs.multipleTable.toggleAllSelection();
          cu.removePoint();
          for (let i in dl) {
            const alt = JSON.parse(dl[i].paramStr).alt;
            cu.addPoint(dl[i].lng, dl[i].lat, alt !== "null" ? alt : 10);
          }
        });
      }
    },
    deleteSelected(index, simpleData) {
      simpleData.splice(index, 1);
    },
    pickValue() {
      cu.handleClick();
    },
  },
};
</script>

<style scoped lang="less">
.featureMap {
  width: 100%;
  height: 300px;
  background-color: white;
  margin-top: 10px;
}

/deep/.featureMap .el-select .el-input__inner {
  height: 35px;
}

.qualiteSample {
  margin-top: 10px;
  margin-bottom: 10px;
}

.qsLeft {
  width: 56%;
  height: 500px;
  float: left;
  margin-right: 4px;
}

.qsRight {
  width: calc(44% - 4px);
  height: 500px;
  background-color: white;
  float: left;
  margin-bottom: 10px;
}

.smps {
  height: 500px;
  background-color: white;
  margin-bottom: 5px;
}

/deep/.smps .el-form-item {
  margin-left: 15px;
  margin-bottom: 10px;
}

// /deep/.smps .el-table th > .cell {
//     font-size: 15px;
// }
// /deep/.smps .el-table .cell {
//     font-size: 13px;
// }

.pixelDeal {
  height: 165px;
  background-color: white;
}

/deep/.pixelDeal .el-form-item {
  margin-left: 15px;
}

.cardsp {
  display: block;
  margin-left: 17px;
  font-size: 15px;
  color: #606266;
  line-height: 40px;
}

#sceneShowContent {
  margin: 10px;
  height: calc(100% - 60px);
  background-color: rgb(110, 110, 207);
}

.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;
  margin-left: 20px;
  margin-top: 8px;
}

.sp2 {
  margin-left: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #354595;
  vertical-align: top;
}

// 分层抽样弹出框设置
/deep/.sampleFunParam .el-upload-dragger .el-icon-upload {
  margin: 0;
  line-height: 30px;
  font-size: 20px;
  color: black;
}

.sampleFunParam .upload-demo {
  display: inline-block;
}

/deep/.sampleFunParam .el-upload-dragger {
  width: 150px;
  height: 35px;
  margin-left: 15px;
  margin-top: 20px;
  border: 1px solid #d9d9d9;
}

/deep/.sampleFunParam .el-dialog__body {
  padding: 20px 10px;
  text-align: center;
}

.edit-btn {
  margin-left: 15px;
}
</style>