代码提交

src/assets/images/selected.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <defs>
+    <style>.a{fill:#007aff;}.b{fill:#fff;}</style>
+  </defs><g transform="translate(9389 16754)">
+  <path class="a" d="M20,0V14a6,6,0,0,1-6,6H0Z" transform="translate(-9389 -16754)"/>
+  <path class="b" d="M5.15,9.054a.578.578,0,0,1-.407-.162L2.316,6.526a.548.548,0,0,1,0-.788.586.586,0,0,1,.809,0L5.15,7.712l4.725-4.6a.584.584,0,0,1,.809,0,.549.549,0,0,1,0,.79L5.558,8.892A.584.584,0,0,1,5.15,9.054Z" transform="translate(-9382.148 -16745.945)"/>
+</g></svg>

src/styles/common.scss

@@ -144,9 +144,9 @@
   .item-tag-active {
     cursor: pointer;
     width: 18%;
-    background-color: #F2F8FF;
+    background-color: var(--el-color-primary-light-9);
     border-radius: 8px;
-    color: #007aff;
+    color: var(--el-color-primary);
     font-size: 16px;
     text-align: center;
     padding: 15px;
@@ -159,7 +159,7 @@
     display: inline-block;
     width: 25px;
     height: 25px;
-    background-image: url("@/assets/images/selected.png");
+    background-image: url("@/assets/images/selected.svg");
     background-repeat: no-repeat;
     background-size: contain;
     position: absolute;
@@ -167,6 +167,7 @@
     bottom: 0px;
   }
 
+
   .container-box{
     padding: 18px 18px;
     margin-bottom: 15px;

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

@@ -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>

src/views/system/stations/components/verificationCertificate.vue

@@ -61,12 +61,185 @@
       <el-button type="primary"> 下一步 </el-button>
     </div>
   </div>
+  <!-- 添加或修改对话框 -->
+  <el-dialog :title="dialog.title" v-model="dialog.visible" width="800px" append-to-body>
+    <el-form ref="formRef" :model="instrumentForm" :rules="rules" label-width="110px">
+      <el-row :gutter="20">
+        <el-col :span="20">
+          <el-radio-group v-model="instrumentForm.type">
+            <el-radio-button  label="PWS" value="PWS" plain/>
+            <el-radio-button  label="PWD" value="PWD" plain/>
+          </el-radio-group>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="20" style="margin-top: 10px">
+          <el-button type="primary" plain>新增</el-button>
+          <el-button plain>删除</el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="20" style="margin-top: 10px">
+          <el-button type="primary">NA</el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="margin-top: 10px">
+        <el-col :span="12">
+          <el-form-item label="检定条件" prop="verification">
+            <el-input v-model="instrumentForm.verification"  clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="证书编号" prop="certificate">
+            <el-input v-model="instrumentForm.certificate"  clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="检定员编号" prop="inspector">
+            <el-input v-model="instrumentForm.inspector"  clearable />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="检定参数类型" prop="typeParameter" style="display: flex; align-items: center">
+            <el-radio-group v-model="instrumentForm.typeParameter">
+              <el-radio value="1" size="large">校准系数</el-radio>
+              <el-radio value="2" size="large">多点校准系数</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" v-if="instrumentForm.type==='PWD'">
+        <el-col :span="12">
+          <el-form-item label="校准系数" prop="coefficient">
+            <el-input v-model="instrumentForm.coefficient"  clearable />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <div v-if="instrumentForm.typeParameter==='2'" class="table-box" style="margin-top: 10px;height: 160px" >
+      <el-table stripe ref="tableRef" :border="true" :data="processTableData2"  size="small" >
+        <template v-for="item in columns2" :key="item">
+          <el-table-column v-bind="item" :align="item.align ?? 'left'" :reserve-selection="item.type == 'selection'" :show-overflow-tooltip="true">
+            <template v-if="item.prop === 'operation'">
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                content="删除"
+                placement="top"
+              >
+                <el-button type="primary" link >
+                  <el-icon >
+                    <Delete />
+                  </el-icon>
+                </el-button>
+              </el-tooltip>
+            </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>
+      </div>
+
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </div>
 </template>
 
 <script setup lang="tsx">
 import {reactive, ref} from "vue";
 import {ColumnProps} from "@/components/ProTable/interface";
+const formRef = ref<any>();
+const dialog = reactive<any>({
+  visible: false,
+  title: '',
+  isMode: true
+});
+
+const rules = ref<any>(
+  {
+    verification: [{ required: true, message: "检定条件不能为空", trigger: "blur" }],
+    certificate: [{ required: true, message: "证书编号不能为空", trigger: "blur" }],
+    inspector: [{ required: true, message: "检定员编号不能为空", trigger: "blur" }],
+    typeParameter: [{ required: true, message: "检定参数类型不能为空", trigger: "blur" }],
+  }
+);
+
+const initFormData = ref<any>(
+  {
+    type:'PWS',
+    verification:'',
+    certificate:'',
+    inspector:'',
+    typeParameter:'1',
+    coefficient:''
+
+  }
+);
+
+const instrumentForm = ref<any>({
+  type:'PWS',
+  verification:'',
+  certificate:'',
+  inspector:'',
+  typeParameter:'1',
+  coefficient:''
+});
+
+/** 新增按钮操作 */
+const handleAdd = () => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "新增";
+  dialog.isMode = true;
+}
+
+/** 修改按钮操作 */
+const handleUpdate = async (row?: any) => {
+  reset();
+  dialog.visible = true;
+  dialog.title = "编辑";
+  dialog.isMode = false;
+}
+
+
+/** 取消按钮 */
+const cancel = () => {
+  reset();
+  dialog.visible = false;
+}
+/** 表单重置 */
+const reset = () => {
+  instrumentForm.value = { ...initFormData };
+  console.log(instrumentForm.value)
+  formRef.value?.resetFields();
+}
+
+/** 修改密码提交按钮 */
+const submitFormPassword = () => {
+  formRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      dialog.visible = false;
+    }
+  });
+}
+
+
 
 const processTableData = ref([
   {
@@ -95,6 +268,22 @@ const columns = reactive<ColumnProps[]>([
   { prop: "operation", label: "操作", width:150,align: 'center' }
 ]);
 
+const processTableData2 = ref([
+  {
+
+  },
+  {
+
+  }
+]);
+
+// 表格配置项
+const columns2 = reactive<ColumnProps[]>([
+  { prop: "a", label: "检定值" },
+  { prop: "b", label: "修正值" },
+  { prop: "operation", label: "操作", width:150,align: 'center' }
+]);
+
 const editingRow = ref<any | null>(null);
 const editingField = ref<string | null>(null);
 const editCell = (row: any, field: string) => {

src/views/system/stations/index.vue

@@ -85,10 +85,10 @@
           <ParametersBasic></ParametersBasic>
         </el-tab-pane>
         <el-tab-pane label="观测要素">
-          <VerificationCertificate></VerificationCertificate>
+         <Translation></Translation>
         </el-tab-pane>
         <el-tab-pane label="仪器检定证">
-          仪器检定证
+          <VerificationCertificate></VerificationCertificate>
         </el-tab-pane>
         <el-tab-pane label="阈值设置">
           <Threshold></Threshold>
@@ -106,6 +106,7 @@
 
 <script setup lang="ts" name="useProTable">
 import Pagination from "@/components/ProTable/components/Pagination.vue";
+import Translation from "./components/translation.vue";
 import VerificationCertificate from "./components/verificationCertificate.vue";
 import Threshold from "./components/threshold.vue";
 import Newspapers from "./components/newspapers.vue";