2251 lines
81 KiB
Vue
2251 lines
81 KiB
Vue
<template>
|
||
<div class="foundationPit-config">
|
||
<div class="left-menu">
|
||
<div class="menu-title">
|
||
<!-- 基坑列表 -->
|
||
{{$t('message.deepFoundConfig.deepFoindList')}}
|
||
</div>
|
||
<div class="add-btn">
|
||
<!-- 新增基坑 -->
|
||
<el-button icon="el-icon-circle-plus-outline" @click="addProject">{{$t('message.deepFoundConfig.addDeepFound2')}}</el-button>
|
||
</div>
|
||
<vue-scroll style="height: calc(100% - 120px)">
|
||
<div class="menu-box" v-if="deepExcavationList.length>0">
|
||
<div class="menu-item" :class="{'active-item': activeDeep == index}" v-for="(item,index) in deepExcavationList" :key="index" @click="checkDeep(item,index)">
|
||
<div class="menu-h2">{{item.engineeringName}}</div>
|
||
<!-- 安全等级 -->
|
||
<p>{{$t('message.deepFoundConfig.saveLv')}}：{{filterLeave(item.safetyLevel)}}</p>
|
||
<!-- 完工状态 进行中 -->
|
||
<p>{{$t('message.deepFoundConfig.finishStatus')}}：<span :class="{'status-underway': item.status == 1, 'status-finish': item.status == 0}">{{$t('message.deepFoundConfig.pedding')}}</span></p>
|
||
<!-- 测点分布 -->
|
||
<el-button type="text" @click="showMap(item)">{{$t('message.deepFoundConfig.pointDistribution')}}</el-button>
|
||
<div class="actions-box">
|
||
<el-button type="text"><i class="el-icon-edit" @click="editProject(item)"></i></el-button>
|
||
<el-button type="text"><i class="el-icon-delete" @click="deleteDeepExcavation(item)"></i></el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="no-data" v-else>
|
||
<img src="@/assets/images/noData2.png" />
|
||
<!-- 暂无数据 -->
|
||
<p>{{$t('message.deepFoundConfig.noData')}}</p>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="foundationPit-content" >
|
||
<div class="foundationPit-table">
|
||
<div class="table-title">
|
||
<!-- 监测信息 -->
|
||
{{$t('message.deepFoundConfig.monitorInfo')}}
|
||
</div>
|
||
<el-table class="tables" :data="tableData" height="550">
|
||
<!-- 监测内容 -->
|
||
<el-table-column prop="monitorTypeName" :label="$t('message.deepFoundConfig.monitorContent')">
|
||
<!-- <template slot-scope="scope">
|
||
<div class="a-detail" @click="previewDetail(scope.row)">{{scope.row.projectName}}</div>
|
||
</template> -->
|
||
</el-table-column>
|
||
<!-- 测点数量 -->
|
||
<el-table-column prop="measurePointNum" :label="$t('message.deepFoundConfig.pointNum')">
|
||
<template slot-scope="scope">
|
||
<span style="color: rgba(42, 46, 63, 0.6)">{{scope.row.measurePointNum}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column :label="$t('message.deepFoundConfig.actions')">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" class="detail-btn" style="margin-right: 58px" size="small" @click="previewDetail(scope.row,1)">
|
||
<img style="margin-right: 6px;width: 12px;height: 10px" src="@/assets/images/deepFoundationPitManage/addressManger.png"/>
|
||
<!-- 测点管理 -->
|
||
{{$t('message.deepFoundConfig.pointManage')}}
|
||
</el-button>
|
||
<el-button type="text" class="detail-btn" size="small" @click="previewDetail(scope.row,2)">
|
||
<img style="margin-right: 6px;width: 12px;height: 10px" src="@/assets/images/deepFoundationPitManage/chart.png"/>
|
||
<!-- 实时数据 -->
|
||
{{$t('message.deepFoundConfig.realData')}}
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pagInfo.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pagInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="pagInfo.total"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
<!-- 添加基坑 编辑基坑-->
|
||
<el-dialog
|
||
class="dialog dialog-center"
|
||
:title="formType == 1 ? $t('message.deepFoundConfig.addDeepFound'):$t('message.deepFoundConfig.editDeepFound')"
|
||
:modal-append-to-body="false"
|
||
:visible.sync="dialogVisible"
|
||
width="55%"
|
||
@close="closeDialog"
|
||
>
|
||
<div class="dialog-content">
|
||
<vue-scroll>
|
||
<el-form
|
||
ref="form"
|
||
:model="dialogdata"
|
||
:rules="$t('message.deepFoundConfig.rules')"
|
||
label-width="136px"
|
||
size="medium"
|
||
class="dialogFormBox">
|
||
<!-- 基坑名称 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.deepFoundName')" prop="engineeringName">
|
||
<el-input
|
||
v-model="dialogdata.engineeringName"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- <el-form-item label="监测设备" prop="projectAddress">
|
||
<el-input
|
||
v-model="dialogdata.projectAddress"
|
||
placeholder=""
|
||
disabled
|
||
>
|
||
<el-button slot="append" @click="innerVisible = true">选择</el-button>
|
||
</el-input>
|
||
</el-form-item> -->
|
||
<!-- 开工日期 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.startBuilTime')" prop="startTime">
|
||
<el-date-picker
|
||
v-model="dialogdata.startTime"
|
||
type="date"
|
||
value-format="yyyy-MM-dd"
|
||
:placeholder="$t('message.deepFoundConfig.changeTime')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<!-- 完工日期 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.finishBuildTime')" prop="endTime" >
|
||
<el-date-picker
|
||
v-model="dialogdata.endTime"
|
||
value-format="yyyy-MM-dd"
|
||
type="date"
|
||
:placeholder="$t('message.deepFoundConfig.changeTime')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<!-- 安全等级 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.saveLv')" prop="safetyLevel">
|
||
<el-select v-model="dialogdata.safetyLevel" :placeholder="$t('message.deepFoundConfig.placeholderText2')">
|
||
<el-option
|
||
v-for="item in $t('message.deepFoundConfig.safeLvList')"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 基坑深度 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.deepFoundDepth')+'(m)'" prop="foundationDitchDepth" >
|
||
<el-input
|
||
v-model="dialogdata.foundationDitchDepth"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 基坑周长 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.deepFoundPerimeter')+'(m)'" prop="foundationDitchGirth" >
|
||
<el-input
|
||
v-model="dialogdata.foundationDitchGirth"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 支护形式 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.shoringType')" prop="supportPattern">
|
||
<el-input
|
||
v-model="dialogdata.supportPattern"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 监测负责人 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.monitorDutyPeople')" prop="surveyDirector">
|
||
<el-input
|
||
v-model="dialogdata.surveyDirector"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 监测人员 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.monitorPeople')" prop="surveyPersonnel">
|
||
<el-input
|
||
v-model="dialogdata.surveyPersonnel"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 当前开挖深度 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.currentDepth')+'(m)'" prop="excavationDepth" >
|
||
<el-input
|
||
v-model="dialogdata.excavationDepth"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 底板浇策时间 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.floorBuildTime')" prop="floorPourTime">
|
||
<el-date-picker
|
||
v-model="dialogdata.floorPourTime"
|
||
value-format="yyyy-MM-dd"
|
||
type="date"
|
||
:placeholder="$t('message.deepFoundConfig.floorBuildTime')">
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<!-- 监测方案 -->
|
||
<div style="display:flex;">
|
||
<el-form-item :label="$t('message.deepFoundConfig.monitorPlan')">
|
||
<el-upload
|
||
class="upload-demo"
|
||
name="files"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-remove="(file,fileList) => handleRemove(file,fileList,1)"
|
||
:multiple="false"
|
||
:on-success="(res,file) => handleSuccess(res,file,1)"
|
||
:file-list="surveySchemeList"
|
||
accept=".doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf"
|
||
>
|
||
<el-button size="medium" type="primary">
|
||
<!-- 点击上传 -->
|
||
{{$t('message.deepFoundConfig.upload')}}
|
||
</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<!-- 地勘报告 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.geologicalReport')">
|
||
<el-upload
|
||
class="upload-demo"
|
||
name="files"
|
||
:action="$store.state.UPLOADURL"
|
||
:on-remove="(file,fileList)=> handleRemove(file,fileList,2)"
|
||
:multiple="false"
|
||
:on-success="(res,file) => handleSuccess(res,file,2)"
|
||
:file-list="prospectingReportList"
|
||
accept=".doc, .docx, .xls, .xlsx, .ppt, .pptx, .pdf"
|
||
>
|
||
<el-button size="medium" type="primary">
|
||
<!-- 点击上传 -->
|
||
{{$t('message.deepFoundConfig.upload')}}
|
||
</el-button>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</div>
|
||
<div style="display:flex;">
|
||
<!-- 基坑设计图纸 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.deepFoundImg')" :style="{width: formType == 1 ? '50%':'100%'}">
|
||
<div class="img_box" v-for="(item,index) in deviseDrawingList" :key="index">
|
||
<el-image
|
||
:src="item.url"
|
||
:preview-src-list="[item.url]"
|
||
>
|
||
</el-image>
|
||
<i class="el-icon-error" @click="deviseDrawingList.splice(index,1)"></i>
|
||
</div>
|
||
<el-upload
|
||
:action="$store.state.UPLOADURL"
|
||
name="files"
|
||
style="display: inline"
|
||
list-type="picture-card"
|
||
accept=".png,.jpg,.jpeg"
|
||
:on-preview="handlePictureCardPreview"
|
||
:show-file-list="false"
|
||
:before-upload="handleBeforeUpload"
|
||
:on-remove="(file,fileList) => handleRemove(file,fileList,3)"
|
||
:on-success="(res,file) => handleSuccess(res,file,3)" :file-list="deviseDrawingList">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
<!-- 监测内容 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.monitorContent')" required v-if="formType == 1">
|
||
<!-- 全选 -->
|
||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('message.deepFoundConfig.allCheck')}}</el-checkbox>
|
||
<el-checkbox-group class="check_group" v-model="checkedContent" @change="handleCheckedCitiesChange">
|
||
<el-checkbox v-for="(item, index) in contentList" :label="item.id" :key="index">{{item.monitorTypeName}}</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</vue-scroll>
|
||
</div>
|
||
|
||
<div class="btn-box">
|
||
<!-- 确定 -->
|
||
<el-button type="primary" @click="submitForm">{{$t('message.deepFoundConfig.confirm')}}</el-button>
|
||
<!-- 取消 -->
|
||
<el-button @click="closeDialog">{{$t('message.deepFoundConfig.cancel')}}</el-button>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- <el-dialog
|
||
width="50%"
|
||
title="选择监测设备"
|
||
:visible.sync="innerVisible"
|
||
:modal-append-to-body="false">
|
||
<el-table class="tables" :data="tableData" @selection-change="handleSelectionChange">
|
||
<el-table-column
|
||
type="selection"
|
||
width="55">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="num"
|
||
label="设备编号"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="projectName"
|
||
label="设备名称"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog> -->
|
||
<el-dialog class="dialog-center" :modal-append-to-body="false" :visible.sync="dialogVisible2" width="50%" title="查看大图">
|
||
<img width="100%" :src="dialogImageUrl" alt="">
|
||
</el-dialog>
|
||
<!-- 测点管理 -->
|
||
<el-dialog
|
||
width="80%"
|
||
:title="$t('message.deepFoundConfig.pointManage')"
|
||
class="dialog-center"
|
||
:visible.sync="showDetail"
|
||
:modal-append-to-body="false"
|
||
@close="closeDetail">
|
||
<div class="dialog-content">
|
||
<div class="search-box">
|
||
<div class="search-item">
|
||
<!-- 测点编号 -->
|
||
<span class="search-label" style="margin-right: 10px">{{$t('message.deepFoundConfig.pointNo')}}</span>
|
||
<el-input v-model="devNum" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</div>
|
||
<div class="search-item">
|
||
<!-- 报警状态 -->
|
||
<span class="search-label" style="margin-right: 10px">{{$t('message.deepFoundConfig.alarmStatus')}}</span>
|
||
<el-select v-model="alarmStatus" clearable :placeholder="$t('message.deepFoundConfig.placeholderText2')">
|
||
<el-option
|
||
v-for="item in $t('message.deepFoundConfig.safeLvList')"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<!-- 查询 -->
|
||
<el-button type="primary" plain @click="selectMeasurePointList">{{$t('message.deepFoundConfig.search')}}</el-button>
|
||
<!-- 刷新 -->
|
||
<el-button type="warning" plain @click="selectMeasurePointList(1)">{{$t('message.deepFoundConfig.refresh')}}</el-button>
|
||
<!-- 新增 -->
|
||
<el-button type="primary" icon="el-icon-document-add" @click="addTestPoint">{{$t('message.deepFoundConfig.add')}}</el-button>
|
||
</div>
|
||
<el-table :data="surveyPointDetail" class="tables" height="560">
|
||
<!-- 测点编号 -->
|
||
<el-table-column prop="measurePointNumber" :label="$t('message.deepFoundConfig.pointNo')"></el-table-column>
|
||
<!-- 测点名称 -->
|
||
<el-table-column prop="measurePointName" :label="$t('message.deepFoundConfig.pointName')"></el-table-column>
|
||
<!-- 测点位置 -->
|
||
<el-table-column prop="measurePointAddr" :label="$t('message.deepFoundConfig.pointLocation')"></el-table-column>
|
||
<!-- 采集仪编号 -->
|
||
<el-table-column prop="acquisitionInstrumentNumber" :label="$t('message.deepFoundConfig.devNo')"></el-table-column>
|
||
<!-- <el-table-column label="工作状态">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.workStatus ? scope.row.workStatus == 1 ? "正常":"异常":""}}</span>
|
||
</template>
|
||
</el-table-column> -->
|
||
<!-- 报警状态 -->
|
||
<el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
|
||
<template slot-scope="scope">
|
||
<span :class="{'alarm_status1': scope.row.alarmState == '0',
|
||
'alarm_status2': scope.row.alarmState == 2,
|
||
'alarm_status3': scope.row.alarmState == 1,
|
||
'alarm_status4': scope.row.alarmState == 3}">
|
||
{{ scope.row.alarmState == '0' ? $t('message.deepFoundConfig.normal'): scope.row.alarmState == 2
|
||
? $t('message.deepFoundConfig.warning'):scope.row.alarmState == 1
|
||
? $t('message.deepFoundConfig.alarm'):scope.row.alarmState == 3
|
||
? $t('message.deepFoundConfig.control'):""}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.actions')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<!-- 详情 -->
|
||
<el-button type="text" icon="el-icon-document" @click="preViewPointData(scope.row)">{{$t('message.deepFoundConfig.details')}}</el-button>
|
||
<!-- 删除 -->
|
||
<el-button type="text" icon="el-icon-delete" style="color:#F56C6C" @click="deletePointData(scope.row)">{{$t('message.deepFoundConfig.remove')}}</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 实时数据 -->
|
||
<el-dialog
|
||
width="80%"
|
||
:title="$t('message.deepFoundConfig.realData')"
|
||
class="dialog-center"
|
||
:visible.sync="showActiveDetail"
|
||
:modal-append-to-body="false"
|
||
@close="closeActiveDetail">
|
||
<div class="dialog-content">
|
||
<div class="search-box">
|
||
<div class="search-item">
|
||
<!-- 测点编号 -->
|
||
<span class="search-label" style="margin-right: 10px">{{$t('message.deepFoundConfig.pointNo')}}</span>
|
||
<el-input v-model="devNum2" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</div>
|
||
<div class="search-item">
|
||
<!-- 报警状态 -->
|
||
<span class="search-label" style="margin-right: 10px">{{$t('message.deepFoundConfig.alarmStatus')}}</span>
|
||
<el-select v-model="alarmStatus2" clearable :placeholder="$t('message.deepFoundConfig.placeholderText2')">
|
||
<el-option
|
||
v-for="item in $t('message.deepFoundConfig.safeLvList')"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="search-item">
|
||
<!-- 采集时间 -->
|
||
<span class="search-label" style="margin-right: 10px">{{$t('message.deepFoundConfig.gatherTime')}}</span>
|
||
<!-- <el-date-picker
|
||
v-model="acquisitionTime"
|
||
type="daterange"
|
||
align="right"
|
||
unlink-panels
|
||
value-format="yyyy-MM-dd"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:picker-options="pickerOptions">
|
||
</el-date-picker> -->
|
||
<el-date-picker
|
||
v-model="acquisitionTime"
|
||
type="datetimerange"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
:range-separator="$t('message.deepFoundConfig.to')"
|
||
:start-placeholder="$t('message.deepFoundConfig.startTime')"
|
||
:end-placeholder="$t('message.deepFoundConfig.endTime')"
|
||
:default-time="['00:00:00', '23:59:59']"
|
||
:clearable="false"
|
||
align="right">
|
||
</el-date-picker>
|
||
</div>
|
||
<!-- 查询 -->
|
||
<el-button type="primary" plain @click="selectDeepExcavationCurrentData">{{$t('message.deepFoundConfig.search')}}</el-button>
|
||
</div>
|
||
<el-table :data="currentPointDetail" class="tables" height="560">
|
||
<!-- 测点编号 -->
|
||
<el-table-column prop="measuringPointSn" :label="$t('message.deepFoundConfig.pointNo')"></el-table-column>
|
||
<el-table-column v-for="(item,index) in currentTableData" :key="index" :prop="item.targetField" :label="item.targetName"></el-table-column>
|
||
<!-- 采集时间 -->
|
||
<el-table-column prop="receiveTime" :label="$t('message.deepFoundConfig.gatherTime')"></el-table-column>
|
||
<!-- 报警状态 -->
|
||
<el-table-column :label="$t('message.deepFoundConfig.alarmStatus')">
|
||
<template slot-scope="scope">
|
||
<span :class="{'alarm_status1': scope.row.alarmState == '0',
|
||
'alarm_status2': scope.row.alarmState == 2,
|
||
'alarm_status3': scope.row.alarmState == 1,
|
||
'alarm_status4': scope.row.alarmState == 3}">
|
||
{{scope.row.alarmState == '0' ? $t('message.deepFoundConfig.normal'): scope.row.alarmState == 2
|
||
? $t('message.deepFoundConfig.alarm'):scope.row.alarmState == 1
|
||
? $t('message.deepFoundConfig.warning'):scope.row.alarmState == 3
|
||
? $t('message.deepFoundConfig.control'):""}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox pagerBox2"
|
||
@size-change="changeSize"
|
||
@current-change="changeCurrent"
|
||
:current-page="pagInfo2.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pagInfo2.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="pagInfo2.total"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- '详情':'新增测点' -->
|
||
<el-dialog
|
||
width="50%"
|
||
:title="isPreview ? $t('message.deepFoundConfig.details'):$t('message.deepFoundConfig.addPoint')"
|
||
class="dialog-center"
|
||
:visible.sync="showTestPoint"
|
||
:modal-append-to-body="false"
|
||
@close="closeDialog2">
|
||
<div class="dialog-content">
|
||
<div class="form-wrap">
|
||
<vue-scroll style="height: 100%;margin-bottom: 50px;">
|
||
<el-form
|
||
size="medium"
|
||
class="formBox"
|
||
:model="testPointForm"
|
||
ref="testPointForm"
|
||
label-width="120px"
|
||
:rules="$t('message.deepFoundConfig.rules2')"
|
||
>
|
||
<!-- 测点编号 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.pointNo')" prop="measurePointNumber">
|
||
<el-input :disabled="isPreview" v-model="testPointForm.measurePointNumber" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>
|
||
<!-- 测点名称 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.pointName')" prop="measurePointName">
|
||
<el-input :disabled="isPreview" v-model="testPointForm.measurePointName" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>
|
||
<!-- 测点位置 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.pointLocation')" prop="measurePointAddr">
|
||
<el-input :disabled="isPreview" v-model="testPointForm.measurePointAddr" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>
|
||
<!-- 采集仪编号 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.devNo')" prop="acquisitionInstrumentNumber">
|
||
<el-input :disabled="isPreview" v-model="testPointForm.acquisitionInstrumentNumber" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>
|
||
<!-- 传感器类型 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.devType')" prop="sensorTypeId">
|
||
<!-- <el-input v-model="testPointForm.sensorTypeId"></el-input> -->
|
||
<el-select style="width: 100%" :disabled="isPreview" v-model="testPointForm.sensorTypeId" :placeholder="$t('message.deepFoundConfig.placeholderText2')">
|
||
<el-option
|
||
v-for="item in typeOptions"
|
||
:key="item.id"
|
||
:label="item.sensorTypeName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 警情设置 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.alarmConfig')" prop="devType">
|
||
</el-form-item>
|
||
<el-table class="tables" :data="testPointData">
|
||
<!-- 对象 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.obj')"
|
||
prop="targetName"
|
||
>
|
||
</el-table-column>
|
||
<!-- 开启 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.open')"
|
||
width="100px"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-switch
|
||
:disabled="isPreview"
|
||
v-model="scope.row.openType"
|
||
:active-value="1"
|
||
:inactive-value="2"
|
||
active-color="#13ce66"
|
||
inactive-color="#9598A0">
|
||
</el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 预警 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.warning')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input type="Number" :disabled="isPreview" v-model="scope.row.warningValue" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 报警 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.alarm')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input type="Number" :disabled="isPreview" v-model="scope.row.alarmValue" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 控制 -->
|
||
<el-table-column
|
||
:label="$t('message.deepFoundConfig.control')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input type="Number" :disabled="isPreview" v-model="scope.row.controlValue" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
</vue-scroll>
|
||
<div class="btn-box" v-if="!isPreview">
|
||
<!-- 确认 -->
|
||
<el-button type="primary" icon="el-icon-circle-check" @click="addPointData">{{$t('message.deepFoundConfig.confirm')}}</el-button>
|
||
<!-- 取消 -->
|
||
<el-button icon="el-icon-circle-close" @click="closeDialog2">{{$t('message.deepFoundConfig.cancel')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 测点分布 -->
|
||
<el-dialog
|
||
width="95%"
|
||
:title="$t('message.deepFoundConfig.pointDistribution')"
|
||
class="dialog-center"
|
||
:visible.sync="showPointMap"
|
||
:modal-append-to-body="false"
|
||
@close="closePointMap">
|
||
<div class="dialog-content map-box">
|
||
<div class="map-left">
|
||
<vue-scroll>
|
||
<div class="add-btn" @click="openAddImgDialog">
|
||
<i class="el-icon-circle-plus-outline"></i>
|
||
<!-- 添加布置图 -->
|
||
<div>{{$t('message.deepFoundConfig.addLayoutImg')}}</div>
|
||
</div>
|
||
<ul>
|
||
<li v-for="(item,index) in deepImgList" :key="index" :class="{'img-active': activeImgIndex == index}">
|
||
<img :src="item.imageUrl" @click="checkImg(item,index)"/>
|
||
<div class="actions-box">
|
||
<span>{{item.planeFigureName}}</span>
|
||
<!-- 删除 -->
|
||
<el-button type="text" icon="el-icon-delete" style="color: #F56C6C" @click="deleteDeepImg(item)">{{$t('message.deepFoundConfig.remove')}}</el-button>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="map-right">
|
||
<div class="action-box" v-if="activeImgUrl">
|
||
<div v-show="!isEditPoint" class="btn-item" @click="editPoint">
|
||
<img src="@/assets/images/deepFoundationPitManage/address.png"/>
|
||
<!-- 布点 -->
|
||
{{$t('message.deepFoundConfig.stationing')}}
|
||
</div>
|
||
<div v-show="isEditPoint" class="btn-item" @click="savePoint">
|
||
<img src="@/assets/images/deepFoundationPitManage/save.png"/>
|
||
<!-- 保存 -->
|
||
{{$t('message.deepFoundConfig.save')}}
|
||
</div>
|
||
<div class="btn-item" @click="changeImgSize(1)">
|
||
<i class="el-icon-zoom-in"></i>
|
||
<!-- 放大 -->
|
||
{{$t('message.deepFoundConfig.zoomIN')}}
|
||
</div>
|
||
<div class="btn-item" @click="changeImgSize(2)">
|
||
<i class="el-icon-zoom-out"></i>
|
||
<!-- 缩小 -->
|
||
{{$t('message.deepFoundConfig.zoomOut')}}
|
||
</div>
|
||
</div>
|
||
<div ref="mapbox">
|
||
<vue-scroll style="height:780px;">
|
||
<div class="img-box" :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
|
||
<img ref="map" v-if="activeImgUrl" style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
|
||
<ul class="point-list" v-if="activeImgUrl">
|
||
<li v-for="(item,index) in pointList" :key="index" :ref="'point'+index" :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}" >
|
||
<div class="point-dialog" :class="{'right_detail': item.mapY < 110+item.detailList.length*24 || item.mapX < 108}" :style="{'display': item.showDetail ? 'block':'none'}">
|
||
<i class="el-icon-error" @click="item.showDetail = false"></i>
|
||
<div class="point-title">{{item.measurePointName}}</div>
|
||
<div class="point-content">
|
||
<p v-for="(item2,index2) in item.detailList" :key="index2">{{item2.keyName}}：{{item.currentdata[item2.key]}}</p>
|
||
<!-- 采集时间： -->
|
||
<p>{{$t('message.deepFoundConfig.gatherTime')}}：{{item.currentdata['receiveTime']}}</p>
|
||
</div>
|
||
</div>
|
||
<div class="point-dialog point-title2" :class="{'right_title': item.mapY < 47 || item.mapX < 22}" :style="{'display': item.showDetail ? 'none':'block'}" @click="item.showDetail = true">
|
||
<span>{{item.measurePointName}}</span>
|
||
</div>
|
||
<img @mousedown.prevent="move(index,$event)" @mouseup="up(index,$event)" style="width: 19px; height:29px;" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="pointFixed" ref="pointFixed" :style="{'top': pointTop + 'px','left': pointLeft + 'px','display': pointStatus}">
|
||
<img style="width: 19px; height:29px;" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加平面图 -->
|
||
<el-dialog
|
||
width="35%"
|
||
:title="$t('message.deepFoundConfig.addImg')"
|
||
class="dialog-center"
|
||
:visible.sync="showAddImg"
|
||
@close="closeAddImg"
|
||
:modal-append-to-body="false">
|
||
<div class="dialog-content" style="height: 368px">
|
||
<el-form size="medium"
|
||
class="formBox"
|
||
style="margin-bottom: 68px"
|
||
:model="testPointImgForm"
|
||
ref="testPointImgForm"
|
||
label-width="120px"
|
||
:rules="$t('message.deepFoundConfig.rules3')">
|
||
<!-- 平面图名称 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.imgName')" prop="planeFigureName">
|
||
<el-input v-model="testPointImgForm.planeFigureName" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>
|
||
<!-- 测点 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.point')" prop="pointIds">
|
||
<el-select style="width: 100%;" v-model="testPointImgForm.pointIds" multiple :placeholder="$t('message.deepFoundConfig.placeholderText2')">
|
||
<el-option
|
||
v-for="item in testPointOptions"
|
||
:key="item.id"
|
||
:label="item.measurePointName"
|
||
:value="item.id">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 示意图 -->
|
||
<el-form-item :label="$t('message.deepFoundConfig.img')" prop="fileList">
|
||
<div class="img_box" v-for="(item,index) in testPointImgForm.fileList" :key="index">
|
||
<el-image
|
||
:src="item.url"
|
||
:preview-src-list="[item.url]"
|
||
style="width: 148px;height:148px;margin-right: 20px">
|
||
</el-image>
|
||
<i class="el-icon-error" @click="testPointImgForm.fileList.splice(index,1)"></i>
|
||
</div>
|
||
<el-upload
|
||
:action="$store.state.UPLOADURL"
|
||
name="files"
|
||
style="display: inline"
|
||
list-type="picture-card"
|
||
:show-file-list="false"
|
||
:on-preview="handlePictureCardPreview"
|
||
:on-remove="(file,fileList) => handleRemove(file,fileList,4)"
|
||
:on-success="(res,file) => handleSuccess(res,file,4)"
|
||
:file-list="testPointImgForm.fileList">
|
||
<i class="el-icon-plus"></i>
|
||
</el-upload>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div class="btn-box">
|
||
<el-button type="primary" icon="el-icon-circle-check" @click="submitImgConfig">{{$t('message.deepFoundConfig.confirm')}}</el-button>
|
||
<el-button icon="el-icon-circle-close" @click="closeAddImg">{{$t('message.deepFoundConfig.cancel')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 提示 -->
|
||
<el-dialog
|
||
width="35%"
|
||
:title="$t('message.deepFoundConfig.hint')"
|
||
class="dialog-center"
|
||
:visible.sync="deleteInfo"
|
||
:modal-append-to-body="false">
|
||
<p style="font-size: 18px;display: flex;align-items:center">
|
||
<i class="el-icon-warning" style="color: #E6A23C;font-size: 28px;margin-right: 10px"></i>
|
||
<!-- 此操作将永久删除该文件, 是否继续? -->
|
||
{{$t('message.deepFoundConfig.hintContent')}}
|
||
</p>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="closeMsg(1)">{{$t('message.deepFoundConfig.cancel')}}</el-button>
|
||
<el-button type="primary" @click="checkMsg">{{$t('message.deepFoundConfig.confirm')}}</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
addDeepExcavationEngineeringApi,
|
||
editDeepExcavationEngineeringApi,
|
||
queryByIdDeepExcavationEngineeringApi,
|
||
deleteDeepExcavationEngineeringApi,
|
||
selectDeepExcavationListApi,
|
||
getDefaultMonitorTypeListApi,
|
||
selectDeepExcavationMonitorTypeListApi,
|
||
selectMeasurePointListApi,
|
||
selectDeepExcavationSensorTypeListApi,
|
||
addDeepExcavationMeasurePointApi,
|
||
deleteDeepExcavationMeasurePointApi,
|
||
selectDeepExcavationCurrentDataListApi,
|
||
selectDeepExcavationCurrentDataApi,
|
||
addDeepExcavationPlaneFigureApi,
|
||
selectDeepExcavationPlaneFigureListApi,
|
||
selectDeepExcavationPlaneFigureCoordinateApi,
|
||
selectDeepExcavationAllMeasurePointListApi,
|
||
deleteDeepExcavationPlaneFigureApi,
|
||
editDeepExcavationPlaneFigureCoordinateApi,
|
||
} from "@/assets/js/api/deepFoundationPitManage.js"
|
||
export default {
|
||
data(){
|
||
return{
|
||
deleteInfo: false,
|
||
isPreview: false,
|
||
testPointOptions:[],
|
||
rules3:{
|
||
planeFigureName: [
|
||
{ required: true, message: '请输入平面图名称', trigger: 'blur' }
|
||
],
|
||
pointIds: [
|
||
{ type: 'array', required: true, message: '请至少选择一个测点', trigger: 'change' }
|
||
],
|
||
fileList: [
|
||
{ type: 'array', required: true, message: '请上传示意图', trigger: 'blur' },
|
||
{ type: 'array', required: true, message: '请上传示意图', trigger: 'change' }
|
||
]
|
||
},
|
||
testPointImgForm:{
|
||
planeFigureName: "",
|
||
fileList: [],
|
||
pointIds: []
|
||
},
|
||
activeImgIndex: 0,
|
||
typeOptions:[],
|
||
deepImgList:[],
|
||
currentTableData:[],
|
||
activeDeep: 0,
|
||
deepExcavationList: [],
|
||
currentPointDetail:[],
|
||
pointList:[],
|
||
pointStatus: 'none',
|
||
pointTop: 0,
|
||
pointLeft: 0,
|
||
imgWidth: 0,
|
||
imgHeight: 0,
|
||
imgStartWidth: 0,
|
||
imgStartHeight: 0,
|
||
imgZoom: 1,
|
||
pointIndex: "",
|
||
showPointMap: false,
|
||
showTestPoint: false,
|
||
testPointData:[],
|
||
showDetail: false,
|
||
surveyPointDetail:[],
|
||
tableData:[],
|
||
pagInfo:{
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 1
|
||
},
|
||
pagInfo2:{
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 1
|
||
},
|
||
testPointForm:{
|
||
measurePointNumber: '',
|
||
measurePointName: '',
|
||
measurePointAddr: '',
|
||
acquisitionInstrumentNumber: '',
|
||
sensorTypeId: ''
|
||
},
|
||
dialogVisible: false,
|
||
dialogVisible2: false,
|
||
formTitle: "",
|
||
innerVisible: false,
|
||
dialogImageUrl: "",
|
||
safeLvList:[{
|
||
label: '一级',
|
||
value: 1
|
||
},{
|
||
label: '二级',
|
||
value: 2
|
||
},{
|
||
label: '三级',
|
||
value: 3
|
||
},{
|
||
label: '四级',
|
||
value: 4
|
||
}],
|
||
rules:{
|
||
engineeringName: [
|
||
{ required: true, message: '请输入基坑名称', trigger: 'blur' }
|
||
],
|
||
startTime:[
|
||
{ type: 'string', required: true, message: '请选择开工日期', trigger: 'change' }
|
||
],
|
||
endTime:[
|
||
{ type: 'string', required: true, message: '请选择完工日期', trigger: 'change' }
|
||
],
|
||
foundationDitchDepth: [
|
||
{ required: true, message: '请输入基坑深度', trigger: 'blur' }
|
||
],
|
||
foundationDitchGirth: [
|
||
{ required: true, message: '请输入基坑周长', trigger: 'blur' }
|
||
],
|
||
excavationDepth: [
|
||
{ required: true, message: '请输入开挖深度', trigger: 'blur' }
|
||
],
|
||
},
|
||
rules2:{
|
||
measurePointNumber: [
|
||
{ required: true, message: '请输入测点编号', trigger: 'blur' }
|
||
],
|
||
measurePointName: [
|
||
{ required: true, message: '请输入测点名称', trigger: 'blur' }
|
||
],
|
||
measurePointAddr: [
|
||
{ required: true, message: '请输入测点位置', trigger: 'blur' }
|
||
],
|
||
acquisitionInstrumentNumber: [
|
||
{ required: true, message: '请输入采集仪编号', trigger: 'blur' }
|
||
],
|
||
sensorTypeId: [
|
||
{ required: true, message: '请选择传感器类型', trigger: 'change' }
|
||
],
|
||
},
|
||
dialogdata:{
|
||
engineeringName: "",
|
||
// projectAddress: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
safetyLevel: 1,
|
||
foundationDitchDepth: "",
|
||
foundationDitchGirth: "",
|
||
supportPattern: "",
|
||
surveyDirector: "",
|
||
surveyPersonnel: "",
|
||
excavationDepth: "",
|
||
floorPourTime: ""
|
||
},
|
||
// fileList:[],
|
||
deviseDrawingList:[],
|
||
surveySchemeList:[],
|
||
prospectingReportList: [],
|
||
dialogTitle:"监测项管理",
|
||
checkAll: false,
|
||
isIndeterminate: false,
|
||
checkedContent: [],
|
||
contentList:[],
|
||
devNum: "",
|
||
alarmStatus: "",
|
||
statusList: [{
|
||
value: '0',
|
||
label: '正常'
|
||
},{
|
||
value: '1',
|
||
label: '预警'
|
||
},{
|
||
value: '2',
|
||
label: '报警'
|
||
},{
|
||
value: '3',
|
||
label: '控制'
|
||
}],
|
||
showActiveDetail: false,
|
||
devNum2: "",
|
||
alarmStatus2: "",
|
||
acquisitionTime: [],
|
||
startX: '',
|
||
startY: '',
|
||
ratio: 1,
|
||
projectSn: '',
|
||
formType: '', // 1.新增基坑 2.编辑基坑
|
||
editId: "",
|
||
monitorTypeId: "",
|
||
deepExcavationId: "",
|
||
activeImgUrl: "",
|
||
showAddImg: false,
|
||
isEditPoint: false,
|
||
removeData: '',
|
||
removeType: ''
|
||
}
|
||
},
|
||
created(){
|
||
this.projectSn = this.$store.state.projectSn;
|
||
this.getDefaultMonitorTypeList()
|
||
this.selectDeepExcavationList()
|
||
this.selectDeepExcavationSensorTypeList()
|
||
},
|
||
mounted(){
|
||
},
|
||
methods:{
|
||
checkMsg(){
|
||
// 1、布置图 2、测点
|
||
if(this.removeType == 1){
|
||
deleteDeepExcavationPlaneFigureApi({id: this.removeData.id}).then(res=>{
|
||
if(res.code == 200){
|
||
// 删除成功！
|
||
this.$message.success(this.$t('message.deepFoundConfig.removeSuccess'))
|
||
this.activeImgUrl = ''
|
||
this.pointList = []
|
||
this.selectDeepExcavationPlaneFigureList()
|
||
}
|
||
})
|
||
} else if(this.removeType == 2){
|
||
deleteDeepExcavationMeasurePointApi({id: this.removeData.id}).then(res=>{
|
||
if(res.code == 200 && res.success){
|
||
this.$message.success(this.$t('message.deepFoundConfig.removeSuccess'))
|
||
this.selectMeasurePointList()
|
||
}
|
||
})
|
||
}
|
||
this.deleteInfo = false
|
||
},
|
||
closeMsg(val){
|
||
if(val == 1){
|
||
// 已取消删除
|
||
this.$message.info(this.$t('message.deepFoundConfig.cancelRemove'))
|
||
}
|
||
this.removeType = ''
|
||
this.removeData = ''
|
||
this.deleteInfo = false
|
||
},
|
||
closeActiveDetail(){
|
||
this.devNum2 = ""
|
||
this.alarmStatus2 = ""
|
||
this.showActiveDetail = false
|
||
this.selectDeepExcavationMonitorTypeList()
|
||
},
|
||
closeDetail(){
|
||
this.selectDeepExcavationMonitorTypeList()
|
||
this.devNum = ""
|
||
this.alarmStatus = ""
|
||
this.showDetail = false
|
||
},
|
||
closePointMap(){
|
||
this.activeImgUrl = ''
|
||
this.showPointMap = false
|
||
},
|
||
filterLeave(val){
|
||
console.log(val)
|
||
let text = ''
|
||
// 一级 二级 三级 四级 五级
|
||
switch(val){
|
||
case '1':
|
||
text = this.$t('message.deepFoundConfig.lv1');
|
||
break;
|
||
case '2':
|
||
text = this.$t('message.deepFoundConfig.lv2');
|
||
break;
|
||
case '3':
|
||
text = this.$t('message.deepFoundConfig.lv3');
|
||
break;
|
||
case '4':
|
||
text = this.$t('message.deepFoundConfig.lv4');
|
||
break;
|
||
case '5':
|
||
text = this.$t('message.deepFoundConfig.lv5');
|
||
break;
|
||
}
|
||
console.log(text)
|
||
return text
|
||
},
|
||
editPoint(){
|
||
this.isEditPoint = true
|
||
// 成功 请开始移动点位！
|
||
this.$notify({
|
||
title: this.$t('message.deepFoundConfig.success'),
|
||
message: this.$t('message.deepFoundConfig.notifyMsg'),
|
||
type: 'success'
|
||
});
|
||
},
|
||
savePoint(){
|
||
console.log(this.pointList)
|
||
let arr = []
|
||
this.pointList.forEach(item=>{
|
||
arr.push({
|
||
id: item.id,
|
||
mapX: item.mapX,
|
||
mapY: item.mapY,
|
||
pointId: item.pointId,
|
||
planeFigureId: item.planeFigureId
|
||
})
|
||
})
|
||
// let data ={
|
||
// list: arr
|
||
// }
|
||
editDeepExcavationPlaneFigureCoordinateApi(arr).then(res=>{
|
||
console.log(res)
|
||
if(res.code && res.success){
|
||
// 保存成功！
|
||
this.$message.success(this.$t('message.deepFoundConfig.saveSuccess'))
|
||
}
|
||
})
|
||
this.isEditPoint = false
|
||
},
|
||
// 关闭添加图片弹窗
|
||
closeAddImg(){
|
||
this.showAddImg = false
|
||
this.testPointImgForm = {
|
||
planeFigureName: "",
|
||
fileList: [],
|
||
pointIds: []
|
||
}
|
||
this.$refs['testPointImgForm'].resetFields()
|
||
},
|
||
// 删除布置图
|
||
deleteDeepImg(val){
|
||
// deleteDeepExcavationPlaneFigureApi({id: val.id}).then(res=>{
|
||
// if(res.code == 200){
|
||
// this.$message.success('删除成功！')
|
||
// this.activeImgUrl = ''
|
||
// this.pointList = []
|
||
// this.selectDeepExcavationPlaneFigureList()
|
||
// }
|
||
// })
|
||
this.removeType = 1
|
||
this.removeData = val
|
||
this.deleteInfo = true
|
||
},
|
||
submitImgConfig(){
|
||
this.$refs['testPointImgForm'].validate((valid) => {
|
||
if(valid){
|
||
let data = {
|
||
planeFigureName: this.testPointImgForm.planeFigureName,
|
||
pointIds: this.testPointImgForm.pointIds.join(','),
|
||
imageUrl: this.testPointImgForm.fileList[0].url,
|
||
projectSn: this.projectSn,
|
||
deepExcavationId: this.deepExcavationId
|
||
}
|
||
console.log(data)
|
||
addDeepExcavationPlaneFigureApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message.success(this.$t('message.deepFoundConfig.addSuccess'))
|
||
this.selectDeepExcavationPlaneFigureList()
|
||
this.showAddImg = false
|
||
}
|
||
})
|
||
|
||
}
|
||
})
|
||
},
|
||
// 列表查询所有测点
|
||
selectDeepExcavationAllMeasurePointList(){
|
||
selectDeepExcavationAllMeasurePointListApi({
|
||
deepExcavationId: this.deepExcavationId
|
||
}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.testPointOptions = res.result
|
||
}
|
||
})
|
||
},
|
||
openAddImgDialog(){
|
||
this.showAddImg = true
|
||
this.selectDeepExcavationAllMeasurePointList()
|
||
},
|
||
// 获取点位位置信息
|
||
selectDeepExcavationPlaneFigureCoordinate(val){
|
||
selectDeepExcavationPlaneFigureCoordinateApi({
|
||
planeFigureId: val.id,
|
||
deepExcavationId: val.deepExcavationId
|
||
}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
res.result.forEach(item=>{
|
||
item.status = 'block'
|
||
item.transform = '',
|
||
item.showDetail = false
|
||
let arr = []
|
||
let obj = JSON.parse(item.dataField)
|
||
for(let key in obj){
|
||
arr.push({
|
||
key: key,
|
||
keyName: obj[key]
|
||
})
|
||
}
|
||
item.detailList = arr
|
||
})
|
||
this.pointList = res.result
|
||
console.log(this.pointList)
|
||
}
|
||
})
|
||
},
|
||
// 切换平面图
|
||
checkImg(val,index){
|
||
console.log(val)
|
||
this.imgZoom = 1
|
||
this.activeImgIndex = index
|
||
this.activeImgUrl = val.imageUrl
|
||
this.isEditPoint = false
|
||
this.selectDeepExcavationPlaneFigureCoordinate(val)
|
||
this.$nextTick(()=>{
|
||
this.getNaturalSize()
|
||
})
|
||
},
|
||
selectDeepExcavationPlaneFigureList(){
|
||
let data = {
|
||
deepExcavationId: this.deepExcavationId,
|
||
projectSn: this.projectSn
|
||
}
|
||
selectDeepExcavationPlaneFigureListApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
console.log(res)
|
||
this.deepImgList = res.result
|
||
if(this.deepImgList.length>0){
|
||
this.checkImg(this.deepImgList[0],0)
|
||
}
|
||
}
|
||
console.log(res)
|
||
})
|
||
},
|
||
selectDeepExcavationCurrentData(){
|
||
let data = {
|
||
// acquisitionTime
|
||
alarmState: this.alarmStatus2 ? this.alarmStatus2 : "",
|
||
measurePointNumber: this.devNum2,
|
||
monitorTypeId: this.monitorTypeId,
|
||
projectSn: this.projectSn,
|
||
startTime: this.acquisitionTime.length>0 ? this.acquisitionTime[0]:'',
|
||
endTime: this.acquisitionTime.length>0 ? this.acquisitionTime[1]:'',
|
||
pageNo: this.pagInfo2.pageNo,
|
||
pageSize: this.pagInfo2.pageSize
|
||
}
|
||
selectDeepExcavationCurrentDataApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.currentPointDetail = res.result.records
|
||
this.pagInfo2.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
// 获取当前时间 返回YYYY-MM-DD HH:mm:ss
|
||
selectNowDate(){
|
||
var date = new Date(),
|
||
year = date.getFullYear(),
|
||
month = date.getMonth() + 1,
|
||
day = date.getDate(),
|
||
hours = date.getHours(), //获取当前小时数(0-23)
|
||
minutes = date.getMinutes(),//获取当前分钟数(0-59)
|
||
seconds = date.getSeconds()
|
||
month >= 1 && month <= 9 ? (month = "0" + month) : "";
|
||
day >= 0 && day <= 9 ? (day = "0" + day) : "";
|
||
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
|
||
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
|
||
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
|
||
var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes+ ':' + seconds;
|
||
console.log(timer)
|
||
return timer;
|
||
},
|
||
// 提交测点数据
|
||
addPointData(){
|
||
if(this.isPreview){
|
||
this.closeDialog2()
|
||
return
|
||
}
|
||
console.log(this.testPointForm,this.testPointData)
|
||
this.$refs['testPointForm'].validate((valid) => {
|
||
if (valid) {
|
||
let data = this.testPointForm
|
||
this.testPointData.forEach(item=>{
|
||
if(item.alarmValue == " "){
|
||
item.alarmValue = 0
|
||
}
|
||
if(item.warningValue == " "){
|
||
item.warningValue = 0
|
||
}
|
||
if(item.controlValue == " "){
|
||
item.controlValue = 0
|
||
}
|
||
|
||
})
|
||
data.thresholdList = this.testPointData
|
||
data.deepExcavationId = this.deepExcavationList[this.activeDeep].id
|
||
data.monitorTypeId = this.monitorTypeId
|
||
console.log(data)
|
||
|
||
addDeepExcavationMeasurePointApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200 && res.success){
|
||
// 新增成功！
|
||
this.$message.success(this.$t('message.deepFoundConfig.addSuccess2'))
|
||
this.selectMeasurePointList()
|
||
this.closeDialog2()
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
preViewPointData(val){
|
||
console.log(val)
|
||
this.isPreview = true
|
||
this.showTestPoint = true
|
||
this.testPointForm = val
|
||
this.testPointData = val.thresholdList
|
||
},
|
||
// 删除测点数据
|
||
deletePointData(val){
|
||
// deleteDeepExcavationMeasurePointApi({id: val.id}).then(res=>{
|
||
// if(res.code == 200 && res.success){
|
||
// this.$message.success('删除成功！')
|
||
// this.selectMeasurePointList()
|
||
// }
|
||
// })
|
||
this.removeData = val
|
||
this.removeType = 2
|
||
this.deleteInfo = true
|
||
},
|
||
// 关闭新增测点弹窗
|
||
closeDialog2(){
|
||
this.testPointForm = {
|
||
measurePointNumber: '',
|
||
measurePointName: '',
|
||
measurePointAddr: '',
|
||
acquisitionInstrumentNumber: '',
|
||
sensorTypeId: ''
|
||
}
|
||
this.isPreview = false
|
||
this.$refs['testPointForm'].resetFields()
|
||
this.testPointData.forEach(item=>{
|
||
item.alarmValue = 0
|
||
item.warningValue = 0
|
||
item.controlValue = 0
|
||
item.openType = 2
|
||
})
|
||
this.selectMeasurePointList()
|
||
// this.testPointData = this.testPointData
|
||
this.showTestPoint = false
|
||
},
|
||
// 查询传感器类型
|
||
selectDeepExcavationSensorTypeList(){
|
||
selectDeepExcavationSensorTypeListApi().then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200 && res.result){
|
||
this.typeOptions = res.result
|
||
}
|
||
})
|
||
},
|
||
// 查询基坑监测内容
|
||
selectDeepExcavationMonitorTypeList(){
|
||
if(this.deepExcavationList.length>0){
|
||
let data = {
|
||
deepExcavationId: this.deepExcavationList[this.activeDeep].id,
|
||
pageNo: this.pagInfo.pageNo,
|
||
pageSize: this.pagInfo.pageSize,
|
||
projectSn: this.projectSn
|
||
}
|
||
selectDeepExcavationMonitorTypeListApi(data).then(res=>{
|
||
if(res.code == 200){
|
||
console.log(res.result.records)
|
||
this.tableData = res.result.records
|
||
this.pagInfo.total = res.result.total
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 选中基坑
|
||
checkDeep(item,index){
|
||
this.activeDeep = index
|
||
this.pagInfo.pageNo = 1
|
||
this.pagInfo.pageSize = 10
|
||
this.selectDeepExcavationMonitorTypeList()
|
||
},
|
||
// 查询基坑列表
|
||
selectDeepExcavationList(){
|
||
selectDeepExcavationListApi({projectSn: this.projectSn}).then(res=>{
|
||
console.log(res, '----基坑列表')
|
||
if(res.code == 200 && res.result){
|
||
this.deepExcavationList = res.result
|
||
this.activeDeep = 0
|
||
this.selectDeepExcavationMonitorTypeList()
|
||
}
|
||
})
|
||
},
|
||
// 获取监测内容选项列表
|
||
getDefaultMonitorTypeList(){
|
||
getDefaultMonitorTypeListApi().then(res=>{
|
||
// console.log(res, '---监测内容')
|
||
this.contentList = res.result
|
||
})
|
||
},
|
||
changeImgSize(val){
|
||
if(val == 1){
|
||
this.imgZoom = this.imgZoom + 0.5
|
||
console.log(this.imgZoom)
|
||
// this.pointList.forEach(item=>{
|
||
// item.x = Math.ceil(item.x)*1.5
|
||
// item.y = Math.ceil(item.y)*1.6
|
||
// })
|
||
}else if(val == 2){
|
||
this.imgZoom = (this.imgZoom - 0.5) <= 0 ? this.imgZoom:this.imgZoom - 0.5
|
||
console.log(this.imgZoom)
|
||
// if((this.imgZoom - 0.5) > 0){
|
||
// this.pointList.forEach(item=>{
|
||
// item.x = Math.ceil(item.x)/1.5
|
||
// item.y = Math.ceil(item.y)/1.5
|
||
// })
|
||
// }
|
||
}
|
||
},
|
||
showMap(val){
|
||
this.showPointMap = true
|
||
this.deepExcavationId = val.id
|
||
this.selectDeepExcavationPlaneFigureList()
|
||
},
|
||
addTestPoint(){
|
||
this.showTestPoint = true
|
||
},
|
||
handleSelectionChange(val){
|
||
console.log(val)
|
||
},
|
||
handleCheckAllChange(val){
|
||
let arr = []
|
||
this.contentList.forEach(item=>{
|
||
arr.push(item.id)
|
||
})
|
||
console.log(arr)
|
||
this.checkedContent = val ? arr : [];
|
||
this.isIndeterminate = false;
|
||
},
|
||
handleCheckedCitiesChange(value){
|
||
console.log(value)
|
||
let checkedCount = value.length;
|
||
this.checkAll = checkedCount === this.contentList.length;
|
||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.contentList.length;
|
||
},
|
||
SizeChange(val){
|
||
console.log(val);
|
||
this.pagInfo.pageSize = val
|
||
this.selectDeepExcavationMonitorTypeList()
|
||
},
|
||
CurrentChange(val){
|
||
console.log(val);
|
||
this.pagInfo.pageNo = val
|
||
this.selectDeepExcavationMonitorTypeList()
|
||
},
|
||
changeSize(val){
|
||
console.log(val);
|
||
this.pagInfo2.pageSize = val
|
||
this.selectDeepExcavationCurrentData()
|
||
},
|
||
changeCurrent(val){
|
||
console.log(val);
|
||
this.pagInfo2.pageNo = val
|
||
this.selectDeepExcavationCurrentData()
|
||
},
|
||
addProject(){
|
||
this.formType = 1
|
||
this.dialogVisible = true
|
||
},
|
||
// 编辑获取基坑详情
|
||
editProject(data){
|
||
this.formType = 2
|
||
this.dialogVisible = true
|
||
this.editId = data.id
|
||
queryByIdDeepExcavationEngineeringApi({id: data.id}).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.dialogdata = {
|
||
engineeringName: res.result.engineeringName,
|
||
startTime: res.result.startTime,
|
||
endTime: res.result.endTime,
|
||
safetyLevel: Number(res.result.safetyLevel),
|
||
foundationDitchDepth: res.result.foundationDitchDepth,
|
||
foundationDitchGirth: res.result.foundationDitchGirth,
|
||
supportPattern: res.result.supportPattern,
|
||
surveyDirector: res.result.surveyDirector,
|
||
surveyPersonnel: res.result.surveyPersonnel,
|
||
excavationDepth: res.result.excavationDepth,
|
||
floorPourTime: res.result.floorPourTime
|
||
}
|
||
this.deviseDrawingList = res.result.deviseDrawing ? JSON.parse(res.result.deviseDrawing):[]
|
||
this.surveySchemeList = res.result.surveyScheme ? JSON.parse(res.result.surveyScheme):[]
|
||
this.prospectingReportList = res.result.prospectingReport ? JSON.parse(res.result.prospectingReport):[]
|
||
}
|
||
})
|
||
},
|
||
// 删除文件
|
||
handleRemove(file, fileList,type){
|
||
console.log(file,fileList,type)
|
||
if(type == 1){
|
||
this.surveySchemeList = fileList
|
||
console.log(this.surveySchemeList)
|
||
} else if(type == 2){
|
||
this.prospectingReportList = fileList
|
||
console.log(this.prospectingReportList)
|
||
} else if(type == 3){
|
||
this.deviseDrawingList = fileList
|
||
console.log(this.deviseDrawingList)
|
||
} else if(type == 4){
|
||
this.testPointImgForm.fileList = fileList
|
||
}
|
||
// this.$confirm(`确定移除 ${ file.name }？`);
|
||
},
|
||
handleBeforeUpload(file){
|
||
console.log(file)
|
||
if(file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/jpeg' ){
|
||
// 请上传图片！
|
||
this.$message.error(this.$t('message.deepFoundConfig.uploadError'))
|
||
return false
|
||
}
|
||
},
|
||
// 上传文件
|
||
handleSuccess(res,file,type){
|
||
// type 1、监测方案 2、地勘报告 3、基坑设计图纸 4.示意图
|
||
console.log(res,file,type)
|
||
if(res.status == "SUCCESS"){
|
||
// 上传成功！
|
||
this.$message.success(this.$t('message.deepFoundConfig.uploadSuccess'))
|
||
if(type == 1){
|
||
this.surveySchemeList.push({
|
||
name: file.name,
|
||
url: this.$store.state.FILEURL + file.response.data[0].imageUrl
|
||
})
|
||
console.log(this.surveySchemeList)
|
||
} else if(type == 2){
|
||
this.prospectingReportList.push({
|
||
name: file.name,
|
||
url: this.$store.state.FILEURL + file.response.data[0].imageUrl
|
||
})
|
||
console.log(this.prospectingReportList)
|
||
} else if(type == 3){
|
||
this.deviseDrawingList.push({
|
||
name: file.name,
|
||
url: this.$store.state.FILEURL + file.response.data[0].imageUrl
|
||
})
|
||
console.log(this.deviseDrawingList)
|
||
} else if(type == 4){
|
||
this.testPointImgForm.fileList = [{
|
||
name: file.name,
|
||
url:this.$store.state.FILEURL + file.response.data[0].imageUrl
|
||
}]
|
||
this.$refs['testPointImgForm'].clearValidate()
|
||
console.log(this.testPointImgForm.fileList)
|
||
}
|
||
}
|
||
},
|
||
// 查看大图
|
||
handlePictureCardPreview(file, fileList){
|
||
console.log(21)
|
||
this.dialogImageUrl = file.url;
|
||
this.dialogVisible2 = true;
|
||
},
|
||
// 添加、编辑基坑
|
||
submitForm(){
|
||
console.log(this.dialogdata)
|
||
this.$refs['form'].validate((valid) => {
|
||
if (valid) {
|
||
if(this.checkedContent.length == 0 && this.formType == 1){
|
||
// 请选择监测内容
|
||
this.$message.error(this.$t('message.deepFoundConfig.placeholderText2')+this.$t('message.deepFoundConfig.monitorContent'))
|
||
return;
|
||
}
|
||
let data = this.dialogdata
|
||
data.deviseDrawing = this.deviseDrawingList.length>0 ? JSON.stringify(this.deviseDrawingList):""
|
||
data.surveyScheme = this.surveySchemeList.length>0 ? JSON.stringify(this.surveySchemeList):""
|
||
data.prospectingReport = this.prospectingReportList.length>0 ? JSON.stringify(this.prospectingReportList):""
|
||
data.projectSn = this.projectSn
|
||
// this.safeLvList.forEach(item=>{
|
||
// if(item.value == this.dialogdata.safeLv){
|
||
// data.safetyLevel = item.label
|
||
// }
|
||
// })
|
||
// deviseDrawingList:[],
|
||
// surveySchemeList:[],
|
||
// prospectingReportList: [],
|
||
if(this.formType == 1){
|
||
data.status = 1
|
||
data.monitorTypeIds = this.checkedContent.join(',')
|
||
addDeepExcavationEngineeringApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
// 新增成功！
|
||
this.$message.success(this.$t('message.deepFoundConfig.addSuccess2'))
|
||
this.closeDialog()
|
||
this.selectDeepExcavationList()
|
||
}
|
||
})
|
||
} else if(this.formType == 2){
|
||
data.id = this.editId
|
||
editDeepExcavationEngineeringApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
// 编辑成功！
|
||
this.$message.success(this.$t('message.deepFoundConfig.editSuccess'))
|
||
this.closeDialog()
|
||
this.selectDeepExcavationList()
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
// this.closeDialog()
|
||
},
|
||
// 删除基坑
|
||
deleteDeepExcavation(data){
|
||
// 此操作将永久删除该基坑, 是否继续?
|
||
// 提示
|
||
// 确定
|
||
// 取消
|
||
this.$confirm(this.$t('message.deepFoundConfig.hintContent'), this.$t('message.deepFoundConfig.hint'), {
|
||
confirmButtonText: this.$t('message.deepFoundConfig.confirm'),
|
||
cancelButtonText: this.$t('message.deepFoundConfig.cancel'),
|
||
type: 'warning'
|
||
}).then(() => {
|
||
deleteDeepExcavationEngineeringApi({id: data.id}).then(res=>{
|
||
if(res.code == 200){
|
||
this.tableData = []
|
||
this.selectDeepExcavationList()
|
||
// '删除成功!'
|
||
this.$message({
|
||
type: 'success',
|
||
message: this.$t('message.deepFoundConfig.removeSuccess')
|
||
});
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
// '已取消删除'
|
||
this.$message({
|
||
type: 'info',
|
||
message: this.$t('message.deepFoundConfig.cancelRemove')
|
||
});
|
||
});
|
||
},
|
||
// 重置基坑提交表单
|
||
resetForm(){
|
||
this.dialogdata = {
|
||
engineeringName: "",
|
||
// projectAddress: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
safetyLevel: 1,
|
||
foundationDitchDepth: "",
|
||
foundationDitchGirth: "",
|
||
supportPattern: "",
|
||
surveyDirector: "",
|
||
surveyPersonnel: "",
|
||
excavationDepth: "",
|
||
floorPourTime: ""
|
||
}
|
||
this.editId = ""
|
||
this.checkedContent = []
|
||
this.deviseDrawingList = []
|
||
this.surveySchemeList = []
|
||
this.prospectingReportList = []
|
||
this.checkAll = false
|
||
this.isIndeterminate = false
|
||
},
|
||
closeDialog(){
|
||
this.dialogVisible = false;
|
||
this.$refs['form'].resetFields()
|
||
this.resetForm()
|
||
},
|
||
previewDetail(val, type){
|
||
this.monitorTypeId = val.id
|
||
console.log(val)
|
||
if(type == 1){
|
||
this.selectMeasurePointList()
|
||
this.showDetail = true
|
||
this.testPointData = []
|
||
if(val.dataField){
|
||
console.log(JSON.parse(val.dataField))
|
||
let obj = JSON.parse(val.dataField)
|
||
for(var key in obj){
|
||
this.testPointData.push({
|
||
targetField: key,
|
||
targetName: obj[key],
|
||
openType: 2,
|
||
warningValue: 0,
|
||
alarmValue: 0,
|
||
controlValue: 0
|
||
})
|
||
}
|
||
}
|
||
} else if(type == 2){
|
||
if(val.dataField){
|
||
console.log(JSON.parse(val.dataField))
|
||
let obj = JSON.parse(val.dataField)
|
||
this.currentTableData = []
|
||
for(var key in obj){
|
||
this.currentTableData.push({
|
||
targetField: key,
|
||
targetName: obj[key],
|
||
})
|
||
}
|
||
console.log(this.currentTableData)
|
||
}
|
||
let nowTime = this.selectNowDate()
|
||
this.acquisitionTime = [nowTime.split(' ')[0] + ' ' + '00:00:00',nowTime]
|
||
this.selectDeepExcavationCurrentData()
|
||
this.showActiveDetail = true
|
||
}
|
||
},
|
||
// 列表查询深基坑-测点信息
|
||
selectMeasurePointList(val){
|
||
if(val == 1){
|
||
this.alarmStatus = ''
|
||
this.devNum = ''
|
||
}
|
||
let data = {
|
||
alarmState: this.alarmStatus ? this.alarmStatus:"",
|
||
measurePointNumber: this.devNum,
|
||
monitorTypeId: this.monitorTypeId
|
||
}
|
||
selectMeasurePointListApi(data).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
// surveyPointDetail
|
||
this.surveyPointDetail = res.result
|
||
}
|
||
})
|
||
},
|
||
// 获取基坑布置图图片大小
|
||
getNaturalSize (callback) {
|
||
|
||
let Domlement = this.$refs['map']
|
||
console.dir(Domlement)
|
||
var natureSize = {};
|
||
if(window.naturalWidth && window.naturalHeight) {
|
||
natureSize.width = Domlement.naturalWidth;
|
||
natureSize.height = Domlement.naturalHeight;
|
||
// let heightRatio = natureSize.height / 569
|
||
// this.mapDate.width = natureSize.width*heightRatio
|
||
} else {
|
||
console.log(213)
|
||
let _this = this
|
||
var img = new Image();
|
||
img.src = Domlement.src;
|
||
img.onload = function(){
|
||
natureSize.width = img.width;
|
||
natureSize.height = img.height;
|
||
console.log('------', natureSize)
|
||
_this.imgWidth = natureSize.width
|
||
_this.imgHeight = natureSize.height
|
||
_this.imgStartWidth = img.width;
|
||
_this.imgStartHeight = img.width;
|
||
console.log(_this.$refs['mapbox'].clientWidth, _this.$refs['mapbox'].clientHeight)
|
||
|
||
// let heightRatio = 780 / natureSize.height
|
||
// let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width
|
||
// if(heightRatio < widthRatio){
|
||
// // _this.imgWidth = natureSize.width*heightRatio
|
||
// // _this.imgHeight = natureSize.height*heightRatio
|
||
// _this.imgZoom = heightRatio
|
||
// } else {
|
||
// // _this.imgWidth = natureSize.width*widthRatio
|
||
// // _this.imgHeight = natureSize.height*widthRatio
|
||
// _this.imgZoom = widthRatio
|
||
// }
|
||
// _this.mapDate.width = natureSize.width*heightRatio
|
||
if(callback){
|
||
return callback(natureSize)
|
||
}
|
||
}
|
||
|
||
}
|
||
console.log(natureSize)
|
||
// return natureSize;
|
||
},
|
||
// 添加鼠标监听事件
|
||
move(val,e){
|
||
console.log(val,e.pageX,e.pageY)
|
||
this.ratio = window.localStorage.getItem('zoom')
|
||
this.startX = e.pageX
|
||
this.startY = e.pageY
|
||
this.pointIndex = val
|
||
// console.dir(this.$refs['point'+val])
|
||
// this.$refs['point'+val].style.opacity = '0'
|
||
let _this = this
|
||
console.log(this.pointList[val])
|
||
if(this.isEditPoint){
|
||
this.pointList[val].status = 'none'
|
||
// this.$refs['point'+ val].style.display = 'none'
|
||
document.body.addEventListener('mousemove',this.movePoint,false)
|
||
document.body.addEventListener('mouseup',this.removeUp,false)
|
||
}
|
||
|
||
// document.body.addEventListener('mousemove',(e)=>{
|
||
// _this.movePoint(e,val,ratio,a,b)
|
||
// },false)
|
||
// document.body.addEventListener('mouseup',()=>{
|
||
// // _this.movePoint(e,val,ratio,a,b,')
|
||
// window.removeEventListener('mousemove',(e)=>{
|
||
// // console.log(1232)
|
||
// _this.movePoint(e,val,ratio,a,b)
|
||
// },false)
|
||
// })
|
||
},
|
||
// 清除鼠标监听时间
|
||
removeUp(e){
|
||
let top = (e.pageY - this.startY)/this.imgZoom ,
|
||
left = (e.pageX - this.startX)/this.imgZoom
|
||
console.log(top,left)
|
||
this.pointStatus = 'none'
|
||
let x = Math.ceil(Number(this.pointList[this.pointIndex].mapX ? this.pointList[this.pointIndex].mapX:0) + left/this.ratio),
|
||
y = Math.ceil(Number(this.pointList[this.pointIndex].mapY ? this.pointList[this.pointIndex].mapY:0) + top/this.ratio)
|
||
console.log(x,y,this.imgWidth,this.imgHeight)
|
||
if(y <= this.imgHeight && y >= 0){
|
||
this.pointList[this.pointIndex].mapY = y
|
||
}
|
||
if(x <= this.imgWidth && x >= 0){
|
||
this.pointList[this.pointIndex].mapX = x
|
||
}
|
||
this.pointList[this.pointIndex].status = 'block'
|
||
console.log(this.pointList)
|
||
this.$forceUpdate()
|
||
// this.pointList[this.pointIndex].transform = 'translate(-150%, -150%)'
|
||
// this.$refs['point'+this.pointIndex].style.transform = 'translate(-150%, -150%)'
|
||
// this.$refs['point'+ this.pointIndex].style.display = 'block'
|
||
document.body.removeEventListener('mousemove',this.movePoint,false)
|
||
document.body.removeEventListener('mouseup',this.removeUp,false)
|
||
},
|
||
// 移动鼠标
|
||
movePoint(target){
|
||
// console.log(target)
|
||
// console.log(window.localStorage.getItem('zoom'))
|
||
|
||
// console.dir(document.getElementById('app'))
|
||
let bodyWidth = document.body.clientWidth,
|
||
bodyHeight = document.body.clientHeight,
|
||
appWidth = document.getElementById('app').clientWidth*this.ratio,
|
||
appHeight = document.getElementById('app').clientHeight*this.ratio,
|
||
a = bodyWidth - appWidth,
|
||
b = bodyHeight - appHeight
|
||
// console.log(document.body.clientHeight,document.body.clientWidth)
|
||
// this.$refs['pointFixed'].style.top = ((target.pageY)/ratio - (b*0.5)/ratio)-15/ratio + 'px'
|
||
// this.$refs['pointFixed'].style.left = ((target.pageX)/ratio - (a*0.5)/ratio)-15/ratio+ 'px'
|
||
if(this.ratio != 1){
|
||
this.$refs['pointFixed'].style.transform = 'translate(0px, -75px)'
|
||
this.pointTop = ((target.pageY)/this.ratio - (b*0.5)/this.ratio)
|
||
this.pointLeft = ((target.pageX)/this.ratio - (a*0.5)/this.ratio)-60
|
||
} else{
|
||
this.pointTop = target.pageY
|
||
this.pointLeft = target.pageX - 60
|
||
}
|
||
|
||
this.pointStatus = 'block'
|
||
|
||
// console.log(target)
|
||
},
|
||
// 鼠标抬起
|
||
up(val,e){
|
||
let _this = this
|
||
if(this.isEditPoint){
|
||
window.removeEventListener('mousemove',function(e){
|
||
_this.movePoint()
|
||
})
|
||
}
|
||
// this.$refs['point'+val].style.display = '1'
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.foundationPit-config{
|
||
// background: #fff;
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
.menu-title{
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
position: relative;
|
||
padding: 15px 0;
|
||
padding-left: 10px;
|
||
}
|
||
.menu-title::before{
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
width: 2px;
|
||
height: 13px;
|
||
background: #5181F6;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
}
|
||
.left-menu{
|
||
width: 320px;
|
||
margin-right: 3px;
|
||
background: #fff;
|
||
padding: 15px;
|
||
padding-top: 0;
|
||
.add-btn{
|
||
margin-top: 10px;
|
||
margin-bottom: 23px;
|
||
/deep/.el-button{
|
||
background: rgba(#5181F6, 0.1);
|
||
border: 0;
|
||
color: #262D48;
|
||
width: 280px;
|
||
height: 36px;
|
||
line-height: 36px;
|
||
padding: 0;
|
||
display: block;
|
||
margin: 0 auto;
|
||
.el-icon-circle-plus-outline{
|
||
color: #5181F6;
|
||
}
|
||
}
|
||
}
|
||
.no-data{
|
||
text-align: center;
|
||
padding-top: 50px;
|
||
img{
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
.menu-box{
|
||
.menu-item{
|
||
width: 280px;
|
||
margin: 0 auto;
|
||
background: #FBFBFB;
|
||
border: 1px solid #EAEAEA;
|
||
padding: 20px 25px 15px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 20px;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
.menu-h2{
|
||
color: #2A2E3F;
|
||
font-weight: 600;
|
||
margin-bottom: 9px;
|
||
font-size: 16px;
|
||
width: 100%;
|
||
word-break: break-all;
|
||
}
|
||
p{
|
||
font-size: 14px;
|
||
color: rgba(#2A2E3F,0.8);
|
||
margin-bottom: 7px;
|
||
span{
|
||
padding: 3px 6px;
|
||
border-radius: 10px;
|
||
}
|
||
.status-underway{
|
||
color: #44D7B6;
|
||
background: rgba(#44D7B6, 0.15);
|
||
}
|
||
.status-finish{
|
||
color: #5484F6;
|
||
background: rgba(#5484F6, 0.15);
|
||
}
|
||
}
|
||
/deep/.el-button{
|
||
padding: 0;
|
||
margin-bottom: 14px;
|
||
}
|
||
.actions-box{
|
||
/deep/.el-button{
|
||
padding: 0;
|
||
margin-bottom: 0px;
|
||
.el-icon-delete{
|
||
color: #F24C32;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.active-item{
|
||
background: #fff;
|
||
border: 0;
|
||
box-shadow: 0px 2px 10px 0px rgba(42, 46, 63, 0.18);
|
||
border: 1px solid #409EFF;
|
||
}
|
||
}
|
||
}
|
||
.foundationPit-content{
|
||
background: #fff;
|
||
flex: 1;
|
||
}
|
||
.search-box{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
.search-item{
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20px;
|
||
.search-label{
|
||
// width: 80px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
}
|
||
}
|
||
.foundationPit-table{
|
||
padding: 0 26px;
|
||
padding-top: 60px;
|
||
.table-title{
|
||
color: #262D48;
|
||
font-weight: 600;
|
||
margin-bottom: 26px;
|
||
}
|
||
// .tables{
|
||
// height: 660px;
|
||
// }
|
||
.a-detail{
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
.detail-btn{
|
||
// border-color: #409EFF;
|
||
color: rgba(#2A2E3F, 0.6);
|
||
border-radius: 3px;
|
||
}
|
||
.detail-btn:hover{
|
||
color: #5181F6;
|
||
}
|
||
}
|
||
.dialogFormBox{
|
||
width: 100%;
|
||
padding: 0 30px;
|
||
box-sizing: border-box;
|
||
// margin-bottom: 80px;
|
||
/deep/.el-form-item{
|
||
display: inline-block;
|
||
width: 50%;
|
||
.el-select{
|
||
width: 260px !important;
|
||
}
|
||
.el-date-picker{
|
||
width: 260px !important;
|
||
}
|
||
.el-cascader{
|
||
width: 260px !important;
|
||
}
|
||
.el-input{
|
||
width: 260px !important;
|
||
}
|
||
}
|
||
}
|
||
.dialog-content{
|
||
height: 680px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.btn-box{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.backText{
|
||
padding: 10px;
|
||
}
|
||
.alarm_status1{
|
||
padding: 4px 6px;
|
||
background: #44D7B6;
|
||
color: #fefefe;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status2{
|
||
padding: 4px 6px;
|
||
background: #7953F6;
|
||
color: #fefefe;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status3{
|
||
padding: 4px 6px;
|
||
background: #F67F52;
|
||
color: #fefefe;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status4{
|
||
padding: 4px 6px;
|
||
background: #5484F6;
|
||
color: #fefefe;
|
||
border-radius: 3px;
|
||
}
|
||
.formBox{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
.tables{
|
||
min-height: 0;
|
||
}
|
||
}
|
||
.form-wrap{
|
||
height: 600px;
|
||
}
|
||
.map-box{
|
||
display: flex;
|
||
height: 820px;
|
||
.map-left{
|
||
width: 300px;
|
||
height: 802px;
|
||
.uploadBox{
|
||
width: 250px;
|
||
margin: 0 auto;
|
||
margin-bottom: 16px;
|
||
}
|
||
.add-btn{
|
||
width: 250px;
|
||
margin: 0 auto;
|
||
margin-bottom: 16px;
|
||
text-align: center;
|
||
background: rgba(#D8D8D8, 0.3);
|
||
height: 132px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.el-icon-circle-plus-outline{
|
||
margin-bottom: 8px;
|
||
font-size: 26px;
|
||
color: #B4C8F3;
|
||
}
|
||
}
|
||
ul{
|
||
width: 250px;
|
||
margin: 0 auto;
|
||
li{
|
||
width: 100%;
|
||
margin-bottom: 16px;
|
||
cursor: pointer;
|
||
border: 1px solid #CDCDCD;
|
||
padding: 0 10px;
|
||
padding-top: 10px;
|
||
box-sizing: border-box;
|
||
img{
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
display: block;
|
||
height: 132px;
|
||
// border: 1px solid #CDCDCD;
|
||
}
|
||
.actions-box{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding-right: 10px;
|
||
span{
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
.img-active{
|
||
border-color: #4A8BFF;
|
||
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
|
||
}
|
||
}
|
||
}
|
||
.map-right{
|
||
// flex: 1;
|
||
width: calc(100% - 300px);
|
||
border: 1px solid #E6E6E6;
|
||
padding: 14px;
|
||
height: 802px;
|
||
.action-box{
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
.btn-item{
|
||
margin-right: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #5181F6;
|
||
border: 1px solid #5181F6;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
width: 62px;
|
||
height: 24px;
|
||
img{
|
||
margin-right: 4px;
|
||
}
|
||
i{
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
}
|
||
.img-box{
|
||
// margin: 0 auto;
|
||
// height: 100%;
|
||
// position: relative;
|
||
// top: 50%;
|
||
// transform: translateY(-50%);
|
||
transform-origin: left top;
|
||
position: relative;
|
||
.point-list{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
li{
|
||
display: inline-block;
|
||
position: absolute;
|
||
}
|
||
.point-dialog{
|
||
background: rgba(#2A2E3F, 0.9);
|
||
color: #fff;
|
||
width: 238px;
|
||
height: auto;
|
||
box-sizing: border-box;
|
||
padding: 0 16px;
|
||
padding-bottom: 18px;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: -8px;
|
||
transform: translate(-50%, -100%);
|
||
font-size: 12px;
|
||
.el-icon-error{
|
||
position: absolute;
|
||
right: 12px;
|
||
top: 10px;
|
||
cursor: pointer;
|
||
}
|
||
.point-title{
|
||
// height: 40px;
|
||
line-height: 20px;
|
||
border-bottom: 1px solid rgba(254, 255, 255, 1);
|
||
margin-bottom: 13px;
|
||
font-size: 14px;
|
||
word-break: break-all;
|
||
padding: 10px 0;
|
||
}
|
||
.point-content{
|
||
font-size: 14px;
|
||
p{
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
}
|
||
.point-title2{
|
||
width: auto;
|
||
height: auto;
|
||
white-space: nowrap;
|
||
font-size: 16px;
|
||
padding: 10px 20px;
|
||
}
|
||
.right_detail{
|
||
left: 30px;
|
||
top: 0;
|
||
transform: translate(0,0);
|
||
}
|
||
.right_title{
|
||
left: 30px;
|
||
top: -8px;
|
||
transform: translate(0,0);
|
||
}
|
||
}
|
||
img{
|
||
// display: block;
|
||
// margin: 0 auto;
|
||
// position: relative;
|
||
// top: 50%;
|
||
// transform: translateY(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.dialog-center{
|
||
/deep/.el-dialog{
|
||
margin: 0 !important;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
.check_group{
|
||
/deep/.el-checkbox{
|
||
width: 50%;
|
||
margin: 0;
|
||
}
|
||
}
|
||
.pointFixed{
|
||
position: fixed;
|
||
}
|
||
.pagerBox2{
|
||
margin-top: 20px;
|
||
}
|
||
/deep/.el-upload-list__item-name{
|
||
width: 300px;
|
||
}
|
||
/deep/.el-dialog__title{
|
||
font-weight: bold;
|
||
}
|
||
.img_box{
|
||
width: 148px;
|
||
height:148px;
|
||
margin-right: 20px;
|
||
display: inline-block;
|
||
position: relative;
|
||
.el-icon-error{
|
||
position: absolute;
|
||
right: -9px;
|
||
top: -9px;
|
||
font-size: 18px;
|
||
color: #F56C6C;
|
||
cursor: pointer;
|
||
}
|
||
.el-image{
|
||
width: 100%;
|
||
height:100%;
|
||
}
|
||
}
|
||
</style> |