flx:修改设备新增

This commit is contained in:
Rain_ 2025-10-16 09:05:21 +08:00
parent 54e547a18f
commit 81f18f5f3d
2 changed files with 445 additions and 296 deletions

View File

@ -6,3 +6,11 @@
[0929/090447.874:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2) [0929/090447.874:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[0929/090448.024:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2) [0929/090448.024:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[0929/090501.978:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2) [0929/090501.978:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102708.924:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102709.538:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102709.919:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102717.919:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102845.212:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102845.248:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102846.198:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)
[1014/102846.324:ERROR:registration_protocol_win.cc(108)] CreateFile: 系统找不到指定的文件。 (0x2)

View File

@ -1,105 +1,194 @@
<template> <template>
<!-- 设备管理 --> <!-- 设备管理 -->
<div class="fullHeight"> <div class="fullHeight">
<div class="searchBox whiteBlock"> <div class="searchBox whiteBlock">
<el-button type="warning" size="medium" plain @click="refresh">{{ $t('message.deviceManage.refresh') }}</el-button> <el-button type="warning" size="medium" plain @click="refresh">{{
<el-button v-permission="{ key: 'add', menuPath: '/equipmentCenter/aiAnalysisDevManage' }" type="primary" size="medium" @click="add">{{ $t("message.deviceManage.refresh")
$t('message.deviceManage.add') }}</el-button>
}}</el-button> <el-button
<!-- <span class="downloadBtn primaryText" @click="downloadFn"> v-permission="{
key: 'add',
menuPath: '/equipmentCenter/aiAnalysisDevManage',
}"
type="primary"
size="medium"
@click="add"
>{{ $t("message.deviceManage.add") }}</el-button
>
<!-- <span class="downloadBtn primaryText" @click="downloadFn">
{{$t('message.deviceManage.protocolDownload')}} {{$t('message.deviceManage.protocolDownload')}}
</span> --> </span> -->
<div class="aiAlarm"> <div class="aiAlarm">
<span>是否需要项目管理员做AI抓拍初筛</span> <span>是否需要项目管理员做AI抓拍初筛</span>
<el-tooltip <el-tooltip
effect="light" effect="light"
class="item" class="item"
popper-class="tooltip-width" popper-class="tooltip-width"
content="选择“是”时AI抓拍的图片首先推送到项目管理员账号由项目管理员账号做初步筛选(忽略误报的隐患抓拍或选择推送违章信息给相应区域的责任单位责任人进行整改)﹔选择“否”时AI抓拍的图片跳过项目管理员初步筛选直接推送给相应区域的责任单位责任进行整改。" content="选择“是”时AI抓拍的图片首先推送到项目管理员账号由项目管理员账号做初步筛选(忽略误报的隐患抓拍或选择推送违章信息给相应区域的责任单位责任人进行整改)﹔选择“否”时AI抓拍的图片跳过项目管理员初步筛选直接推送给相应区域的责任单位责任进行整改。"
placement="bottom" placement="bottom"
> >
<i class="el-icon-question"></i> <i class="el-icon-question"></i>
</el-tooltip> </el-tooltip>
<el-radio-group @input="onAiInput" v-model="aiAlarmNeedManageApprove"> <el-radio-group
<el-radio :label="1"></el-radio> @input="onAiInput"
<el-radio :label="0"></el-radio> v-model="aiAlarmNeedManageApprove"
</el-radio-group> >
</div> <el-radio :label="1"></el-radio>
</div> <el-radio :label="0"></el-radio>
<div class="table_wrap whiteBlock"> </el-radio-group>
<el-table class="tables" :data="List"> </div>
<el-table-column prop="hardwareName" align="center" :label="$t('message.deviceManage.devName')"></el-table-column> </div>
<el-table-column prop="hardwareId" :label="$t('message.deviceManage.devSn')" align="center"></el-table-column> <div class="table_wrap whiteBlock">
<el-table-column prop="ip" label="设备ip" align="center"></el-table-column> <el-table class="tables" :data="List">
<el-table-column prop="enterpriseName" label="分包单位" align="center"> <el-table-column
<template slot-scope="scope">{{ scope.row.enterpriseName || '-' }}</template> prop="hardwareName"
</el-table-column> align="center"
<el-table-column prop="deviceState" label="在线状态" align="center"> :label="$t('message.deviceManage.devName')"
<template slot-scope="scope">{{ scope.row.deviceState == '1' ? '在线' : '离线' }}</template> ></el-table-column>
</el-table-column> <el-table-column
<!-- <el-table-column prop="isClosed" :label="$t('message.deviceManage.isClosed')" align="center"> prop="hardwareId"
:label="$t('message.deviceManage.devSn')"
align="center"
></el-table-column>
<el-table-column
prop="ip"
label="设备ip"
align="center"
></el-table-column>
<el-table-column
prop="enterpriseName"
label="分包单位"
align="center"
>
<template slot-scope="scope">{{
scope.row.enterpriseName || "-"
}}</template>
</el-table-column>
<el-table-column
prop="deviceState"
label="在线状态"
align="center"
>
<template slot-scope="scope">{{
scope.row.deviceState == "1" ? "在线" : "离线"
}}</template>
</el-table-column>
<!-- <el-table-column prop="isClosed" :label="$t('message.deviceManage.isClosed')" align="center">
<template slot-scope="scope">{{$t('message.deviceManage.isClosedArr')[scope.row.isClosed-1]}}</template> <template slot-scope="scope">{{$t('message.deviceManage.isClosedArr')[scope.row.isClosed-1]}}</template>
</el-table-column> </el-table-column>
<el-table-column prop="realTime" :width="$fontSize(200)" :label="$t('message.deviceManage.createTime')" <el-table-column prop="realTime" :width="$fontSize(200)" :label="$t('message.deviceManage.createTime')"
align="center"></el-table-column> --> align="center"></el-table-column> -->
<el-table-column :label="$t('message.deviceManage.operation')" align="center"> <el-table-column
<template slot-scope="scope"> :label="$t('message.deviceManage.operation')"
<div class="tableBtns"> align="center"
<!--<div @click="yu(scope.row)" class="operationText"><img src="@/assets/images/yu.png" alt="">{{$t('message.alarmValueSet.yjz')}} >
<template slot-scope="scope">
<div class="tableBtns">
<!--<div @click="yu(scope.row)" class="operationText"><img src="@/assets/images/yu.png" alt="">{{$t('message.alarmValueSet.yjz')}}
</div> </div>
<div @click="bao(scope.row)" class="operationText"><img src="@/assets/images/bao.png" alt="">{{$t('message.alarmValueSet.bjz')}} <div @click="bao(scope.row)" class="operationText"><img src="@/assets/images/bao.png" alt="">{{$t('message.alarmValueSet.bjz')}}
</div>--> </div>-->
<div v-permission="{ key: 'edit', menuPath: '/equipmentCenter/aiAnalysisDevManage' }" @click="edit(scope.row)" class="operationText"> <div
<img src="@/assets/images/icon-edit.png" class="w_15 h_15" /> v-permission="{
<span>{{ $t('message.deviceManage.edit') }}</span> key: 'edit',
</div> menuPath:
<div '/equipmentCenter/aiAnalysisDevManage',
v-permission="{ key: 'delete', menuPath: '/equipmentCenter/aiAnalysisDevManage' }" }"
@click="deleteDev(scope.row)" @click="edit(scope.row)"
class="operationText" class="operationText"
> >
<img src="@/assets/images/icon-delete.png" class="w_15 h_15" /> <img
<span>{{ $t('message.deviceManage.delete') }}</span> src="@/assets/images/icon-edit.png"
</div> class="w_15 h_15"
</div> />
</template> <span>{{
</el-table-column> $t("message.deviceManage.edit")
</el-table> }}</span>
</div> </div>
<!-- '新增':'编辑'" --> <div
<el-dialog v-permission="{
@close="close" key: 'delete',
:modal-append-to-body="false" menuPath:
:title="Popup.type === 'add' ? $t('message.deviceManage.add') : $t('message.deviceManage.edit')" '/equipmentCenter/aiAnalysisDevManage',
:visible.sync="Popup.show" }"
class="dialog_w667" @click="deleteDev(scope.row)"
> class="operationText"
<div class="dialog_content"> >
<el-form <img
v-if="Popup.type === 'add' || Popup.type === 'edit'" src="@/assets/images/icon-delete.png"
size="medium" class="w_15 h_15"
ref="addEditForm" />
:model="addEditForm" <span>{{
:rules="addEditRules" $t("message.deviceManage.delete")
:label-width="$px2rem(120)" }}</span>
class="dialogFormBox" </div>
</div>
</template>
</el-table-column>
</el-table>
</div>
<!-- '新增':'编辑'" -->
<el-dialog
@close="close"
:modal-append-to-body="false"
:title="
Popup.type === 'add'
? $t('message.deviceManage.add')
: $t('message.deviceManage.edit')
"
:visible.sync="Popup.show"
class="dialog_w667"
> >
<el-form-item :label="$t('message.deviceManage.devName')" prop="hardwareName"> <div class="dialog_content">
<el-input v-model="addEditForm.hardwareName" :placeholder="$t('message.deviceManage.placeholder')"></el-input> <el-form
</el-form-item> v-if="Popup.type === 'add' || Popup.type === 'edit'"
<el-form-item :label="$t('message.deviceManage.devSn')" prop="hardwareId"> size="medium"
<el-input ref="addEditForm"
v-model="addEditForm.hardwareId" :model="addEditForm"
:disabled="Popup.type === 'edit'" :rules="addEditRules"
:placeholder="$t('message.deviceManage.placeholder')" :label-width="$px2rem(120)"
></el-input> class="dialogFormBox"
</el-form-item> >
<el-form-item label="分包单位" prop="enterpriseIds"> <el-form-item
<el-select v-model="addEditForm.enterpriseIds" multiple filterable placeholder="请选择企业"> :label="$t('message.deviceManage.devName')"
<el-option :label="item.enterpriseName" :value="item.id" v-for="(item, index) in enterpriseList" :key="index"> </el-option> prop="hardwareName"
</el-select> >
</el-form-item> <el-input
<!-- <el-form-item :label="'锁厂家'"> v-model="addEditForm.hardwareName"
:placeholder="
$t('message.deviceManage.placeholder')
"
></el-input>
</el-form-item>
<el-form-item
:label="$t('message.deviceManage.devSn')"
prop="hardwareId"
>
<el-input
v-model="addEditForm.hardwareId"
:disabled="Popup.type === 'edit'"
:placeholder="
$t('message.deviceManage.placeholder')
"
></el-input>
</el-form-item>
<el-form-item label="分包单位" prop="enterpriseIds">
<el-select
v-model="addEditForm.enterpriseIds"
multiple
filterable
placeholder="请选择企业"
>
<el-option
:label="item.enterpriseName"
:value="item.id"
v-for="(item, index) in enterpriseList"
:key="index"
>
</el-option>
</el-select>
</el-form-item>
<!-- <el-form-item :label="'锁厂家'">
<el-input value="深圳施泰信息技术有限公司" disabled ></el-input> <el-input value="深圳施泰信息技术有限公司" disabled ></el-input>
</el-form-item> </el-form-item>
<el-form-item :label="'锁编号'"> <el-form-item :label="'锁编号'">
@ -117,245 +206,297 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> --> </el-form-item> -->
<div class="dialog-footer"> <div class="dialog-footer">
<el-button class="cancleBtn" @click="Popup.show = false" icon="el-icon-circle-close" size="medium" <el-button
>{{ $t('message.deviceManage.cancel') }} class="cancleBtn"
</el-button> @click="Popup.show = false"
<el-button type="primary" icon="el-icon-circle-check" @click="submit" size="medium">{{ $t('message.deviceManage.save') }} </el-button> icon="el-icon-circle-close"
</div> size="medium"
</el-form> >{{ $t("message.deviceManage.cancel") }}
</div> </el-button>
</el-dialog> <el-button
</div> type="primary"
icon="el-icon-circle-check"
@click="submit"
size="medium"
>{{ $t("message.deviceManage.save") }}
</el-button>
</div>
</el-form>
</div>
</el-dialog>
</div>
</template> </template>
<script> <script>
import { import {
aiAnalyseHardWareRecordAdd, aiAnalyseHardWareRecordAdd,
aiAnalyseHardWareRecordEdit, aiAnalyseHardWareRecordEdit,
aiAnalyseHardWareRecordDelete, aiAnalyseHardWareRecordDelete,
aiAnalyseHardWareRecordList, aiAnalyseHardWareRecordList,
aiProjectUpdateBySn, aiProjectUpdateBySn,
aiProjectGetBySn aiProjectGetBySn,
} from '@/assets/js/api/equipmentCenter/electricBox'; } from "@/assets/js/api/equipmentCenter/electricBox";
import { getEnterpriseInfoListApi } from '@/assets/js/api/specialWork'; import { getEnterpriseInfoListApi } from "@/assets/js/api/specialWork";
import { getProjectChilderSystemUserListApi } from '@/assets/js/api/configManage'; import { getProjectChilderSystemUserListApi } from "@/assets/js/api/configManage";
export default { export default {
mounted() { mounted() {
this.getEnterpriseList(); this.getEnterpriseList();
this.getList(); this.getList();
this.getLaborManagementList(); this.getLaborManagementList();
}, },
data() { data() {
return { return {
enterpriseList: [], enterpriseList: [],
props: { props: {
multiple: true multiple: true,
}, },
addEditRules: { addEditRules: {
hardwareName: [ hardwareName: [
{ required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: 'blur' }, {
{ required: true, message: this.$t('message.deviceManage.rules.devName'), trigger: 'change' } required: true,
], message: this.$t("message.deviceManage.rules.devName"),
hardwareId: [ trigger: "blur",
{ required: true, message: this.$t('message.deviceManage.message1'), trigger: 'blur' } // },
] {
}, required: true,
options: [ message: this.$t("message.deviceManage.rules.devName"),
/*{realName: "", value: 1}, trigger: "change",
},
],
hardwareId: [
{
required: true,
message: this.$t("message.deviceManage.message1"),
trigger: "blur",
}, //
],
},
options: [
/*{realName: "", value: 1},
{realName: "李先生", value: 2},*/ {realName: "李先生", value: 2},*/
], ],
addEditForm: { addEditForm: {
enterpriseIds: [] enterpriseIds: [],
}, },
List: [ List: [
/*{ /*{
deviceId: "124578", deviceId: "124578",
deviceName: "扬尘监测1", deviceName: "扬尘监测1",
isClosed: 2, isClosed: 2,
address: "22", address: "22",
createTime: "2019-05-05 16:55:46", createTime: "2019-05-05 16:55:46",
}*/ }*/
], ],
aiAlarmNeedManageApprove: 0, aiAlarmNeedManageApprove: 0,
Popup: { Popup: {
type: 'add', type: "add",
show: false show: false,
} },
}; };
},
created() {
this.aiProjectGetBySnInfo();
},
methods: {
/** 查询企业列表 */
getEnterpriseList() {
const params = {
projectSn: this.$store.state.projectSn,
enterpriseName: undefined,
userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
enterpriseTypeId: undefined
};
getEnterpriseInfoListApi(params).then(res => {
console.log('查询企业列表: ', res);
this.enterpriseList = res.result;
});
}, },
downloadFn() { created() {
// AI this.aiProjectGetBySnInfo();
window.open('/doc/' + this.$t('message.deviceManage.aiAgreement') + '.docx');
}, },
handle(type, show) { methods: {
// /** 查询企业列表 */
this.Popup = { getEnterpriseList() {
type: type, const params = {
show: show projectSn: this.$store.state.projectSn,
}; enterpriseName: undefined,
}, userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
Change() {}, enterpriseTypeId: undefined,
add() { };
this.handle('add', true); getEnterpriseInfoListApi(params).then((res) => {
}, console.log("查询企业列表: ", res);
edit(obj) { this.enterpriseList = res.result;
console.log('编辑', obj); });
this.addEditForm = JSON.parse(JSON.stringify(obj)); },
if (typeof obj.alarmPushWorkerId === 'string' && obj.alarmPushWorkerId != '') { downloadFn() {
this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId.split(',').map(Number); // AI
} window.open(
this.addEditForm.enterpriseIds = obj.enterpriseIds ? obj.enterpriseIds.split(',') : []; "/doc/" + this.$t("message.deviceManage.aiAgreement") + ".docx"
this.handle('edit', true); );
}, },
deleteDev(obj) { handle(type, show) {
console.log('删除', obj); //
this.$confirm( this.Popup = {
this.$t('message.personnelPosition.beaconManage.table.confirmText') + '【' + obj.hardwareName + '】?', type: type,
this.$t('message.personnelPosition.beaconManage.table.Tips'), show: show,
{ };
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'), },
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'), Change() {},
type: 'warning' add() {
} this.addEditForm.enterpriseIds = [];
) this.handle("add", true);
.then(() => { },
aiAnalyseHardWareRecordDelete({ id: obj.id }).then(result => { edit(obj) {
if (result.success) { console.log("编辑", obj);
this.$message.success(result.message); this.addEditForm = JSON.parse(JSON.stringify(obj));
this.getList(); if (
typeof obj.alarmPushWorkerId === "string" &&
obj.alarmPushWorkerId != ""
) {
this.addEditForm.alarmPushWorkerId = obj.alarmPushWorkerId
.split(",")
.map(Number);
} }
}); this.addEditForm.enterpriseIds = obj.enterpriseIds
}) ? obj.enterpriseIds.split(",")
.catch(() => {}); : [];
}, this.handle("edit", true);
submit() { },
let params = JSON.parse(JSON.stringify(this.addEditForm)); deleteDev(obj) {
if (this.addEditForm.alarmPushWorkerId) { console.log("删除", obj);
params.alarmPushWorkerId = this.addEditForm.alarmPushWorkerId.join(','); this.$confirm(
} this.$t(
params.enterpriseIds = params.enterpriseIds.join(','); "message.personnelPosition.beaconManage.table.confirmText"
) +
"【" +
obj.hardwareName +
"】?",
this.$t("message.personnelPosition.beaconManage.table.Tips"),
{
confirmButtonText: this.$t(
"message.personnelPosition.confirmButtonText"
),
cancelButtonText: this.$t(
"message.personnelPosition.cancelButtonText"
),
type: "warning",
}
)
.then(() => {
aiAnalyseHardWareRecordDelete({ id: obj.id }).then(
(result) => {
if (result.success) {
this.$message.success(result.message);
this.getList();
}
}
);
})
.catch(() => {});
},
submit() {
let params = JSON.parse(JSON.stringify(this.addEditForm));
if (this.addEditForm.alarmPushWorkerId) {
params.alarmPushWorkerId =
this.addEditForm.alarmPushWorkerId.join(",");
}
params.enterpriseIds = params.enterpriseIds.join(",");
params.projectSn = this.$store.state.projectSn; params.projectSn = this.$store.state.projectSn;
// params.lockFactory=1 // params.lockFactory=1
this.$refs.addEditForm.validate(valid => { this.$refs.addEditForm.validate((valid) => {
if (valid) { if (valid) {
if (this.Popup.type === 'add') { if (this.Popup.type === "add") {
aiAnalyseHardWareRecordAdd(params).then(result => { aiAnalyseHardWareRecordAdd(params).then((result) => {
if (result.success) { if (result.success) {
this.$message.success(result.message); this.$message.success(result.message);
this.getList(); this.getList();
} }
});
} else if (this.Popup.type === "edit") {
console.log("编辑信息", this.addEditForm);
aiAnalyseHardWareRecordEdit(params).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getList();
}
});
}
this.Popup.show = false;
} else {
return false;
}
}); });
} else if (this.Popup.type === 'edit') { },
console.log('编辑信息', this.addEditForm); refresh() {
aiAnalyseHardWareRecordEdit(params).then(result => { this.getList();
if (result.success) { },
this.$message.success(result.message); aiProjectGetBySnInfo() {
this.getList(); aiProjectGetBySn({ projectSn: this.$store.state.projectSn }).then(
} (result) => {
if (result.success) {
console.log("项目信息", result.result);
this.aiAlarmNeedManageApprove = result.result
.aiAlarmNeedManageApprove
? result.result.aiAlarmNeedManageApprove
: 0;
}
}
);
},
onAiInput() {
console.log("111111");
aiProjectUpdateBySn({
projectSn: this.$store.state.projectSn,
aiAlarmNeedManageApprove: this.aiAlarmNeedManageApprove,
}).then((result) => {
if (result.success) {
this.$message.success("修改成功!");
this.getList();
}
}); });
} },
this.Popup.show = false; getList() {
} else { aiAnalyseHardWareRecordList({
return false; projectSn: this.$store.state.projectSn,
} iAlarmNeedManageApprove: this.aiAlarmNeedManageApprove,
}); }).then((result) => {
if (result.success) {
this.List = result.result;
console.log("列表", result);
}
});
},
getLaborManagementList() {
getProjectChilderSystemUserListApi({
projectSn: this.$store.state.projectSn,
workerName: "",
}).then((result) => {
if (result.success) {
console.log("施工人员", result);
this.options = result.result;
}
});
},
close() {
this.$refs.addEditForm.clearValidate();
this.addEditForm = {};
},
}, },
refresh() {
this.getList();
},
aiProjectGetBySnInfo() {
aiProjectGetBySn({ projectSn: this.$store.state.projectSn }).then(result => {
if (result.success) {
console.log('项目信息', result.result);
this.aiAlarmNeedManageApprove = result.result.aiAlarmNeedManageApprove ? result.result.aiAlarmNeedManageApprove : 0;
}
});
},
onAiInput() {
console.log('111111');
aiProjectUpdateBySn({
projectSn: this.$store.state.projectSn,
aiAlarmNeedManageApprove: this.aiAlarmNeedManageApprove
}).then(result => {
if (result.success) {
this.$message.success('修改成功!');
this.getList();
}
});
},
getList() {
aiAnalyseHardWareRecordList({
projectSn: this.$store.state.projectSn,
iAlarmNeedManageApprove: this.aiAlarmNeedManageApprove
}).then(result => {
if (result.success) {
this.List = result.result;
console.log('列表', result);
}
});
},
getLaborManagementList() {
getProjectChilderSystemUserListApi({ projectSn: this.$store.state.projectSn, workerName: '' }).then(result => {
if (result.success) {
console.log('施工人员', result);
this.options = result.result;
}
});
},
close() {
this.$refs.addEditForm.clearValidate();
this.addEditForm = {};
}
}
}; };
</script> </script>
<style lang="less"> <style lang="less">
.tooltip-width { .tooltip-width {
max-width: 300px; max-width: 300px;
} }
.aiAlarm { .aiAlarm {
margin-left: 20px; margin-left: 20px;
font-size: 16px; font-size: 16px;
.el-radio-group { .el-radio-group {
margin-left: 10px; margin-left: 10px;
} }
} }
.tableBtns { .tableBtns {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.yj-dialogFormBox { .yj-dialogFormBox {
width: 462px; width: 462px;
} }
.searchBox { .searchBox {
position: relative; position: relative;
} }
.downloadBtn { .downloadBtn {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 30px; top: 30px;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
</style> </style>