- <template>
- <!-- 堤防备料点详情 -->
- <div class="difangbeiliaoinfo">
- <div class="dialog-detail-box">
- <div class="dialog-form-detail flex flex-r flex-wrap">
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">堤防</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.dikeName">
- {{ dialogFormDetail.dikeName }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">小计</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.subtotal">
- {{ dialogFormDetail.subtotal }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">分口</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.splitter">
- {{ dialogFormDetail.splitter }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">瓜米</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.meter">
- {{ dialogFormDetail.meter }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">片石</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.flag">
- {{ dialogFormDetail.flag }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">黄砂</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.ground">
- {{ dialogFormDetail.ground }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">黄土</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.loess">
- {{ dialogFormDetail.loess }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">桩号</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.stakeMark">
- {{ dialogFormDetail.stakeMark }}
- </div>
- </div>
-
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">权属</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.district">
- <dict-tag :options="levee_preparation_area" :value="dialogFormDetail.district" />
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">位置</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.seat">
- {{ dialogFormDetail.seat }}
- </div>
- </div>
- <div class="flex flex-r">
- <div class="detail-label flex flex-align-center">备注</div>
- <div class="detail-value flex flex-align-center" :title="dialogFormDetail.remark">
- {{ dialogFormDetail.remark }}
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script setup name="difangbeiliaoinfo">
- import { ref, reactive, onMounted } from 'vue';
- import { infoListallDFFXBL } from '@/api/MonitorAssetsOnMap';
-
- const { proxy } = getCurrentInstance();
- const { levee_preparation_area } = proxy.useDict('levee_preparation_area');
-
- const props = defineProps({
- // 数据id
- dataID: {
- type: [String, Number],
- },
- dataCode: {
- type: String,
- },
- // 默认打开tabs的key
- RefreshName: {
- type: String,
- },
- tabsType: {
- type: String,
- },
- typeName: {
- type: String,
- },
- });
- const dialogFormDetail = ref({});
-
- function getDetailBycodeAndDataid() {
- let parmas = {
- id: props.dataID,
- };
- infoListallDFFXBL(parmas).then(res => {
- // 详情接口数据不全,所以调的列表接口
- dialogFormDetail.value = res.data[0] || [];
- });
- }
-
- onMounted(() => {
- getDetailBycodeAndDataid();
- });
- </script>
- <style lang="scss" scoped>
- .difangbeiliaoinfo {
- width: 100%;
- height: 100%;
-
- .dialog-detail-box {
- width: 100%;
- height: 100%;
- display: flex;
- padding: 0 10px;
- flex-wrap: wrap;
- overflow: hidden;
- overflow-y: auto;
- font-weight: bold;
-
- .flex-r {
- min-height: 40px;
- max-height: 75px;
- }
-
- .detail-label {
- font-size: 12px;
- text-align: left;
- width: 160px;
- background: transparent;
- color: #ccefff;
- border: none;
- }
-
- .detail-value {
- font-size: 14px;
- text-align: left;
- width: calc(100% - 165px);
- align-items: center;
- background: transparent;
- color: #ccefff;
- border: none;
- align-items: center;
- overflow: hidden;
- }
-
- .ellipsis {
- width: 100%;
- display: -webkit-box;
- -webkit-line-clamp: 3; /* 显示最大行数 */
- -webkit-box-orient: vertical;
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .dialog-form-detail {
- border: none;
- }
-
- .dialog-form-detail .flex-r {
- border: none;
- }
- }
- }
- </style>