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

<template>
  <div class="soilMositure">
    <div class="smBodyLeft">
      <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="460"
          >
            <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
              min-width="100px;"
            >
            </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 :label="smLabel" show-overflow-tooltip>
              <template slot-scope="scope">{{
                scope.row.paramStr | getSampleVal
              }}</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>
    <div class="smBodyRight">
      <div class="box1">
        <span class="sp1"></span
        ><span class="sp2">待检验产品及样本分布结果</span>
      </div>
      <div
        class="sceneShowContent"
        id="cesiumView"
        @click="pickValue"
        style="overflow: hidden; position: relative"
      ></div>
    </div>
    <SampleSetting
      :stepSampling="stepSampling"
      @handleStepSampling="handleStepSampling"
      @handleDepthList="handleDepthList"
      :sampleCldFun="sampleCldFun"
      ref="sampleSettingPanel"
    ></SampleSetting>
  </div>
</template>

<script>
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,
    },
  },
  filters: {
    getSampleVal(paramStr) {
      return JSON.parse(paramStr).featureValue.featureValue;
    },
  },
  data() {
    return {
      simpleForm: {
        sampleFun: "",
        sampleNum: "",
      },
      simpleData: [],
      loading: true,
      allSampleData: [],
      simpleDataTotal: 0,
      smLabel: "土壤水分",
      pixelFormData: {
        pixelDealFun: "",
      },
      multipleSelection: [],
      pdShow: false,
      stepSampling: false,
      funcOpt: [],
      isDeepSpace: false,
      depthList: [],
    };
  },
  mounted() {
    cu.initCesium("cesiumView");
    cu.handleClick();
    cu.addlayer(this.geoWorkSpace, this.geoLayerName);
    let gp = this.geoLayerPos;
    cu.flyToLayerRect(gp[0], gp[1], gp[2], gp[3]);
  },
  created() {
    this.funcOpt = this.configration.funcOpt;
    this.getSplData();
    this.initParam();
  },
  methods: {
    handleStepSampling(newVal) {
      this.stepSampling = newVal;
    },
    handleDepthList(newVal) {
      this.depthList = newVal;
    },
    editDeepSpace() {
      this.stepSampling = true;
    },
    initParam() {
      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;
      }
    },
    pickValue() {
      cu.handleClick();
    },
    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.getSplData();
        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(self.allSampleData));
        ssForm.append("stepType", Number(hierarchyVal));
        ssForm.append("orderID", self.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();
            self.$message.error("当前分层设置返回列表为空");
            return false;
          } else {
            const dl = [];
            for (let i in res) {
              const ri = res[i];
              for (let j in ri) {
                ri[j]["hierarchicalIdentification"] = i;
                dl.push(ri[j]);
              }
            }
            self.multipleSelection = self.simpleData = dl;
            self.$refs.multipleTable.toggleAllSelection();
            cu.removePoint();
            for (let i in dl) {
              cu.addPoint(dl[i].lng, dl[i].lat, 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) {
            let sri = self.allSampleData[res[i]];
            sri["hierarchicalIdentification"] = "0";
            dl.push(sri);
          }
          self.multipleSelection = self.simpleData = dl;
          self.$refs.multipleTable.toggleAllSelection();
          cu.removePoint();
          for (let i in dl) {
            cu.addPoint(dl[i].lng, dl[i].lat, 10);
          }
        });
      }
    },
    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) {
          cu.addPoint(val[i].lng, val[i].lat, 10);
        }
      }
      this.multipleSelection = val;
    },
    getSplData() {
      getSamplesList(this.orderId).then((res) => {
        if (res.code == 200) {
          let rd = res.data.list;
          if (rd.length > 0) {
            for (const i in rd) {
              // 添加默认样本分层标识
              rd[i]["hierarchicalIdentification"] = "0";
            }
            this.multipleSelection = this.allSampleData = this.simpleData = rd;
            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 = this.simpleForm.total = rd.length;
            this.smLabel = this.simpleData[0].productSubTypeName;
          }
        }
      });
    },
    deleteSelected(index, simpleData) {
      simpleData.splice(index, 1);
    },
  },
  computed: {
    globalSampleFun: function () {
      return this.$store.state.sampleFun;
    },
    globalPixelFun: function () {
      return this.$store.state.pixelFun;
    },
  },
};
</script>

<style scoped lang="less">
.soilMositure {
  margin-top: 10px;
  margin-bottom: 10px;
}
.smBodyLeft {
  width: 56%;
  height: 570px;
  float: left;
  margin-right: 4px;
}
.smBodyRight {
  width: calc(44% - 4px);
  height: 570px;
  background-color: white;
  float: left;
  margin-bottom: 10px;
}
.smps {
  height: 570px;
  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;
}
.block .pagination-container {
  padding: 0px;
  margin-top: 6px;
  text-align: center;
}

.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;
}
.sp3 {
  position: relative;
  top: -13px;
  margin-left: 10px;
}
// 分层抽样弹出框设置
/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>