3235 lines
108 KiB
Vue
3235 lines
108 KiB
Vue
<template>
|
||
<div class="foundationPit-config">
|
||
<div class="left-menu">
|
||
<div class="menu-title">
|
||
<!-- 高边坡列表 -->
|
||
钢结构列表
|
||
</div>
|
||
<div class="add-btn">
|
||
<!-- 新增高边坡 -->
|
||
<el-button icon="el-icon-circle-plus-outline" @click="addProject">新增钢结构</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.slopeName }}</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
|
||
}"
|
||
>{{ projectStatusEnum[item.status] }}</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="Number(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="rules"
|
||
label-width="136px"
|
||
size="medium"
|
||
class="dialogFormBox"
|
||
>
|
||
<!-- 高边坡名称 -->
|
||
<el-form-item
|
||
label="钢结构名称"
|
||
prop="slopeName"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.slopeName"
|
||
: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="startDate"
|
||
>
|
||
<el-date-picker
|
||
v-model="dialogdata.startDate"
|
||
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="endDate"
|
||
>
|
||
<el-date-picker
|
||
v-model="dialogdata.endDate"
|
||
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')"
|
||
onkeyup="if(isNaN(value))execCommand('undo')"
|
||
onafterpaste="if(isNaN(value))execCommand('undo')"
|
||
></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')"
|
||
onkeyup="if(isNaN(value))execCommand('undo')"
|
||
onafterpaste="if(isNaN(value))execCommand('undo')"
|
||
></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="surveyDirectorName"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.surveyDirectorName"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<!-- 监测人员 -->
|
||
<el-form-item
|
||
:label="$t('message.deepFoundConfig.monitorPeople')"
|
||
prop="surveyPersonnelName"
|
||
>
|
||
<el-input
|
||
v-model="dialogdata.surveyPersonnelName"
|
||
: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')"
|
||
onkeyup="if(isNaN(value))execCommand('undo')"
|
||
onafterpaste="if(isNaN(value))execCommand('undo')"
|
||
></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="钢结构设计图纸"
|
||
: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="sensorSn" label="传感器编号"></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>-->
|
||
<span
|
||
:class="{
|
||
alarm_status1: scope.row.alarmState == 1,
|
||
alarm_status2: scope.row.alarmState == 2,
|
||
alarm_status3: scope.row.alarmState == 3,
|
||
alarm_status4: scope.row.alarmState == 4
|
||
}"
|
||
>
|
||
{{
|
||
scope.row.alarmState == 1
|
||
? '正常'
|
||
: scope.row.alarmState == 2
|
||
? '超报警'
|
||
: scope.row.alarmState == 3
|
||
? '超控制'
|
||
: scope.row.alarmState == 4
|
||
? '变化速率报警'
|
||
: ''
|
||
}}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 操作 -->
|
||
<el-table-column
|
||
align="center"
|
||
:label="$t('message.deepFoundConfig.actions')"
|
||
>
|
||
<template slot-scope="scope">
|
||
<!-- 编辑 -->
|
||
<el-button
|
||
type="text"
|
||
icon="el-icon-edit"
|
||
@click="preViewPointData(scope.row, 1)"
|
||
>{{ '编辑' }}</el-button
|
||
>
|
||
<!-- 详情 -->
|
||
<el-button
|
||
type="text"
|
||
icon="el-icon-document"
|
||
@click="preViewPointData(scope.row, 2)"
|
||
>{{ $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>
|
||
<!-- 分页 -->
|
||
<el-pagination
|
||
class="pager"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(total)"
|
||
background
|
||
></el-pagination>
|
||
</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="exportData.measurePointNumber"
|
||
: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="exportData.alarmState"
|
||
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>-->
|
||
<!-- :default-time="['00:00:00', '23:59:59']" -->
|
||
<el-date-picker
|
||
v-model="acquisitionTime"
|
||
type="datetimerange"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
:range-separator="$t('message.deepFoundConfig.to')"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
align="right"
|
||
></el-date-picker>
|
||
</div>
|
||
<!-- 查询 -->
|
||
<el-button
|
||
type="primary"
|
||
plain
|
||
@click="selectDeepExcavationCurrentData"
|
||
>{{ $t('message.deepFoundConfig.search') }}</el-button
|
||
>
|
||
<el-button type="primary" plain @click="exportDataFn"
|
||
>导出</el-button
|
||
>
|
||
</div>
|
||
<el-table :data="currentPointDetail" class="tables" height="560">
|
||
<el-table-column
|
||
prop="measurePointNumber"
|
||
:label="$t('message.deepFoundConfig.pointNo')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="sensorSn"
|
||
label="传感器编号"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="fiducialValue"
|
||
label="初始值"
|
||
align="center"
|
||
width="80"
|
||
></el-table-column>
|
||
<!-- 采集时间 -->
|
||
<el-table-column
|
||
width="220"
|
||
align="center"
|
||
prop="receiveTime"
|
||
:label="$t('message.deepFoundConfig.gatherTime')"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="lastTimeData"
|
||
label="上次值"
|
||
></el-table-column>
|
||
<el-table-column prop="data" label="本次值">
|
||
<template slot-scope="scope">{{
|
||
scope.row.data + scope.row.unit
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dataThis" label="本次变化量">
|
||
<template slot-scope="scope">{{
|
||
scope.row.dataThis + scope.row.unit
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column prop="dataTotal" label="累计值">
|
||
<template slot-scope="scope">{{
|
||
scope.row.dataTotal + scope.row.unit
|
||
}}</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="alarmValue"
|
||
label="累计预警值"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="dataRate"
|
||
label="变化速率"
|
||
align="center"
|
||
></el-table-column>
|
||
<el-table-column
|
||
prop="rateAlarmValue"
|
||
label="变化速率预警值"
|
||
align="center"
|
||
width="120"
|
||
></el-table-column>
|
||
<!-- 测点编号 -->
|
||
<!-- <el-table-column
|
||
prop="measurePointNumber"
|
||
:label="$t('message.deepFoundConfig.pointNo')"
|
||
></el-table-column> -->
|
||
<!-- 测点名称 -->
|
||
<!-- <el-table-column prop="measurePointName" label="测点名称"></el-table-column>
|
||
<el-table-column prop="sensorSn" label="传感器编号"></el-table-column>
|
||
<el-table-column prop="sensorTypeName" label="传感器类型"></el-table-column>
|
||
<el-table-column prop="data" label="值">
|
||
<template slot-scope="scope">{{scope.row.data + scope.row.unit}}</template>
|
||
</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 == 1,
|
||
alarm_status2: scope.row.alarmState == 2,
|
||
alarm_status3: scope.row.alarmState == 3,
|
||
alarm_status4: scope.row.alarmState == 4
|
||
}"
|
||
>
|
||
{{
|
||
scope.row.alarmState == 1
|
||
? '正常'
|
||
: scope.row.alarmState == 2
|
||
? '超报警'
|
||
: scope.row.alarmState == 3
|
||
? '超控制'
|
||
: scope.row.alarmState == 4
|
||
? '变化速率报警'
|
||
: ''
|
||
}}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
class="pager"
|
||
@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="Number(pagInfo2.total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- '详情':'新增测点' -->
|
||
<!-- :title="isPreview ? $t('message.deepFoundConfig.details'):$t('message.deepFoundConfig.addPoint')" -->
|
||
<el-dialog
|
||
width="45%"
|
||
:title="isPreviewTitle"
|
||
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: 90%; 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="sensorSn">
|
||
<el-input :disabled="isPreview" v-model="testPointForm.sensorSn" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>-->
|
||
<!-- 传感器编号 -->
|
||
<!-- <el-form-item :label="'传感器编号'" prop="sensorSn">
|
||
<el-input :disabled="isPreview" v-model="testPointForm.sensorSn" :placeholder="$t('message.deepFoundConfig.placeholderText')"></el-input>
|
||
</el-form-item>-->
|
||
<!-- 传感器类型 -->
|
||
<!-- <el-form-item :label="$t('message.deepFoundConfig.devType')" prop="steelStructureSensorTypeId"> -->
|
||
<!-- <el-input v-model="testPointForm.steelStructureSensorTypeId"></el-input> -->
|
||
<!-- <el-select style="width: 100%" :disabled="isPreview" v-model="testPointForm.steelStructureSensorTypeId" :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>-->
|
||
<!-- 2022-09-27 此处开始注释 是因为更改了添加的字段 预警值报警值控制值-->
|
||
<!-- <div class="sensor" v-for="(item,index) in testPointForm.sensorList" :key="index">
|
||
<div class="sensorDel">
|
||
<i
|
||
v-if="testPointForm.sensorList.length > 1 && show"
|
||
:disabled="isPreview"
|
||
@click="deleteRow(index)"
|
||
class="el-icon-close"
|
||
></i>
|
||
</div>
|
||
<el-form-item
|
||
:label="`传感器编号${index +1}`"
|
||
:prop="item.sensorSn"
|
||
:rules="{ required: true, message: '请输入传感器编号', trigger: 'blur'}"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model="item.sensorSn"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="`传感器类型${index +1}`"
|
||
:prop="item.steelStructureSensorTypeId"
|
||
:rules="{ required: true, message: '请输入传感器类型', trigger: 'blur'}"
|
||
>
|
||
<el-select
|
||
style="width: 100%"
|
||
:disabled="isPreview"
|
||
v-model="item.steelStructureSensorTypeId"
|
||
: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-row>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label-width="120px"
|
||
:label="`预警${index +1}`"
|
||
:prop="item.earlyWarningValue"
|
||
:rules="{ required: true, message: '请输入预警数', trigger: 'blur'}"
|
||
>
|
||
<el-input
|
||
maxlength="10"
|
||
:disabled="isPreview"
|
||
v-model.trim="item.earlyWarningValue"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
:label="`报警${index +1}`"
|
||
:prop="item.alarmValue"
|
||
:rules="{ required: true, message: '请输入报警数', trigger: 'blur'}"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model.trim="item.alarmValue"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
:label="`控制${index +1}`"
|
||
:prop="item.controlValue"
|
||
:rules="{ required: true, message: '请输入控制数', trigger: 'blur'}"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model.trim="item.controlValue"
|
||
:placeholder="$t('message.deepFoundConfig.placeholderText')"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div> -->
|
||
<!-- 此处结束 -->
|
||
<div
|
||
class="sensor"
|
||
v-for="(item, index) in testPointForm.sensorList"
|
||
:key="index"
|
||
>
|
||
<div class="sensorDel">
|
||
<i
|
||
v-if="testPointForm.sensorList.length > 1 && show"
|
||
:disabled="isPreview"
|
||
@click="deleteRow(item, index)"
|
||
class="el-icon-close"
|
||
></i>
|
||
</div>
|
||
<el-form-item
|
||
:label="`传感器编号${index + 1}`"
|
||
:prop="'sensorList.' + index + '.sensorSn'"
|
||
:rules="sensorRules.sensorSn"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model="item.sensorSn"
|
||
:placeholder="
|
||
$t('message.deepFoundConfig.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="`传感器名称${index + 1}`"
|
||
:prop="'sensorList.' + index + '.sensorName'"
|
||
:rules="sensorRules.sensorName"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model="item.sensorName"
|
||
:placeholder="
|
||
$t('message.deepFoundConfig.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item
|
||
:label="`传感器类型${index + 1}`"
|
||
:prop="'sensorList.' + index + '.steelStructureSensorTypeId'"
|
||
:rules="sensorRules.steelStructureSensorTypeId"
|
||
>
|
||
<el-select
|
||
style="width: 100%"
|
||
:disabled="isPreview"
|
||
v-model="item.steelStructureSensorTypeId"
|
||
: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-row>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label-width="130px"
|
||
:label="`累计值告警阈值${index + 1}`"
|
||
:prop="'sensorList.' + index + '.alarmValue'"
|
||
:rules="sensorRules.alarmValue"
|
||
>
|
||
<el-input
|
||
maxlength="10"
|
||
:disabled="isPreview"
|
||
v-model.trim="item.alarmValue"
|
||
type="number"
|
||
:placeholder="
|
||
$t('message.deepFoundConfig.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
label-width="130px"
|
||
:label="`变化速率报警值${index + 1}`"
|
||
:prop="'sensorList.' + index + '.rateAlarmValue'"
|
||
:rules="sensorRules.rateAlarmValue"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model.trim="item.rateAlarmValue"
|
||
type="number"
|
||
:placeholder="
|
||
$t('message.deepFoundConfig.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item
|
||
:label="`基准值${index + 1}`"
|
||
:prop="'sensorList.' + index + '.fiducialValue'"
|
||
:rules="sensorRules.fiducialValue"
|
||
>
|
||
<el-input
|
||
:disabled="isPreview"
|
||
v-model.trim="item.fiducialValue"
|
||
type="number"
|
||
:placeholder="
|
||
$t('message.deepFoundConfig.placeholderText')
|
||
"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
<el-button
|
||
type="primary"
|
||
v-if="show"
|
||
@click="addRow()"
|
||
size="medium"
|
||
plain
|
||
>添加</el-button
|
||
>
|
||
<!-- v-if="testPointForm.sensorList.length > 1" -->
|
||
<!-- <el-button type="primary" v-if="testPointForm.sensorList.length > 1" @click="deleteRow()" size="medium" plain>删除</el-button> -->
|
||
</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"
|
||
style="color: #84b2fa"
|
||
icon="el-icon-edit"
|
||
@click="editDeepimg(item)"
|
||
></el-button>
|
||
<!-- 删除 -->
|
||
<el-button
|
||
type="text"
|
||
icon="el-icon-delete"
|
||
style="color: #f56c6c"
|
||
@click="deleteDeepImg(item)"
|
||
></el-button>
|
||
<!-- {{$t('message.deepFoundConfig.remove')}} -->
|
||
</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">
|
||
<!-- <div v-for="(item2,index2) in item.detailList" :key="index2">
|
||
<p>传感器编号：{{item2.sensorSn}}</p>
|
||
<p>传感器名称：{{item2.sensorTypeName == null ? '无' : item2.sensorTypeName }}</p>
|
||
<p>采集时间：{{item2.receiveTime == null ? '无' : item2.receiveTime}}</p>
|
||
</div>-->
|
||
<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: 70px; height: 70px"
|
||
src="@/assets/images/deepFoundationPitManage/ljz.png"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div
|
||
class="pointFixed"
|
||
ref="pointFixed"
|
||
:style="{
|
||
top: pointTop + 'px',
|
||
left: pointLeft + 'px',
|
||
display: pointStatus
|
||
}"
|
||
>
|
||
<img
|
||
style="width: 70px; height: 70px"
|
||
src="@/assets/images/deepFoundationPitManage/ljz.png"
|
||
/>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 添加平面图 -->
|
||
<!-- :title="$t('message.deepFoundConfig.addImg')" -->
|
||
<el-dialog
|
||
width="35%"
|
||
:title="title"
|
||
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="measurePointIds"
|
||
>
|
||
<el-select
|
||
style="width: 100%"
|
||
v-model="testPointImgForm.measurePointIds"
|
||
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 icon="el-icon-circle-close" @click="closeAddImg">{{
|
||
$t('message.deepFoundConfig.cancel')
|
||
}}</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="submitImgConfig"
|
||
>{{ $t('message.deepFoundConfig.confirm') }}</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,
|
||
editDeepExcavationMeasurePointApi,
|
||
deleteDeepExcavationMeasurePointApi,
|
||
selectDeepExcavationCurrentDataListApi,
|
||
selectDeepExcavationCurrentDataApi,
|
||
addDeepExcavationPlaneFigureApi,
|
||
editDeepExcavationPlaneFigureApi,
|
||
selectDeepExcavationPlaneFigureListApi,
|
||
selectDeepExcavationPlaneFigureCoordinateApi,
|
||
selectDeepExcavationAllMeasurePointListApi,
|
||
deleteDeepExcavationPlaneFigureApi,
|
||
editDeepExcavationPlaneFigureCoordinateApi,
|
||
getDetailDeepExcavationApi
|
||
} from '@/assets/js/api/steelStructure.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 完工状态枚举
|
||
projectStatusEnum: {
|
||
0: "未开工",
|
||
1: "进行中",
|
||
2: "已完成",
|
||
},
|
||
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() < Date.now() - 8.64e7;
|
||
}
|
||
},
|
||
show: true,
|
||
deleteInfo: false,
|
||
isPreview: false,
|
||
isPreviewTitle: '', //标题
|
||
testPointOptions: [],
|
||
sensorRules: {
|
||
sensorSn: [{ required: true, message: '必填', trigger: 'blur' }],
|
||
sensorName: [{ required: true, message: '必填', trigger: 'blur' }],
|
||
steelStructureSensorTypeId: [{ required: true, message: '必填', trigger: 'change' }],
|
||
alarmValue: [{ required: true, message: '必填', trigger: 'blur' }],
|
||
rateAlarmValue: [{ required: true, message: '必填', trigger: 'blur' }],
|
||
fiducialValue: [{ required: true, message: '必填', trigger: 'blur' }]
|
||
},
|
||
rules3: {
|
||
planeFigureName: [
|
||
{ required: true, message: '请输入平面图名称', trigger: 'blur' }
|
||
],
|
||
measurePointIds: [
|
||
{
|
||
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: [],
|
||
measurePointIds: []
|
||
},
|
||
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: '', // 测点位置
|
||
// sensorSn: '',
|
||
// steelStructureSensorTypeId: '',
|
||
sensorList: [
|
||
{
|
||
sensorSn: '', // 传感器编号
|
||
steelStructureSensorTypeId: '', // 传感器类型
|
||
earlyWarningValue: '', // 预警
|
||
alarmValue: '', //报警
|
||
controlValue: '' //控制
|
||
}
|
||
] // 传感器编号类型数组
|
||
},
|
||
dialogVisible: false,
|
||
dialogVisible2: false,
|
||
formTitle: '',
|
||
innerVisible: false,
|
||
dialogImageUrl: '',
|
||
// safeLvList: [
|
||
// {
|
||
// label: "一级",
|
||
// value: 1
|
||
// },
|
||
// {
|
||
// label: "二级",
|
||
// value: 2
|
||
// },
|
||
// {
|
||
// label: "三级",
|
||
// value: 3
|
||
// },
|
||
// {
|
||
// label: "四级",
|
||
// value: 4
|
||
// }
|
||
// ],
|
||
rules: {
|
||
slopeName: [
|
||
{ required: true, message: '请输入边坡名称', trigger: 'blur' }
|
||
],
|
||
startDate: [
|
||
{
|
||
type: 'string',
|
||
required: true,
|
||
message: '请选择开工日期',
|
||
trigger: 'change'
|
||
}
|
||
],
|
||
endDate: [
|
||
{
|
||
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' }
|
||
],
|
||
sensorSn: [
|
||
{ required: true, message: '请输入采集仪编号', trigger: 'blur' }
|
||
],
|
||
steelStructureSensorTypeId: [
|
||
{ required: true, message: '请选择传感器类型', trigger: 'change' }
|
||
]
|
||
},
|
||
dialogdata: {
|
||
slopeName: '',
|
||
// projectAddress: "",
|
||
startDate: '',
|
||
endDate: '',
|
||
safetyLevel: 1,
|
||
foundationDitchDepth: '',
|
||
foundationDitchGirth: '',
|
||
supportPattern: '',
|
||
surveyDirectorName: '',
|
||
surveyPersonnelName: '',
|
||
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,
|
||
acquisitionTime: [],
|
||
exportData: {
|
||
alarmState: '',
|
||
measurePointNumber: '',
|
||
startDate: '',
|
||
endDate: ''
|
||
},
|
||
startX: '',
|
||
startY: '',
|
||
ratio: 1,
|
||
projectSn: '',
|
||
formType: '', // 1.新增高边坡 2.编辑高边坡
|
||
editId: '',
|
||
monitorTypeId: '',
|
||
steelStructureEngineeringToMonitorTypeId: '',
|
||
steelStructureEngineeringId: '',
|
||
activeImgUrl: '',
|
||
showAddImg: false,
|
||
isEditPoint: false,
|
||
removeData: '',
|
||
removeType: '',
|
||
total: 0,
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
title: '',
|
||
dialogType: 1, // 1添加 2 编辑
|
||
id: '',
|
||
}
|
||
},
|
||
created() {
|
||
this.projectSn = this.$store.state.projectSn
|
||
this.getDefaultMonitorTypeList()
|
||
this.selectDeepExcavationList()
|
||
this.selectDeepExcavationSensorTypeList()
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
addRow() {
|
||
let obj = {
|
||
sensorSn: '',
|
||
sensorName: '', //传感器名称
|
||
steelStructureSensorTypeId: '',
|
||
alarmValue: '', //累计值告警阈值
|
||
rateAlarmValue: '', //变化速率报警值
|
||
fiducialValue: '' //基准值
|
||
// earlyWarningValue: "", // 预警
|
||
// alarmValue: "", //报警
|
||
// controlValue: "" //控制
|
||
}
|
||
// console.log('--------------',this.testPointForm.sensorList)
|
||
this.testPointForm.sensorList.push(obj)
|
||
},
|
||
deleteRow(val, index) {
|
||
if (val.id != '') {
|
||
this.$confirm(
|
||
'此操作将永久删除当前传感器以及相关联的数据, 是否继续?',
|
||
'提示',
|
||
{
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}
|
||
)
|
||
.then(() => {
|
||
this.testPointForm.sensorList.splice(index, 1)
|
||
this.$message({
|
||
type: 'success',
|
||
message: '删除成功!'
|
||
})
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: 'info',
|
||
message: '已取消删除'
|
||
})
|
||
})
|
||
}
|
||
},
|
||
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({
|
||
measurePointNumber: this.removeData.measurePointNumber
|
||
}).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.exportData.measurePointNumber = ''
|
||
this.exportData.alarmState = ''
|
||
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,
|
||
steelStructurePlaneFigureId: item.steelStructurePlaneFigureId
|
||
})
|
||
})
|
||
// 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: [],
|
||
measurePointIds: []
|
||
}
|
||
this.$refs['testPointImgForm'].resetFields()
|
||
},
|
||
|
||
// 列表查询所有测点
|
||
selectDeepExcavationAllMeasurePointList() {
|
||
selectDeepExcavationAllMeasurePointListApi({
|
||
steelStructureEngineeringId: this.steelStructureEngineeringId
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.testPointOptions = res.result
|
||
}
|
||
})
|
||
},
|
||
// 添加布置图
|
||
openAddImgDialog() {
|
||
this.title = '添加平面图'
|
||
this.dialogType = 1
|
||
this.showAddImg = true
|
||
this.selectDeepExcavationAllMeasurePointList()
|
||
},
|
||
// 编辑布置图
|
||
editDeepimg(val) {
|
||
console.log('编辑', val)
|
||
this.title = '编辑平面图'
|
||
this.dialogType = 2
|
||
this.showAddImg = true
|
||
this.id = val.id
|
||
this.selectDeepExcavationAllMeasurePointList()
|
||
this.testPointImgForm.planeFigureName = val.planeFigureName
|
||
this.testPointImgForm.measurePointIds = val.measurePointIds.split(',')
|
||
this.testPointImgForm.fileList = [{ url: val.imageUrl }]
|
||
},
|
||
// 添加编辑保存
|
||
submitImgConfig() {
|
||
this.$refs['testPointImgForm'].validate((valid) => {
|
||
if (valid) {
|
||
let data = {
|
||
planeFigureName: this.testPointImgForm.planeFigureName,
|
||
measurePointIds: this.testPointImgForm.measurePointIds.join(','),
|
||
imageUrl: this.testPointImgForm.fileList[0].url,
|
||
projectSn: this.projectSn,
|
||
steelStructureEngineeringId: this.steelStructureEngineeringId
|
||
}
|
||
console.log(data)
|
||
if (this.dialogType == 1) {
|
||
addDeepExcavationPlaneFigureApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message.success(
|
||
this.$t('message.deepFoundConfig.addSuccess')
|
||
)
|
||
this.selectDeepExcavationPlaneFigureList()
|
||
this.showAddImg = false
|
||
}
|
||
})
|
||
} else {
|
||
;(data.id = this.id),
|
||
editDeepExcavationPlaneFigureApi(data).then((res) => {
|
||
// console.log("--------编辑成功了吗", res);
|
||
if (res.code == 200) {
|
||
this.$message.success('编辑成功')
|
||
this.showAddImg = false
|
||
this.testPointImgForm.measurePointIds = []
|
||
console.log('编辑旺盛之后', this.testPointImgForm.measurePointIds)
|
||
let val = {
|
||
id: res.result.id,
|
||
steelStructureEngineeringId: res.result.steelStructureEngineeringId
|
||
}
|
||
this.selectDeepExcavationPlaneFigureCoordinate(val)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 删除布置图
|
||
deleteDeepImg(val) {
|
||
this.removeType = 1
|
||
this.removeData = val
|
||
this.deleteInfo = true
|
||
},
|
||
// 获取点位位置信息
|
||
selectDeepExcavationPlaneFigureCoordinate(val) {
|
||
selectDeepExcavationPlaneFigureCoordinateApi({
|
||
steelStructurePlaneFigureId: val.id,
|
||
steelStructureEngineeringId: val.steelStructureEngineeringId
|
||
}).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);
|
||
// let obj = item.sensorlist
|
||
// 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 = {
|
||
steelStructureEngineeringId: this.steelStructureEngineeringId,
|
||
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 = this.exportData
|
||
;(data.startDate =
|
||
this.acquisitionTime !== null && this.acquisitionTime !== undefined && this.acquisitionTime !== '' ? this.acquisitionTime[0] : ''),
|
||
(data.endDate =
|
||
this.acquisitionTime !== null && this.acquisitionTime !== undefined && this.acquisitionTime !== '' ? this.acquisitionTime[1] : ''),
|
||
(data.pageNo = this.pagInfo2.pageNo),
|
||
(data.pageSize = this.pagInfo2.pageSize),
|
||
(data.steelStructureEngineeringToMonitorTypeId = this.steelStructureEngineeringToMonitorTypeId)
|
||
selectDeepExcavationCurrentDataListApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.currentPointDetail = res.result.data.records
|
||
console.log('分页信息', res)
|
||
this.pagInfo2.total = res.result.data.total
|
||
}
|
||
})
|
||
},
|
||
// 导出数据
|
||
exportDataFn() {
|
||
;(this.exportData.startDate =
|
||
this.acquisitionTime != '' ? this.acquisitionTime[0] : ''),
|
||
(this.exportData.endDate =
|
||
this.acquisitionTime != '' ? this.acquisitionTime[1] : ''),
|
||
console.log('=======导出传进去的参数', this.exportData)
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
'xmgl/steelStructureCurrentData/exportData?alarmState=' +
|
||
this.exportData.alarmState +
|
||
'&measurePointNumber=' +
|
||
this.exportData.measurePointNumber +
|
||
'&projectSn=' +
|
||
this.projectSn +
|
||
'&steelStructureEngineeringToMonitorTypeId=' +
|
||
this.steelStructureEngineeringToMonitorTypeId +
|
||
'&startTime=' +
|
||
this.exportData.startDate +
|
||
'&endTime=' +
|
||
this.exportData.endDate
|
||
},
|
||
// 获取当前时间 返回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
|
||
}
|
||
this.$refs['testPointForm'].validate((valid) => {
|
||
if (valid) {
|
||
let data = this.testPointForm
|
||
data.steelStructureEngineeringToMonitorTypeId = this.steelStructureEngineeringToMonitorTypeId
|
||
data.steelStructureEngineeringId = this.steelStructureEngineeringId // 深高边坡id
|
||
if (this.isPreviewTitle == '新增测点') {
|
||
addDeepExcavationMeasurePointApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message.success(
|
||
this.$t('message.deepFoundConfig.addSuccess2')
|
||
)
|
||
this.selectMeasurePointList()
|
||
this.showTestPoint = false
|
||
}
|
||
})
|
||
} else {
|
||
console.log('=====编辑的参数', data)
|
||
editDeepExcavationMeasurePointApi(data).then((res) => {
|
||
if (res.code == 200) {
|
||
this.$message.success('编辑成功')
|
||
this.selectMeasurePointList()
|
||
this.showTestPoint = false
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
// 1编辑 2详情 else新增
|
||
preViewPointData(val, type) {
|
||
console.log('查询详情', val)
|
||
if (type == 1) {
|
||
this.isPreview = false
|
||
this.show = true
|
||
this.isPreviewTitle = '编辑'
|
||
console.log('======', this.isPreviewTitle)
|
||
} else {
|
||
this.isPreview = true
|
||
this.show = false
|
||
this.isPreviewTitle = '详情'
|
||
}
|
||
this.showTestPoint = true
|
||
let data = {}
|
||
// this.testPointForm = val
|
||
data.measurePointNumber = val.measurePointNumber
|
||
data.steelStructureEngineeringToMonitorTypeId = val.steelStructureEngineeringToMonitorTypeId
|
||
getDetailDeepExcavationApi(data).then((res) => {
|
||
console.log('--------------查询的结果', res.result)
|
||
res.result.sensorList.map((item) => {
|
||
console.log('item', item)
|
||
item.earlyWarningValue = String(item.earlyWarningValue)
|
||
item.alarmValue = String(item.alarmValue)
|
||
item.controlValue = String(item.controlValue)
|
||
item.rateAlarmValue = String(item.rateAlarmValue)
|
||
item.fiducialValue = String(item.fiducialValue)
|
||
item.steelStructureSensorTypeId = String(item.steelStructureSensorTypeId)
|
||
return
|
||
})
|
||
console.log('转换类型', res.result.sensorList)
|
||
this.testPointForm = res.result
|
||
this.testPointForm.thresholdList = res.result.sensorList
|
||
})
|
||
|
||
// this.testPointData = val.thresholdList
|
||
},
|
||
// 删除测点数据
|
||
deletePointData(val) {
|
||
console.log('sssss', 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: '',
|
||
sensorList: [
|
||
{
|
||
sensorSn: '', // 传感器编号
|
||
steelStructureSensorTypeId: '', // 传感器类型
|
||
earlyWarningValue: '', // 预警
|
||
alarmValue: '', //报警
|
||
controlValue: '' //控制
|
||
}
|
||
]
|
||
}
|
||
this.isPreview = false
|
||
this.$refs['testPointForm'].resetFields()
|
||
this.testPointForm.sensorList.forEach((item) => {
|
||
item.alarmValue = ''
|
||
item.earlyWarningValue = ''
|
||
item.controlValue = ''
|
||
})
|
||
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 = {
|
||
steelStructureEngineeringId: 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)
|
||
console.log('监测信息', res)
|
||
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.steelStructureEngineeringId = val.id
|
||
this.selectDeepExcavationPlaneFigureList()
|
||
},
|
||
// 新增测点
|
||
addTestPoint() {
|
||
this.show = true
|
||
this.isPreviewTitle = '新增测点'
|
||
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 = {
|
||
slopeName: res.result.slopeName,
|
||
startDate: res.result.startDate,
|
||
endDate: res.result.endDate,
|
||
safetyLevel: Number(res.result.safetyLevel),
|
||
foundationDitchDepth: res.result.foundationDitchDepth,
|
||
foundationDitchGirth: res.result.foundationDitchGirth,
|
||
supportPattern: res.result.supportPattern,
|
||
surveyDirectorName: res.result.surveyDirectorName,
|
||
surveyPersonnelName: res.result.surveyPersonnelName,
|
||
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.steelStructureMonitorTypeIds = 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 = {
|
||
slopeName: '',
|
||
// projectAddress: "",
|
||
startDate: '',
|
||
endDate: '',
|
||
safetyLevel: 1,
|
||
foundationDitchDepth: '',
|
||
foundationDitchGirth: '',
|
||
supportPattern: '',
|
||
surveyDirectorName: '',
|
||
surveyPersonnelName: '',
|
||
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.steelStructureEngineeringToMonitorTypeId = val.id
|
||
this.steelStructureEngineeringId = val.steelStructureEngineeringId
|
||
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,
|
||
steelStructureEngineeringToMonitorTypeId: this.steelStructureEngineeringToMonitorTypeId,
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize
|
||
}
|
||
console.log('参数', data)
|
||
selectMeasurePointListApi(data).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
console.log('====查询测点管理的列表', res)
|
||
this.surveyPointDetail = res.result.records
|
||
this.total = res.result.total
|
||
}
|
||
})
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageSize = val
|
||
this.selectMeasurePointList()
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.pageNo = val
|
||
this.selectMeasurePointList()
|
||
},
|
||
|
||
// 获取高边坡布置图图片大小
|
||
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>
|
||
.sensor {
|
||
border: 1px solid #e7e8eb;
|
||
margin-bottom: 10px;
|
||
padding: 20px 30px 10px 25px;
|
||
border-radius: 10px;
|
||
.sensorDel {
|
||
position: absolute;
|
||
right: 68px;
|
||
}
|
||
}
|
||
.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: 650px;
|
||
margin-bottom: 30px;
|
||
}
|
||
.btn-box {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.backText {
|
||
padding: 10px;
|
||
}
|
||
.alarm_status1 {
|
||
padding: 4px 6px;
|
||
// background: #44d7b6;
|
||
color: #44d7b6;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status2 {
|
||
padding: 4px 6px;
|
||
// background: #7953f6;
|
||
color: #f76462;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status3 {
|
||
padding: 4px 6px;
|
||
// background: #f67f52;
|
||
color: #f76462;
|
||
border-radius: 3px;
|
||
}
|
||
.alarm_status4 {
|
||
padding: 4px 6px;
|
||
// background: #5484f6;
|
||
color: #f76462;
|
||
border-radius: 3px;
|
||
}
|
||
.formBox {
|
||
width: 85%;
|
||
margin: 0 auto;
|
||
.tables {
|
||
min-height: 0;
|
||
}
|
||
}
|
||
.form-wrap {
|
||
height: 620px;
|
||
}
|
||
.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 {
|
||
overflow: auto;
|
||
/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%;
|
||
}
|
||
}
|
||
.pager {
|
||
margin-top: 5px;
|
||
text-align: center;
|
||
.el-pager li.active {
|
||
background-color: @--bg-color-primary!important;
|
||
}
|
||
button:disabled,
|
||
.btn-next,
|
||
.btn-prev {
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
</style> |