断面仪页面增加

src/router/modules/base.js

@@ -227,6 +227,12 @@ export default [
                         meta: { title: '隐藏资料' },
                         component: () => import('~src/views/other/hide-data.vue'),
                     },
+                     {
+                        path: '/cross/section',
+                        name: 'cross-section',
+                        meta: { title: '断面仪' },
+                        component: () => import('~src/views/cross/section.vue'),
+                    },
                 ],
             },
         ],

src/views/cross/cross-add.vue

@@ -0,0 +1,260 @@
+<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="tunnelName">
+                        <el-input v-model="formData.tunnelName" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="隧道时间" prop="tunnelTime">
+                        <el-date-picker
+                            v-model="formData.tunnelTime"
+                            style="width: 100%;"
+                            type="date"
+                            placeholder="请选择"
+                        />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="测量者" prop="surveyor">
+                        <el-input v-model="formData.surveyor" 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="instrumentHeight">
+                        <ElInput v-model="formData.instrumentHeight" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="方向偏移量(X)" prop="offsetX">
+                        <ElInput v-model="formData.offsetX" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="方向偏移量(Y)" prop="offsetY">
+                        <ElInput v-model="formData.offsetY" 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="4">
+                    <el-form-item label="方向" prop="direction">
+                        <ElInput v-model="formData.direction" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="起角" prop="startAngle">
+                        <ElInput v-model="formData.startAngle" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="终角" prop="endAngle">
+                        <ElInput v-model="formData.endAngle" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="半径" prop="radius">
+                        <ElInput v-model="formData.radius" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="圆心(X)" prop="centerX">
+                        <ElInput v-model="formData.centerX" placeholder="请输入" />
+                    </el-form-item>
+                </el-col>
+                <el-col :span="4">
+                    <el-form-item label="圆心(Z)" prop="centerZ">
+                        <ElInput v-model="formData.centerZ" 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.measurePoints">
+                <template #angle="{ row }">
+                    <el-input v-model="row.angle" size="small" />
+                </template>
+                <template #distance="{ row }">
+                    <el-input v-model="row.distance" size="small" />
+                </template>
+                <template #x="{ row }">
+                    <el-input v-model="row.x" size="small" />
+                </template>
+                <template #y="{ row }">
+                    <el-input v-model="row.y" size="small" />
+                </template>
+                <template #status="{ row }">
+                    <el-select 
+                        v-model="row.status" 
+                        size="small" 
+                        style="width: 100%"
+                    >
+                        <el-option label="超挖" value="超挖" />
+                        <el-option label="正常" value="正常" />
+                        <el-option label="欠挖" value="欠挖" />
+                    </el-select>
+                </template>
+            </HcTable>
+        </el-form>
+    </hc-new-dialog>
+</template>
+
+<script setup>
+import { defineModel, onMounted, ref, watch } from 'vue'
+
+
+
+const props = defineProps({
+    formDisabled: {
+        type: Boolean,
+        default: false,
+    },
+
+ 
+})
+const formDisabled = ref(props.formDisabled)
+
+// 双向绑定弹窗显示状态
+const editModal = defineModel('modelValue', {
+  default: false,
+})
+const editModalTitle = ref('编辑')
+
+watch(() => props.formDisabled, (val) => {
+  formDisabled.value = val
+  editModalTitle.value = val ? '查看详情' : '编辑'
+})
+// 表单引用
+const formRef = ref(null)
+// 加载状态
+const confirmLoad = ref(false)
+
+// 表单数据结构
+const formData = ref({
+  tunnelName: '',
+  tunnelTime: '',
+  surveyor: '',
+  instrumentHeight: '',
+  offsetX: '',
+  offsetY: '',
+  direction: '',
+  startAngle: '',
+  endAngle: '',
+  radius: '',
+  centerX: '',
+  centerZ: '',
+  measurePoints: [
+    { angle: '测点角度1', distance: '10', x: '10', y: '10', status: '超挖' },
+    { angle: '测点角度2', distance: '20', x: '20', y: '20', status: '正常' },
+    { angle: '测点角度3', distance: '30', x: '30', y: '30', status: '欠挖' },
+
+  ],
+})
+const tableColumn = [
+    { key: 'angle', name: '测点角度' },
+    { key: 'distance', name: '距离' },
+    { key: 'x', name: 'X坐标' },
+    { key: 'y', name: 'Y坐标' },
+    { key: 'status', name: '超/欠挖值' },
+   
+]
+// 添加新的测量点
+
+
+// 关闭弹窗
+const closeModal = () => {
+  editModal.value = false
+}
+
+// 确认提交
+const confirmLink = async () => {
+  // 表单验证
+  if (formRef.value) {
+    const valid = await formRef.value.validate()
+    if (!valid) return
+  }
+
+  confirmLoad.value = true
+  try {
+    // 模拟提交逻辑
+    console.log('提交表单数据:', formData.value)
+    // 实际项目中这里会调用API
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    editModal.value = false
+  } catch (error) {
+    console.error('提交失败:', error)
+  } finally {
+    confirmLoad.value = false
+  }
+}
+</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>

src/views/cross/section.vue

@@ -0,0 +1,123 @@
+<!--  -->
+<template>
+    <div class="hc-page-box">
+        <HcNewCard>
+            <template #header>
+                <div class="w-32">
+                    <el-select v-model="searchForm.key1" clearable block placeholder="测量人" @change="getTableData">
+                        <el-option v-for="item in peopleType" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
+                    </el-select>
+                </div>
+                <div class="ml-3 w-42">
+                    <el-select v-model="searchForm.status" clearable block placeholder="是否超欠挖 " @change="getTableData">
+                        <el-option v-for="item in tasksStatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
+                    </el-select>
+                </div>
+                <div class="ml-3 w-64">
+                    <HcDatePicker :dates="betweenTime" clearable @change="betweenTimeUpdate" />
+                </div>
+            </template>
+            <HcTable is-new :column="tableColumn" :datas="tableData">
+                <template #action="{ row }">
+                    <el-link type="primary" @click="viewSubmit(row)">查看详情</el-link>
+                    <el-link type="warning" @click="changeRow(row)">编辑</el-link>
+                </template>
+            </HcTable>
+            <template #action>
+                <HcPages :pages="searchForm" @change="pageChange" />
+            </template>
+        </HcNewCard>
+        <!-- 编辑 -->
+        <cross-add v-model="editModal" :form-disabled="formDisabled" />
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, watch } from 'vue'
+
+import patrolApi from '~api/patrol/patrol'
+import { useAppStore } from '~src/store'
+import { getArrValue } from 'js-fast-way'
+import crossAdd from './cross-add.vue'
+const useAppState = useAppStore()
+const projectId = ref(useAppState.getProjectId)
+const contractId = ref(useAppState.contractId)
+
+const tableColumn = [
+    { key: 'key1', name: '设备型号' },
+    { key: 'planTime', name: '上传时间' },
+    { key: 'statusValue', name: '工程名称' },
+    { key: 'writeUserName', name: '测量时间' },
+    { key: 'createTime', name: '测量人' },
+    { key: 'createTime', name: '里程号' },
+    { key: 'sendUserName', name: '是否超欠挖' },
+    { key: 'action', name: '操作', width:150 },
+]
+const tableData = ref([
+    { key1: 'xx至xx高速公路-演示项（本地测试）', key2: '安全巡检', key3: '原地面检查', key4:'检查状态', key5:'需要整改', key6:'2023-09-27', key7:'2023-09-27', isType:true },
+    { key1: 'xx至xx高速公路-演示项（本地测试）', key2: '安全巡检', key3: '原地面检查', key4:'检查状态', key5:'需要整改', key6:'2023-09-27', key7:'2023-09-27', isType:false },
+    { key1: 'xx至xx高速公路-演示项（本地测试）', key2: '安全巡检', key3: '原地面检查', key4:'检查状态', key5:'需要整改', key6:'2023-09-27', key7:'2023-09-27', isType:true },
+])
+//搜索表单
+const searchForm = ref({
+    current: 1, size: 20, total: 0, key1:'', status:'', planStartTime1:'', planEndTime1:'',
+
+})
+const peopleType = ref([])
+const tasksStatus = ref([
+    { dictKey: '1', dictValue: '超挖' },
+    { dictKey: '2', dictValue: '正常' },
+     { dictKey: '2', dictValue: '欠挖' },
+])
+//日期时间被选择
+const betweenTime = ref(null)
+const betweenTimeUpdate = ({ val, arr }) => {
+    betweenTime.value = arr
+    searchForm.value.planStartTime1 = val['start']
+    searchForm.value.planEndTime1 = val['end']
+    getTableData()
+
+}
+//分页被点击
+const pageChange = ({ current, size }) => {
+    searchForm.value.current = current
+    searchForm.value.size = size
+    getTableData()
+}
+const tableLoading = ref(false)
+const getTableData = async () => {
+    tableLoading.value = true
+    const { error, code, data } = await patrolApi.page2({
+        ...searchForm.value,
+        projectId: projectId.value,
+        contractId:contractId.value,
+
+    })
+    //判断状态
+    tableLoading.value = false
+    if (!error && code === 200) {
+        tableData.value = getArrValue(data['records'])
+        searchForm.value.total = data['total'] || 0
+    } else {
+        tableData.value = []
+        searchForm.value.total = 0
+    }
+}
+
+const editModal = ref(false)//提交整改
+const formDisabled = ref(false)
+const changeRow = (row)=>{
+    editModal.value = true
+    formDisabled.value = false
+
+}
+//查看详情
+const viewSubmit = async (row)=>{
+    formDisabled.value = true
+      editModal.value = true
+
+}
+</script>
+
+<style lang='scss' scoped>
+</style>