SMO/src/views/system/stations/components/parametersBasic.vue

<template>
  <el-form :inline="true" :model="formInline" ref="formRef" :rules="rules" class="form-inline" label-position="top">
    <div style="display: flex;flex-direction: column;">
      <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
        <div class="disposition-title">基本参数</div>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="部别" prop="division" style="width: 200px">
              <el-input v-model="selectData.as_depart" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="台站名称" prop="name" style="width: 200px">
              <el-input v-model="selectData.as_name" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="站号" prop="numberStation" style="width: 200px">
              <el-input v-model="selectData.as_code" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="地图级别" prop="level" style="width: 200px">
              <el-select v-model="selectData.map_level" disabled>
                <el-option label="1" :value="0"></el-option>
                <el-option label="2" :value="1"></el-option>
                <el-option label="3" :value="2"></el-option>
                <el-option label="4" :value="3"></el-option>
                <el-option label="5" :value="4"></el-option>
                <el-option label="6" :value="5"></el-option>
                <el-option label="7" :value="6"></el-option>
                <el-option label="8" :value="7"></el-option>
                <el-option label="9" :value="8"></el-option>
                <el-option label="10" :value="9"></el-option>
                <el-option label="11" :value="10"></el-option>
                <el-option label="12" :value="11"></el-option>
                <el-option label="13" :value="12"></el-option>
                <el-option label="14" :value="13"></el-option>
                <el-option label="15" :value="14"></el-option>
                <el-option label="16" :value="15"></el-option>
                <el-option label="17" :value="16"></el-option>
                <el-option label="18" :value="17"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属基地" prop="base" style="width: 200px">
              <el-input v-model="selectData.as_base" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="所属旅" prop="brigade" style="width: 200px">
              <el-input v-model="selectData.as_meteoro" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="架设方式" prop="methodErection" style="width: 200px">
              <el-select v-model="selectData.install_type" disabled>
                <el-option label="业务站" :value="0"></el-option>
                <el-option label="无人站" :value="1"></el-option>
                <el-option label="梯度站" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="上传间隔" prop="interval" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-select v-model="selectData.update_space" disabled style="width: 180px">
                  <el-option label="1" :value="1"></el-option>
                  <el-option label="5" :value="5"></el-option>
                  <el-option label="10" :value="10"></el-option>
                  <el-option label="60" :value="60"></el-option>
                  <el-option label="0" :value="0"></el-option>
                </el-select>
                <span style="padding-left: 10px">分</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="省" prop="provinces" style="width: 200px">
              <el-input v-model="selectData.as_province" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="市县" prop="cities" style="width: 200px">
              <el-input v-model="selectData.as_city" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="区镇" prop="districts" style="width: 200px">
              <el-input v-model="selectData.as_area" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="乡镇" prop="townships" style="width: 200px">
              <el-input v-model="selectData.as_address" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="相对县城距离" prop="interval" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectData.county_dist" disabled style="width: 160px"></el-input>
                <span style="padding-left: 10px">公里</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="相对县城方向" prop="direction" style="width: 200px">
              <el-select v-model="selectData.county_pos" disabled>
                <el-option label="东方" :value="0"></el-option>
                <el-option label="南方" :value="1"></el-option>
                <el-option label="西方" :value="2"></el-option>
                <el-option label="北方"  :value="3"></el-option>
                <el-option label="东南方" :value="4"></el-option>
                <el-option label="东北方" :value="5"></el-option>
                <el-option label="东北方" :value="6"></el-option>
                <el-option label="西北方" :value="7"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="经度" prop="longitude" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectData.as_lon" disabled></el-input>
<!--                <el-select v-model="formInline.longitude2" placeholder="" style="width: 60px;margin-left: 10px">-->
<!--                  <el-option label="E" value="E"></el-option>-->
<!--                  <el-option label="W" value="W"></el-option>-->
<!--                </el-select>-->
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="纬度" prop="latitude" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectData.as_lat" disabled></el-input>
<!--                <el-select v-model="formInline.latitude2" placeholder=""  style="width: 60px;margin-left: 10px">-->
<!--                  <el-option label="N" value="N"></el-option>-->
<!--                  <el-option label="S" value="S"></el-option>-->
<!--                </el-select>-->
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="观测场海拔高度" prop="fieldElevation" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectData.observe_height" disabled style="width: 180px"></el-input>
                <span style="padding-left: 10px">米</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="气压传感器海拔高度" prop="sensorElevation" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectData.pressure_height" disabled  style="width: 180px"></el-input>
                <span style="padding-left: 10px">米</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="测风器距地高度" prop="heightAnmometers" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectData.tower_height" disabled style="width: 180px"></el-input>
                <span style="padding-left: 10px">米</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="建站日期" prop="buildWebsiteTime" style="width: 200px">
              <el-date-picker
                disabled
                v-model="selectData.build_time"
                type="date"
                placeholder="请选择"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="观测组长" prop="leader" style="width: 200px">
              <el-input v-model="selectData.check_leader" disabled style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="台长" prop="drector" style="width: 200px">
              <el-input v-model="selectData.station_leader" disabled style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="预审员" prop="preExaminer" style="width: 200px">
              <el-input v-model="selectData.as_auditor" disabled style="width: 180px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="授时许可" prop="grantPermission" style="width: 200px">
              <el-select v-model="selectData.set_time" disabled>
                <el-option label="不准授时" :value="0"></el-option>
                <el-option label="允许授时" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="观测方式" prop="modeObservation" style="width: 200px">
              <el-select v-model="selectData.view_mode" disabled>
                <el-option label="人工" :value="0"></el-option>
                <el-option label="自动" :value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="观测次数" prop="numberObservation" style="width: 200px">
              <div  style="display:flex;align-items: center">
                <el-input v-model="selectedItems.length" style="width: 180px" disabled></el-input>
                <span style="padding-left: 10px">次</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="" prop="modeObservation" style="width: 200px">
              <div style="display: flex;align-items: center">
                <span>观测时次</span>
                <el-checkbox v-model="allTime" style="margin-left: 10px" label="全选" disabled/>
              </div>
              <sCheckbox style="margin-top: 5px" :data="selectedItemData" :data2="selectedItems" @update:data2="updateSelectedItems"></sCheckbox>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="disposition-title">通信设置</div>
        <el-row :gutter="20">
          <el-col :span="20">
            <div style="display: flex;align-items: center;margin-bottom: 5px">
              <span>主通信</span>
              <el-checkbox v-model="formInline.enableCorrespondence" style="margin-left: 10px" label="启用从通信" />
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="通信方式" prop="methods" style="width: 200px">
              <el-select v-model="formInline.methods">
                <el-option label="2G" value="2"></el-option>
                <el-option label="3G" value="3"></el-option>
                <el-option label="4G" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="传输协议" prop="agreement" style="width: 200px">
              <el-select v-model="formInline.agreement">
                <el-option label="TCP+DDP" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="SIM卡号" prop="sim" style="width: 200px">
              <el-input v-model="formInline.sim"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信模块ID" prop="modelId" style="width: 200px">
              <el-input v-model="formInline.modelId"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="端口号" prop="port" style="width: 200px">
              <el-input v-model="formInline.port"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信模式" prop="communicationMode" style="width: 200px">
              <el-select v-model="formInline.communicationMode">
                <el-option label="主动+补发" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="" prop="modeObservation" style="width: 200px">
              <div style="display: flex;align-items: center">
                <span>命令设置</span>
                <el-button type="primary" plain style="margin-left: 10px">设置命令</el-button>
              </div>
            </el-form-item>
            <!-- 表格主体 -->
            <div class="table-box" style="width:920px;">
            <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
              <template v-for="item in columns" :key="item">
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                  <template #default="scope"></template>
                </el-table-column>
              </template>

              <!-- 无数据 -->
              <template #empty>
                <div class="table-empty">
                  <slot name="empty">
                    <div>暂无数据</div>
                  </slot>
                </div>
              </template>
            </el-table>
            </div>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="20">
            <div style="display: flex;align-items: center;margin-bottom: 5px;margin-top: 20px">
              <span>从通信</span>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item label="通信方式" prop="methods" style="width: 200px">
              <el-select v-model="formInline.methods">
                <el-option label="串口" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="串口号" prop="agreement" style="width: 200px">
              <el-select v-model="formInline.agreement">
                <el-option label="/dev/ttyAMAO" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信参数" prop="agreement" style="width: 200px">
              <el-select v-model="formInline.agreement">
                <el-option label="9600,N8,1" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="通信模式" prop="communicationMode" style="width: 200px">
              <el-select v-model="formInline.communicationMode">
                <el-option label="主动+补发" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20">
            <el-form-item label="" prop="modeObservation" style="width: 200px">
              <div style="display: flex;align-items: center">
                <span>命令设置</span>
                <el-button type="primary" plain style="margin-left: 10px">设置命令</el-button>
              </div>
            </el-form-item>
            <!-- 表格主体 -->
            <div class="table-box" style="width:920px;">
              <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small">
                <template v-for="item in columns" :key="item">
                  <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
                    <template #default="scope"></template>
                  </el-table-column>
                </template>

                <!-- 无数据 -->
                <template #empty>
                  <div class="table-empty">
                    <slot name="empty">
                      <div>暂无数据</div>
                    </slot>
                  </div>
                </template>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="disposition-bottom">
        <el-button > 取消 </el-button>
        <el-button type="primary"> 下一步 </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup lang="tsx">
import sCheckbox from "@/components/SCheckbox/index.vue"
import {defineProps, onMounted, reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
import {getYasaverage, getYascomm} from "@/api/modules/allData";
const props = defineProps<{
  selectData?: {};
}>();
const formRef = ref<any>();
const formInline = ref<any>({
  division:"",
  name:"",
  numberStation:"",
  level:"",
  base:"",
  brigade:"",
  methodErection:"",
  interval:"",
  provinces:"",
  cities:"",
  districts:"",
  townships:"",
  distance:"",
  direction:"",
  longitude: "",
  longitude2: "E",
  latitude:"",
  latitude2:"N",
  fieldElevation:"",
  sensorElevation:"",
  modeObservation:"",
  numberObservation:"",
  heightAnmometers:"",
  buildWebsiteTime:"",
  leader:"",
  drector:"",
  preExaminer:"",
  grantPermission:"",
  allTime:"",
  enableCorrespondence:"",
  methods:"",
  agreement:"",
  sim:"",
  modelId:"",
  port:"",
  communicationMode:""
})

const rules = ref<any>(
  {
    division: [{ required: true, message: "部别不能为空", trigger: "blur" }],
    name: [{ required: true, message: "台站名称不能为空", trigger: "blur" }],
    numberStation: [{ required: true, message: "站号不能为空", trigger: "blur" }],
    base: [{ required: true, message: "所属基地不能为空", trigger: "blur" }],
    brigade: [{ required: true, message: "所属旅不能为空", trigger: "blur" }],
    methodErection: [{ required: true, message: "架设方式不能为空", trigger: "blur" }],
    provinces: [{ required: true, message: "省不能为空", trigger: "blur" }],
    cities: [{ required: true, message: "市县不能为空", trigger: "blur" }],
    districts: [{ required: true, message: "区镇不能为空", trigger: "blur" }],
    townships: [{ required: true, message: "乡镇不能为空", trigger: "blur" }],
    distance: [{ required: true, message: "相对县城距离不能为空", trigger: "blur" }],
    longitude: [{ required: true, message: "相对县城方向不能为空", trigger: "blur" }],
    latitude: [{ required: true, message: "相对县城方向不能为空", trigger: "blur" }],
    fieldElevation: [{ required: true, message: "观测场海拔高度不能为空", trigger: "blur" }],
    sensorElevation: [{ required: true, message: "气压传感器海拔高度不能为空", trigger: "blur" }],

  }
);

/** 提交按钮 */
const submitForm = () => {
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {

    }
  });
}

const selectedItemData = ref<number[]>([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]);
const selectedItems = ref<number[]>([]);

function updateSelectedItems(newSelectedItems: number[]) {
  selectedItems.value = newSelectedItems;
}

const allTime = ref(false)

const processTableData = ref([
  {
    id: "681913747276782417",
    a: "FZSJ",
    b: "FZSJ",
    c: "观测数据",
    d: "1分钟",
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "命令名称"},
  { prop: "b", label: "命令标识符"},
  { prop: "c", label: "命令类型" },
  { prop: "d", label: "间隔时间(分钟)"}
]);

const pageable = ref<any>({
  asCode: props.selectData.as_code,
  pageNum: 1,
  pageSize: 20,
});

const primaryCommunications = ref();
const fromCommunication = ref();

const getYascommList= async ()=> {
  const {data} = await getYascomm(pageable.value);
  const averageList = data[props.selectData.as_code]
  console.log(averageList)
}

onMounted(() => {
  const observe_time = props.selectData.observe_time
  if (observe_time) {
    const timeArray = observe_time.split(';').map(item => parseInt(item, 10));
    selectedItems.value = timeArray;
    allTime.value = selectedItems.value.length===24? true:false
  }
  getYascommList()
})

console.log(props.selectData)
</script>

<style scoped>
.table-box{
  height: auto;
}
</style>