flx:优化

This commit is contained in:
Rain_ 2025-11-28 10:10:40 +08:00
parent c88c41d63d
commit 69f35ce086
2 changed files with 270 additions and 142 deletions

View File

@ -2,7 +2,12 @@
<div class="fullHeight">
<div class="fullHeight">
<div class="searchBox whiteBlock">
<el-form :inline="true" size="medium" :model="formInline" class="demo-form-inline">
<el-form
:inline="true"
size="medium"
:model="formInline"
class="demo-form-inline"
>
<!-- <el-form-item label="区域">
<el-select
ref="selectRef"
@ -27,7 +32,13 @@
</el-select>
</el-form-item> -->
<el-form-item label="企业" v-if="projectInfo.isEnableRegionEnterprise == 1">
<el-select ref="selectEnterpriseRef" v-model="selectEnterpriseVal" placeholder="请选择" clearable @change="selectEnterpriseChange">
<el-select
ref="selectEnterpriseRef"
v-model="selectEnterpriseVal"
placeholder="请选择"
clearable
@change="selectEnterpriseChange"
>
<el-option style="height: auto" :value="[]">
<el-tree
:data="treeList"
@ -47,7 +58,10 @@
</el-select>
</el-form-item> -->
<el-form-item :label="$t('message.sixComplete.fence.devNo')">
<el-input v-model="formInline.hardwareId" :placeholder="$t('message.sixComplete.fence.placeholder')"></el-input>
<el-input
v-model="formInline.hardwareId"
:placeholder="$t('message.sixComplete.fence.placeholder')"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.sixComplete.happenTime')">
<el-date-picker
@ -65,14 +79,16 @@
<el-button
v-permission="{
key: 'dealPush_query',
menuPath: '/project/carViolation/dealPushManage'
menuPath: '/project/carViolation/dealPushManage',
}"
type="primary"
@click="getList(1)"
plain
>{{ $t('message.sixComplete.query') }}</el-button
>{{ $t("message.sixComplete.query") }}</el-button
>
<el-button type="warning" @click="refresh" plain>{{ $t('message.sixComplete.fresh') }}</el-button>
<el-button type="warning" @click="refresh" plain>{{
$t("message.sixComplete.fresh")
}}</el-button>
</el-form-item>
</el-form>
<!-- <el-button type="primary" size="medium" @click="addFn"
@ -93,7 +109,11 @@
:src="$store.state.FILEURL + item.eduVideo"
controls
></video> -->
<img :src="item.imageUrl" alt="" :preview="item.imageUrl" />
<img
:src="imageUrlUp(item.imageUrl)"
alt=""
:preview="imageUrlUp(item.imageUrl)"
/>
<div class="desc">
<span class="time">{{ getTypeName(item.alarmType) }}</span>
<span>{{ item.createTime }}</span>
@ -105,16 +125,31 @@
<div style="display: flex">
<div class="title">
<!-- {{ $t('message.sixComplete.carDense.from') + ':' }}{{ item.alarmDesc }} -->
<el-tooltip class="item" effect="dark" :content="item.alarmDesc" placement="top-start">
<span>{{ $t('message.sixComplete.carDense.from') + ':' }}{{ item.alarmDesc }}</span>
<el-tooltip
class="item"
effect="dark"
:content="item.alarmDesc"
placement="top-start"
>
<span
>{{ $t("message.sixComplete.carDense.from") + ":"
}}{{ item.alarmDesc }}</span
>
</el-tooltip>
</div>
<div style="display: flex; align-items: center; justify-content: center; flex: 1">
<div
style="
display: flex;
align-items: center;
justify-content: center;
flex: 1;
"
>
<!-- 去处置 -->
<div
v-permission="{
key: 'dealPush_push',
menuPath: '/project/carViolation/dealPushManage'
menuPath: '/project/carViolation/dealPushManage',
}"
class="toDisposeOf pushBtn"
@click="pushAlarm(item)"
@ -125,7 +160,7 @@
<div
v-permission="{
key: 'dealPush_delete',
menuPath: '/project/carViolation/dealPushManage'
menuPath: '/project/carViolation/dealPushManage',
}"
class="toDisposeOf alarmDeleteBtn"
@click="deleteDev(item)"
@ -144,7 +179,7 @@
</div>
<div class="placeholderBox" v-if="workerList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>{{ $t('message.sixComplete.carDense.noWarn') }}</p>
<p>{{ $t("message.sixComplete.carDense.noWarn") }}</p>
</div>
<!-- <el-table class="tables" :data="workerList">
<el-table-column
@ -186,9 +221,22 @@
</div>
</div>
<!-- 处置记录弹框-->
<el-dialog :modal-append-to-body="false" @close="close" title="处置详情" :visible.sync="recordShow" class="dialog_w667">
<el-dialog
:modal-append-to-body="false"
@close="close"
title="处置详情"
:visible.sync="recordShow"
class="dialog_w667"
>
<div class="dialog_content">
<el-form size="medium" ref="addEditForm" :model="addEditForm" :rules="addEditRules" :label-width="$px2rem(120)" class="dialogFormBox">
<el-form
size="medium"
ref="addEditForm"
:model="addEditForm"
:rules="addEditRules"
:label-width="$px2rem(120)"
class="dialogFormBox"
>
<!-- <el-form-item label="处置结果" prop="handleResult">
<el-radio :disabled="isDetail" v-model="addEditForm.handleResult" :label="1">已处置</el-radio>
<el-radio :disabled="isDetail" v-model="addEditForm.handleResult" :label="2">误报忽略</el-radio>
@ -202,17 +250,56 @@
:placeholder="'请输入'"
></el-input>
</el-form-item> -->
<el-form-item label="选择违章人员" prop="workerInfoList" v-if="addEditForm.handleResult != 2">
<el-select :disabled="isDetail" filterable multiple v-model="selectList" placeholder="请选择" clearable @change="dutySelectChange">
<el-option v-for="(item, index) in workerListOptions" :key="index" :label="item.workerName" :value="item.id"> </el-option>
<el-form-item
label="选择违章人员"
prop="workerInfoList"
v-if="addEditForm.handleResult != 2"
>
<el-select
:disabled="isDetail"
filterable
multiple
v-model="selectList"
placeholder="请选择"
clearable
@change="dutySelectChange"
>
<el-option
v-for="(item, index) in workerListOptions"
:key="index"
:label="item.workerName"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="扣分" prop="deductScore" v-if="addEditForm.handleResult != 2">
<el-input-number v-model="addEditForm.deductScore" :min="0" :max="100" :placeholder="'请输入'"></el-input-number>
<el-form-item
label="扣分"
prop="deductScore"
v-if="addEditForm.handleResult != 2"
>
<el-input-number
v-model="addEditForm.deductScore"
:min="0"
:max="100"
:placeholder="'请输入'"
></el-input-number>
</el-form-item>
<div class="dialog-footer" v-if="!isDetail">
<el-button class="cancleBtn" icon="el-icon-circle-close" size="medium" @click="recordShow = false">取消 </el-button>
<el-button @click="addBtn" type="primary" icon="el-icon-circle-check" size="medium">确定 </el-button>
<el-button
class="cancleBtn"
icon="el-icon-circle-close"
size="medium"
@click="recordShow = false"
>取消
</el-button>
<el-button
@click="addBtn"
type="primary"
icon="el-icon-circle-check"
size="medium"
>确定
</el-button>
</div>
</el-form>
</div>
@ -220,85 +307,98 @@
</div>
</template>
<script>
import { aiAnalyseHardWareAlarmRecordApi, aiAnalyseHardWareAlarmRecordEdit, getViolatorList } from '@/assets/js/api/carViolation';
import { getCarDangerDealPageApi, violationPushDataApi, PositiveDeletionDataApi } from '@/assets/js/api/carViolation';
import { getDictionaryItemApi } from '@/assets/js/api/companyDiagram.js';
import { getWorkerInfoList, selectHierarchyEnterpriseListApi } from '@/assets/js/api/laborPerson.js';
import { getQualityRegionListApi } from '@/assets/js/api/quality.js';
import { isJSON } from '@/util/nowDate/index';
import {
aiAnalyseHardWareAlarmRecordApi,
aiAnalyseHardWareAlarmRecordEdit,
getViolatorList,
} from "@/assets/js/api/carViolation";
import {
getCarDangerDealPageApi,
violationPushDataApi,
PositiveDeletionDataApi,
} from "@/assets/js/api/carViolation";
import { getDictionaryItemApi } from "@/assets/js/api/companyDiagram.js";
import {
getWorkerInfoList,
selectHierarchyEnterpriseListApi,
} from "@/assets/js/api/laborPerson.js";
import { getQualityRegionListApi } from "@/assets/js/api/quality.js";
import { isJSON } from "@/util/nowDate/index";
export default {
data() {
return {
handleResultStatus: [
{ name: '未处置', value: false },
{ name: '已处置', value: true }
{ name: "未处置", value: false },
{ name: "已处置", value: true },
],
//
defaultProps: {
children: 'children',
label: 'enterpriseName'
children: "children",
label: "enterpriseName",
},
treeList: [],
areaList: [],
areaSelectVal: '',
areaSelectVal: "",
//
defaultAreaProps: {
children: 'children',
label: 'regionName'
children: "children",
label: "regionName",
},
selectVal: '',
selectEnterpriseVal: '',
selectVal: "",
selectEnterpriseVal: "",
isDetail: false,
pageType: 'list',
pageType: "list",
workerList: [],
pageInfo: {
pageNo: 1, //
pageSize: 10, //
total: 0 //
total: 0, //
},
itemId: '',
itemId: "",
formInline: {
alarmType: '',
handleDone: '',
endTime: '',
startTime: '',
hardwareId: '',
qualityRegionId: '',
enterpriseId: ''
alarmType: "",
handleDone: "",
endTime: "",
startTime: "",
hardwareId: "",
qualityRegionId: "",
enterpriseId: "",
},
dateRangeArr: [],
alarmTypeArrList: [],
recordShow: false,
addEditForm: {
workerInfoList: [],
handleResult: '',
dutyId: '',
desc: '',
deductScore: 0
handleResult: "",
dutyId: "",
desc: "",
deductScore: 0,
},
addEditRules: {
dutyId: [
{
required: true,
message: '请选择',
trigger: 'change'
}
message: "请选择",
trigger: "change",
},
],
handleResult: [
{
required: true,
message: '必填',
trigger: 'blur'
}
]
message: "必填",
trigger: "blur",
},
],
},
workerListOptions: [],
selectList: [],
projectInfo: {}
projectInfo: {},
};
},
created() {
this.projectInfo = isJSON(localStorage.getItem('projectInfo')) ? JSON.parse(localStorage.getItem('projectInfo')) : {};
this.projectInfo = isJSON(localStorage.getItem("projectInfo"))
? JSON.parse(localStorage.getItem("projectInfo"))
: {};
},
mounted() {
this.selectNowDate();
@ -308,16 +408,27 @@ export default {
this.getPositionList();
this.getTreeList();
},
computed: {
imageUrlUp() {
return (img) => {
return img.includes("http://") ? img : this.$store.state.FILEURL + img;
};
},
},
methods: {
pushAlarm(obj) {
console.log('删除', obj);
this.$confirm('确定进行此操作吗?', this.$t('message.personnelPosition.beaconManage.table.Tips'), {
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
type: 'warning'
})
console.log("删除", obj);
this.$confirm(
"确定进行此操作吗?",
this.$t("message.personnelPosition.beaconManage.table.Tips"),
{
confirmButtonText: this.$t("message.personnelPosition.confirmButtonText"),
cancelButtonText: this.$t("message.personnelPosition.cancelButtonText"),
type: "warning",
}
)
.then(() => {
violationPushDataApi({ id: obj.id }).then(result => {
violationPushDataApi({ id: obj.id }).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getList();
@ -327,14 +438,18 @@ export default {
.catch(() => {});
},
deleteDev(obj) {
console.log('删除', obj);
this.$confirm('确定进行此操作吗?', this.$t('message.personnelPosition.beaconManage.table.Tips'), {
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
type: 'warning'
})
console.log("删除", obj);
this.$confirm(
"确定进行此操作吗?",
this.$t("message.personnelPosition.beaconManage.table.Tips"),
{
confirmButtonText: this.$t("message.personnelPosition.confirmButtonText"),
cancelButtonText: this.$t("message.personnelPosition.cancelButtonText"),
type: "warning",
}
)
.then(() => {
PositiveDeletionDataApi({ id: obj.id }).then(result => {
PositiveDeletionDataApi({ id: obj.id }).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getList();
@ -347,7 +462,7 @@ export default {
treeClick(data) {
console.log(data);
if (data.status == 1) {
this.$message.warning('无法选中已禁用组织');
this.$message.warning("无法选中已禁用组织");
} else {
this.selectEnterpriseVal = data.enterpriseName;
this.formInline.enterpriseId = data.enterpriseId;
@ -356,8 +471,8 @@ export default {
},
getTreeList() {
selectHierarchyEnterpriseListApi({
projectSn: this.$store.state.projectSn
}).then(result => {
projectSn: this.$store.state.projectSn,
}).then((result) => {
if (result.success) {
this.treeList = result.result;
}
@ -366,10 +481,10 @@ export default {
///
getPositionList() {
let data = {
projectSn: this.$store.state.projectSn
projectSn: this.$store.state.projectSn,
};
getQualityRegionListApi(data).then(res => {
console.log('res=================', res);
getQualityRegionListApi(data).then((res) => {
console.log("res=================", res);
if (res.code == 200) {
this.areaList = res.result;
console.log(this.areaList, 135456);
@ -379,23 +494,23 @@ export default {
selectChange(val) {
console.log(val, 123);
if (!val) {
this.selectVal = '';
this.areaSelectVal = '';
this.formInline.qualityRegionId = '';
this.selectVal = "";
this.areaSelectVal = "";
this.formInline.qualityRegionId = "";
}
},
selectEnterpriseChange(val) {
console.log(val, 123);
if (!val) {
this.selectEnterpriseVal = '';
this.formInline.enterpriseId = '';
this.selectEnterpriseVal = "";
this.formInline.enterpriseId = "";
}
},
//
treeAreaClick(data) {
console.log(data);
if (data.status == 1) {
this.$message.warning('无法选中已禁用组织');
this.$message.warning("无法选中已禁用组织");
} else {
this.selectVal = data.regionName;
this.areaSelectVal = data.id;
@ -407,9 +522,9 @@ export default {
dutySelectChange(e) {
// const item = this.dutyList.find(item => item.userId === e)
// this.addEditForm.dutyUserName = item.realName
const newArray = e.map(item => ({ id: item }));
const newArray = e.map((item) => ({ id: item }));
this.addEditForm.workerInfoList = newArray;
console.log('下拉选择', newArray);
console.log("下拉选择", newArray);
},
close() {
this.addEditForm = {};
@ -424,12 +539,12 @@ export default {
getPersonDetail(itemId) {
let data = {
projectSn: this.$store.state.projectSn,
aiAnalyseHardWareAlarmRecordId: itemId
aiAnalyseHardWareAlarmRecordId: itemId,
};
getViolatorList(data).then(res => {
getViolatorList(data).then((res) => {
if (res.code == 200) {
this.selectList = res.result.map(items => items.id);
console.log('回显选择人员', this.selectList);
this.selectList = res.result.map((items) => items.id);
console.log("回显选择人员", this.selectList);
} else {
this.$message.error(res.message);
}
@ -440,12 +555,12 @@ export default {
getDutyPerson() {
let data = {
projectSn: this.$store.state.projectSn,
isFilterQualityRegionEnterprise: 1
isFilterQualityRegionEnterprise: 1,
};
getWorkerInfoList(data).then(res => {
getWorkerInfoList(data).then((res) => {
if (res.code == 200) {
this.workerListOptions = res.result.records;
console.log('获取施工人员下拉', this.workerListOptions);
console.log("获取施工人员下拉", this.workerListOptions);
} else {
this.$message.error(res.message);
}
@ -457,7 +572,7 @@ export default {
this.recordShow = true;
this.addEditForm = JSON.parse(JSON.stringify(item));
this.getPersonDetail(item.id);
console.log('打开处置弹窗', item);
console.log("打开处置弹窗", item);
},
//
@ -466,7 +581,7 @@ export default {
this.isDetail = true;
this.addEditForm = JSON.parse(JSON.stringify(item));
this.getPersonDetail(item.id);
console.log('打开处置弹窗', item);
console.log("打开处置弹窗", item);
},
//
@ -476,10 +591,10 @@ export default {
if (this.addEditForm.handleResult == 1) {
params.handleDone = true;
}
this.$refs.addEditForm.validate(valid => {
this.$refs.addEditForm.validate((valid) => {
if (valid) {
console.log('保存', params);
aiAnalyseHardWareAlarmRecordEdit(params).then(result => {
console.log("保存", params);
aiAnalyseHardWareAlarmRecordEdit(params).then((result) => {
if (result.success) {
this.$message.success(result.message);
this.getList();
@ -495,11 +610,11 @@ export default {
//
getDictionaryList() {
getDictionaryItemApi({
dictionaryEncoding: 'ai_analyse_hard_ware_alarm_record_type',
projectSn: this.$store.state.projectSn
}).then(res => {
dictionaryEncoding: "car_danger_detect_record_alarm_type",
projectSn: this.$store.state.projectSn,
}).then((res) => {
if (res.result.length > 0) {
console.log('获取字典施工阶段', res.result);
console.log("获取字典施工阶段", res.result);
this.alarmTypeArrList = res.result;
}
});
@ -513,14 +628,14 @@ export default {
hours = date.getHours(), //(0-23)
minutes = date.getMinutes(), //(0-59)
seconds = date.getSeconds();
month >= 1 && month <= 9 ? (month = '0' + month) : '';
day >= 0 && day <= 9 ? (day = '0' + day) : '';
hours >= 0 && hours <= 9 ? (hours = '0' + hours) : '';
minutes >= 0 && minutes <= 9 ? (minutes = '0' + minutes) : '';
seconds >= 0 && seconds <= 9 ? (seconds = '0' + seconds) : '';
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
// var timer = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds //
var timer = year + '-' + month + '-' + day + ' ' + '23:59:59';
var timer2 = year + '-' + month + '-' + day + ' ' + '00:00:00';
var timer = year + "-" + month + "-" + day + " " + "23:59:59";
var timer2 = year + "-" + month + "-" + day + " " + "00:00:00";
this.dateRangeArr = [timer2, timer];
this.formInline.startTime = this.dateRangeArr[0];
this.formInline.endTime = this.dateRangeArr[1];
@ -528,8 +643,8 @@ export default {
// return timer;
},
getTypeName(val) {
let text = '';
this.alarmTypeArrList.forEach(item => {
let text = "";
this.alarmTypeArrList.forEach((item) => {
if (item.data == val) {
text = item.name;
}
@ -541,25 +656,25 @@ export default {
this.formInline.startTime = this.dateRangeArr[0];
this.formInline.endTime = this.dateRangeArr[1];
} else {
this.formInline.startTime = '';
this.formInline.endTime = '';
this.formInline.startTime = "";
this.formInline.endTime = "";
}
},
refresh() {
this.pageInfo.pageNo = 1;
this.formInline.hardwareId = '';
this.formInline.startTime = '';
this.formInline.endTime = '';
this.formInline.alarmType = '';
this.formInline.handleDone = '';
this.formInline.hardwareId = "";
this.formInline.startTime = "";
this.formInline.endTime = "";
this.formInline.alarmType = "";
this.formInline.handleDone = "";
this.dateRangeArr = [];
//
this.selectVal = '';
this.areaSelectVal = '';
this.formInline.qualityRegionId = '';
this.selectVal = "";
this.areaSelectVal = "";
this.formInline.qualityRegionId = "";
//
this.selectEnterpriseVal = '';
this.formInline.enterpriseId = '';
this.selectEnterpriseVal = "";
this.formInline.enterpriseId = "";
this.getList();
},
getList(val) {
@ -569,7 +684,7 @@ export default {
let json = Object.assign(this.pageInfo, this.formInline);
json.projectSn = this.$store.state.projectSn;
json.isPushed = 0;
getCarDangerDealPageApi(json).then(res => {
getCarDangerDealPageApi(json).then((res) => {
this.workerList = res.result.records;
this.pageInfo.total = res.result.total;
setTimeout(() => {
@ -578,7 +693,7 @@ export default {
});
},
goBack() {
this.pageType = 'list';
this.pageType = "list";
this.getList();
},
// addFn() {
@ -587,27 +702,31 @@ export default {
// },
editBefore(item) {
this.itemId = item.id;
this.pageType = 'detail';
this.pageType = "detail";
},
deleteBefore(item) {
this.$confirm(this.$t('message.sixComplete.carWash.tipText') + '?', this.$t('message.sixComplete.carWash.tip'), {
confirmButtonText: this.$t('message.sixComplete.carWash.confirm'),
cancelButtonText: this.$t('message.sixComplete.carWash.cancel'),
type: 'warning'
})
this.$confirm(
this.$t("message.sixComplete.carWash.tipText") + "?",
this.$t("message.sixComplete.carWash.tip"),
{
confirmButtonText: this.$t("message.sixComplete.carWash.confirm"),
cancelButtonText: this.$t("message.sixComplete.carWash.cancel"),
type: "warning",
}
)
.then(() => {
workerSafeEducationDeleteApi({ id: item.id }).then(res => {
workerSafeEducationDeleteApi({ id: item.id }).then((res) => {
this.$message({
type: 'success',
message: this.$t('message.sixComplete.carWash.deleteSuccess') + '!'
type: "success",
message: this.$t("message.sixComplete.carWash.deleteSuccess") + "!",
});
this.getList();
});
})
.catch(() => {
this.$message({
type: 'info',
message: this.$t('message.sixComplete.carWash.cancelDelete')
type: "info",
message: this.$t("message.sixComplete.carWash.cancelDelete"),
});
});
},
@ -620,8 +739,8 @@ export default {
console.log(val);
this.pageInfo.pageNo = val;
this.getList();
}
}
},
},
};
</script>
<style lang="less" scoped>

View File

@ -69,6 +69,12 @@
:placeholder="$t('message.sixComplete.fence.placeholder')"
></el-input>
</el-form-item>
<el-form-item label="车牌号">
<el-input
v-model="formInline.carNumber"
:placeholder="$t('message.sixComplete.fence.placeholder')"
></el-input>
</el-form-item>
<el-form-item :label="$t('message.sixComplete.happenTime')">
<el-date-picker
@change="changeTime"
@ -121,10 +127,10 @@
alt=""
:preview="imageUrlUp(item.imageUrl)"
/>
<div class="desc">
<div class="desc" style="align-items: center">
<!-- <span class="time">{{ getTypeName(item.alarmType) }}</span> -->
<span class="time"
>{{ item.carNumber }}({{ item.currentSpeed }}km/h)</span
>{{ item.carNumber }}<br />({{ item.currentSpeed }}km/h)</span
>
<span>{{ item.createTime }}</span>
</div>
@ -443,6 +449,7 @@ export default {
endTime: "",
startTime: "",
hardwareId: "",
carNumber: "",
qualityRegionId: "",
enterpriseId: "",
},
@ -850,6 +857,8 @@ export default {
refresh() {
this.pageInfo.pageNo = 1;
this.formInline.hardwareId = "";
this.formInline.carNumber = "";
this.formInline.startTime = "";
this.formInline.endTime = "";
this.formInline.alarmType = "";