新增断面仪页

src/views/cross/cross-add.vue

@@ -0,0 +1,320 @@
+<template>
+    <hc-new-dialog 
+        v-model="editModal" 
+        is-table 
+        :title="editModalTitle" 
+        widths="85rem" 
+        :loading="confirmLoad" 
+        @close="closeModal" 
+        @save="confirmLink"
+    >
+        <el-form 
+            ref="formRef" 
+            :model="formData"
+            :disabled="formDisabled"
+        >
+            <!-- 测量者信息 -->
+            <div class="section-title">
+                <!-- 左侧蓝色圆点标识 -->
+                <div class="title-dot" />
+                <!-- 标题文本 -->
+                <div class="title-text">测量者信息</div>
+            </div>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="隧道名称" prop="channelName">
+                        <el-input v-model="formData.channelName" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="测量时间" prop="date">
+                        <el-date-picker
+                            v-model="formData.date"
+                            style="width: 100%;"
+                            type="date"
+                            placeholder="请选择"
+                            value-format="YYYY-MM-DD HH:mm:ss"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="测量者" prop="userName">
+                        <el-input v-model="formData.userName" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 基础数据 -->
+            <div class="section-title">
+                <!-- 左侧蓝色圆点标识 -->
+                <div class="title-dot" />
+                <!-- 标题文本 -->
+                <div class="title-text">基础数据</div>
+            </div>
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="仪器高度" prop="deviceHeight">
+                        <ElInput v-model="formData.deviceHeight" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="方向偏移量(X)" prop="x0">
+                        <ElInput v-model="formData.x0" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="方向偏移量(Y)" prop="z0">
+                        <ElInput v-model="formData.z0" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 标准断面 -->
+            <div class="section-title">
+                <!-- 左侧蓝色圆点标识 -->
+                <div class="title-dot" />
+                <!-- 标题文本 -->
+                <div class="title-text">标准断面</div>
+            </div>
+            <el-row v-for="(eleItem, eleIndex) in formData.sectionBeans" :key="eleIndex" :gutter="20">
+                <el-col :span="4">
+                    <el-form-item label="方向" prop="direction">
+                        <!-- <ElInput v-model="eleItem.direction" placeholder="请输入" /> -->
+                        <el-select 
+                            v-model="eleItem.direction" 
+                            size="small" 
+                            style="width: 100%"
+                        >
+                            <el-option label="顺时针" value="true" />
+                            <el-option label="逆时针" value="false" />
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="起角" prop="startAngle">
+                        <ElInput v-model="eleItem.startAngle" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="终角" prop="endAngle">
+                        <ElInput v-model="eleItem.endAngle" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="半径" prop="radius">
+                        <ElInput v-model="eleItem.radius" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="圆心(X)" prop="x">
+                        <ElInput v-model="eleItem.x" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="圆心(Z)" prop="y">
+                        <ElInput v-model="eleItem.y" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 测量点数组 -->
+            <div class="section-title">
+                <!-- 左侧蓝色圆点标识 -->
+                <div class="title-dot" />
+                <!-- 标题文本 -->
+                <div class="title-text">测量点数组</div>
+            </div>
+        
+            <HcTable is-new :column="tableColumn" :datas="formData.data">
+                <template #angle="{ row }">
+                    <el-input v-model="row.angle" size="small" />
+                </template>
+                <template #dist="{ row }">
+                    <el-input v-model="row.dist" size="small" />
+                </template>
+                <template #x="{ row }">
+                    <el-input v-model="row.x" size="small" />
+                </template>
+                <template #z="{ row }">
+                    <el-input v-model="row.z" size="small" />
+                </template>
+                <template #backBreak="{ row }">
+                    <el-input v-model="row.backBreak" size="small" />
+                </template>
+            </HcTable>
+        </el-form>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { defineModel, onMounted, ref, watch } from 'vue'
+import { getObjValue } from 'js-fast-way'
+import { getDictionaryData } from '~uti/tools'
+import crossApi from '~api/cross/cross'
+
+const props = defineProps({
+    formDisabled: {
+        type: Boolean,
+        default: false,
+    },
+    rowId: {
+        type: String,
+        default: '',
+    },
+
+ 
+})
+const emit = defineEmits(['save'])
+const formDisabled = ref(props.formDisabled)
+const rowId = ref(props.rowId)
+// 双向绑定弹窗显示状态
+const editModal = defineModel('modelValue', {
+  default: false,
+})
+const editModalTitle = ref('编辑')
+
+watch(() => props.formDisabled, (val) => {
+   
+  formDisabled.value = val
+  editModalTitle.value = val ? '查看详情' : '编辑'
+})
+watch(() => props.rowId, (val) => {
+  rowId.value = val
+  if (val) {
+  
+    getOneDetail(val)
+  }
+})
+const tasksStatus = ref([
+   
+])
+const getTasksStatusOptions = async () => {
+    tasksStatus.value = await getDictionaryData('q_profiler_back_break', true)
+
+    tasksStatus.value.forEach(item => {
+        item.value = String(item.value) 
+
+    })
+    
+
+    
+}
+// 监听弹窗显示状态，每次打开时加载选项
+watch(editModal, (newVal) => {
+  if (newVal) { // 当弹窗被打开时
+    // getTasksStatusOptions()
+  }
+})
+const getOneDetail = async (id)=>{
+    confirmLoad.value = true
+        const { error, code, data } = await crossApi.getOne({
+       id,
+
+    })
+    //判断状态
+    confirmLoad.value = false
+    if (!error && code === 200) {
+        console.log(data, '详情')
+        formData.value = getObjValue(data)
+        const { sectionBeans } = data
+        if (sectionBeans.length === 0) {
+            formData.value.sectionBeans = [{}]
+        }
+        
+    } else {
+      formData.value = {}
+       
+    }
+
+}
+// 表单引用
+const formRef = ref(null)
+// 加载状态
+const confirmLoad = ref(false)
+
+// 表单数据结构
+const formData = ref({
+  channelName: '',
+  date: '',
+  userName: '',
+  deviceHeight: '',
+  x0: '',
+  z0: '',
+  direction: '',
+  startAngle: '',
+  endAngle: '',
+  radius: '',
+  x: '',
+  z: '',
+  data: [
+
+
+  ],
+})
+const tableColumn = [
+    { key: 'angle', name: '测点角度' },
+    { key: 'dist', name: '距离' },
+    { key: 'x', name: 'X坐标' },
+    { key: 'z', name: 'Y坐标' },
+    { key: 'backBreak', name: '超/欠挖值' },
+   
+]
+// 添加新的测量点
+
+
+// 关闭弹窗
+const closeModal = () => {
+  editModal.value = false
+}
+
+// 确认提交
+const confirmLink = async () => {
+  // 表单验证
+  if (formRef.value) {
+    const valid = await formRef.value.validate()
+    if (!valid) return
+  }
+
+
+  confirmLoad.value = true
+  
+  // 检查sectionBeans是否为[{}]
+  if (formData.value.sectionBeans && formData.value.sectionBeans.length === 1 && Object.keys(formData.value.sectionBeans[0]).length === 0) {
+    formData.value.sectionBeans = []
+  }
+
+  const { error, code, msg } = await crossApi.edit(formData.value)
+  //判断状态
+  confirmLoad.value = false
+  if (!error && code === 200) {
+    window.$message.success('保存成功')
+    closeModal()
+    emit('save')
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.section-title {
+  display: flex;
+  align-items: center;
+  /* 可根据需要调整整体边距 */
+  margin: 15px 0;
+}
+
+.title-dot {
+  width: 8px;
+  height: 20px;
+  border-radius: 20px;
+  background-color:var(--el-color-primary); /* Element UI主题蓝 */
+  margin-right: 8px; /* 圆点与文字间距 */
+}
+
+.title-text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333; /* 标题文字颜色 */
+  /* 可根据实际设计调整字体样式 */
+}
+</style>