|
@@ -0,0 +1,264 @@
|
|
|
+<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>
|