2284 lines
68 KiB
Vue
2284 lines
68 KiB
Vue
<template>
|
|
<div class="payoff">
|
|
<el-row type="flex" style="width: 100%; height: 100%">
|
|
<el-col class="left-col">
|
|
<vue-scroll>
|
|
<div class="scroll">
|
|
<div class="list-wrapper">
|
|
<div
|
|
v-for="(item, index) in operationList"
|
|
:key="item.id"
|
|
:class="['list-item', { 'is-active': activeIndex == index }]"
|
|
@click="handleItemClick(index)"
|
|
>
|
|
<span class="title">{{ item.operationName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</el-col>
|
|
<el-col class="right-col">
|
|
<el-row style="width: 100%; height: 100%">
|
|
<el-col
|
|
class="top-col"
|
|
:span="4"
|
|
:class="styleType == 3 ? 'changeStyle' : ''"
|
|
>
|
|
<el-form
|
|
size="medium"
|
|
:model="queryParams"
|
|
ref="queryForm"
|
|
:inline="true"
|
|
>
|
|
<el-form-item label="选择设备" prop="devSn">
|
|
<el-select
|
|
v-model="queryParams.devSn"
|
|
placeholder="请选择"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in personList"
|
|
:key="item.id"
|
|
:label="`${item.workerName}(${item.devSn})`"
|
|
:value="item.devSn"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="时间" prop="uploadTime">
|
|
<el-date-picker
|
|
v-model="queryParams.uploadTime"
|
|
type="daterange"
|
|
value-format="yyyy-MM-dd"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
>
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" plain @click="handleQuery">查询</el-button>
|
|
<el-button type="warning" plain @click="handleRefresh">刷新</el-button>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
v-permission="{
|
|
key: 'demonGeneration',
|
|
menuPath: '/project/operationManagement/smartSafetyHelmet',
|
|
}"
|
|
type="primary"
|
|
@click="ruleConfigDialog"
|
|
>演示数据生成</el-button
|
|
>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
v-permission="{
|
|
key: 'datchDelete',
|
|
menuPath: '/project/operationManagement/smartSafetyHelmet',
|
|
}"
|
|
type="primary"
|
|
@click="deleteAttendanceBatch"
|
|
>批量删除</el-button
|
|
>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-col>
|
|
<el-col
|
|
class="bottom-col"
|
|
:span="20"
|
|
:class="styleType == 3 ? 'bottomTwo' : ''"
|
|
>
|
|
<div class="scroll" :class="styleType == 3 ? 'boxBottom' : ''">
|
|
<el-table
|
|
:max-height="570"
|
|
:height="570"
|
|
ref="multipleTable"
|
|
v-loading="loading"
|
|
:data="userList"
|
|
:key="activeIndex"
|
|
class="tables table-box"
|
|
:class="{'scrollbar-exists': scrollbarFlag}"
|
|
>
|
|
<template slot="empty">
|
|
<el-empty :image="require('@/assets/images/noData4.png')" :image-size="100" description="暂无数据"></el-empty>
|
|
</template>
|
|
<el-table-column
|
|
type="selection" align="center"
|
|
width="55"
|
|
></el-table-column>
|
|
<el-table-column label="设备序号" align="center" prop="devSn">
|
|
<template #default="{ row }">
|
|
<span>{{ row.devSn }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<template v-if="activeIndex == 0">
|
|
<el-table-column
|
|
label="上报时间"
|
|
align="center"
|
|
prop="uploadTime"
|
|
/>
|
|
</template>
|
|
<template v-if="activeIndex == 1">
|
|
<el-table-column
|
|
label="报警时间"
|
|
align="center"
|
|
prop="alarmTime"
|
|
/>
|
|
<el-table-column
|
|
label="报警类型"
|
|
align="center"
|
|
prop="devSn"
|
|
>
|
|
<template #default="{ row }">
|
|
<span>{{ alarmTypeUp(row.alarmType) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
<el-table-column
|
|
label="当前位置维度x"
|
|
align="center"
|
|
prop="latitude"
|
|
/>
|
|
<el-table-column
|
|
label="当前位置经度y"
|
|
align="center"
|
|
prop="longitude"
|
|
/>
|
|
<el-table-column label="操作" align="center">
|
|
<template #default="{ row }">
|
|
<el-button
|
|
v-permission="{
|
|
key: 'edit',
|
|
menuPath:
|
|
'/project/operationManagement/smartSafetyHelmet',
|
|
}"
|
|
style="border: 0 !important"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleUpdate(row)"
|
|
>编辑</el-button
|
|
>
|
|
<el-button
|
|
v-permission="{
|
|
key: 'delete',
|
|
menuPath:
|
|
'/project/operationManagement/smartSafetyHelmet',
|
|
}"
|
|
style="border: 0 !important; color: #f56c6c"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-row type="flex" justify="center">
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNo"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
:pageSizes="[...$store.state.PAGESIZRS, 100, 200, 500, 1000]"
|
|
layout="total,sizes, prev, pager, next, jumper"
|
|
/>
|
|
</el-row>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 编辑弹窗 -->
|
|
<el-dialog :visible.sync="open" width="600px" append-to-body title="编辑">
|
|
<el-form
|
|
ref="editForm"
|
|
:model="editForm"
|
|
:rules="editFormRules"
|
|
size="medium"
|
|
label-width="200px"
|
|
>
|
|
<el-form-item label="选择设备" prop="devSn">
|
|
<el-select
|
|
v-model="editForm.devSn"
|
|
placeholder="请选择"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in personList"
|
|
:key="item.id"
|
|
:label="`${item.workerName}(${item.devSn})`"
|
|
:value="item.devSn"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<template v-if="activeIndex == 1">
|
|
<el-form-item label="报警时间" prop="alarmTime">
|
|
<el-date-picker
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|
type="datetime"
|
|
placeholder="报警时间"
|
|
v-model="editForm.alarmTime"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item label="报警类型" prop="alarmType">
|
|
<el-select
|
|
v-model="editForm.alarmType"
|
|
placeholder="请选择"
|
|
clearable
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in safetyHatAlarmTypeList"
|
|
:key="item.value"
|
|
:label="item.desc"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item label="当前位置维度x" prop="latitude">
|
|
<el-input-number
|
|
:controls="false"
|
|
v-model="editForm.latitude"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
<el-form-item label="当前位置经度y" prop="longitude">
|
|
<el-input-number
|
|
:controls="false"
|
|
v-model="editForm.longitude"
|
|
></el-input-number>
|
|
</el-form-item>
|
|
<template v-if="activeIndex == 0">
|
|
<el-form-item label="上传时间" prop="uploadTime">
|
|
<el-date-picker
|
|
value-format="yyyy-MM-dd hh:mm:ss"
|
|
type="datetime"
|
|
placeholder="上传时间"
|
|
v-model="editForm.uploadTime"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
</template>
|
|
</el-form>
|
|
<div slot="footer" style="text-align: center">
|
|
<el-button @click="cancel">取消</el-button>
|
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 下载模拟数据弹窗 -->
|
|
<el-dialog
|
|
:visible.sync="downSimulateShow"
|
|
width="600px"
|
|
append-to-body
|
|
title="下载模拟数据"
|
|
>
|
|
<el-radio-group class="simulate_box" v-model="staffSimulateRadio">
|
|
<el-radio
|
|
:label="item.staffSimulateId"
|
|
v-for="item in staffSimulateList"
|
|
:key="item.staffSimulateId"
|
|
>{{ item.staffSimulateName }}</el-radio
|
|
>
|
|
</el-radio-group>
|
|
<div slot="footer" >
|
|
<el-button @click="downSimulateShow = false">取消</el-button>
|
|
<el-button type="primary" @click="submitDownSimulate">确定</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<!-- 演示数据生成弹窗 -->
|
|
<el-dialog
|
|
:visible.sync="ruleConfigShow"
|
|
width="800px"
|
|
append-to-body
|
|
title="规则配置"
|
|
class="ruleConfig_box"
|
|
>
|
|
<el-form
|
|
ref="ruleConfigForm"
|
|
:model="ruleConfigForm"
|
|
:rules="ruleConfigFormRules"
|
|
size="medium"
|
|
label-width="160px"
|
|
>
|
|
<el-form-item label="选择设备" prop="devSns">
|
|
<!-- <el-checkbox-group v-model="ruleConfigForm.devSns">
|
|
<el-checkbox
|
|
:label="item.devSn"
|
|
v-for="item in allUfaceDev"
|
|
:key="item.devSn"
|
|
>{{ item.deviceName }}</el-checkbox
|
|
>
|
|
</el-checkbox-group> -->
|
|
<el-select
|
|
v-model="ruleConfigForm.devSns"
|
|
placeholder="请选择"
|
|
clearable
|
|
filterable
|
|
multiple
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in personList"
|
|
:key="item.id"
|
|
:label="`${item.workerName}(${item.devSn})`"
|
|
:value="item.devSn"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="数据量" prop="devGenerateNum">
|
|
<span class="mr_8">所选设备每个设备随机生成</span
|
|
><el-input-number
|
|
v-model="ruleConfigForm.devGenerateNum"
|
|
:min="0"
|
|
:max="999"
|
|
></el-input-number
|
|
><span class="ml_8">条数据</span>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="activeIndex == 0 ? '模拟上传时间范围' : '模拟报警时间范围'"
|
|
prop="startTime"
|
|
>
|
|
<div class="flex">
|
|
<el-form-item prop="startTime">
|
|
<el-date-picker
|
|
:picker-options="handleTimeChange(ruleConfigForm.endTime, 'startTime')"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
type="datetime"
|
|
placeholder="开始时间"
|
|
v-model="ruleConfigForm.startTime"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
<span class="mr_8 ml_8">至</span>
|
|
<el-form-item prop="endTime">
|
|
<el-date-picker
|
|
:picker-options="handleTimeChange(ruleConfigForm.startTime, 'endTime')"
|
|
value-format="yyyy-MM-dd HH:mm:ss"
|
|
type="datetime"
|
|
placeholder="结束时间"
|
|
v-model="ruleConfigForm.endTime"
|
|
></el-date-picker>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item v-if="activeIndex == 0" label="数据范围" prop="rangeType">
|
|
经纬度
|
|
<el-button @click="selectionAreaDialog" type="primary" plain
|
|
>框选区域</el-button
|
|
>
|
|
{{ selectionAreaInfo.rangeType == 1 ? "标准区域" : "自定义区域" }}
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-else-if="activeIndex == 1"
|
|
label="报警状态"
|
|
prop="alarmTypes"
|
|
>
|
|
<el-checkbox-group v-model="ruleConfigForm.alarmTypes">
|
|
<el-checkbox
|
|
:label="item.value.toString()"
|
|
v-for="item in safetyHatAlarmTypeList"
|
|
:key="item.value"
|
|
>{{ item.desc }}</el-checkbox
|
|
>
|
|
</el-checkbox-group>
|
|
<el-form-item prop="rangeType">
|
|
经纬度
|
|
<el-button @click="selectionAreaDialog" type="primary" plain
|
|
>框选区域</el-button
|
|
>
|
|
{{ selectionAreaInfo.rangeType == 1 ? "标准区域" : "自定义区域" }}
|
|
</el-form-item>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" style="text-align: center">
|
|
<el-button
|
|
:loading="ruleConfigLoading"
|
|
type="primary"
|
|
@click="submitRuleConfigForm"
|
|
>{{
|
|
ruleConfigLoading ? "正在生成数据，请耐心等待!" : "开始生成"
|
|
}}</el-button
|
|
>
|
|
<el-button type="primary" @click="ruleConfigReset">重置配置</el-button>
|
|
<el-button @click="ruleConfigCancel">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
<el-dialog
|
|
:visible.sync="positioningMapDialog"
|
|
width="1100px"
|
|
append-to-body
|
|
title="定位地图"
|
|
class="ruleConfig_box"
|
|
>
|
|
<div class="map-top">
|
|
<div class="map-box" id="mapContainer"></div>
|
|
<div class="wei-lan" v-if="checked === 1">
|
|
<!-- @click="openFence" -->
|
|
<div class="icon-off" v-if="!fenceShow" @click="openFenceCreate">
|
|
<img src="@/assets/images/carPosition/iconOff.png" alt="" />
|
|
<div>围栏</div>
|
|
</div>
|
|
<div class="icon-on" v-if="fenceShow" @click="fenceShow = false">
|
|
<img src="@/assets/images/carPosition/iconOn.png" alt="" />
|
|
<div>围栏</div>
|
|
</div>
|
|
<!-- **********************围栏弹窗******************************** -->
|
|
<div class="fenceDialog" v-if="fenceShow || fenceCreateShow">
|
|
<!-- <div class="fence-dialog-modal" v-if="fenceCreateShow"></div> -->
|
|
<!-- <div class="fence-box">
|
|
<div class="close-icon" @click="closeFence">
|
|
<i
|
|
class="el-icon-close"
|
|
style="font-size: 22px; color: #919398"
|
|
></i>
|
|
</div>
|
|
<div class="fence-title">围栏</div>
|
|
<div class="fence-tool">
|
|
<div class="tool" @click="openFenceCreate">创建围栏</div>
|
|
<div class="tool" @click="deleteFence">删除围栏</div>
|
|
</div>
|
|
<div class="fence-select">
|
|
<el-input
|
|
v-model="fenceSearch"
|
|
placeholder="请输入"
|
|
size="small"
|
|
clearable
|
|
@change="fenceNameChange"
|
|
></el-input>
|
|
</div>
|
|
<div class="fence-radio" v-if="fenceList.length > 0">
|
|
<el-checkbox
|
|
:indeterminate="isIndeterminateFence"
|
|
v-model="checkAllFence"
|
|
@change="fenceAllChange"
|
|
>全选</el-checkbox
|
|
>
|
|
<vue-scroll>
|
|
<div style="margin: 5px 0"></div>
|
|
<el-checkbox-group
|
|
v-model="checkedFence"
|
|
@change="fenceCitiesChange"
|
|
>
|
|
<div v-for="item in fenceList" :key="item.id">
|
|
<el-checkbox :label="item.id" :key="item.id"
|
|
>{{ item.fenceName }}
|
|
</el-checkbox>
|
|
</div>
|
|
</el-checkbox-group>
|
|
</vue-scroll>
|
|
</div>
|
|
<div v-else style="text-align: center; margin-top: 100px">
|
|
暂无围栏
|
|
</div>
|
|
</div> -->
|
|
<!-- 创建围栏弹窗 -->
|
|
<div class="fenceCreate" v-if="fenceCreateShow">
|
|
<!-- <div class="fence-modal"></div> -->
|
|
<div class="fenceCrete-box">
|
|
<div class="close-icon" @click="closeFenceCreate">
|
|
<i
|
|
class="el-icon-close"
|
|
style="font-size: 22px; color: #919398"
|
|
></i>
|
|
</div>
|
|
<div class="fence-title">创建围栏</div>
|
|
<el-form
|
|
size="medium"
|
|
:model="addForm"
|
|
ref="addForm"
|
|
label-width="80px"
|
|
:rules="formFenceRules"
|
|
>
|
|
<!-- <el-form-item label="围栏名称" prop="fenceName">
|
|
<el-input
|
|
v-model="addForm.fenceName"
|
|
placeholder="请输入"
|
|
></el-input>
|
|
</el-form-item> -->
|
|
|
|
<el-form-item label="范围类型" prop="rangeType">
|
|
<el-radio-group
|
|
v-model="addForm.rangeType"
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: 10px;
|
|
padding-right: 10px;
|
|
"
|
|
@change="changeAreaType"
|
|
>
|
|
<el-radio :label="1">标准区域</el-radio>
|
|
<el-radio :label="2">自定义</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="区域半径"
|
|
prop="areaRadius"
|
|
v-if="addForm.rangeType === 1"
|
|
>
|
|
<el-input
|
|
type="number"
|
|
v-model="addForm.areaRadius"
|
|
placeholder="请输入"
|
|
:maxlength="5"
|
|
@input="areaRadiusChange"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="围栏形状"
|
|
prop="fenceShape"
|
|
v-if="addForm.rangeType === 2"
|
|
>
|
|
<div class="fence-shape">多边形</div>
|
|
</el-form-item>
|
|
<div class="create-footer">
|
|
<el-button
|
|
class="cancleBtn"
|
|
@click="handleCancel"
|
|
icon="el-icon-circle-close"
|
|
size="medium"
|
|
>{{ $t("message.alarmValueSet.cancel") }}
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-circle-check"
|
|
@click="submitFence"
|
|
size="medium"
|
|
>{{ $t("message.alarmValueSet.save") }}
|
|
</el-button>
|
|
</div>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- **********************围栏弹窗******************************** -->
|
|
|
|
<div class="start-track" @click="startAnimation" v-if="checked === 2">
|
|
开始轨迹动画
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
enterpriseList,
|
|
teamList,
|
|
departmentList,
|
|
payrollRecord,
|
|
exportSalaryPdf,
|
|
exportSalaryExcel,
|
|
updateWorkerWagesPayment,
|
|
} from "@/assets/js/api/laborManagement/payoff";
|
|
|
|
import {
|
|
exportAttendanceExcel,
|
|
deleteBatchSafetyHatDataApi,
|
|
editSafetyHatDataApi,
|
|
mockDataSafetyHatApi,
|
|
getDepartmentAndTeamListApi,
|
|
getMockSafetyHatDataConfigApi,
|
|
saveMockSafetyHatDataConfigApi,
|
|
resetMockSafetyHatDataConfigApi,
|
|
saveMockSafetyHatAlarmConfigApi,
|
|
resetMockSafetyHatAlarmConfigApi,
|
|
getMockSafetyHatAlarmConfigApi,
|
|
editSafetyHatAlarmApi,
|
|
deleteBatchSafetyHatAlarmApi,
|
|
mockDataSafetyHatAlarmApi,
|
|
getSafetyHatAlarmTypeApi,
|
|
} from "@/assets/js/api/operationManagement";
|
|
import {
|
|
selectDustNoisePageListApi,
|
|
environmentDevList,
|
|
} from "@/assets/js/api/environmentManage";
|
|
import {
|
|
getWorkerInfoList,
|
|
getPageListApi,
|
|
getEnterpriseInfoList,
|
|
} from "@/assets/js/api/laborPerson";
|
|
import {
|
|
getSafeHatPayDataPageApi,
|
|
getSafeHatAlarmRecordPageApi,
|
|
getSafeHatEquipmentCentralPageApi,
|
|
} from "@/assets/js/api/smartSafeHat/smartSafeHat.js";
|
|
// 围栏相关API
|
|
import {
|
|
getFenceTypeTotal,
|
|
getVehiclePositionFence,
|
|
addVehiclePositionFence,
|
|
editVehiclePositionFence,
|
|
deleteVehiclePositionFence,
|
|
deleteBatchVehiclePositionFence,
|
|
getAlarmRecordInfo,
|
|
} from "@/assets/js/api/carManage";
|
|
import dayjs from "dayjs";
|
|
import { nowDate } from "@/util";
|
|
import { isJSON } from "@/util/nowDate";
|
|
var mouseTool;
|
|
var marker;
|
|
var lineArr;
|
|
var mapInstance;
|
|
var map;
|
|
export default {
|
|
data: () => ({
|
|
// 定位地图
|
|
circleMapData: [], // 圆形围栏存放
|
|
shapeMapData: [], // 多边形围栏存放
|
|
devTypeTotal: {},
|
|
fenceCreateShow: false, //创建围栏弹窗
|
|
fenceList: ["围栏1", "围栏2", "围栏3", "围栏4", "围栏5"],
|
|
fenceSearch: "", // 围栏搜索
|
|
fenceShow: false, //打开围栏弹窗
|
|
dayValue: new Date(),
|
|
nameOptions: [],
|
|
checkAll: false,
|
|
checkAllFence: false,
|
|
checkedCities: [],
|
|
checkedFence: [],
|
|
devList: ["鲁U6675", "刘江", "蒋东", "鲁U9675"],
|
|
isIndeterminate: true,
|
|
isIndeterminateFence: true,
|
|
checked: 1,
|
|
devName: "",
|
|
carStateType: "",
|
|
locationList: [],
|
|
addForm: {
|
|
areaRadius: 100, //区域半径
|
|
fenceName: "", //围栏名称
|
|
addr: "",
|
|
rangeType: 1,
|
|
locationList: [
|
|
{
|
|
fenceId: 0,
|
|
id: 0,
|
|
latitude: "",
|
|
longitude: "",
|
|
sortNum: 0,
|
|
},
|
|
],
|
|
projectSn: "",
|
|
enterpriseId: "",
|
|
},
|
|
formFenceRules: {
|
|
// fenceName: [
|
|
// {
|
|
// required: true,
|
|
// message: this.$t('message.personnelPosition.required'),
|
|
// trigger: 'blur'
|
|
// },
|
|
// { min: 1, max: 20, message: this.$t('message.alarmValueSet.message1'), trigger: 'blur' }
|
|
// ], // 长度在 1 到 20 个字符
|
|
// areaRadius: [
|
|
// {
|
|
// required: true,
|
|
// message: this.$t('message.personnelPosition.required'),
|
|
// trigger: 'change'
|
|
// }
|
|
// ]
|
|
},
|
|
selectionAreaInfo: {},
|
|
pagInfo: {
|
|
pageNo: 1, //页数
|
|
pageSize: 10, //条数
|
|
total: 0, //总条数
|
|
},
|
|
positioningMapDialog: false,
|
|
// 模拟数据下载弹窗
|
|
downSimulateShow: false,
|
|
staffSimulateRadio: 50,
|
|
staffSimulateList: [
|
|
{
|
|
staffSimulateId: 50,
|
|
staffSimulateName: "人员模拟数据(50)人.zip",
|
|
},
|
|
{
|
|
staffSimulateId: 100,
|
|
staffSimulateName: "人员模拟数据(100)人.zip",
|
|
},
|
|
{
|
|
staffSimulateId: 500,
|
|
staffSimulateName: "人员模拟数据(500)人.zip",
|
|
},
|
|
{
|
|
staffSimulateId: 1000,
|
|
staffSimulateName: "人员模拟数据(1000)人.zip",
|
|
},
|
|
],
|
|
checkAll: false,
|
|
isIndeterminate: true,
|
|
ruleConfigLoading: false,
|
|
isDepartmentTeamList: [],
|
|
personList: [],
|
|
allUfaceDev: [],
|
|
// 演示数据生成弹窗
|
|
ruleConfigShow: false,
|
|
ruleConfigForm: {
|
|
devSns: [],
|
|
devGenerateNum: "",
|
|
startTime: "",
|
|
endTime: "",
|
|
rangeType: "",
|
|
alarmTypes: [],
|
|
},
|
|
ruleConfigFormRules: {
|
|
devSns: [
|
|
{
|
|
type: "array",
|
|
required: true,
|
|
message: "请至少选择一个设备",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
devGenerateNum: [
|
|
{ required: true, message: "请输入数据量", trigger: "blur" },
|
|
],
|
|
startTime: [
|
|
{
|
|
required: true,
|
|
message: "请选择模拟开始时间",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
endTime: [
|
|
{
|
|
required: true,
|
|
message: "请选择模拟结束时间",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
alarmTypes: [
|
|
{
|
|
type: "array",
|
|
required: true,
|
|
message: "请至少选择一个报警状态",
|
|
trigger: "change",
|
|
},
|
|
],
|
|
rangeType: [
|
|
{
|
|
required: true,
|
|
message: "请选择数据范围",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
|
|
// 3 衢州版 2 星璇版 1 正常版本
|
|
styleType: "",
|
|
// 项目SN
|
|
projectSn: "",
|
|
// 弹窗标题
|
|
title: "",
|
|
// 控制弹窗的打开与关闭
|
|
open: false,
|
|
// 遮罩层
|
|
loading: false,
|
|
// 当前激活的项目
|
|
activeIndex: 0,
|
|
// 项目列表
|
|
operationList: [
|
|
{
|
|
operationId: 1,
|
|
operationName: "实时数据",
|
|
},
|
|
{
|
|
operationId: 2,
|
|
operationName: "报警数据",
|
|
},
|
|
],
|
|
// 总条数
|
|
total: 1,
|
|
// 用户数据
|
|
userList: [],
|
|
// 班组列表选项
|
|
teamOptions: [],
|
|
// 部门列表选项
|
|
departmentOptions: [],
|
|
// 查询参数
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
projectSn: undefined, // 项目SN
|
|
enterpriseId: undefined, // 企业ID
|
|
|
|
teamName: undefined,
|
|
departmentId: undefined,
|
|
payStatus: undefined,
|
|
payMonth: undefined,
|
|
workerName: undefined,
|
|
idCard: undefined,
|
|
uploadTime: [], // 报警时间
|
|
devSn: "",
|
|
},
|
|
editForm: {},
|
|
editFormRules: {
|
|
devSn: [{ required: true, message: "请选择设备", trigger: "change" }],
|
|
latitude: [{ required: true, message: "请输入维度", trigger: "blue" }],
|
|
longitude: [{ required: true, message: "请输入经度", trigger: "blue" }],
|
|
alarmType: [
|
|
{ required: true, message: "请选择报警类型", trigger: "change" },
|
|
],
|
|
alarmTime: [
|
|
{ required: true, message: "请选择报警时间", trigger: "change" },
|
|
],
|
|
uploadTime: [
|
|
{ required: true, message: "请选择上传时间", trigger: "change" },
|
|
],
|
|
},
|
|
enterpriseListData: [],
|
|
safetyHatAlarmTypeList: [],
|
|
scrollbarFlag: false,
|
|
}),
|
|
computed: {
|
|
headers() {
|
|
return { Authorization: this.$store.state.userInfo.token };
|
|
},
|
|
alarmTypeUp() {
|
|
return (alarmType) => {
|
|
const resultList = [...this.safetyHatAlarmTypeList];
|
|
const find = resultList.find((item) => item.value == alarmType);
|
|
return find ? find.desc : "";
|
|
};
|
|
},
|
|
},
|
|
created() {
|
|
this.projectSn = this.$store.state.projectSn;
|
|
this.queryParams.payMonth = nowDate();
|
|
this.styleType = this.$store.state.userInfo.styleType;
|
|
// 查询企业列表
|
|
this.getEnterpriseList();
|
|
this.getPersonListFn();
|
|
this.getMachineList();
|
|
this.getCompanyList();
|
|
this.getFenceList();
|
|
this.getSafetyHatAlarmType();
|
|
},
|
|
methods: {
|
|
handleTimeChange(diffTime, type) {
|
|
return {
|
|
disabledDate: (time) => {
|
|
// console.log(time, diffTime, type)
|
|
const date1 = dayjs(time)
|
|
const date2 = dayjs(diffTime)
|
|
if(type == 'startTime'){
|
|
return date1.diff(date2) > 0 ? true : false;
|
|
} else if(type == 'endTime'){
|
|
return date2.diff(date1) > 0 ? true : false;
|
|
}
|
|
return false
|
|
},
|
|
};
|
|
},
|
|
getSafetyHatAlarmType() {
|
|
getSafetyHatAlarmTypeApi({
|
|
projectSn: this.$store.state.projectSn,
|
|
}).then((res) => {
|
|
this.safetyHatAlarmTypeList = res.result;
|
|
});
|
|
},
|
|
selectionAreaDialog() {
|
|
this.addForm.areaRadius = this.selectionAreaInfo.areaRadius
|
|
? this.selectionAreaInfo.areaRadius
|
|
: 100;
|
|
this.addForm.rangeType = this.selectionAreaInfo.rangeType
|
|
? this.selectionAreaInfo.rangeType
|
|
: 1;
|
|
this.$nextTick(() => {
|
|
setTimeout(() => {
|
|
this.initMap();
|
|
if (this.selectionAreaInfo.rangeType === 1) {
|
|
this.echoCircle(this.selectionAreaInfo);
|
|
// this.drawCircle();
|
|
} else if (this.selectionAreaInfo.rangeType === 2) {
|
|
this.echoDrawPolygon(this.selectionAreaInfo);
|
|
// this.drawPolygon();
|
|
}
|
|
}, 10);
|
|
});
|
|
this.positioningMapDialog = true;
|
|
},
|
|
// 定位地图
|
|
handleCancel() {
|
|
this.fenceCreateShow = false;
|
|
this.closeFenceCreate();
|
|
},
|
|
|
|
// 获取围栏列表
|
|
getFenceList() {
|
|
let data = {
|
|
fenceName: this.fenceSearch,
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
getVehiclePositionFence(data).then((res) => {
|
|
if (res.success) {
|
|
this.fenceList = res.result;
|
|
this.circleMapData = res.result.filter(
|
|
(item) => item.rangeType === 1
|
|
);
|
|
this.shapeMapData = res.result.filter((item) => item.rangeType === 2);
|
|
console.log("围栏", this.circleMapData, this.shapeMapData);
|
|
}
|
|
});
|
|
},
|
|
areaRadiusChange() {
|
|
if (this.addForm.locationList.length === 1) {
|
|
this.drawCircle();
|
|
}
|
|
},
|
|
submitFence() {
|
|
if (this.locationList.length == 0) {
|
|
this.$message.error("未设置围栏区域!");
|
|
return;
|
|
}
|
|
this.addForm.locationList = this.locationList;
|
|
console.log("新增围栏", this.addForm);
|
|
let latitude = "";
|
|
let longitude = "";
|
|
let fenceShape = "";
|
|
if (this.addForm.locationList.length === 1) {
|
|
latitude = this.addForm.locationList[0].latitude;
|
|
longitude = this.addForm.locationList[0].longitude;
|
|
}
|
|
if (this.addForm.locationList.length > 1) {
|
|
for (let index = 0; index < this.addForm.locationList.length; index++) {
|
|
const element = this.addForm.locationList[index];
|
|
let currentStr = element.latitude + "|" + element.longitude;
|
|
if (this.addForm.locationList.length - 1 > index) {
|
|
currentStr = currentStr + ",";
|
|
}
|
|
fenceShape = fenceShape + currentStr;
|
|
}
|
|
}
|
|
console.log("多边形", fenceShape);
|
|
this.$refs["addForm"].validate((valid) => {
|
|
if (valid) {
|
|
let params = {
|
|
fenceName: this.addForm.fenceName,
|
|
areaRadius: this.addForm.areaRadius,
|
|
fenceShapeArr: JSON.stringify(this.addForm.locationList),
|
|
fenceShape: fenceShape,
|
|
latitude: latitude,
|
|
longitude: longitude,
|
|
rangeType: this.addForm.rangeType,
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
// params.alarmPushWorkerId = this.addForm.alarmPushWorkerId.join(',');
|
|
|
|
this.selectionAreaInfo = params;
|
|
this.ruleConfigForm.rangeType = this.addForm.rangeType;
|
|
console.log("新增信息", params);
|
|
// addVehiclePositionFence(params).then((res) => {
|
|
// if (res.success) {
|
|
// this.$message.success(res.message);
|
|
// this.getFenceList();
|
|
// }
|
|
// });
|
|
this.positioningMapDialog = false;
|
|
this.closeFenceCreate();
|
|
} else {
|
|
console.log("error submit!!");
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
//清空地图
|
|
clearFn() {
|
|
map.clearMap();
|
|
},
|
|
changeAreaType(e) {
|
|
// console.log("切换选项",e);
|
|
if (e === 1) {
|
|
this.drawCircle();
|
|
} else {
|
|
this.drawPolygon();
|
|
}
|
|
this.locationList = [];
|
|
},
|
|
//添加点标记
|
|
addMarker() {
|
|
// 创建一个 Icon
|
|
var startIcon = new AMap.Icon({
|
|
// 图标尺寸
|
|
size: new AMap.Size(25, 34),
|
|
// 图标的取图地址
|
|
image:
|
|
"//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
|
|
// 图标所用图片大小
|
|
imageSize: new AMap.Size(25, 34),
|
|
// 图标取图偏移量
|
|
// imageOffset: new AMap.Pixel(-9, -3)
|
|
});
|
|
var marker = new AMap.Marker({
|
|
icon: startIcon,
|
|
position: [
|
|
this.locationList[0].longitude,
|
|
this.locationList[0].latitude,
|
|
],
|
|
size: new AMap.Size(25, 34),
|
|
// offset: new AMap.Pixel(-13, -30)
|
|
});
|
|
marker.setMap(map);
|
|
},
|
|
exitEditFn() {
|
|
mouseTool.close();
|
|
},
|
|
//画圆
|
|
drawCircle() {
|
|
if (this.locationList.length == 0) {
|
|
return;
|
|
}
|
|
this.clearFn();
|
|
this.addMarker();
|
|
var circle = new AMap.Circle({
|
|
center: [this.locationList[0].longitude, this.locationList[0].latitude],
|
|
radius: this.addForm.areaRadius, //半径
|
|
borderWeight: 2,
|
|
strokeColor: "#6caffc",
|
|
strokeOpacity: 1,
|
|
strokeWeight: 2,
|
|
fillOpacity: 0.6,
|
|
strokeStyle: "solid",
|
|
// strokeDasharray: [10, 10],
|
|
// 线样式还支持 'dashed'
|
|
fillColor: "#6caffc",
|
|
zIndex: 50,
|
|
});
|
|
|
|
circle.setMap(map);
|
|
// 缩放地图到合适的视野级别
|
|
map.setFitView([circle]);
|
|
},
|
|
//绘制多边形
|
|
drawPolygon() {
|
|
this.clearFn();
|
|
console.log("自定义绘制");
|
|
mouseTool.polygon({
|
|
strokeColor: "#6caffc",
|
|
strokeOpacity: 1,
|
|
strokeWeight: 2,
|
|
// strokeOpacity: 0.2,
|
|
fillColor: "#6caffc",
|
|
fillOpacity: 0.6,
|
|
// 线样式还支持 'dashed'
|
|
strokeStyle: "solid",
|
|
// strokeStyle是dashed时有效
|
|
// strokeDasharray: [30,10],
|
|
});
|
|
},
|
|
// 圆
|
|
echoCircle(item) {
|
|
// console.log("画圆",item)
|
|
// 创建纯文本标记
|
|
let text = new AMap.Text({
|
|
text: item.fenceName,
|
|
anchor: "center", // 设置文本标记锚点
|
|
// draggable: true, // 是否拖拽
|
|
cursor: "pointer",
|
|
angle: 10,
|
|
style: {
|
|
padding: "10px",
|
|
"border-radius": "10px",
|
|
"background-color": "white",
|
|
"border-width": 0,
|
|
"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
|
|
"text-align": "center",
|
|
"font-size": "20px",
|
|
color: "blue",
|
|
},
|
|
position: [item.longitude, item.latitude],
|
|
});
|
|
|
|
let circle = new AMap.Circle({
|
|
center: [item.longitude, item.latitude],
|
|
radius: item.areaRadius, //半径
|
|
borderWeight: 2,
|
|
strokeColor: "#6caffc",
|
|
strokeOpacity: 1,
|
|
strokeWeight: 2,
|
|
fillOpacity: 0.6,
|
|
strokeStyle: "solid",
|
|
// strokeDasharray: [10, 10],
|
|
// 线样式还支持 'dashed'
|
|
fillColor: "#6caffc",
|
|
zIndex: 50,
|
|
});
|
|
text.setMap(map);
|
|
circle.setMap(map);
|
|
// 缩放地图到合适的视野级别
|
|
map.setFitView([circle]);
|
|
},
|
|
echoDrawPolygon(item) {
|
|
// console.log("画多边形",item)
|
|
let polygonPath = [];
|
|
let polygonArr = JSON.parse(item.fenceShapeArr);
|
|
for (let index = 0; index < polygonArr.length; index++) {
|
|
const element = polygonArr[index];
|
|
polygonPath.push([element.longitude, element.latitude]);
|
|
}
|
|
// console.log("多边形位置",polygonPath)
|
|
|
|
// let path = [
|
|
// [116.403322, 39.920255],
|
|
// [116.410703, 39.897555],
|
|
// [116.402292, 39.892353],
|
|
// [116.389846, 39.891365]
|
|
// ]
|
|
let path = polygonPath;
|
|
|
|
// 创建纯文本标记
|
|
let text = new AMap.Text({
|
|
text: item.fenceName,
|
|
anchor: "center", // 设置文本标记锚点
|
|
// draggable: true, // 是否拖拽
|
|
cursor: "pointer",
|
|
angle: 10,
|
|
style: {
|
|
padding: "10px",
|
|
"border-radius": "10px",
|
|
"background-color": "white",
|
|
"border-width": 0,
|
|
"box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
|
|
"text-align": "center",
|
|
"font-size": "20px",
|
|
color: "blue",
|
|
},
|
|
position: path[0],
|
|
});
|
|
|
|
let polygon = new AMap.Polygon({
|
|
path: path,
|
|
strokeColor: "#FF33FF",
|
|
strokeWeight: 6,
|
|
strokeOpacity: 0.2,
|
|
fillOpacity: 0.4,
|
|
fillColor: "#1791fc",
|
|
zIndex: 50,
|
|
});
|
|
text.setMap(map);
|
|
map.add(polygon);
|
|
// 缩放地图到合适的视野级别
|
|
map.setFitView([polygon]);
|
|
},
|
|
echoCarMarker(item) {
|
|
//初始化地图对象，加载地图
|
|
// let map = new AMap.Map("mapContainer", {resizeEnable: true});
|
|
let lnglats = [[item.longitude, item.latitude]];
|
|
|
|
function createMarkerAndInfoWindow() {
|
|
for (let i = 0; i < lnglats.length; i++) {
|
|
marker = new AMap.Marker({
|
|
position: lnglats[i],
|
|
map: map,
|
|
icon: "https://webapi.amap.com/images/car.png", // 自定义图标
|
|
});
|
|
// marker.content = '我是第' + (i + 1) + '个Marker';
|
|
marker.on("click", markerClick);
|
|
marker.emit("click", { target: marker });
|
|
}
|
|
}
|
|
|
|
// 使用逆地理编码获取地址信息
|
|
let address = "未知";
|
|
AMap.plugin("AMap.Geocoder", function () {
|
|
let geocoder = new AMap.Geocoder();
|
|
|
|
geocoder.getAddress(lnglats[0], function (status, result) {
|
|
if (status === "complete" && result.info === "OK") {
|
|
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
|
console.log("位置", address);
|
|
createMarkerAndInfoWindow();
|
|
} else {
|
|
console.log("获取地址信息失败");
|
|
createMarkerAndInfoWindow();
|
|
}
|
|
});
|
|
});
|
|
|
|
function markerClick(e) {
|
|
let lnglat = e.target.getPosition();
|
|
|
|
//构建信息窗体中显示的内容
|
|
// console.log(e)
|
|
let info = [];
|
|
|
|
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
|
info.push(
|
|
'<p style="padding:7px;">车辆/人员名称: ' + item.numberPlate + "</p>"
|
|
);
|
|
info.push(
|
|
'<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>"
|
|
);
|
|
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
|
|
|
let infoWindow = new AMap.InfoWindow({
|
|
offset: new AMap.Pixel(30, -30),
|
|
content: info.join(""), //使用默认信息窗体框样式，显示信息内容
|
|
});
|
|
// console.log("信息窗体",infoWindow)
|
|
infoWindow.open(map, e.target.getPosition());
|
|
}
|
|
map.setFitView();
|
|
},
|
|
echoPersonMarker(item) {
|
|
let lnglats = [[item.longitude, item.latitude]];
|
|
|
|
function createMarkerAndInfoWindow() {
|
|
for (let i = 0; i < lnglats.length; i++) {
|
|
let marker = new AMap.Marker({
|
|
position: lnglats[0],
|
|
map: map,
|
|
icon: personOn, // 自定义图标
|
|
});
|
|
marker.on("click", markerClick);
|
|
marker.emit("click", { target: marker });
|
|
}
|
|
}
|
|
|
|
// 使用逆地理编码获取地址信息
|
|
let address = "未知";
|
|
AMap.plugin("AMap.Geocoder", function () {
|
|
let geocoder = new AMap.Geocoder();
|
|
|
|
geocoder.getAddress(lnglats[0], function (status, result) {
|
|
if (status === "complete" && result.info === "OK") {
|
|
address = result.regeocode.formattedAddress; // 获取中文地址名称
|
|
console.log("位置", address);
|
|
createMarkerAndInfoWindow();
|
|
} else {
|
|
console.log("获取地址信息失败");
|
|
createMarkerAndInfoWindow();
|
|
}
|
|
});
|
|
});
|
|
|
|
function markerClick(e) {
|
|
let lnglat = e.target.getPosition();
|
|
|
|
//构建信息窗体中显示的内容
|
|
console.log(e);
|
|
let info = [];
|
|
|
|
info.push('<p style="padding:7px;">设备序号: ' + item.devSn + "</p>");
|
|
info.push(
|
|
'<p style="padding:7px;">车辆/人员名称: ' + item.personName + "</p>"
|
|
);
|
|
info.push(
|
|
'<p style="padding:7px;">最后更新时间: ' + item.updateTime + "</p>"
|
|
);
|
|
info.push('<p style="padding:7px;">位置: ' + address + "</p>");
|
|
|
|
var infoWindow = new AMap.InfoWindow({
|
|
offset: new AMap.Pixel(10, -30),
|
|
content: info.join(""), //使用默认信息窗体框样式，显示信息内容
|
|
});
|
|
|
|
infoWindow.open(map, lnglat);
|
|
}
|
|
map.setFitView();
|
|
},
|
|
fenceAllChange(val) {
|
|
this.clearFn();
|
|
let nameArr = this.fenceList.map((item) => item.id);
|
|
this.checkedFence = val ? nameArr : [];
|
|
this.isIndeterminateFence = false;
|
|
console.log("全选", val, this.checkedFence);
|
|
if (val) {
|
|
this.drawAllFencePoint();
|
|
}
|
|
this.pointSelectChange();
|
|
map.setFitView();
|
|
},
|
|
fenceCitiesChange(value) {
|
|
this.clearFn();
|
|
let checkedCount = value.length;
|
|
this.checkAllFence = checkedCount === this.fenceList.length;
|
|
this.isIndeterminateFence =
|
|
checkedCount > 0 && checkedCount < this.fenceList.length;
|
|
this.drawFencePoint();
|
|
this.pointSelectChange();
|
|
// this.circleMapData =
|
|
console.log("选中", value);
|
|
},
|
|
drawFencePoint() {
|
|
for (let index = 0; index < this.checkedFence.length; index++) {
|
|
const element = this.checkedFence[index];
|
|
let currentRecord = this.fenceList.filter(
|
|
(item) => item.id === element
|
|
)[0];
|
|
// console.log('选中某条', currentRecord)
|
|
if (currentRecord.rangeType === 1) {
|
|
this.echoCircle(currentRecord);
|
|
}
|
|
if (currentRecord.rangeType === 2) {
|
|
this.echoDrawPolygon(currentRecord);
|
|
}
|
|
}
|
|
},
|
|
pointSelectChange() {
|
|
let warnDevSn = "";
|
|
for (let index = 0; index < this.checkedCities.length; index++) {
|
|
const element = this.checkedCities[index];
|
|
let currentRecord = this.devList.filter(
|
|
(item) => item.devSn === element
|
|
)[0];
|
|
console.log("选中某条", currentRecord);
|
|
if (currentRecord.type === 1) {
|
|
this.getRealTimeData(currentRecord);
|
|
}
|
|
if (currentRecord.type === 2) {
|
|
this.getRealTimeData(currentRecord);
|
|
}
|
|
if (this.checkedCities.length - 1 > index) {
|
|
warnDevSn = warnDevSn + element + ",";
|
|
} else {
|
|
warnDevSn = warnDevSn + element;
|
|
}
|
|
}
|
|
this.alarmDevSn = warnDevSn;
|
|
console.log("当前devSn");
|
|
// this.getProgressListData();
|
|
},
|
|
//获取报警列表数据
|
|
getProgressListData() {
|
|
let data = {
|
|
pageNo: this.pagInfo.pageNo,
|
|
pageSize: this.pagInfo.pageSize,
|
|
devSns: this.alarmDevSn,
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
getAlarmRecordInfo(data).then((res) => {
|
|
if (res.code == 200) {
|
|
this.listData = res.result.records;
|
|
this.pagInfo.total = res.result.total;
|
|
console.log("报警列表", res);
|
|
}
|
|
});
|
|
},
|
|
// 打开创建围栏弹窗
|
|
openFenceCreate() {
|
|
if (this.addForm.rangeType === 1) {
|
|
// this.echoCircle(this.selectionAreaInfo);
|
|
this.drawCircle();
|
|
} else if (this.addForm.rangeType === 2) {
|
|
// this.echoDrawPolygon(this.selectionAreaInfo);
|
|
this.drawPolygon();
|
|
}
|
|
this.fenceCreateShow = true;
|
|
},
|
|
deleteFence() {
|
|
if (this.checkedFence.length === 0) {
|
|
this.$message({
|
|
type: "info",
|
|
message: "请选择删除围栏",
|
|
});
|
|
return;
|
|
}
|
|
console.log("删除围栏", this.checkedFence);
|
|
this.$confirm("此操作将永久删除该围栏, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
let idString = "";
|
|
for (let index = 0; index < this.checkedFence.length; index++) {
|
|
const element = this.checkedFence[index];
|
|
if (this.checkedFence.length - 1 > index) {
|
|
idString = idString + element + ",";
|
|
} else {
|
|
idString = idString + element;
|
|
}
|
|
}
|
|
this.deleteFenceInfo(idString);
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
// 删除围栏
|
|
deleteFenceInfo(idGroups) {
|
|
console.log("删除id", idGroups);
|
|
let data = {
|
|
ids: idGroups,
|
|
};
|
|
deleteBatchVehiclePositionFence(data).then((res) => {
|
|
if (res.success) {
|
|
// console.log('删除成功', res)
|
|
this.getFenceList();
|
|
this.checkedFence = "";
|
|
this.fenceCitiesChange(this.checkedFence);
|
|
this.$message.success("删除成功");
|
|
}
|
|
});
|
|
},
|
|
// 关闭创建围栏弹窗
|
|
closeFenceCreate() {
|
|
this.fenceCreateShow = false;
|
|
this.addForm = {
|
|
areaRadius: 100, //区域半径
|
|
fenceName: "", //围栏名称
|
|
addr: "",
|
|
rangeType: 1,
|
|
locationList: [
|
|
{
|
|
fenceId: 0,
|
|
id: 0,
|
|
latitude: "",
|
|
longitude: "",
|
|
sortNum: 0,
|
|
},
|
|
],
|
|
projectSn: "",
|
|
enterpriseId: "",
|
|
};
|
|
this.exitEditFn();
|
|
this.clearFn();
|
|
},
|
|
// 打开围栏弹窗
|
|
openFence() {
|
|
this.fenceShow = true;
|
|
},
|
|
// 关闭围栏弹窗
|
|
closeFence() {
|
|
this.fenceShow = false;
|
|
},
|
|
fenceNameChange(e) {
|
|
console.log("围栏名称", e);
|
|
this.fenceSearch = e;
|
|
this.getFenceList();
|
|
},
|
|
// 围栏定位地图
|
|
initMap() {
|
|
var that = this;
|
|
//地图加载
|
|
map = new AMap.Map("mapContainer", {
|
|
resizeEnable: true,
|
|
});
|
|
var geocoder = new AMap.Geocoder({});
|
|
//输入提示
|
|
var autoOptions = {
|
|
input: "tipinput",
|
|
};
|
|
this.auto = new AMap.Autocomplete(autoOptions);
|
|
this.placeSearch = new AMap.PlaceSearch({
|
|
map: map,
|
|
}); //构造地点查询类
|
|
AMap.event.addListener(this.auto, "select", this.select); //注册监听，当选中某条记录时会触发
|
|
mouseTool = new AMap.MouseTool(map);
|
|
mouseTool.on("draw", function (event) {
|
|
// event.obj 为绘制出来的覆盖物对象
|
|
console.log("覆盖物对象绘制完成", event.obj.getPath());
|
|
|
|
let overlaysList = map.getAllOverlays("polygon");
|
|
|
|
if (overlaysList.length > 1) {
|
|
map.remove(overlaysList[0]);
|
|
}
|
|
|
|
that.locationList = [];
|
|
var pathArr = event.obj.getPath();
|
|
pathArr.forEach((element) => {
|
|
that.locationList.push({
|
|
longitude: element.lng,
|
|
latitude: element.lat,
|
|
});
|
|
});
|
|
});
|
|
geocoder.getLocation(this.addForm.addr, function (status, result) {
|
|
if (status === "complete" && result.geocodes.length) {
|
|
var lnglat = result.geocodes[0].location;
|
|
console.log(result.geocodes[0]);
|
|
// var arr = lnglat.split(',')
|
|
that.locationList = [
|
|
{
|
|
longitude: lnglat.lng,
|
|
latitude: lnglat.lat,
|
|
},
|
|
];
|
|
that.drawCircle();
|
|
} else {
|
|
console.log("获取绘制", status, result);
|
|
}
|
|
});
|
|
map.on("click", (e) => {
|
|
if (!this.fenceCreateShow) {
|
|
console.log("还未到创建围栏弹窗");
|
|
return;
|
|
}
|
|
console.log(
|
|
"您在 [ " +
|
|
e.lnglat.getLng() +
|
|
"," +
|
|
e.lnglat.getLat() +
|
|
" ] 的位置单击了地图！"
|
|
);
|
|
if (this.addForm.rangeType == 1) {
|
|
this.locationList = [];
|
|
this.locationList.push({
|
|
longitude: e.lnglat.getLng(),
|
|
latitude: e.lnglat.getLat(),
|
|
});
|
|
var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
|
|
geocoder.getAddress(lnglatXY, function (status, result) {
|
|
console.log(status, result);
|
|
that.addForm.addr = result.regeocode.formattedAddress;
|
|
});
|
|
this.drawCircle();
|
|
} else {
|
|
this.locationList.push({
|
|
longitude: e.lnglat.getLng(),
|
|
latitude: e.lnglat.getLat(),
|
|
});
|
|
}
|
|
console.log("当前位置列表", this.locationList);
|
|
});
|
|
},
|
|
enterpriseChange(enterpriseIds, departmentTeamIds, type) {
|
|
getDepartmentAndTeamListApi({
|
|
projectSn: this.projectSn,
|
|
enterpriseIds:
|
|
enterpriseIds instanceof Array
|
|
? enterpriseIds.join(",")
|
|
: enterpriseIds,
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
this.isDepartmentTeamList = res.result;
|
|
if (type != 1) {
|
|
this.ruleConfigForm.departmentTeamIds = [];
|
|
this.editForm.departmentTeamId = "";
|
|
}
|
|
this.departmentTeamChange(enterpriseIds, departmentTeamIds, type);
|
|
}
|
|
});
|
|
},
|
|
departmentTeamChange(enterpriseIds, departmentTeamIds, type) {
|
|
let reqeustData = {
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
if (
|
|
enterpriseIds instanceof Array &&
|
|
departmentTeamIds instanceof Array
|
|
) {
|
|
reqeustData.enterpriseIds = enterpriseIds;
|
|
reqeustData.departmentTeamIds = departmentTeamIds;
|
|
} else {
|
|
reqeustData.enterpriseId = enterpriseIds;
|
|
reqeustData.departmentTeamId = departmentTeamIds;
|
|
}
|
|
getWorkerInfoList(reqeustData).then((res) => {
|
|
this.personList = res.result.records;
|
|
if (type != 1) {
|
|
this.ruleConfigForm.personSns = [];
|
|
this.editForm.personSn = "";
|
|
}
|
|
});
|
|
},
|
|
// 演示数据生成弹窗
|
|
ruleConfigDialog() {
|
|
// this.ruleConfigReset();
|
|
const objFn = {
|
|
0: getMockSafetyHatDataConfigApi,
|
|
1: getMockSafetyHatAlarmConfigApi,
|
|
};
|
|
objFn[this.activeIndex]({
|
|
projectSn: this.projectSn,
|
|
}).then((res) => {
|
|
if (res.success) {
|
|
if (res.result instanceof Array && res.result.length > 0) {
|
|
const result = res.result[0];
|
|
this.ruleConfigForm = {
|
|
...result,
|
|
devSns: result.devSns ? result.devSns.split(",") : [],
|
|
alarmTypes: result.alarmTypes ? result.alarmTypes.split(",") : [],
|
|
};
|
|
this.selectionAreaInfo = {
|
|
fenceName: result.fenceName,
|
|
areaRadius: result.areaRadius,
|
|
fenceShapeArr: result.fenceShapeArr,
|
|
fenceShape: result.fenceShape,
|
|
latitude: result.latitude,
|
|
longitude: result.longitude,
|
|
rangeType: result.rangeType,
|
|
projectSn: this.$store.state.projectSn,
|
|
};
|
|
}
|
|
this.$nextTick(() => {
|
|
this.$refs["ruleConfigForm"].clearValidate();
|
|
});
|
|
}
|
|
});
|
|
this.ruleConfigShow = true;
|
|
},
|
|
submitRuleConfigForm() {
|
|
this.$refs["ruleConfigForm"].validate((valid) => {
|
|
if (!valid) return;
|
|
this.ruleConfigLoading = true;
|
|
const params = {
|
|
...this.ruleConfigForm,
|
|
...this.selectionAreaInfo,
|
|
devSns: this.ruleConfigForm.devSns.join(","),
|
|
alarmTypes: this.ruleConfigForm.alarmTypes.join(","),
|
|
projectSn: this.projectSn,
|
|
};
|
|
const objFn = {
|
|
0: mockDataSafetyHatApi,
|
|
1: mockDataSafetyHatAlarmApi,
|
|
};
|
|
console.log(params);
|
|
|
|
objFn[this.activeIndex](params)
|
|
.then((res) => {
|
|
if (res.success) {
|
|
this.$message.success(res.message);
|
|
this.getList();
|
|
this.ruleConfigShow = false;
|
|
}
|
|
})
|
|
.finally(() => {
|
|
this.ruleConfigLoading = false;
|
|
});
|
|
});
|
|
},
|
|
ruleConfigCancel() {
|
|
// this.ruleConfigReset();
|
|
this.ruleConfigShow = false;
|
|
},
|
|
// 表单重置
|
|
ruleConfigReset() {
|
|
// this.ruleConfigForm = {
|
|
// devSns: [],
|
|
// devGenerateNum: "",
|
|
// startTime: "",
|
|
// endTime: "",
|
|
// winddirections: []
|
|
// };
|
|
// this.resetForm("ruleConfigForm");
|
|
const params = {
|
|
// ...this.ruleConfigForm,
|
|
// ...this.selectionAreaInfo,
|
|
// devSns: this.ruleConfigForm.devSns.join(","),
|
|
// alarmTypes: this.ruleConfigForm.alarmTypes.join(","),
|
|
projectSn: this.projectSn,
|
|
};
|
|
const objFn = {
|
|
// 0: saveMockSafetyHatDataConfigApi,
|
|
// 1: saveMockSafetyHatAlarmConfigApi
|
|
0: resetMockSafetyHatDataConfigApi,
|
|
1: resetMockSafetyHatAlarmConfigApi,
|
|
};
|
|
objFn[this.activeIndex](params).then((res) => {
|
|
if (res.success) {
|
|
this.$message.success(res.message);
|
|
// this.ruleConfigShow = false;
|
|
this.ruleConfigDialog();
|
|
}
|
|
});
|
|
},
|
|
// 打卡人员模拟数据弹窗
|
|
downSimulateDialog() {
|
|
this.downSimulateShow = true;
|
|
},
|
|
// 下载人员模拟数据
|
|
submitDownSimulate() {
|
|
this.downSimulateShow = false;
|
|
const find = this.staffSimulateList.find(
|
|
(item) => item.staffSimulateId === this.staffSimulateRadio
|
|
);
|
|
exportAttendanceExcel({
|
|
workerNum: this.staffSimulateRadio,
|
|
projectSn: this.projectSn,
|
|
fetchName: find ? find.staffSimulateName : "",
|
|
url: "xmgl/workerInfo/downloadMockWorkerInfo",
|
|
}).then((res) => {
|
|
window.open(res.result);
|
|
});
|
|
},
|
|
getPersonListFn() {
|
|
let reqeustData = {
|
|
projectSn: this.$store.state.projectSn,
|
|
enterpriseId: "",
|
|
pageNo: 1,
|
|
pageSize: -1,
|
|
};
|
|
getSafeHatEquipmentCentralPageApi(reqeustData).then((res) => {
|
|
this.personList = res.result.records;
|
|
});
|
|
},
|
|
//获取所有的闸机设备
|
|
getMachineList() {
|
|
environmentDevList({ projectSn: this.$store.state.projectSn }).then(
|
|
(list) => {
|
|
this.allUfaceDev = list.result;
|
|
}
|
|
);
|
|
},
|
|
// 批量删除考勤人员
|
|
deleteAttendanceBatch() {
|
|
if (this.$refs.multipleTable.selection.length === 0)
|
|
return this.$message.warning("请勾选需要删除的数据！");
|
|
this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
const ids = this.$refs.multipleTable.selection
|
|
.map((item) => item.id)
|
|
.join(",");
|
|
console.log(this.$refs.multipleTable.selection);
|
|
const objFn = {
|
|
0: deleteBatchSafetyHatDataApi,
|
|
1: deleteBatchSafetyHatAlarmApi,
|
|
};
|
|
objFn[this.activeIndex]({ ids }).then((res) => {
|
|
this.getList();
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
/** 查询企业列表 */
|
|
getEnterpriseList() {
|
|
const params = {
|
|
projectSn: this.projectSn,
|
|
enterpriseName: undefined,
|
|
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
|
|
enterpriseTypeId: undefined,
|
|
};
|
|
enterpriseList(params).then((res) => {
|
|
// 查询数据
|
|
this.getList();
|
|
// 查询班组列表
|
|
this.getTeamList();
|
|
// 查询部门列表
|
|
this.getDepartmentList();
|
|
});
|
|
},
|
|
/** 查询用户数据 */
|
|
getList() {
|
|
this.loading = true;
|
|
this.queryParams.projectSn = this.projectSn;
|
|
const objFn = {
|
|
0: getSafeHatPayDataPageApi,
|
|
1: getSafeHatAlarmRecordPageApi,
|
|
};
|
|
const params = {
|
|
projectSn: this.projectSn,
|
|
pageNo: this.queryParams.pageNo,
|
|
pageSize: this.queryParams.pageSize,
|
|
devSn: this.queryParams.devSn,
|
|
mockDesc: 1,
|
|
}
|
|
if(this.activeIndex == 0) {
|
|
params.uploadTime_begin = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[0]).format("YYYY-MM-DD 00:00:00") : "";
|
|
params.uploadTime_end = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[1]).format("YYYY-MM-DD 23:59:59") : "";
|
|
} else if (this.activeIndex == 1) {
|
|
params.alarmTime_begin = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[0]).format("YYYY-MM-DD 00:00:00") : "";
|
|
params.alarmTime_end = this.queryParams.uploadTime.length > 0 ? dayjs(this.queryParams.uploadTime[1]).format("YYYY-MM-DD 23:59:59") : "";
|
|
}
|
|
objFn[this.activeIndex]({
|
|
...params
|
|
// isMock: this.queryParams.enterpriseId == 2 ? 1 : "",
|
|
}).then(({ result }) => {
|
|
console.log("查询用户数据: ", result);
|
|
this.userList = result.records;
|
|
this.total = result.total - 0;
|
|
this.$nextTick(() => {
|
|
this.scrollbarFn();
|
|
});
|
|
this.loading = false;
|
|
});
|
|
},
|
|
scrollbarFn() {
|
|
const div = document.querySelector('.table-box .el-table__body-wrapper');
|
|
if (div.scrollHeight > div.clientHeight) {
|
|
this.scrollbarFlag = true;
|
|
} else {
|
|
this.scrollbarFlag = false;
|
|
}
|
|
},
|
|
//获取所属 企业下拉
|
|
getCompanyList() {
|
|
let data = {
|
|
projectSn: this.projectSn,
|
|
enterpriseName: "",
|
|
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
|
|
};
|
|
getEnterpriseInfoList(data).then((res) => {
|
|
this.enterpriseListData = res.result;
|
|
});
|
|
},
|
|
/** 查询班组列表 */
|
|
getTeamList() {
|
|
const params = {
|
|
// enterpriseId: this.queryParams.enterpriseId,
|
|
projectSn: this.projectSn,
|
|
};
|
|
teamList(params).then((res) => {
|
|
console.log("查询班组列表: ", res);
|
|
this.teamOptions = res.result.list;
|
|
// this.isDepartmentTeamList = [...this.isDepartmentTeamList, ...res.result.list];
|
|
});
|
|
},
|
|
/** 查询部门列表 */
|
|
getDepartmentList() {
|
|
const params = {
|
|
// enterpriseId: this.queryParams.enterpriseId,
|
|
projectSn: this.projectSn,
|
|
};
|
|
departmentList(params).then((res) => {
|
|
console.log("查询部门列表: ", res);
|
|
this.departmentOptions = res.result.list;
|
|
// this.isDepartmentTeamList = [...this.isDepartmentTeamList, ...res.result.list];
|
|
});
|
|
},
|
|
/** 项目列表 点击操作 */
|
|
handleItemClick(index) {
|
|
if (this.activeIndex == index) return;
|
|
|
|
this.activeIndex = index;
|
|
this.queryParams.pageNo = 1;
|
|
this.queryParams.payMonth = nowDate();
|
|
this.queryParams.enterpriseId = this.operationList[index].operationId;
|
|
this.getList();
|
|
// this.getTeamList();
|
|
// this.getDepartmentList();
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.editForm = {
|
|
devSn: "",
|
|
latitude: "",
|
|
longitude: "",
|
|
alarmType: "",
|
|
alarmTime: "",
|
|
uploadTime: "",
|
|
};
|
|
this.resetForm("editForm");
|
|
},
|
|
/** 查询 */
|
|
handleQuery() {
|
|
this.queryParams.pageNo = 1;
|
|
this.getList();
|
|
},
|
|
handleRefresh() {
|
|
this.queryParams.pageNo = 1;
|
|
this.queryParams.devSn = "";
|
|
this.queryParams.uploadTime = [];
|
|
this.getList();
|
|
},
|
|
/** 导出 */
|
|
handleExport() {
|
|
let params = {
|
|
projectSn: this.projectSn,
|
|
teamName: this.queryParams.teamName,
|
|
departmentId: this.queryParams.departmentId,
|
|
payStatus: this.queryParams.payStatus,
|
|
payMonth: this.queryParams.payMonth,
|
|
enterpriseId: this.queryParams.enterpriseId,
|
|
};
|
|
exportSalaryPdf(params);
|
|
},
|
|
/** 导出Excel */
|
|
handleExportExcel() {
|
|
let params = {
|
|
projectSn: this.projectSn,
|
|
teamName: this.queryParams.teamName,
|
|
departmentId: this.queryParams.departmentId,
|
|
payStatus: this.queryParams.payStatus,
|
|
payMonth: this.queryParams.payMonth,
|
|
enterpriseId: this.queryParams.enterpriseId,
|
|
};
|
|
// console.log('导出参数',params)
|
|
exportSalaryExcel(params);
|
|
},
|
|
handleUploadSuccess(res) {
|
|
console.log("导入成功");
|
|
if (res.code == 200) {
|
|
this.$message.success(res.message);
|
|
this.getEnterpriseList();
|
|
this.$refs.upload.clearFiles();
|
|
} else {
|
|
this.$message.error(res.message);
|
|
}
|
|
},
|
|
handleUploadError() {
|
|
this.$message.error("导入失败");
|
|
},
|
|
// 删除人员考勤
|
|
handleDelete(row) {
|
|
this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
const objFn = {
|
|
0: deleteBatchSafetyHatDataApi,
|
|
1: deleteBatchSafetyHatAlarmApi,
|
|
};
|
|
objFn[this.activeIndex]({ ids: row.id }).then((res) => {
|
|
this.getList();
|
|
});
|
|
})
|
|
.catch(() => {});
|
|
},
|
|
/** 编辑 || 更新 */
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
this.editForm = Object.assign(this.editForm, row);
|
|
console.log("this.editForm: ", this.editForm);
|
|
this.open = true;
|
|
},
|
|
/** 取消按钮 */
|
|
cancel() {
|
|
this.reset();
|
|
this.open = false;
|
|
},
|
|
/** 提交按钮 */
|
|
submitForm: function () {
|
|
this.$refs["editForm"].validate((valid) => {
|
|
if (!valid) return;
|
|
const params = {
|
|
...this.editForm,
|
|
projectSn: this.projectSn,
|
|
};
|
|
const objFn = {
|
|
0: editSafetyHatDataApi,
|
|
1: editSafetyHatAlarmApi,
|
|
};
|
|
objFn[this.activeIndex](params).then((res) => {
|
|
this.getList();
|
|
this.cancel();
|
|
});
|
|
});
|
|
},
|
|
handleAvatarSuccess(res, file) {
|
|
if (res.status == "SUCCESS") {
|
|
this.editForm.fileList.push({
|
|
name: file.response.data[0].imageUrl,
|
|
url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
|
|
});
|
|
}
|
|
},
|
|
handleExceed(files, fileList) {
|
|
this.$message.warning(
|
|
this.$t("message.docManage.dialog_upload_files.limitingChoice")
|
|
);
|
|
},
|
|
handleDeleteDialog(file, fileList) {
|
|
this.editForm.fileList = fileList;
|
|
},
|
|
},
|
|
watch: {
|
|
positioningMapDialog: {
|
|
handler(newVal) {
|
|
if (!newVal) {
|
|
this.fenceCreateShow = false;
|
|
}
|
|
},
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.text_hint {
|
|
width: 280px;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
:deep(.el-table__empty-block) {
|
|
width: 100% !important;
|
|
.el-empty__description {
|
|
margin-top: 0px;
|
|
p {
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
}
|
|
#mapContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.map-top {
|
|
background: #fff;
|
|
position: relative;
|
|
height: 580px;
|
|
.wei-lan {
|
|
.icon-off {
|
|
position: absolute;
|
|
padding-top: 5px;
|
|
top: 8%;
|
|
left: 1%;
|
|
width: 48px;
|
|
height: 48px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
background: #ffffff;
|
|
text-align: center;
|
|
border-radius: 2px 2px 2px 2px;
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
.icon-on {
|
|
position: absolute;
|
|
padding-top: 5px;
|
|
top: 8%;
|
|
left: 1%;
|
|
text-align: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
background: #ffffff;
|
|
color: #5181f6;
|
|
border-radius: 2px 2px 2px 2px;
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
.start-track {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
background: #ffffff;
|
|
box-shadow: 0px 0px 10px 0px rgba(39, 45, 69, 0.2);
|
|
bottom: 3%;
|
|
right: 3%;
|
|
}
|
|
}
|
|
// 围栏弹窗
|
|
.fenceDialog {
|
|
position: absolute;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 25px;
|
|
left: 5%;
|
|
top: 20px;
|
|
width: 330px;
|
|
height: 380px;
|
|
.fence-dialog-modal {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0%;
|
|
left: 0%;
|
|
z-index: 3;
|
|
background: rgba(39, 45, 69, 0.5);
|
|
}
|
|
.close-icon {
|
|
position: absolute;
|
|
top: 0px;
|
|
right: 0px;
|
|
cursor: pointer;
|
|
}
|
|
.fence-title {
|
|
border-left: 4px solid #5c81ee;
|
|
font-size: 15px;
|
|
color: #272d45;
|
|
padding-left: 10px;
|
|
margin-bottom: 20px;
|
|
font-weight: 600;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
}
|
|
}
|
|
.fenceCreate {
|
|
position: absolute;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 25px;
|
|
width: 330px;
|
|
height: 380px;
|
|
// left: 40px;
|
|
// top: 40px;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 5;
|
|
// .fence-modal {
|
|
// position: absolute;
|
|
// width: 330px;
|
|
// height: 90px;
|
|
// top: -90px;
|
|
// left: 0%;
|
|
// background: rgba(39, 45, 69, 0.5);
|
|
// }
|
|
.fenceCrete-box {
|
|
position: relative;
|
|
.create-footer {
|
|
margin: 100px 0 0 50px;
|
|
}
|
|
}
|
|
}
|
|
.fence-box {
|
|
position: relative;
|
|
.fence-tool {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 0 25px;
|
|
.tool {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 80px;
|
|
height: 33px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
background: #ffffff;
|
|
color: #5181f6;
|
|
border-radius: 2px 2px 2px 2px;
|
|
border: 1px solid #5181f6;
|
|
}
|
|
}
|
|
.fence-select {
|
|
margin: 15px 0;
|
|
}
|
|
.fence-radio {
|
|
height: 160px;
|
|
}
|
|
}
|
|
:deep(.el-table__fixed-right) {
|
|
bottom: 0 !important;
|
|
right: 0 !important;
|
|
}
|
|
.scrollbar-exists :deep(.el-table__fixed-right) {
|
|
right: 4px !important;
|
|
}
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.ruleConfig_box {
|
|
.el-select {
|
|
width: 250px;
|
|
}
|
|
:deep(.el-dialog__title) {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.mr_8 {
|
|
margin-right: 8px;
|
|
}
|
|
.ml_8 {
|
|
margin-left: 8px;
|
|
}
|
|
.ruleconfig_staff1 {
|
|
.el-input-number {
|
|
width: 70px;
|
|
}
|
|
}
|
|
.ruleconfig_staff {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
// align-content: center;
|
|
.el-input-number {
|
|
width: 70px;
|
|
}
|
|
}
|
|
.simulate_box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 80px;
|
|
.el-radio {
|
|
line-height: 30px;
|
|
}
|
|
}
|
|
|
|
.el-icon-question {
|
|
margin-left: 5px;
|
|
}
|
|
.payoff {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
.left-col {
|
|
width: calc(10% - 20px);
|
|
padding-top: 20px;
|
|
margin-right: 20px;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
// 工程列表
|
|
.list-wrapper {
|
|
box-sizing: border-box;
|
|
|
|
height: 100%;
|
|
border-top: 2px solid #f3f5fd;
|
|
}
|
|
|
|
.list-item {
|
|
box-sizing: border-box;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 45px;
|
|
padding: 10px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease-in;
|
|
background-color: #fff;
|
|
border-left: 3px solid transparent;
|
|
border-bottom: 2px solid #f3f5fd;
|
|
}
|
|
.list-item.is-active {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
// border-left-color: #0e74d6;
|
|
// background-color: #f3f6fd;
|
|
border-left-color: #4E7CFF;
|
|
color: #4E7CFF;
|
|
background-color: rgba(78, 124, 255, 0.25) !important;
|
|
}
|
|
}
|
|
|
|
.right-col {
|
|
width: 90%;
|
|
height: 100%;
|
|
.top-col,
|
|
.bottom-col {
|
|
background: #fff;
|
|
}
|
|
.top-col {
|
|
padding: 20px 25px;
|
|
width: 100%;
|
|
height: 10%;
|
|
margin-bottom: 20px;
|
|
}
|
|
.bottom-col {
|
|
width: 100%;
|
|
height: calc(90% - 20px);
|
|
}
|
|
}
|
|
}
|
|
/* 查询表单 按钮样式 */
|
|
// .right-col ::v-deep .el-button {
|
|
// border-color: #4e7cff;
|
|
// }
|
|
|
|
.scroll {
|
|
overflow-y: auto;
|
|
}
|
|
.boxBottom {
|
|
margin-top: 30px;
|
|
}
|
|
::v-deep .el-input__inner {
|
|
line-height: 1px !important;
|
|
}
|
|
</style>
|