You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1372 lines
39 KiB
1372 lines
39 KiB
<template>
|
|
<div class="app-container">
|
|
<el-row :gutter="20">
|
|
<el-col :span="4">
|
|
<div class="qurey">
|
|
<el-input
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('site_management.PleaseEnterTheContent')
|
|
"
|
|
v-model="input3"
|
|
class="input-with-select"
|
|
>
|
|
<el-button
|
|
slot="append"
|
|
icon="el-icon-search"
|
|
type="primary"
|
|
></el-button>
|
|
</el-input>
|
|
</div>
|
|
<el-tree
|
|
:data="treeData"
|
|
:props="defaultProps"
|
|
@node-click="handleNodeClick"
|
|
></el-tree>
|
|
</el-col>
|
|
<el-col :span="14">
|
|
<el-alert
|
|
title="提示"
|
|
type="info"
|
|
:description="$t('site_management.promptMsg') + ';'"
|
|
show-icon
|
|
>
|
|
</el-alert>
|
|
<div class="tableOperate">
|
|
<div class="btnBox">
|
|
<el-button type="primary" @click="add" :disabled="deviceIdShow">{{
|
|
$t("share.addTo")
|
|
}}</el-button>
|
|
<el-button type="danger">{{ $t("share.delete") }}</el-button>
|
|
<el-button @click="upDataBtn">{{
|
|
$t("site_management.RobotPointUpload")
|
|
}}</el-button>
|
|
</div>
|
|
<div class="tableSearch">
|
|
<el-input
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('site_management.PleaseEnterTheContent')
|
|
"
|
|
v-model="input3"
|
|
class="input-with-select"
|
|
>
|
|
<el-button
|
|
slot="append"
|
|
icon="el-icon-search"
|
|
type="primary"
|
|
></el-button>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<el-table
|
|
:data="tableData"
|
|
@row-click="changeCurrentRow"
|
|
highlight-current-row
|
|
>
|
|
<el-table-column type="selection" width="55" fixed="left">
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.MonitoringPointLocation')"
|
|
width="200"
|
|
fixed="left"
|
|
align="center"
|
|
:render-header="addRedStar"
|
|
prop="patrolpointName"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.patrolpointName"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('site_management.PointName')
|
|
"
|
|
disabled
|
|
></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
:label="$t('site_management.MonitoringContent')"
|
|
width="150"
|
|
align="center"
|
|
prop="patrolContent"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.purpose')"
|
|
prop="purpose"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.MonitoringNumber')"
|
|
width="200"
|
|
align="center"
|
|
:render-header="addRedStar"
|
|
prop="patrolpointCode"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-input
|
|
v-model="scope.row.patrolpointCode"
|
|
disabled
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('site_management.MonitoringPointNumber')
|
|
"
|
|
></el-input>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
:label="$t('site_management.InspectionType')"
|
|
width="150"
|
|
align="center"
|
|
:render-header="addRedStar"
|
|
>
|
|
<template slot-scope="scope">
|
|
{{ patrolTypeNameFn(scope.row.patrolTypeIds) }}
|
|
<el-select
|
|
multiple
|
|
v-model="scope.row.patrolTypeIds"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') +
|
|
$t('site_management.InspectionType')
|
|
"
|
|
>
|
|
<el-option
|
|
v-for="item in InspectionTypeData"
|
|
:key="item.patrolTypeId"
|
|
:label="item.patrolTypeName"
|
|
:value="item.patrolTypeId"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.ImportantLevel')"
|
|
width="150"
|
|
align="center"
|
|
:render-header="addRedStar"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-select
|
|
:placeholder="
|
|
$t('share.PleaseChoose') +
|
|
$t('site_management.ImportantLevel')
|
|
"
|
|
v-model="scope.row.pointImptLevel"
|
|
disabled
|
|
>
|
|
<el-option
|
|
v-for="item in pointImptLevelData"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.3DCoordinates')"
|
|
width="270"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<div class="tableXYZ">
|
|
<el-input
|
|
placeholder="x(-20,20)"
|
|
v-model="scope.row.positionX"
|
|
disabled
|
|
></el-input>
|
|
<el-input
|
|
placeholder="y(66)"
|
|
v-model="scope.row.positionY"
|
|
disabled
|
|
></el-input>
|
|
<el-input
|
|
placeholder="z(-6,20)"
|
|
v-model="scope.row.positionZ"
|
|
disabled
|
|
></el-input>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.ReportIdentificationType')"
|
|
width="220"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.IntelligentRecognitionType')"
|
|
width="220"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<span
|
|
v-if="scope.row.algSubtypeName == null"
|
|
class="intelligenceType"
|
|
>设置</span
|
|
>
|
|
<span v-else class="intelligenceType">{{
|
|
scope.row.algSubtypeName
|
|
}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('site_management.DiscriminantBenchmarkImage')"
|
|
width="220"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('share.operate')"
|
|
fixed="right"
|
|
align="center"
|
|
width="100"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="monitorPointEdit(scope.row)"
|
|
>修改</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleDelete(scope.row.patrolpointId)"
|
|
>{{ $t("share.delete") }}</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<div class="cameraImgDiv">
|
|
<img src="@/assets/images/camera.png" class="cameraImg" />
|
|
<div>{{ $t("site_management.ClickOnTheLeftSide") }}</div>
|
|
</div>
|
|
<el-tabs v-model="activeName" @tab-click="tabsClick" :stretch="true">
|
|
<el-tab-pane :label="$t('site_management.tabsOne')" name="first">
|
|
<div class="tabsBtn">
|
|
<el-button
|
|
@click="bindingMonitorBtn(0)"
|
|
style="margin-top: 10px"
|
|
:disabled="RightBtnShow"
|
|
>{{
|
|
$t("site_management.BindVisibleLightMonitoringPoints")
|
|
}}</el-button
|
|
>
|
|
<el-button
|
|
@click="bindingMonitorBtn(1)"
|
|
style="margin-top: 10px"
|
|
:disabled="RightBtnShow"
|
|
>{{
|
|
$t("site_management.BindThermalImagingMonitoringPoints")
|
|
}}</el-button
|
|
>
|
|
</div>
|
|
<el-table
|
|
:data="presetList"
|
|
:header-cell-style="{ 'text-align': 'center' }"
|
|
:cell-style="{ 'text-align': 'center' }"
|
|
style="margin-top: 10px"
|
|
>
|
|
<el-table-column label="设备名称"> </el-table-column>
|
|
<el-table-column label="预置点名称" prop="presetPosName">
|
|
</el-table-column>
|
|
<el-table-column label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="presetDotEdit(scope.row)"
|
|
>解绑</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="presetDotImg(scope.row.channelImg)"
|
|
>
|
|
查看快照
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="$t('site_management.tabsTwo')" name="second">
|
|
<div class="tabsBtn">
|
|
<el-button @click="InspectionBtn" :disabled="RightBtnShow">{{
|
|
$t("site_management.BindMonitoringDevices")
|
|
}}</el-button>
|
|
|
|
<el-table style="margin-top: 10px" v-if="false">
|
|
<el-table-column :label="$t('site_management.EquipmentName')">
|
|
</el-table-column>
|
|
<el-table-column :label="$t('site_management.EquipmentCode')">
|
|
</el-table-column>
|
|
<el-table-column :label="$t('share.operate')">
|
|
<template slot-scope="scope">
|
|
<el-button size="mini" type="text">{{
|
|
$t("site_management.Unbind")
|
|
}}</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<!-- 添加监控点位 -->
|
|
<el-dialog
|
|
:title="monitorPointTitle"
|
|
:visible.sync="monitorPointDialogVisible"
|
|
width="60%"
|
|
:before-close="monitorPointHandleClose"
|
|
>
|
|
<el-form
|
|
:model="monitorPointForm"
|
|
label-position="right"
|
|
label-width="190px"
|
|
style="padding-right: 10%"
|
|
:rules="rules"
|
|
ref="ruleForm"
|
|
>
|
|
<el-form-item
|
|
:label="$t('site_management.MonitoringPointName')"
|
|
prop="patrolpointName"
|
|
>
|
|
<el-input
|
|
v-model="monitorPointForm.patrolpointName"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('site_management.MonitoringPointName')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('site_management.MonitoringPointNumber')"
|
|
prop="patrolpointCode"
|
|
>
|
|
<el-input
|
|
v-model="monitorPointForm.patrolpointCode"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('site_management.MonitoringPointNumber')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('site_management.MonitoringContent')"
|
|
prop="patrolContent"
|
|
>
|
|
<el-input
|
|
v-model="monitorPointForm.patrolContent"
|
|
type="textarea"
|
|
maxlength="200"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('site_management.MonitoringContent')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
:label="$t('site_management.InspectionType')"
|
|
prop="patrolTypeId"
|
|
>
|
|
<el-select
|
|
v-model="monitorPointForm.patrolTypeIds"
|
|
multiple
|
|
filterable
|
|
default-first-option
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('site_management.InspectionType')
|
|
"
|
|
style="width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="item in InspectionTypeData"
|
|
:key="item.patrolTypeId"
|
|
:label="item.patrolTypeName"
|
|
:value="item.patrolTypeId"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
:label="$t('site_management.ImportantLevel')"
|
|
prop="pointImptLevel"
|
|
>
|
|
<el-select
|
|
v-model="monitorPointForm.pointImptLevel"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('site_management.ImportantLevel')
|
|
"
|
|
>
|
|
<el-option
|
|
v-for="item in pointImptLevelData"
|
|
:key="item.dictValue"
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('site_management.purpose')">
|
|
<el-input
|
|
v-model="monitorPointForm.purpose"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('site_management.purpose')
|
|
"
|
|
disabled
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('site_management.coordinate') + ' x'">
|
|
<el-input-number
|
|
v-model="monitorPointForm.positionX"
|
|
:min="-20"
|
|
:max="20"
|
|
label=""
|
|
:step="0.1"
|
|
></el-input-number>
|
|
<span> {{ $t("site_management.coordinateXPrompt") }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('site_management.coordinate') + ' y'">
|
|
<el-input-number
|
|
v-model="monitorPointForm.positionY"
|
|
:min="66"
|
|
:max="80"
|
|
label=""
|
|
:step="0.1"
|
|
></el-input-number>
|
|
<span> {{ $t("site_management.coordinateYPrompt") }}</span>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('site_management.coordinate') + ' z'">
|
|
<el-input-number
|
|
v-model="monitorPointForm.positionZ"
|
|
:min="-6"
|
|
:max="20"
|
|
label=""
|
|
:step="0.1"
|
|
></el-input-number>
|
|
<span>{{ $t("site_management.coordinateZPrompt") }}</span>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="monitorPointHandleClose">{{
|
|
$t("share.cancel")
|
|
}}</el-button>
|
|
<el-button type="primary" @click="submitForm">{{
|
|
$t("share.confirm")
|
|
}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<siteVideoDialog
|
|
:pointDialogDataName="pointDialogDataName"
|
|
:pointDialogShow="pointDialogShow"
|
|
:dialogProp="dialogProp"
|
|
@site_videoDialogClose="site_videoDialogClose"
|
|
@site_saveDot1="site_saveDot1"
|
|
/>
|
|
|
|
<!-- 绑定巡检设备 -->
|
|
<el-dialog
|
|
:title="$t('site_management.SelectInspectionEquipment')"
|
|
:visible.sync="InspectionDialogVisible"
|
|
width="70%"
|
|
:before-close="InspectionHandleClose"
|
|
>
|
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
|
<el-form-item :label="$t('equipment.DeviceType')">
|
|
<el-select
|
|
v-model="queryParams.region"
|
|
:placeholder="$t('share.PleaseChoose') + $t('equipment.DeviceType')"
|
|
>
|
|
<!-- <el-option label="区域一" value="shanghai"></el-option>
|
|
<el-option label="区域二" value="beijing"></el-option> -->
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('equipment.EquipmentName')">
|
|
<el-input
|
|
v-model="queryParams.user"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.EquipmentName')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('equipment.EquipmentCode')">
|
|
<el-input
|
|
v-model="queryParams.user"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.EquipmentCode')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('equipment.Manufacturer')">
|
|
<el-input
|
|
v-model="queryParams.user"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.Manufacturer')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" icon="el-icon-search" size="mini">{{
|
|
$t("share.search")
|
|
}}</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini">{{
|
|
$t("share.reset")
|
|
}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-table
|
|
:data="InspectionTableData"
|
|
style="width: 100%"
|
|
@row-click="InspectionChangeCurrentRow"
|
|
highlight-current-row
|
|
>
|
|
<el-table-column
|
|
type="selection"
|
|
width="55"
|
|
align="center"
|
|
fixed="left"
|
|
/>
|
|
<el-table-column
|
|
prop="patroldeviceName"
|
|
min-width="130px"
|
|
:label="$t('equipment.EquipmentName')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="patroldeviceCode"
|
|
min-width="130px"
|
|
:label="$t('equipment.EquipmentCode')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="150px"
|
|
:label="$t('equipment.VideoNVREncoding')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="110px"
|
|
:label="$t('equipment.Manufacturer')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="150px"
|
|
:label="$t('equipment.MainSystemNumber')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="140px"
|
|
:label="$t('equipment.SubstationName')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="140px"
|
|
:label="$t('equipment.SubstationCode')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="140px"
|
|
:label="$t('equipment.areaName')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="110px"
|
|
:label="$t('equipment.DeviceType')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="130px"
|
|
:label="$t('equipment.EquipmentModel')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="110px"
|
|
:label="$t('equipment.UnitOfUse')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="140px"
|
|
:label="$t('equipment.EquipmentSource')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="150px"
|
|
:label="$t('equipment.dateOfManufacture')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="130px"
|
|
:label="$t('equipment.factoryNumber')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="150px"
|
|
:label="$t('equipment.IsItARotatingWheel')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="100px"
|
|
:label="$t('equipment.UseType')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="100px"
|
|
:label="$t('equipment.VideoType')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="150px"
|
|
:label="$t('equipment.InstallationPosition')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="130px"
|
|
:label="$t('equipment.BelongingRobot')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="100px"
|
|
:label="$t('equipment.ipAddress')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="100px"
|
|
:label="$t('equipment.port')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
:label="$t('equipment.user')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
min-width="100px"
|
|
:label="$t('equipment.password')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="dialogVisible = false"
|
|
>确 定</el-button
|
|
>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 机器人点位上传 -->
|
|
<el-dialog
|
|
:title="$t('site_management.upload')"
|
|
:visible.sync="upload.open"
|
|
width="30%"
|
|
:before-close="handleClose"
|
|
>
|
|
<div style="width: 100%; text-align: center">
|
|
<el-upload
|
|
ref="uploadRef"
|
|
:limit="1"
|
|
accept=".xlsx, .xls, .txt, .xml"
|
|
:headers="upload.headers"
|
|
:action="upload.url + '?updateSupport=' + upload.updateSupport"
|
|
:disabled="upload.isUploading"
|
|
:on-progress="handleFileUploadProgress"
|
|
:on-success="handleFileSuccess"
|
|
:auto-upload="false"
|
|
drag
|
|
>
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
<div class="el-upload__text">
|
|
{{ $t("site_management.uploadMsg") }}
|
|
</div>
|
|
<template #tip>
|
|
<div class="el-upload__tip text-center">
|
|
<!-- <span>仅允许导入xls、xlsx、xml、txt格式文件。</span> -->
|
|
<!-- <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
|
|
@click="importTemplate">下载模板</el-link> -->
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="upload.open = false">{{
|
|
$t("share.cancel")
|
|
}}</el-button>
|
|
<el-button type="primary" @click="submitFileForm">{{
|
|
$t("share.confirm")
|
|
}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<!-- 查看快照 -->
|
|
<el-dialog
|
|
title="查看快照"
|
|
:visible.sync="dialogChannelImg"
|
|
width="60%"
|
|
:before-close="dialogChannelImgHandleClose"
|
|
>
|
|
<img :src="dialogChannelImgSrc" style="width: 100%; height: 80vh" />
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script >
|
|
import videoPlayer from "@/components/videoPlayer/index.vue";
|
|
import { getToken } from "@/utils/auth";
|
|
import {
|
|
getTreeAreaDeviceSelect,
|
|
getMonitor,
|
|
getPatroltypeList,
|
|
pointImptLevel,
|
|
postAdd,
|
|
edit,
|
|
editItem,
|
|
postRemove,
|
|
getPresetList,
|
|
presetRemove,
|
|
eqpbookList,
|
|
// vl,
|
|
// listByEqIdAndChannelId
|
|
} from "@/api/point/site_management";
|
|
import siteVideoDialog from "./components/site_VideoDialog.vue";
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
export default {
|
|
name: "SiteManagement",
|
|
components: {
|
|
videoPlayer,
|
|
siteVideoDialog,
|
|
Treeselect,
|
|
},
|
|
data() {
|
|
return {
|
|
treeData: [],
|
|
defaultProps: {
|
|
children: "children",
|
|
label: function (data) {
|
|
return data.areaName || data.deviceName;
|
|
},
|
|
},
|
|
tableData: [],
|
|
activeName: "first",
|
|
monitorPointDialogVisible: false,
|
|
monitorPointForm: {},
|
|
rules: {
|
|
patrolpointName: [
|
|
{
|
|
required: true,
|
|
message:
|
|
this.$t("share.PleaseEnter") +
|
|
this.$t("site_management.MonitoringPointName"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
patrolpointCode: [
|
|
{
|
|
required: true,
|
|
message:
|
|
this.$t("share.PleaseEnter") +
|
|
this.$t("site_management.MonitoringPointNumber"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
patrolContent: [
|
|
{
|
|
required: true,
|
|
message:
|
|
this.$t("share.PleaseEnter") +
|
|
this.$t("site_management.MonitoringContent"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
patrolTypeId: [
|
|
{
|
|
required: true,
|
|
message:
|
|
this.$t("share.PleaseEnter") +
|
|
this.$t("site_management.InspectionType"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
pointImptLevel: [
|
|
{
|
|
required: true,
|
|
message:
|
|
this.$t("share.PleaseEnter") +
|
|
this.$t("site_management.ImportantLevel"),
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
},
|
|
monitorPointTitle: "添加监控点位",
|
|
bindingMonitorPointTitle: "绑定可见光监控点",
|
|
bindingMonitorPointDialogVisible: false,
|
|
bindingMonitorPointTableData: [],
|
|
InspectionDialogVisible: false,
|
|
queryParams: {},
|
|
InspectionTableData: [],
|
|
upload: {
|
|
// 是否显示弹出层（用户导入）
|
|
open: false,
|
|
// 弹出层标题（用户导入）
|
|
title: "",
|
|
// 是否禁用上传
|
|
isUploading: false,
|
|
// 是否更新已经存在的用户数据
|
|
updateSupport: 0,
|
|
// 设置上传的请求头部
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
// 上传的地址
|
|
// url: import.meta.env.VITE_APP_BASE_API + "/zhxx/device/import",
|
|
},
|
|
InspectionTypeData: [],
|
|
pointImptLevelData: [
|
|
{
|
|
value: "I",
|
|
label: "I类",
|
|
},
|
|
{
|
|
value: "II",
|
|
label: "II类",
|
|
},
|
|
{
|
|
value: "III",
|
|
label: "III类",
|
|
},
|
|
],
|
|
input3: null,
|
|
value: null,
|
|
deviceIdShow: true,
|
|
TreeItem: {},
|
|
type: 0,
|
|
RightBtnShow: true,
|
|
// dialogPointTree:[],
|
|
// defaultPropsMonitor: {
|
|
// children: "children",
|
|
// label: "name",
|
|
// },
|
|
// listByEqIdAndChanneData: [],
|
|
pointDialogDataName: "",
|
|
pointDialogShow: false,
|
|
dialogProp: {},
|
|
presetList: [],
|
|
changeCurrentRowData: {},
|
|
dialogChannelImg: false,
|
|
dialogChannelImgSrc: "",
|
|
eqpbookListQuery: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
};
|
|
},
|
|
mounted() {
|
|
getTreeAreaDeviceSelect().then((res) => {
|
|
if (res.code == 200) {
|
|
this.treeData = res.data;
|
|
}
|
|
}),
|
|
getPatroltypeList().then((res) => {
|
|
if (res.code == 200) {
|
|
console.log(res.rows, 1111111111);
|
|
this.InspectionTypeData = res.rows;
|
|
}
|
|
});
|
|
pointImptLevel().then((res) => {
|
|
this.pointImptLevelData = res.data;
|
|
});
|
|
},
|
|
methods: {
|
|
// 给表头加必填符号*
|
|
addRedStar(h, { column }) {
|
|
return [
|
|
h("span", { style: "color: red" }, "*"),
|
|
h("span", " " + column.label),
|
|
];
|
|
},
|
|
handleNodeClick(data, e) {
|
|
this.TreeItem = data;
|
|
this.RightBtnShow = true;
|
|
this.monitorPointForm.areaId = data.areaId;
|
|
this.monitorPointForm.deviceId = data.deviceId;
|
|
if (data.deviceId) {
|
|
this.deviceIdShow = false;
|
|
} else {
|
|
this.deviceIdShow = true;
|
|
}
|
|
let obj = {
|
|
areaId: data.areaId,
|
|
};
|
|
if (data.deviceId) {
|
|
obj.deviceId = data.deviceId;
|
|
}
|
|
getMonitor(obj).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tableData = res.rows;
|
|
this.tableData.forEach((item) => {
|
|
// item.patrolTypeIds = item.patrolTypeId.split(",");
|
|
// item.patrolTypeIds = item.patrolTypeId.split(",").map(Number)||[];
|
|
item.patrolTypeIds = (item.patrolTypeId || "")
|
|
.split(",")
|
|
.map(Number)
|
|
.filter(Boolean);
|
|
let id = item.algSubtypeIds.split(",");
|
|
item.patrolTypeId = id.map(Number);
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
changeCurrentRow(row) {
|
|
this.dialogProp = row;
|
|
this.currentRowId = row.id; // 更新当前点击的行ID
|
|
this.RightBtnShow = false;
|
|
this.rowStyle(row);
|
|
this.changeCurrentRowData = {
|
|
patrolpointId: row.patrolpointId,
|
|
};
|
|
this.getPresetListFn();
|
|
},
|
|
getPresetListFn() {
|
|
getPresetList(this.changeCurrentRowData).then((res) => {
|
|
if (res.code == 200) {
|
|
this.presetList = res.data;
|
|
if (res.data.length != 0) {
|
|
this.RightBtnShow = true;
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 更改选中行背景色
|
|
rowStyle(row) {
|
|
if (this.name === row.name) {
|
|
return { "background-color": "#F7EDED", cursor: "pointer" };
|
|
}
|
|
return { cursor: "pointer" };
|
|
},
|
|
tabsClick() {},
|
|
add() {
|
|
this.monitorPointForm={}
|
|
this.type = 0;
|
|
this.monitorPointDialogVisible = true;
|
|
this.monitorPointTitle = this.$t("site_management.AddMonitoringPoints");
|
|
},
|
|
monitorPointHandleClose() {
|
|
this.monitorPointDialogVisible = false;
|
|
},
|
|
monitorPointEdit(data) {
|
|
this.monitorPointForm={}
|
|
this.type = 1;
|
|
this.monitorPointDialogVisible = true;
|
|
this.monitorPointTitle = this.$t(
|
|
"site_management.ModifyMonitoringPoints"
|
|
);
|
|
this.monitorPointForm = {
|
|
...data,
|
|
patrolTypeIds: data.patrolTypeIds || [],
|
|
};
|
|
},
|
|
// 关闭绑定可见光监测点弹窗
|
|
bindingMonitorPointClose() {
|
|
this.bindingMonitorPointDialogVisible = false;
|
|
},
|
|
bindingMonitorBtn(type) {
|
|
if (type == 0) {
|
|
// 绑定可见光监测点
|
|
// this.bindingMonitorPointTitle = this.$t(
|
|
// "site_management.BindVisibleLightMonitoringPoints"
|
|
// );
|
|
// vl().then(res=>{
|
|
// if(res.code==200){
|
|
// this.dialogPointTree=res.data;
|
|
// }
|
|
// })
|
|
this.pointDialogDataName = this.$t(
|
|
"site_management.BindVisibleLightMonitoringPoints"
|
|
);
|
|
} else {
|
|
// this.bindingMonitorPointTitle = this.$t(
|
|
// "site_management.BindThermalImagingMonitoringPoints"
|
|
// );
|
|
this.pointDialogDataName = this.$t(
|
|
"site_management.BindThermalImagingMonitoringPoints"
|
|
);
|
|
}
|
|
this.pointDialogShow = true;
|
|
// this.bindingMonitorPointDialogVisible = true;
|
|
},
|
|
site_videoDialogClose() {
|
|
this.pointDialogShow = false;
|
|
},
|
|
InspectionHandleClose() {
|
|
this.InspectionDialogVisible = false;
|
|
},
|
|
InspectionBtn() {
|
|
this.InspectionDialogVisible = true;
|
|
eqpbookList(this.eqpbookListQuery).then((res) => {
|
|
console.log(res, 1111);
|
|
if (res.code == 200) {
|
|
this.InspectionTableData = res.rows;
|
|
}
|
|
});
|
|
},
|
|
InspectionChangeCurrentRow(row) {
|
|
this.currentRowId = row.id; // 更新当前点击的行ID
|
|
this.rowStyle(row);
|
|
},
|
|
/**文件上传中处理 */
|
|
handleFileUploadProgress(event, file, fileList) {
|
|
upload.isUploading = true;
|
|
},
|
|
/** 文件上传成功处理 */
|
|
handleFileSuccess(response, file, fileList) {
|
|
upload.open = false;
|
|
upload.isUploading = false;
|
|
proxy.$refs["uploadRef"].handleRemove(file);
|
|
proxy.$alert(
|
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
|
response.msg +
|
|
"</div>",
|
|
"导入结果",
|
|
{ dangerouslyUseHTMLString: true }
|
|
);
|
|
// getList();
|
|
},
|
|
/** 提交上传文件 */
|
|
submitFileForm() {
|
|
proxy.$refs["uploadRef"].submit();
|
|
},
|
|
upDataBtn() {
|
|
console.log(111);
|
|
this.upload.open = true;
|
|
},
|
|
handleClose() {},
|
|
// 新增点位
|
|
submitForm() {
|
|
this.$refs["ruleForm"].validate((valid) => {
|
|
if (valid) {
|
|
this.monitorPointForm.patrolTypeId =
|
|
this.monitorPointForm.patrolTypeIds.toString();
|
|
if (this.type == 0) {
|
|
postAdd(this.monitorPointForm).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "添加成功!",
|
|
});
|
|
this.monitorPointDialogVisible = false;
|
|
this.handleNodeClick(this.TreeItem);
|
|
}
|
|
});
|
|
} else {
|
|
edit(this.monitorPointForm).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "修改成功!",
|
|
});
|
|
this.monitorPointDialogVisible = false;
|
|
this.handleNodeClick(this.TreeItem);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 删除
|
|
handleDelete(id) {
|
|
postRemove(id).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功!",
|
|
});
|
|
this.handleNodeClick(this.TreeItem);
|
|
}
|
|
});
|
|
},
|
|
|
|
// 绑定可见光监测点点击树事件
|
|
handleMonitor(e) {
|
|
if (e.eqpbookId) {
|
|
// console.log(e,'点击了')
|
|
listByEqIdAndChannelId({
|
|
channelCode: e.channelCode,
|
|
patroldeviceCode: e.patroldeviceCode,
|
|
}).then((res) => {
|
|
console.log(e, "摄像头列表");
|
|
if (res.code == 200) {
|
|
this.listByEqIdAndChanneData = res.data;
|
|
}
|
|
});
|
|
}
|
|
},
|
|
// 解绑
|
|
presetDotEdit(row) {
|
|
this.$confirm("确定解绑预置点吗？", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
presetRemove(row.presetPosId).then((res) => {
|
|
if (res.code == 200) {
|
|
this.getPresetListFn();
|
|
this.$message({
|
|
type: "success",
|
|
message: "解绑成功!",
|
|
});
|
|
} else {
|
|
this.$message({
|
|
type: "error",
|
|
message: res.msg,
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "取消解绑",
|
|
});
|
|
});
|
|
},
|
|
site_saveDot1() {
|
|
this.getPresetListFn();
|
|
},
|
|
// 查看快照
|
|
presetDotImg(channelImg) {
|
|
this.dialogChannelImg = true;
|
|
this.dialogChannelImgSrc = channelImg;
|
|
},
|
|
dialogChannelImgHandleClose() {
|
|
this.dialogChannelImg = false;
|
|
},
|
|
patrolTypeNameFn(arr) {
|
|
// console.log(str, 1111111111);
|
|
if (Array.isArray(arr) && arr.length > 0) {
|
|
// return this.InspectionTypeData.filter(item => item.id == str)[0].name;
|
|
console.log(this.InspectionTypeData, "存在", arr);
|
|
}
|
|
},
|
|
// handleSelectPointCode(node, row) {
|
|
// row.patrolTypeId.push(node.id);
|
|
// console.log( row.patrolTypeId,2222222)
|
|
// return
|
|
// this.handleChangePointCode(row);
|
|
// },
|
|
// handleDeSelectPointCode(node, row) {
|
|
// if (row.patrolTypeId.indexOf(node.id) != -1) {
|
|
// row.patrolTypeId.splice(row.patrolTypeId.indexOf(node.id), 1);
|
|
// console.log( row.patrolTypeId,2222222)
|
|
// return
|
|
// this.handleChangePointCode(row);
|
|
// }
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.qurey {
|
|
margin-bottom: 10px;
|
|
::v-deep.el-button {
|
|
background-color: #46a6ff !important;
|
|
color: #fff !important ;
|
|
}
|
|
}
|
|
.tableOperate {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.tableSearch {
|
|
::v-deep.el-button {
|
|
background-color: #46a6ff !important;
|
|
color: #fff !important ;
|
|
}
|
|
}
|
|
}
|
|
.tableXYZ {
|
|
display: flex;
|
|
}
|
|
.cameraImgDiv {
|
|
text-align: center;
|
|
}
|
|
.cameraImg {
|
|
width: 30%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.tabsBtn {
|
|
text-align: center;
|
|
}
|
|
// .bindingMonitorPointTree {
|
|
// width: 100%;
|
|
// height: 37vh;
|
|
// overflow-y: scroll;
|
|
// }
|
|
// .bindingMonitorPointDiv {
|
|
// width: 100%;
|
|
// height: 40vh;
|
|
// // background: red;
|
|
// }
|
|
// .PTZ-content {
|
|
// width: 170px;
|
|
// margin: 10px auto;
|
|
// position: relative;
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
// .r-ti2-pos {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// div {
|
|
// position: absolute;
|
|
// z-index: 999;
|
|
// width: 20px;
|
|
// height: 15px;
|
|
// cursor: pointer;
|
|
// }
|
|
// div:first-child {
|
|
// top: 32px;
|
|
// left: 75px;
|
|
// }
|
|
// div:nth-child(2) {
|
|
// top: 50px;
|
|
// left: 102px;
|
|
// }
|
|
// div:nth-child(3) {
|
|
// top: 77px;
|
|
// right: 30px;
|
|
// }
|
|
// div:nth-child(4) {
|
|
// bottom: 56px;
|
|
// left: 102px;
|
|
// }
|
|
// div:nth-child(5) {
|
|
// bottom: 36px;
|
|
// left: 75px;
|
|
// }
|
|
// div:nth-child(6) {
|
|
// bottom: 56px;
|
|
// right: 100px;
|
|
// }
|
|
// div:nth-child(7) {
|
|
// bottom: 80px;
|
|
// left: 30px;
|
|
// }
|
|
// div:nth-child(8) {
|
|
// top: 50px;
|
|
// right: 102px;
|
|
// }
|
|
// }
|
|
// .r-ti3 {
|
|
// width: 100%;
|
|
// display: flex;
|
|
// padding-top: 10px;
|
|
// -webkit-box-pack: justify;
|
|
// justify-content: space-between;
|
|
// }
|
|
// .r-ti3-d1 {
|
|
// width: 76px;
|
|
// position: relative;
|
|
// img {
|
|
// width: 100%;
|
|
// }
|
|
// .r-ti3-d2 {
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// div:first-child {
|
|
// width: 50%;
|
|
// height: 100%;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 0;
|
|
// cursor: pointer;
|
|
// }
|
|
// div:nth-child(2) {
|
|
// width: 50%;
|
|
// height: 100%;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// right: 0;
|
|
// cursor: pointer;
|
|
// }
|
|
// }
|
|
// }
|
|
// .r-ti4 {
|
|
// padding-top: 20px;
|
|
// img {
|
|
// width: 24px;
|
|
// height: 24px;
|
|
// position: relative;
|
|
// top: 6px;
|
|
// cursor: pointer;
|
|
// }
|
|
// }
|
|
.intelligenceType {
|
|
cursor: pointer;
|
|
color: #409eff;
|
|
}
|
|
</style>
|