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.
1202 lines
34 KiB
1202 lines
34 KiB
<template>
|
|
<div class="app-container equipment-page">
|
|
<el-form :inline="true" :model="queryParams" class="demo-form-inline">
|
|
<el-form-item :label="$t('equipment.DeviceType')">
|
|
<el-select
|
|
v-model="queryParams.type"
|
|
:placeholder="$t('share.PleaseChoose') + $t('equipment.DeviceType')"
|
|
>
|
|
<el-option
|
|
v-for="dict in deviceTypeOptions"
|
|
:key="dict.dictValue"
|
|
:label="dict.dictLabel"
|
|
:value="dict.dictValue"
|
|
></el-option>
|
|
</el-select>
|
|
<!-- <treeselect v-model="queryParams.region" :options="enabledDeptOptions" :show-count="true" placeholder="请选择归属部门" /> -->
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('equipment.EquipmentName')">
|
|
<el-input
|
|
v-model="queryParams.patroldeviceName"
|
|
:placeholder="$t('share.PleaseEnter') + $t('equipment.EquipmentName')"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('equipment.EquipmentCode')">
|
|
<el-input
|
|
v-model="queryParams.patroldeviceCode"
|
|
:placeholder="$t('share.PleaseEnter') + $t('equipment.EquipmentCode')"
|
|
></el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item :label="$t('equipment.Manufacturer')">
|
|
<el-input
|
|
v-model="queryParams.manufacturer"
|
|
:placeholder="$t('share.PleaseEnter') + $t('equipment.Manufacturer')"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-search"
|
|
size="mini"
|
|
@click="handleQuery"
|
|
>{{ $t("share.search") }}</el-button
|
|
>
|
|
<el-button class="task-toolbar-btn" type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">{{
|
|
$t("share.reset")
|
|
}}</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-row :gutter="10" class="mb8">
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
size="mini"
|
|
@click="handleAdd"
|
|
>{{ $t("share.new") }}</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
size="mini"
|
|
:disabled="single"
|
|
@click="handleEdit(null, 0)"
|
|
>{{ $t("share.edit") }}</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-delete"
|
|
size="mini"
|
|
:disabled="multiple"
|
|
@click="handleDeleteAll"
|
|
>{{ $t("share.delete") }}</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-upload2"
|
|
size="mini"
|
|
@click="handleUpload"
|
|
>{{ $t("share.import") }}</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-download"
|
|
size="mini"
|
|
@click="handleExport"
|
|
>{{ $t("share.export") }}</el-button
|
|
>
|
|
</el-col>
|
|
<el-col :span="1.5">
|
|
<el-button
|
|
class="task-toolbar-btn"
|
|
type="primary"
|
|
icon="el-icon-upload"
|
|
size="mini"
|
|
:disabled="uploadBtn"
|
|
@click="handleModel"
|
|
>{{ $t("equipment.ModelSynchronization") }}</el-button
|
|
>
|
|
</el-col>
|
|
</el-row>
|
|
<div class="equipment-table-wrap">
|
|
<el-table
|
|
:data="tableData"
|
|
class="equipment-table"
|
|
height="100%"
|
|
border
|
|
stripe
|
|
@selection-change="handleSelectionChange"
|
|
>
|
|
<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="videoNvrCode"
|
|
min-width="150px"
|
|
:label="$t('equipment.VideoNVREncoding')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="manufacturer"
|
|
min-width="110px"
|
|
:label="$t('equipment.Manufacturer')"
|
|
align="center"
|
|
fixed="left"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="mainSystemCode"
|
|
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="areaName"
|
|
min-width="140px"
|
|
:label="$t('equipment.areaName')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="type"
|
|
min-width="110px"
|
|
:label="$t('equipment.DeviceType')"
|
|
align="center"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-tag>{{ typeFn(scope.row.type) }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceModel"
|
|
min-width="130px"
|
|
:label="$t('equipment.EquipmentModel')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="useUnit"
|
|
min-width="110px"
|
|
:label="$t('equipment.UnitOfUse')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="deviceSource"
|
|
min-width="140px"
|
|
:label="$t('equipment.EquipmentSource')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="productionDate"
|
|
min-width="150px"
|
|
:label="$t('equipment.dateOfManufacture')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="productionCode"
|
|
min-width="130px"
|
|
:label="$t('equipment.factoryNumber')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="istransport"
|
|
min-width="150px"
|
|
:label="$t('equipment.IsItARotatingWheel')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="useMode"
|
|
min-width="100px"
|
|
:label="$t('equipment.UseType')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="videoMode"
|
|
min-width="100px"
|
|
:label="$t('equipment.VideoType')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
|
|
<el-table-column
|
|
prop="place"
|
|
min-width="150px"
|
|
:label="$t('equipment.InstallationPosition')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="positionX"
|
|
min-width="180px"
|
|
:label="$t('equipment.RelativeSpatialPosition') + ' x'"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="positionY"
|
|
min-width="180px"
|
|
:label="$t('equipment.RelativeSpatialPosition') + ' y'"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="positionZ"
|
|
min-width="180px"
|
|
:label="$t('equipment.RelativeSpatialPosition') + ' z'"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="robotsCode"
|
|
min-width="130px"
|
|
:label="$t('equipment.BelongingRobot')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="ipAddr"
|
|
min-width="100px"
|
|
:label="$t('equipment.ipAddress')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="port"
|
|
min-width="100px"
|
|
:label="$t('equipment.port')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column prop="user" :label="$t('equipment.user')" align="center">
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="password"
|
|
min-width="100px"
|
|
:label="$t('equipment.password')"
|
|
align="center"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
:label="$t('share.operate')"
|
|
align="center"
|
|
fixed="right"
|
|
width="200px"
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-edit"
|
|
@click="handleEdit(scope.row.eqpbookId, 1)"
|
|
>{{ $t("share.edit") }}</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-delete"
|
|
@click="handleDelete(scope.row.eqpbookId)"
|
|
>{{ $t("share.delete") }}</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-s-promotion"
|
|
@click="goToAboutPage(scope.row.eqpbookId)"
|
|
>{{ $t("equipment.thoroughfare") }}</el-button
|
|
>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
icon="el-icon-upload"
|
|
@click="handleUploadImg(scope.row.eqpbookId)"
|
|
>{{ $t("equipment.uploadPictures") }}</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<pagination
|
|
v-show="total > 0"
|
|
:total="total"
|
|
:page.sync="queryParams.pageNum"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="init"
|
|
/>
|
|
|
|
<el-dialog
|
|
:title="title"
|
|
:visible.sync="dialogVisible"
|
|
width="70%"
|
|
:before-close="handleClose"
|
|
>
|
|
<el-form :model="dialogForm" label-width="190px">
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.areaName')">
|
|
<treeselect
|
|
v-model="dialogForm.areaName"
|
|
:options="areaNameOptions"
|
|
:show-count="true"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('equipment.areaName')
|
|
"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.DeviceType')">
|
|
<el-select
|
|
v-model="dialogForm.type"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('equipment.DeviceType')
|
|
"
|
|
style="display: block; width: 100%"
|
|
>
|
|
<el-option
|
|
v-for="dict in deviceTypeOptions"
|
|
:key="dict.dictValue"
|
|
:label="dict.dictLabel"
|
|
:value="dict.dictValue"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.EquipmentName')">
|
|
<el-input
|
|
v-model="dialogForm.patroldeviceName"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.EquipmentName')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.EquipmentCode')">
|
|
<el-input
|
|
v-model="dialogForm.patroldeviceCode"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.EquipmentCode')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.EquipmentModel')">
|
|
<el-input
|
|
v-model="dialogForm.deviceModel"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.EquipmentModel')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.Manufacturer')">
|
|
<el-input
|
|
v-model="dialogForm.manufacturer"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.Manufacturer')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item
|
|
:label="$t('equipment.mainSystem')"
|
|
class="mainSystem"
|
|
>
|
|
<el-select
|
|
v-model="dialogForm.mainSystemCode"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('equipment.mainSystem')
|
|
"
|
|
style="display: block; width: 100%"
|
|
>
|
|
<el-option
|
|
:label="item.mainSystemName || item.mainSystemCode"
|
|
:value="item.mainSystemCode"
|
|
v-for="item in mainSystemData"
|
|
:key="item.mainSystemId"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.UnitOfUse')">
|
|
<el-input
|
|
v-model="dialogForm.useUnit"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.UnitOfUse')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.EquipmentSource')">
|
|
<el-input
|
|
v-model="dialogForm.deviceSource"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.EquipmentSource')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.dateOfManufacture')">
|
|
<el-input
|
|
v-model="dialogForm.productionDate"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.dateOfManufacture')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.factoryNumber')">
|
|
<el-input
|
|
v-model="dialogForm.productionCode"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.factoryNumber')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.IsItARotatingWheel')">
|
|
<el-select
|
|
v-model="dialogForm.istransport"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('equipment.IsItARotatingWheel')
|
|
"
|
|
style="display: block; width: 100%"
|
|
>
|
|
<el-option label="是" value="1"></el-option>
|
|
<el-option label="否" value="0"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.UseType')">
|
|
<el-select
|
|
v-model="dialogForm.useMode"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('equipment.UseType')
|
|
"
|
|
style="display: block; width: 100%"
|
|
>
|
|
<el-option
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
v-for="item in useModeData"
|
|
:key="item.dictValue"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.VideoType')">
|
|
<el-select
|
|
v-model="dialogForm.videoMode"
|
|
:placeholder="
|
|
$t('share.PleaseChoose') + $t('equipment.VideoType')
|
|
"
|
|
style="display: block; width: 100%"
|
|
>
|
|
<el-option
|
|
:label="item.dictLabel"
|
|
:value="item.dictValue"
|
|
v-for="item in videoModeData"
|
|
:key="item.dictValue"
|
|
></el-option>
|
|
<!-- <el-option label="区域二" value="beijing"></el-option> -->
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.InstallationPosition')">
|
|
<el-input
|
|
v-model="dialogForm.place"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.InstallationPosition')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.BelongingRobot')">
|
|
<el-input
|
|
v-model="dialogForm.robotsCode"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.BelongingRobot')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item
|
|
:label="$t('equipment.RelativeSpatialPosition') + 'x'"
|
|
>
|
|
<el-input
|
|
v-model="dialogForm.positionX"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('equipment.RelativeSpatialPosition') +
|
|
'x'
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item
|
|
:label="$t('equipment.RelativeSpatialPosition') + 'y'"
|
|
>
|
|
<el-input
|
|
v-model="dialogForm.positionY"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('equipment.RelativeSpatialPosition') +
|
|
'y'
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item
|
|
:label="$t('equipment.RelativeSpatialPosition') + 'z'"
|
|
>
|
|
<el-input
|
|
v-model="dialogForm.positionZ"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') +
|
|
$t('equipment.RelativeSpatialPosition') +
|
|
'z'
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.ipAddress')">
|
|
<el-input
|
|
v-model="dialogForm.ipAddr"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.ipAddress')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.port')">
|
|
<el-input
|
|
v-model="dialogForm.port"
|
|
:placeholder="$t('share.PleaseEnter') + $t('equipment.port')"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-row :gutter="10">
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.user')">
|
|
<el-input
|
|
v-model="dialogForm.user"
|
|
:placeholder="$t('share.PleaseEnter') + $t('equipment.user')"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.password')">
|
|
<el-input
|
|
v-model="dialogForm.password"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.password')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col span="8">
|
|
<el-form-item :label="$t('equipment.VideoNVREncoding')">
|
|
<el-input
|
|
v-model="dialogForm.videoNvrCode"
|
|
:placeholder="
|
|
$t('share.PleaseEnter') + $t('equipment.VideoNVREncoding')
|
|
"
|
|
></el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose">取 消</el-button>
|
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
<el-dialog
|
|
title="监测设备导入"
|
|
v-model="upload.open"
|
|
width="400px"
|
|
append-to-body
|
|
:visible="upload.open"
|
|
>
|
|
<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">将文件拖到此处，或<em>点击上传</em></div>
|
|
<template #tip>
|
|
<div class="el-upload__tip text-center">
|
|
<span>仅允许导入xls、xlsx格式文件。</span>
|
|
</div>
|
|
</template>
|
|
</el-upload>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
|
<el-button @click="upload.open = false">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
<el-dialog
|
|
title="图片上传"
|
|
v-model="uploadImg.open"
|
|
width="400px"
|
|
append-to-body
|
|
:visible="uploadImg.open"
|
|
>
|
|
<el-upload
|
|
ref="uploadRefImg"
|
|
:limit="1"
|
|
accept="image/*"
|
|
:headers="uploadImg.headers"
|
|
:action="uploadImg.url"
|
|
:data="{ eqpbookId: currentEqpbookId }"
|
|
:disabled="uploadImg.isUploading"
|
|
:on-progress="handleFileUploadProgressImg"
|
|
:on-success="handleFileSuccessImg"
|
|
:auto-upload="false"
|
|
drag
|
|
name="pic"
|
|
>
|
|
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
|
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
|
</el-upload>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="submitFileFormImg">确 定</el-button>
|
|
<el-button @click="uploadImg.open = false">取 消</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script >
|
|
import { getToken } from "@/utils/auth";
|
|
import {
|
|
getDeviceType,
|
|
getList,
|
|
getTreeselect,
|
|
postRemove,
|
|
getEqpbook,
|
|
use_mode,
|
|
video_mode,
|
|
eqpbook,
|
|
edit,
|
|
mainsystemList,
|
|
download,
|
|
} from "@/api/equipment/equipment";
|
|
import Treeselect from "@riophae/vue-treeselect";
|
|
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
export default {
|
|
name: "equipment",
|
|
components: { Treeselect },
|
|
computed: {},
|
|
data() {
|
|
return {
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
},
|
|
tableData: [],
|
|
total: 1,
|
|
dialogVisible: false,
|
|
title: "新增",
|
|
dialogForm: {},
|
|
// // 过滤掉已禁用部门树选项
|
|
// enabledDeptOptions: undefined,
|
|
// 设备类型
|
|
deviceTypeOptions: [],
|
|
// 区域名称Tree树
|
|
areaNameOptions: [],
|
|
ids: [],
|
|
single: true,
|
|
multiple: true,
|
|
uploadBtn: true,
|
|
useModeData: [],
|
|
videoModeData: [],
|
|
type: 0,
|
|
mainSystemData: [],
|
|
modelData: [],
|
|
upload: {
|
|
open: false,
|
|
url: process.env.VUE_APP_BASE_API + "/basedata/eqpbook/importData",
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
updateSupport: 0,
|
|
isUploading: false,
|
|
},
|
|
uploadImg: {
|
|
open: false,
|
|
url: process.env.VUE_APP_BASE_API + "/basedata/eqpbook/uploadPicMap",
|
|
headers: { Authorization: "Bearer " + getToken() },
|
|
updateSupport: 0,
|
|
isUploading: false,
|
|
},
|
|
currentEqpbookId: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
console.log("API Base:", process.env.VUE_APP_BASE_API, 111111111);
|
|
this.init();
|
|
this.getDeviceTypeInit();
|
|
getTreeselect().then((res) => {
|
|
if (res.code == 200) {
|
|
this.areaNameOptions = res.data;
|
|
}
|
|
});
|
|
use_mode().then((res) => {
|
|
if (res.code == 200) {
|
|
this.useModeData = res.data;
|
|
}
|
|
});
|
|
video_mode().then((res) => {
|
|
if (res.code == 200) {
|
|
this.videoModeData = res.data;
|
|
}
|
|
});
|
|
this.getMainsystemList();
|
|
},
|
|
methods: {
|
|
init() {
|
|
getList(this.queryParams).then((res) => {
|
|
if (res.code == 200) {
|
|
this.tableData = res.rows;
|
|
this.total = res.total;
|
|
}
|
|
});
|
|
},
|
|
getMainsystemList() {
|
|
mainsystemList().then((res) => {
|
|
if (res.code == 200) {
|
|
this.mainSystemData = res.rows;
|
|
}
|
|
});
|
|
},
|
|
getDeviceTypeInit() {
|
|
getDeviceType().then((res) => {
|
|
if (res.code == 200) {
|
|
this.deviceTypeOptions = res.data;
|
|
}
|
|
});
|
|
},
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
},
|
|
handleAdd() {
|
|
this.dialogForm = {};
|
|
this.dialogVisible = true;
|
|
this.type = 0;
|
|
},
|
|
// 查询
|
|
handleQuery() {
|
|
this.queryParams.pageNum = 1;
|
|
this.init();
|
|
},
|
|
// 重置
|
|
resetQuery() {
|
|
this.queryParams = {
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
};
|
|
this.init();
|
|
},
|
|
typeFn(type) {
|
|
console.log(type, 111111);
|
|
let src = null;
|
|
this.deviceTypeOptions.forEach((item) => {
|
|
if (item.dictValue == type) {
|
|
return (src = item.dictLabel);
|
|
}
|
|
});
|
|
return src;
|
|
},
|
|
// 单删
|
|
handleDelete(eqpbookId) {
|
|
postRemove(eqpbookId).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
message: "删除成功",
|
|
type: "success",
|
|
});
|
|
this.init();
|
|
}
|
|
});
|
|
},
|
|
// 多删
|
|
handleDeleteAll() {
|
|
console.log(this.ids, 1111111);
|
|
if (this.ids.length <= 0) {
|
|
this.$message({
|
|
message: this.$t("prompt.error.delete_Data"),
|
|
type: "warning",
|
|
});
|
|
return;
|
|
} else {
|
|
postRemove(this.ids.toString()).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
message: "删除成功",
|
|
type: "success",
|
|
});
|
|
this.init();
|
|
this.multiple = true;
|
|
} else {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: "warning",
|
|
});
|
|
}
|
|
});
|
|
}
|
|
},
|
|
handleSelectionChange(selection) {
|
|
this.ids = selection.map((item) => item.eqpbookId);
|
|
this.modelData = selection;
|
|
// this.modelData=selection.map(item => {
|
|
// return {
|
|
// Code: item.areaId,
|
|
// Command: item.Command,
|
|
// Type: item.Type,
|
|
// deviceCode: item.deviceCode,
|
|
// }
|
|
// });
|
|
if (this.ids.length >= 0) {
|
|
this.multiple = false;
|
|
}
|
|
if (this.ids.length == 1) {
|
|
this.single = false;
|
|
this.uploadBtn = false;
|
|
} else {
|
|
this.single = true;
|
|
this.uploadBtn = true;
|
|
}
|
|
},
|
|
// 编辑弹框打开
|
|
handleEdit(id = null, type) {
|
|
this.dialogForm = {};
|
|
this.type = 1;
|
|
if (type == 0) {
|
|
let eqpbookId = this.ids[0];
|
|
this.getEqpbookFn(eqpbookId);
|
|
} else {
|
|
this.getEqpbookFn(id);
|
|
}
|
|
},
|
|
getEqpbookFn(id) {
|
|
getEqpbook(id).then((res) => {
|
|
if (res.code == 200) {
|
|
this.dialogVisible = true;
|
|
this.dialogForm = res.data;
|
|
}
|
|
});
|
|
},
|
|
// 保存
|
|
onSubmit() {
|
|
if (this.type == 0) {
|
|
console.log(type, 1111111);
|
|
// 新增
|
|
eqpbook(this.dialogForm).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "添加成功!",
|
|
});
|
|
this.dialogVisible = false;
|
|
this.init();
|
|
}
|
|
});
|
|
} else {
|
|
// 编辑
|
|
edit(this.dialogForm).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
type: "success",
|
|
message: "编辑成功!",
|
|
});
|
|
this.dialogVisible = false;
|
|
this.init();
|
|
}
|
|
});
|
|
}
|
|
},
|
|
// 导出
|
|
handleExport() {
|
|
let data = {
|
|
pageNum: this.queryParams.pageNum,
|
|
pageSize: this.queryParams.pageSize,
|
|
};
|
|
// download(data).then(res=>{
|
|
// console.log(res)
|
|
// })
|
|
this.download(
|
|
"/basedata/eqpbook/export",
|
|
{
|
|
...data,
|
|
},
|
|
`equipment_${new Date().getTime()}.xlsx`
|
|
);
|
|
},
|
|
goToAboutPage(id) {
|
|
this.$router.push("/basedata/eqpbook/channel");
|
|
},
|
|
// 模型同步
|
|
handleModel() {
|
|
console.log(this.modelData);
|
|
},
|
|
// 导入
|
|
handleUpload() {
|
|
// this.dialogVisible = true;
|
|
this.upload.open = true;
|
|
},
|
|
// handleClose() {
|
|
// this.upload.open = false;
|
|
// },
|
|
/**文件上传中处理 */
|
|
handleFileUploadProgress() {
|
|
this.upload.isUploading = true;
|
|
},
|
|
handleFileSuccess(response, file, fileList) {
|
|
this.upload.open = false;
|
|
this.upload.isUploading = false;
|
|
this.$refs["uploadRef"].handleRemove(file);
|
|
this.$alert(
|
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
|
response.msg +
|
|
"</div>",
|
|
"导入结果",
|
|
{ dangerouslyUseHTMLString: true }
|
|
);
|
|
this.init();
|
|
},
|
|
submitFileForm() {
|
|
this.$refs["uploadRef"].submit();
|
|
},
|
|
// 导入
|
|
handleUploadImg(id) {
|
|
// this.dialogVisible = true;
|
|
this.currentEqpbookId = id;
|
|
this.uploadImg.open = true;
|
|
},
|
|
// handleCloseImg() {
|
|
// this.uploadImg.open = false;
|
|
// },
|
|
/**文件上传中处理 */
|
|
handleFileUploadProgressImg() {
|
|
this.uploadImg.isUploading = true;
|
|
},
|
|
handleFileSuccessImg(response, file, fileList) {
|
|
this.uploadImg.open = false;
|
|
this.uploadImg.isUploading = false;
|
|
this.$refs["uploadRefImg"].handleRemove(file);
|
|
this.$alert(
|
|
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
|
response.msg +
|
|
"</div>",
|
|
"导入结果",
|
|
{ dangerouslyUseHTMLString: true }
|
|
);
|
|
this.init();
|
|
},
|
|
submitFileFormImg() {
|
|
this.$refs["uploadRefImg"].submit();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.equipment-page {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.equipment-table-wrap {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.equipment-table {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.equipment-page ::v-deep .equipment-table .el-table__body tr td.el-table__cell {
|
|
background: #e4edfc !important;
|
|
border-color: #c7d7f4 !important;
|
|
color: #000000 !important;
|
|
}
|
|
|
|
.equipment-page ::v-deep .equipment-table .el-table__body tr.el-table__row--striped td.el-table__cell {
|
|
background: #d7e4f8 !important;
|
|
}
|
|
|
|
.equipment-page ::v-deep .equipment-table .el-table__body tr:hover > td.el-table__cell {
|
|
background: #c5d9f6 !important;
|
|
}
|
|
|
|
.equipment-page ::v-deep .equipment-table .el-table__fixed,
|
|
.equipment-page ::v-deep .equipment-table .el-table__fixed-right,
|
|
.equipment-page ::v-deep .equipment-table .el-table__fixed-body-wrapper {
|
|
background: #dbe7fb !important;
|
|
}
|
|
|
|
.task-toolbar-btn {
|
|
border: 1px solid transparent !important;
|
|
background:
|
|
linear-gradient(#01016b, #01016b) padding-box,
|
|
linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
|
|
color: #43c0ff !important;
|
|
}
|
|
|
|
.task-toolbar-btn:hover,
|
|
.task-toolbar-btn:focus {
|
|
border: 1px solid transparent !important;
|
|
background:
|
|
linear-gradient(#01016b, #01016b) padding-box,
|
|
linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
|
|
color: #43c0ff !important;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.task-toolbar-btn.is-disabled,
|
|
.task-toolbar-btn.is-disabled:hover,
|
|
.task-toolbar-btn.is-disabled:focus {
|
|
border: 1px solid transparent !important;
|
|
background:
|
|
linear-gradient(#01016b, #01016b) padding-box,
|
|
linear-gradient(135deg, #3988ff, #0351c6) border-box !important;
|
|
color: #43c0ff !important;
|
|
opacity: 0.45;
|
|
}
|
|
|
|
.operate-left {
|
|
height: 30px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
i {
|
|
font-size: 20px;
|
|
margin-left: 5px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
::v-deep .el-tree-node:focus > .el-tree-node__content {
|
|
color: #4a9de7 !important;
|
|
// color: #fff !important;
|
|
}
|
|
/*节点失焦时的背景颜色*/
|
|
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
|
|
// background-color: #4a9de7 !important;
|
|
// color: #fff !important;
|
|
// }
|
|
.grid-content-right {
|
|
padding: 0 20%;
|
|
}
|
|
.titleName {
|
|
font-size: 26px;
|
|
padding: 10px;
|
|
}
|
|
.number-title {
|
|
margin-left: 10px;
|
|
}
|
|
.serial-number {
|
|
color: #999;
|
|
font-size: 12px;
|
|
margin-bottom: 30px;
|
|
margin-top: 20px;
|
|
}
|
|
.mainSystem {
|
|
::v-deep.el-form-item__label {
|
|
color: rgb(255, 200, 0);
|
|
}
|
|
}
|
|
</style>
|