orbit-ch-web/src/components/jcfwComponents/satelliteCompute.vue

<template>
  <div class="table2-satelliteBasicCalculate ch-box satelliteCompute"
    v-if="commonFunction.getUserConfig($store.state.userOwnMenus, 102).available">
    <div v-show="$store.state.jcfwSatelliteComputeVisible" class="rt-content">
      <div class="title3-pic">
        <i class="el-icon-close" @click="$store.state.jcfwSatelliteComputeVisible = false"></i>
      </div>
      <div class="table3-area">
        <div class="table3-passway">
          <div class="table3-passway-info">
            <el-table ref="tableRef" :data="tableData" tooltip-effect="light" style="width: 100%" height="350">
              <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
              <el-table-column v-for="(col, i) in cols" :key="i" :prop="col.prop" :label="col.label"
                :sortable="col.sortable" :width="col.width" :show-overflow-tooltip="col.isTooltip" align="center"> </el-table-column>
              <el-table-column label="操作" v-if="operateConfig.operate">
                <template slot-scope="{row}">

                  <el-dropdown v-if="operateConfig.passWay" trigger="click" @command="getPasswayComputeMethod">
                    <el-button size="mini" @click="handleGetRow(row)">轨道计算<i class="el-icon-arrow-down"></i></el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-if="operateConfig.eph" command="eph">卫星星历计算</el-dropdown-item>
                      <el-dropdown-item v-if="operateConfig.subsp" command="subsp">卫星星下点计算</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>

                  <el-dropdown v-if="operateConfig.forecastStation" trigger="click" @command="getCurveComputeMethod">
                    <el-button class="operate-bnt" size="mini" @click="handleGetRow(row)">测站预报<i
                        class="el-icon-arrow-down"></i></el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item v-if="operateConfig.station" command="dmz">地面站</el-dropdown-item>
                      <el-dropdown-item v-if="operateConfig.midsatellite" command="zjwx">中继卫星</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <el-dialog title="请选择轨道计算时间" :visible.sync="passwayDialogVisible" width="450px"
          :before-close="passwayCancel">
          <div class="passwayDatePicker">
            <el-date-picker v-model="passwayDatetimeRange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
              start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '12:00:00']">
            </el-date-picker>
          </div>
          <div slot="footer">
            <el-button @click="passwayCancel">取 消</el-button>
            <el-button type="primary" @click="passwayCompute">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="" :visible.sync="curveDialogVisible" width="450px" :before-close="curveCancel">
          <div class="curveDateGather">
            <div class="curveDialogSelectStation" v-show="curveComputeMethod === 'dmz'">
              <div class="curveDialogFont">请选择地面站</div>
              <el-select v-model="selStations" placeholder="请选择" multiple collapse-tags>
                <el-option v-for="item in stationOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="curveDialogSelectMidStation" v-show="curveComputeMethod === 'zjwx'">
              <div class="curveDialogFont">请选择中继卫星</div>
              <el-select v-model="selMidStations" placeholder="请选择" multiple collapse-tags>
                <el-option v-for="item in midStationOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div style="width:50px;height:10px"></div>
            <div class="curveDialogFont">请选择测站预报计算时间</div>
            <el-date-picker v-model="curveDateTimeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始时间" end-placeholder="结束时间" :default-time="['12:00:00', '12:00:00']">
            </el-date-picker>
          </div>
          <div slot="footer">
            <el-button @click="curveCancel">取 消</el-button>
            <el-button type="primary" @click="curveConfirm">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

  </div>
</template>

<script>
import { getNewestInstance, postJcfwXLcompute, postJcfwXXDcompute, getZJWXtype, postJcfwCZYBdmzCompute, postJcfwMidSatelliteCompute } from '@/api/jcfwApi.js';
import { mapState } from 'vuex';
export default {
  name: "satelliteCompute",
  components: {},
  data() {
    return {
      operateConfig: {
        operate: true,
        passWay: true,
        forecastStation: true,
        eph: true,
        subsp: true,
        station: true,
        midsatellite: true,
      },
      cols: [
        {
          prop: 'satelliteCode',
          label: '卫星代号',
          sortable: true,
          width: 100
        },
				{
					prop: 'orbitNum',
					label: '圈号',
					sortable: false,
					width: 90
				},
        {
          prop: 'epochTime',
          label: '历元时刻',
          sortable: false,
          width: 120,
          isTooltip: true,
        },
				{
					prop: 'semiMajorAxis',
					label: "半长轴\n(m)",
					sortable: false,
					width: 100
				},
        {
          prop: 'inclination',
          label: '轨道倾角\n(°)',
          sortable: false,
          width: 100
        },
        {
          prop: 'eccentricityUse',
          label: '偏心率\n(%)',
          sortable: false,
          width: 90
        },
        {
          prop: 'raan',
          label: "升交点赤经(°)",
          sortable: false,
          width: 110,
          isTooltip: true,
        },
				{
					prop: 'argumentOfPerigee',
					label: "近地点辐角(°)",
					sortable: false,
					width: 110,
					isTooltip: true,
				},
        {
          prop: 'meanAnoMaly',
          label: "平近点角(°)",
          sortable: false,
          width: 100,
          isTooltip: true,
        },
      ],
      tableData: [],
      selRow: {},
      passwayComputeMethod: '',
      curveComputeMethod: '',
      passwayDialogVisible: false,
      passwayDatetimeRange: '',
      passwayLoading: null,
      stationOptions: [],

      curveDialogVisible: false,
      selStations: [],
      midStationOptions: [],
      selMidStations: [],
      curveDateTimeRange: '',
      CZYBLoading: null,
    };
  },
  computed: {
    // ...mapState('jcfw', ['stationNames']),
  },
  watch: {

  },
  methods: {
    handleGetRow(row) {
      this.selRow = row;
    },
    getPasswayComputeMethod(command) {
      this.passwayComputeMethod = command;
      this.passwayDialogVisible = true;
    },
    getCurveComputeMethod(command) {
      this.curveComputeMethod = command;
      this.curveDialogVisible = true;
    },
    passwayCancel() {
      this.passwayDatetimeRange = '';
      this.passwayDialogVisible = false;
    },
    passwayCompute() {
      this.passwayLoading = this.$loading({
        lock: true,
        text: "卫星轨道计算努力计算中",
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.8)'
      });
      let data = {
        satelliteCodes: [this.selRow.satelliteCode],
        startTime: this.passwayDatetimeRange[0],
        endTime: this.passwayDatetimeRange[1],
      }
      if (this.passwayComputeMethod === 'eph') {
        postJcfwXLcompute(data).then(res => {
          this.passwayLoading.close();
          this.$message.success(res.resp);
        })
      }
      if (this.passwayComputeMethod === 'subsp') {
        postJcfwXXDcompute(data).then(res => {
          this.passwayLoading.close();
          this.$message.success(res.resp);
        })
      }



      // const loading = this.$loading({
      //   lock: true,
      //   text: "卫星轨道计算努力计算中",
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0,0,0,0.8)'
      // })
      // setTimeout(() => {
      //   loading.close()
      // }, 2000)
      this.passwayCancel();
    },

    curveCancel() {
      this.selMidStations = [];
      this.curveDateTimeRange = '';
      this.selStations = [];
      this.curveDialogVisible = false;
    },
    curveConfirm() {
      if (this.curveComputeMethod === 'dmz' && this.selStations.length === 0) {
        this.$message.warning('请选择地面站！');
        return;
      }
      if (this.curveComputeMethod === 'zjwx' && this.selMidStations.length === 0) {
        this.$message.warning('请选择中继星！');
        return;
      }
      if (!this.curveDateTimeRange) {
        this.$message.warning('请选择时间！');
        return;
      }

      this.curveDialogVisible = false;
      this.CZYBLoading = this.$loading({
        lock: true,
        text: "测站预报努力计算中",
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.8)'
      });
      let data = {};
      switch (this.curveComputeMethod) {
        case 'dmz':
          data = {
            satelliteCodes: [this.selRow.satelliteCode],
            stationIds: this.selStations,
            startTime: this.curveDateTimeRange[0],
            endTime: this.curveDateTimeRange[1],
          };
          postJcfwCZYBdmzCompute(data).then(res => {
            if (res.code === 200) {
              this.$message.success(res.resp);
              this.CZYBLoading.close();
              this.curveCancel();
            }
          });
          break;
        case 'zjwx':
          data = {
            satelliteCodes: [this.selRow.satelliteCode],
            stationIds: this.selMidStations,
            startTime: this.curveDateTimeRange[0],
            endTime: this.curveDateTimeRange[1],
          };
          postJcfwMidSatelliteCompute(data).then(res => {
            if (res.code === 200) {
              this.$message.success(res.resp ? res.resp : '计算成功');
              this.CZYBLoading.close();
              this.curveCancel();
            }
          });
          break;
        default:
          break;
      }
      // console.log("测站预报收集到的用户数据：", data);
      // const loading = this.$loading({
      //   lock: true,
      //   text: "测站预报努力计算中",
      //   spinner: 'el-icon-loading',
      //   background: 'rgba(0,0,0,0.8)'
      // })
      // setTimeout(() => {
      //   loading.close()
      // }, 2000)
    },
    //查询地面站和中继卫星列表，用于测站预报选择
    getSatelliteTypes(){
      getZJWXtype({resourceType:0}).then(res => {
        if (res.code === 200) {
          this.stationOptions = [];
          res.resp.forEach(element => {
            this.stationOptions.push(
              {
                value: element.id,
                label: element.stationName,
              }
            );
          });
        }
      });
      getZJWXtype({resourceType:1}).then(res => {
        if (res.code === 200) {
          this.midStationOptions = [];
          res.resp.forEach(element => {
            this.midStationOptions.push(
              {
                value: element.id,
                label: element.stationName,
              }
            );
          });
        }
      });
    },
    initOperateConfig() {
      this.operateConfig.operate = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 1009).available || this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 1010).available;
      this.operateConfig.passWay = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 1009).available;
      this.operateConfig.forecastStation = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 1010).available;
      this.operateConfig.eph = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 10001).available;
      this.operateConfig.subsp = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 10002).available;
      this.operateConfig.station = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 10003).available;
      this.operateConfig.midsatellite = this.commonFunction.getUserConfig(this.$store.state.userOwnMenus, 10004).available;
    },
    getList() {
      getNewestInstance().then(res => {
        if (res.code === 200 && res.resp) {
          this.tableData = res.resp;
          this.tableData.forEach(item => {
            item.eccentricityUse = (parseFloat(item.eccentricity) * 100).toFixed(5);
          });
        } else {
          this.$message.warning(res.message);
        }
      })
    }
  },
  mounted() {
    this.getList();
    this.initOperateConfig();
    this.getSatelliteTypes();
  }
};
</script>

<style lang='scss' scoped>
.table2-satelliteBasicCalculate {
  width: 52%;
  margin: 0 auto;
  padding-top: 20px;

  .rt-content {
    position: absolute;
    bottom: 0;
  }
}

.title3-pic {
  width: 100%;
  height: 36px;
  background: url("@/assets/ClipImage/biaoti/weixingjichujisuan.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;

  .el-icon-close {
    cursor: pointer;
  }
}

.table3-area {
  width: 100%;
  height: calc(100% - 36px);
  margin-top: 10px;
  background: url("@/assets/ClipImage/dikuang/weixingjichujisuan.png") no-repeat;
  background-size: 100% 100%;

  /deep/ .curveDateGather {
    /deep/ .el-dialog__body {
      padding: 4px 20px 30px;
    }

    .curveDialogFont {
      font-size: 16px;
      color: #000;
      margin: 10px 0;
    }

    .curveDialogSelectStation,
    .curveDialogSelectMidStation {
      /deep/ .el-input__inner {
        border-radius: 2px;
        background-color: transparent;
        color: rgb(40, 40, 40);
        border: 1px solid rgb(140, 140, 140);
        height: 36px;
        width: 400px;
      }
    }
  }

  .change-tip {
    width: 980px;
    height: 44px;
    // background: url("@/assets/ClipImage/tubiao/guidaojisuan.png") no-repeat;
    // background-size: 100% 100%;
    padding-top: 10px;
    margin: 0px auto;

    .satellite-passway {
      margin-left: 90px;
      font-family: SourceHanSansCN-Bold;
      font-size: 16;
    }

    .inout-curve {
      margin-left: 114px;
      font-family: SourceHanSansCN-Bold;
      font-size: 16;
    }
  }

  .table3-passway {
    width: 1080px;
    height: 370px;
    margin: 0 auto;

    .table3-buttons {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;

      .passway-computemethod {
        width: 150px;
        margin-right: 20px;

        .el-icon--right {
          float: right;
          margin-right: 6px;
        }
      }
    }

    .table3-passway-info {
      width: 1080px;
      height: 370px;
    }

    .passwayDatePicker {
      /deep/ .el-dialog {
        margin-top: 35vh;
      }

      /deep/ .el-input__inner,
      .el-date-editor--datetimerange {
        height: 40px;
      }

      /deep/ .el-date-editor .el-range__icon {
        color: white;
        line-height: 24px;
      }

      /deep/ .el-date-editor .el-range-separator {
        height: 24px;
        line-height: 24px;
      }

      /deep/ .el-date-editor .el-range__close-icon {
        color: white;
        height: 32px;
      }
    }

  }

  .table3-curve {
    width: 980px;
    height: 380px;
    margin: 0 auto;

    .table3-buttons {
      height: 40px;
      line-height: 40px;
      margin-bottom: 10px;

      /deep/ .curveEarthBase-dropdown {
        // width: 110px;
        width: 150px;
        height: 32px;
        margin-right: 20px;

        .el-icon--right {
          float: right;
          margin-right: 6px;
        }
      }

      /deep/ .curveMidSatellite-dropdown {
        width: 110px;
        height: 32px;
        margin-right: 10px;

        .el-icon--right {
          float: right;
          margin-right: 6px;
        }
      }

      .curveMidSatellite-dropdownMenu {
        z-index: 1;
        width: 110px;
        // height: 310px;
        height: 224px;
        background-color: #557388;
        border-radius: 2px;
        border: solid 1px #ffffff;
        position: relative;
        // margin-left:130px;
        margin-left: 170px;
        padding-left: 6px;
        box-sizing: border-box;

        /deep/ .el-checkbox {
          font-family: 'SourceHanSansCN-Regular';
          font-size: 12px;
          color: #fff;
        }
      }
    }

    .table3-curve-info {
      width: 980px;
      height: 330px;
    }
  }
}
</style>