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

<template>
  <div class="table-box">
    <div style="display: flex;flex-direction: column;">
      <div style="flex-grow: 1;height: 66vh;overflow-y: auto;overflow-x: hidden">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-table stripe ref="tableRef" :border="true" :data="processTableData"  size="small"  @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40" align="center"/>
              <template v-for="item in columns" :key="item">
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'">
                  <template #default="scope">
                    <template v-if="item.prop === 'operation'">
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="编辑"
                        placement="top"
                      >
                        <el-button type="primary" link @click="handleUpdate">
                          <el-icon >
                            <Edit />
                          </el-icon>
                        </el-button>
                      </el-tooltip>
                    </template>
                  </template>
                </el-table-column>
              </template>

              <!-- 无数据 -->
              <template #empty>
                <div class="table-empty">
                  <slot name="empty">
                    <img src="@/assets/images/notData.png" alt="notData" />
                    <div>暂无数据</div>
                  </slot>
                </div>
              </template>
            </el-table>
          </el-col>
          <el-col :span="14">
            <div class="disposition-title" style="margin-top: 0px">其它</div>
            <div style="display: flex;align-items: center">
              <el-checkbox v-model="formInline.intervalSelected" label="风演变时间间隔【>m/s】"/>
              <el-input v-model="formInline.interval" style="width: 80px;margin-left: 5px"/>
            </div>
            <div style="display: flex;align-items: center;margin-top: 10px">
              <el-checkbox v-model="formInline.conditionSelected" label="毛发表启用条件【<℃】" />
              <el-input v-model="formInline.condition" style="width: 80px;margin-left: 16px"/>
              <div style="margin-left: 10px">系数1</div>
              <el-input v-model="formInline.condition" style="width: 80px;margin-left: 5px"/>
              <div style="margin-left: 10px">系数2</div>
              <el-input v-model="formInline.condition" style="width: 80px;margin-left: 5px"/>
              <div style="margin-left: 10px">系数3</div>
              <el-input v-model="formInline.condition" style="width: 80px;margin-left: 5px"/>
              <div style="margin-left: 10px">系数4</div>
              <el-input v-model="formInline.condition" style="width: 80px;margin-left: 5px"/>
            </div>
            <div style="display: flex;align-items: center;margin-top: 10px">
              <el-checkbox v-model="formInline.deviationSelected" label="风向传感器指北偏差" />
              <el-input  v-model="formInline.deviation" style="width: 80px;margin-left: 38px"/>
            </div>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="12">
                <el-checkbox v-model="formInline.intervalSelected" label="雷暴所在方向和去向"  />
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="formInline.intervalSelected" label="积雨云所在方向和去向" />
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 10px">
              <el-col :span="12">
                <el-checkbox v-model="formInline.intervalSelected" label="龙卷所在方向和去向"/>
              </el-col>
              <el-col :span="12">
                <el-checkbox v-model="formInline.intervalSelected" label="不大于300米低云所在的方向和去向"/>
              </el-col>
            </el-row>
            <div class="disposition-title" style="margin-top: 20px">设置干湿表型号</div>
            <el-table stripe ref="tableRef" :border="true" :data="processTableData2"  style="max-height: 315px" size="small"  @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="40" align="center"/>
              <template v-for="item in columns2" :key="item">
                <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'">
                  <template #default="scope">
                    <template v-if="item.prop === 'operation'">
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="编辑"
                        placement="top"
                      >
                        <el-button type="primary" link @click="handleUpdate">
                          <el-icon >
                            <Edit />
                          </el-icon>
                        </el-button>
                      </el-tooltip>
                    </template>
                  </template>
                </el-table-column>
              </template>

              <!-- 无数据 -->
              <template #empty>
                <div class="table-empty">
                  <slot name="empty">
                    <img src="@/assets/images/notData.png" alt="notData" />
                    <div>暂无数据</div>
                  </slot>
                </div>
              </template>
            </el-table>
          </el-col>
        </el-row>

      </div>
      <div class="disposition-bottom">
        <el-button > 取消 </el-button>
        <el-button type="primary" plain> 上一步 </el-button>
        <el-button type="primary"> 下一步 </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx">
import {reactive, ref} from "vue";
import {ColumnProps} from "@/components/ProTable/interface";
const formRef = ref<any>();
const formInline = ref<any>({
  intervalSelected: false,
  interval:'',
  deviationSelected: false,
  deviation:'',
  conditionSelected: false,
  condition:''
})
const multipleSelection = ref<[]>([])
const handleSelectionChange = (val: []) => {
  multipleSelection.value = val
}
const processTableData = ref([
  {
    a: "风向",
    b: "",
    c: ""
  },
  {
    a: "风速",
    b: "",
    c: ""
  },
  {
    a: "温度",
    b: "",
    c: ""
  },
  {
    a: "湿度",
    b: "",
    c: ""
  },
  {
    a: "气压",
    b: "",
    c: ""
  },
  {
    a: "降水",
    b: "",
    c: ""
  },
  {
    a: "云",
    b: "",
    c: ""
  },{
    a: "能见度",
    b: "",
    c: ""
  },
  {
    a: "天气现象",
    b: "",
    c: ""
  },{
    a: "积雪",
    b: "",
    c: ""
  },{
    a: "地面温度",
    b: "",
    c: ""
  },{
    a: "大气电场",
    b: "",
    c: ""
  },{
    a: "闪电",
    b: "",
    c: ""
  },{
    a: "日照",
    b: "",
    c: ""
  },{
    a: "总辐射",
    b: "",
    c: ""
  },{
    a: "光照度",
    b: "",
    c: ""
  }
]);

// 表格配置项
const columns = reactive<ColumnProps[]>([
  { prop: "a", label: "项目",width:200 },
  { prop: "b", label: "观测模式",width:150 },
  { prop: "c", label: "传感器名称" }
]);

const processTableData2 = ref([
  {
    a: "球状干湿表(自然通风速度)",
    b: "0.7947",
    c: "0.79765"
  },
  {
    a: "通风干湿表(通风速度0.8m/s)",
    b: "0.7947",
    c: "0.79765"
  },
  {
    a: "通风干湿表(通风速度0.5m/s)",
    b: "0.7947",
    c: "0.79765"
  },
  {
    a: "球状干湿表(自然通风)*",
    b: "0.7947",
    c: "0.79765"
  },
  {
    a: "柱状干湿表(自然通风)*",
    b: "0.7947",
    c: "0.79765"
  }
]);

// 表格配置项
const columns2 = reactive<ColumnProps[]>([
  { prop: "a", label: "干湿表型号"},
  { prop: "b", label: "未结冰", width:200},
  { prop: "c", label: "结冰", width:200 }
]);
</script>

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