wangyifang
/
mkw-visit-web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成首页统计数据对接

Browse Source
master
linyongLynn 8 months ago
parent f73ff2ed9c
commit 74ea9bc7a0
5 changed files with 1879 additions and 639 deletions
Show Stats Download Patch File Download Diff File

13
src/components/XyTable/index.vue
Unescape View File

@ -512,6 +512,19 @@ export default {
let _this = this;
if (_this.auths?.length > 0) {
let btns = new Map();
btns.set(
"detail",
<i-button
style={{
"margin-right": "6px",
}}
type="info"
size="small"
onClick={() => _this.$emit('detail', scope.row)}
>
查看
</i-button>
);
btns.set(
"edit",
<i-button

220
src/views/dashboard/index.vue
Unescape View File

@ -1,5 +1,25 @@
<template>
<div style="padding:20px">
<!-- 时间段筛选 -->
<div class="filter-container">
<el-date-picker
v-model="dateRange"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
value-format="yyyy-MM-dd"
@change="handleDateChange"
style="margin-right: 10px;"
>
</el-date-picker>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
<el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
</div>
<PanelGroup :totaldata='list'></PanelGroup>
<div class="tCharts">
<PieChart :chartData="pieData" :width="'30%'"></PieChart>
@ -35,43 +55,89 @@
customerArr: [],
orderArr: [],
chartData: {},
// 时间段筛选
dateRange: this.getDefaultDateRange(),
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
pieData:{
// xArr:['普通访客','施工访客','物流车辆'],
yArr:[
{
value:20,
name:"普通访客"
value: 0,
name:"普通访客",
itemStyle: {
color: '#D1AC7B' // 普通访客卡片颜色
}
},{
value:40,
name:"施工访客"
value: 0,
name:"施工访客",
itemStyle: {
color: '#9193BC' // 施工访客卡片颜色
}
},{
value:40,
name:"物流车辆"
value: 0,
name:"物流车辆",
itemStyle: {
color: '#64A48E' // 物流车辆卡片颜色
}
}],
radiusArr:'50%'
},
LineData:{
xArr: ['9:00-10:00','10:00-11:00','11:00-12:00','12:00-13:00'],
xArr: [],
legendArr: ["普通访客", "施工访客", "物流车辆"],
series:[
{
name: '普通访客',
type: 'line',
stack: 'Total',
data: [20,10,40,70]
data: [],
itemStyle: {
color: '#D1AC7B' // 普通访客颜色
}
},
{
name: '施工访客',
type: 'line',
stack: 'Total',
data: [15,75,35,45]
data: [],
itemStyle: {
color: '#9193BC' // 施工访客颜色
}
},
{
name: '物流车辆',
type: 'line',
stack: 'Total',
data: [75,35,60,10]
data: [],
itemStyle: {
color: '#64A48E' // 物流车辆颜色
}
}
]
}
@ -85,10 +151,118 @@
}
},
methods: {
async loadData() {
await getChartsHome().then((res) => {
console.log(res);
// 获取默认时间范围（30天前到今天）
getDefaultDateRange() {
const today = new Date();
const thirtyDaysAgo = new Date();
thirtyDaysAgo.setDate(today.getDate() - 30);
return [
this.formatDate(thirtyDaysAgo),
this.formatDate(today)
];
},
// 格式化日期为 YYYY-MM-DD
formatDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
},
// 更新圆饼图数据
updatePieChartData(listData) {
if (listData && listData.common_visit && listData.work_visit && listData.car_visit) {
this.pieData.yArr = [
{
value: listData.common_visit.total || 0,
name: "普通访客",
itemStyle: {
color: '#D1AC7B' // 普通访客卡片颜色
}
},
{
value: listData.work_visit.total || 0,
name: "施工访客",
itemStyle: {
color: '#9193BC' // 施工访客卡片颜色
}
},
{
value: listData.car_visit.total || 0,
name: "物流车辆",
itemStyle: {
color: '#64A48E' // 物流车辆卡片颜色
}
}
];
}
},
// 更新曲线图数据
updateLineChartData(dateList) {
if (dateList && Array.isArray(dateList)) {
// 提取日期作为横坐标
this.LineData.xArr = dateList.map(item => {
// 格式化日期显示，只显示月-日
const date = new Date(item.date);
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${month}-${day}`;
});
// 提取各类型访客数据
this.LineData.series[0].data = dateList.map(item => item.common_visit || 0);
this.LineData.series[1].data = dateList.map(item => item.work_visit || 0);
this.LineData.series[2].data = dateList.map(item => item.car_visit || 0);
}
},
// 时间段改变事件
handleDateChange(value) {
console.log('选择的时间段:', value);
},
// 查询按钮
handleSearch() {
if (this.dateRange && this.dateRange.length === 2) {
console.log('查询时间段:', {
startDate: this.dateRange[0],
endDate: this.dateRange[1]
});
// 调用接口获取筛选后的数据
this.loadData({
start_date: this.dateRange[0],
end_date: this.dateRange[1]
});
this.$message.success('查询成功');
} else {
this.$message.warning('请选择时间段');
}
},
// 重置按钮
handleReset() {
// 重置为默认时间范围（30天前到今天）
this.dateRange = this.getDefaultDateRange();
console.log('重置时间筛选');
// 使用默认时间范围重新加载数据
this.loadData({
start_date: this.dateRange[0],
end_date: this.dateRange[1]
});
this.$message.success('已重置');
},
async loadData(params = {}) {
await getChartsHome(params).then((res) => {
console.log('接口返回数据:', res);
this.list = res.list;
// 更新圆饼图数据
this.updatePieChartData(res.list);
// 更新曲线图数据
this.updateLineChartData(res.all_date_list);
// this.chartData = res;
// let _business_data = [];
// let _collect_data = [];
@ -215,8 +389,11 @@
}
},
created() {
this.loadData();
// 页面初始化时使用默认时间范围加载数据
this.loadData({
start_date: this.dateRange[0],
end_date: this.dateRange[1]
});
},
mounted() {
@ -236,6 +413,17 @@
</script>
<style lang="scss" scoped>
.filter-container {
background: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
}
.statistics {
display: flex;

614
src/views/visit/check.vue
Unescape View File

@ -1,19 +1,29 @@
<template>
<div style="padding: 0 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="拜访记录管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;" class="selector">
<div style="margin-right: 10px;">关键词</div>
<el-input size="mini" placeholder="请输入关键词" v-model="select.keyword"
style="width: 160px;margin-right: 10px;"></el-input>
<div style="margin-right: 10px;">状态</div>
<el-select v-model="select.audit_status" clearable placeholder="请选择">
<el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
<div style="margin:0 10px;">只看自己被访记录</div>
<template>
<div style="padding: 0 20px">
<div ref="lxHeader">
<lx-header icon="md-apps" text="拜访记录管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<slot>
<div style="display: flex;align-items: center;" class="selector">
<!-- 模拟数据开关 -->
<div style="margin-right: 15px; padding: 5px 10px; background: #f0f0f0; border-radius: 4px; display: flex; align-items: center;">
<span style="margin-right: 8px; font-size: 12px; color: #666;">模拟数据:</span>
<el-switch
v-model="useMockData"
active-color="#13ce66"
inactive-color="#ff4949"
@change="getList">
</el-switch>
</div>
<div style="margin-right: 10px;">关键词</div>
<el-input size="mini" placeholder="请输入关键词" v-model="select.keyword"
style="width: 160px;margin-right: 10px;"></el-input>
<div style="margin-right: 10px;">状态</div>
<el-select v-model="select.audit_status" clearable placeholder="请选择">
<el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
</el-option>
</el-select>
<div style="margin:0 10px;">只看自己被访记录</div>
<el-switch
v-model="select.my_accept_admin"
active-color="#004593"
@ -40,17 +50,17 @@
:active-value="1"
:inactive-value="0"
>
</el-switch>
<el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询
</el-button>
</div>
</slot>
</lx-header>
</div>
<xy-table :table-item="table" :list="data" :total="total"
@pageSizeChange="e => {select.page_size = e;select.page = 1;getList()}"
</el-switch>
<el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询
</el-button>
</div>
</slot>
</lx-header>
</div>
<xy-table :table-item="table" :list="data" :total="total"
@pageSizeChange="e => {select.page_size = e;select.page = 1;getList()}"
@pageIndexChange="e => {select.page = e;getList()}">
<template v-slot:btns>
<el-table-column fixed="right" label="操作" width="180" header-align="center">
@ -79,173 +89,290 @@
</Poptip>
</template>
</el-table-column>
</template>
</template>
</xy-table>
<showVisit ref="showVisit" @refresh="getList"></showVisit>
</div>
</template>
<script>
import {
getList,
destroy
<showVisit ref="showVisit" @refresh="getList"></showVisit>
</div>
</template>
<script>
import {
getList,
destroy
} from '@/api/visit/record.js'
import showVisit from '@/views/visit/component/showVisit'
import store from "@/store/modules/user.js"
export default {
import store from "@/store/modules/user.js"
export default {
components: {
showVisit
},
data() {
return {
visible: false,
select: {
page: 1,
page_size: 10,
keyword: "",
audit_status: 0,
my_accept_admin: 0,
showVisit
},
data() {
return {
visible: false,
// 模拟数据开关
useMockData: true,
select: {
page: 1,
page_size: 10,
keyword: "",
audit_status: 0,
my_accept_admin: 0,
my_audit: 1,
my_self:0,
is_auth:0
is_auth:0
},
is_admin:false,
selectRange: [],
statusList: [{
id: -1,
value: '待学习'
},
{
id: 0,
value: '待审核'
},
{
id: 1,
value: '通过(待进厂)'
},
{
id: 2,
value: '驳回'
},
{
id: 3,
value: '已进厂'
},
{
id: 4,
value: '已离厂'
},{
id: 5,
value: '已取消'
}
],
total: 0,
data: [],
table: [{
label: '序号',
type: "index",
fixed: "left",
width: 80
},
{
label: '姓名',
sortable: false,
prop: 'name',
fixed: "left",
width: 120
},
{
label: '类型',
sortable: false,
prop: 'type_text',
width: 120
},
{
label: '状态',
sortable: false,
prop: 'audit_status_text',
width: 120
is_admin:false,
selectRange: [],
statusList: [{
id: -1,
value: '待学习'
},
{
id: 0,
value: '待审核'
},
{
id: 1,
value: '通过(待进厂)'
},
{
id: 2,
value: '驳回'
},
{
id: 3,
value: '已进厂'
},
{
id: 4,
value: '已离厂'
},{
id: 5,
value: '已取消'
}
],
total: 0,
data: [],
// 模拟数据
mockData: [
{
id: 1,
name: '张三',
type: 1,
type_text: '普通访客',
audit_status: 0,
audit_status_text: '待审核',
accept_admin: { name: '李经理' },
follw_people: ['随行人员1', '随行人员2'],
date: '2024-10-14',
credent: 1,
idcard: '110101199001011234',
mobile: '13800138001',
company_name: '北京科技有限公司',
start_date: '2024-10-14 09:00:00',
end_date: '2024-10-14 18:00:00',
created_at: '2024-10-13 15:30:00',
admin: { name: '管理员A' },
photos: [
{ url: 'https://picsum.photos/300/400?random=11', description: '访客正面照' },
{ url: 'https://picsum.photos/300/400?random=12', description: '访客侧面照' }
]
},
{
id: 2,
name: '李四',
type: 2,
type_text: '施工访客',
audit_status: 0,
audit_status_text: '待审核',
accept_admin: { name: '王主管' },
follw_people: [],
date: '2024-10-15',
credent: 1,
idcard: '110101199002025678',
mobile: '13800138002',
company_name: '建筑施工集团',
start_date: '2024-10-15 08:00:00',
end_date: '2024-10-15 20:00:00',
created_at: '2024-10-13 16:00:00',
admin: { name: '管理员B' },
photos: [
{ url: 'https://picsum.photos/300/400?random=13', description: '施工人员照片' }
]
},
{
id: 3,
name: '王五',
type: 3,
type_text: '物流车辆',
audit_status: 0,
audit_status_text: '待审核',
accept_admin: { name: '赵总监' },
follw_people: ['司机助手'],
date: '2024-10-14',
credent: 1,
idcard: '110101199003033456',
mobile: '13800138003',
company_name: '顺达物流公司',
start_date: '2024-10-14 10:00:00',
end_date: '2024-10-14 16:00:00',
created_at: '2024-10-13 14:20:00',
admin: { name: '管理员C' },
photos: [
{ url: 'https://picsum.photos/400/300?random=14', description: '车辆前方照片' },
{ url: 'https://picsum.photos/400/300?random=15', description: '车辆侧面照片' }
]
},
{
id: 4,
name: '赵六',
type: 1,
type_text: '普通访客',
audit_status: 0,
audit_status_text: '待审核',
accept_admin: { name: '刘经理' },
follw_people: [],
date: '2024-10-16',
credent: 2,
idcard: 'P123456789',
mobile: '13800138004',
company_name: '国际贸易公司',
start_date: '2024-10-16 09:00:00',
end_date: '2024-10-16 17:00:00',
created_at: '2024-10-14 08:30:00',
admin: { name: '管理员D' },
photos: [
{ url: 'https://picsum.photos/300/400?random=16', description: '访客证件照' }
]
},
{
id: 5,
name: '孙七',
type: 2,
type_text: '施工访客',
audit_status: 0,
audit_status_text: '待审核',
accept_admin: { name: '周主任' },
follw_people: ['施工队员1', '施工队员2'],
date: '2024-10-15',
credent: 1,
idcard: '110101199004047890',
mobile: '13800138005',
company_name: '装修工程队',
start_date: '2024-10-15 07:00:00',
end_date: '2024-10-15 19:00:00',
created_at: '2024-10-13 17:15:00',
admin: { name: '管理员E' },
photos: [
{ url: 'https://picsum.photos/300/400?random=17', description: '施工人员照片' }
]
}
],
table: [{
label: '序号',
type: "index",
fixed: "left",
width: 80
},
{
label: '姓名',
sortable: false,
prop: 'name',
fixed: "left",
width: 120
},
{
label: '类型',
sortable: false,
prop: 'type_text',
width: 120
},
{
label: '状态',
sortable: false,
prop: 'audit_status_text',
width: 120
},{
label: '被访人',
sortable: false,
prop: 'accept_admin.name',
width: 120,
},
{
label: '是否随访',
sortable: false,
prop: 'follw_people',
},
{
label: '是否随访',
sortable: false,
prop: 'follw_people',
width: 80,
formatter:(cell, data, value)=>{
return value.length>0?'是':'否'
}
},
{
label: '预约时间',
sortable: false,
prop: 'date',
width: 120
},
{
label: '证件类型',
sortable: false,
prop: 'credent',
}
},
{
label: '预约时间',
sortable: false,
prop: 'date',
width: 120
},
{
label: '证件类型',
sortable: false,
prop: 'credent',
width: 120,
formatter:(cell, data, value)=>{
return value==1?'身份证':'护照'
},
},
{
label: '证件号',
sortable: false,
prop: 'idcard',
width: 180
},
{
label: '手机号',
sortable: false,
prop: 'mobile',
width: 120
},
{
label: '单位名称',
sortable: false,
prop: 'company_name',
width: 180
},
{
label: '开始时间',
sortable: false,
prop: 'start_date',
width: 180
},
{
label: '结束时间',
sortable: false,
prop: 'end_date',
width: 180
},
{
label: '创建时间',
sortable: false,
prop: 'created_at',
width: 180
},
{
label: '创建人',
sortable: false,
},
},
{
label: '证件号',
sortable: false,
prop: 'idcard',
width: 180
},
{
label: '手机号',
sortable: false,
prop: 'mobile',
width: 120
},
{
label: '单位名称',
sortable: false,
prop: 'company_name',
width: 180
},
{
label: '开始时间',
sortable: false,
prop: 'start_date',
width: 180
},
{
label: '结束时间',
sortable: false,
prop: 'end_date',
width: 180
},
{
label: '创建时间',
sortable: false,
prop: 'created_at',
width: 180
},
{
label: '创建人',
sortable: false,
prop: 'admin.name',
width: 120,
formatter(cell, data, value){
return value?value:''
}
}
]
}
},
computed: {},
}
}
]
}
},
computed: {},
mounted() {
const state = store.state
console.log("state",state)
@ -253,24 +380,54 @@
this.select.my_audit = 0
this.is_admin = true
}
console.log(this.is_admin,state.myRoles.includes('系统管理员'))
this.getList()
},
methods: {
async getList() {
let res = await getList(this.select)
console.log(res)
this.data = res.data
this.total = res.total
},
console.log(this.is_admin,state.myRoles.includes('系统管理员'))
this.getList()
},
methods: {
async getList() {
// 使用模拟数据模式
if (this.useMockData) {
// 过滤模拟数据
let filteredData = [...this.mockData]
// 关键词搜索
if (this.select.keyword) {
filteredData = filteredData.filter(item =>
item.name.includes(this.select.keyword) ||
item.mobile.includes(this.select.keyword) ||
item.idcard.includes(this.select.keyword) ||
item.company_name.includes(this.select.keyword)
)
}
// 状态筛选（check页面默认显示待审核）
if (this.select.audit_status !== '' && this.select.audit_status !== null && this.select.audit_status !== undefined) {
filteredData = filteredData.filter(item => item.audit_status === this.select.audit_status)
}
// 计算分页
this.total = filteredData.length
const start = (this.select.page - 1) * this.select.page_size
const end = start + this.select.page_size
this.data = filteredData.slice(start, end)
console.log('使用模拟数据:', { total: this.total, data: this.data })
} else {
// 原有的真实接口调用逻辑
let res = await getList(this.select)
console.log(res)
this.data = res.data
this.total = res.total
}
},
deleteStudy(row) {
console.log(row)
destroy({
id: row.id
}).then(res => {
this.$successMessage('destroy', '拜访记录')
this.getList()
})
console.log(row)
destroy({
id: row.id
}).then(res => {
this.$successMessage('destroy', '拜访记录')
this.getList()
})
},
checkRecords(row){
this.$refs['showVisit'].id = row.id
@ -278,43 +435,44 @@
this.$refs['showVisit'].isShow = true
// this.$refs['checkRecord'].id = row.id
// this.$refs['checkRecord'].isShow = true
}
},
}
</script>
<style scoped lang="scss">
//::v-deep .el-button + .el-button{
// margin-left: 0 !important;
//}
::v-deep .el-button {
padding: 5px 8px !important;
}
.selector {
::v-deep .el-input--suffix .el-input__inner {
height: 28px;
}
::v-deep .el-select .el-input .el-select__caret {
line-height: 28px;
}
::v-deep .el-range-editor.el-input__inner {
height: 28px;
width: 250px
}
::v-deep .el-date-editor .el-range__icon {
line-height: 21px;
}
::v-deep .el-date-editor .el-range-separator {
line-height: 21px;
}
::v-deep .el-date-editor .el-range__close-icon {
line-height: 21px;
}
}
}
},
}
</script>
<style scoped lang="scss">
//::v-deep .el-button + .el-button{
// margin-left: 0 !important;
//}
::v-deep .el-button {
padding: 5px 8px !important;
}
.selector {
::v-deep .el-input--suffix .el-input__inner {
height: 28px;
}
::v-deep .el-select .el-input .el-select__caret {
line-height: 28px;
}
::v-deep .el-range-editor.el-input__inner {
height: 28px;
width: 250px
}
::v-deep .el-date-editor .el-range__icon {
line-height: 21px;
}
::v-deep .el-date-editor .el-range-separator {
line-height: 21px;
}
::v-deep .el-date-editor .el-range__close-icon {
line-height: 21px;
}
}
</style>

473
src/views/visit/component/showVisit.vue
Unescape View File

@ -28,11 +28,11 @@
核销状态：
</div>
<div class="xy-table-item-content">
<div style="font-size: 32px;padding: 25px;width:400px">
<div v-for="item in codeTypeList">
<div v-if="item.id == codeForm.type">
{{item.value}}
</div>
<div style="font-size: 32px;padding: 25px;width:400px">
<div v-for="item in codeTypeList">
<div v-if="item.id == codeForm.type">
{{item.value}}
</div>
</div>
<!-- <el-radio-group v-model="codeForm.type">
<el-radio :label="item.id" >{{item.value}}</el-radio>
@ -50,11 +50,11 @@
<div class="xy-table-item-content">
<!-- <el-input style="font-size: 32px;padding: 25px;width:400px" v-model="codeForm.person_no"
placeholder="请输入入场牌"></el-input> -->
<xy-table style="width: 600px" :height="260" :is-page="false" :list="codeForm.person_no"
:table-item="codefollowTable">
<template v-slot:btns>
</template>
placeholder="请输入入场牌"></el-input> -->
<xy-table style="width: 600px" :height="260" :is-page="false" :list="codeForm.person_no"
:table-item="codefollowTable">
<template v-slot:btns>
</template>
</xy-table>
</div>
</div>
@ -67,12 +67,12 @@
<div class="xy-table-item-content">
<!-- <el-input style="font-size: 32px;padding: 25px;width:400px" v-model="codeForm.car_no"
placeholder="请输入停车牌"></el-input> -->
<xy-table style="width: 600px" :height="260" :is-page="false" :list="codeForm.car_no"
:table-item="carfollowTable">
<template v-slot:btns>
</template>
placeholder="请输入停车牌"></el-input> -->
<xy-table style="width: 600px" :height="260" :is-page="false" :list="codeForm.car_no"
:table-item="carfollowTable">
<template v-slot:btns>
</template>
</xy-table>
</div>
</div>
@ -208,16 +208,16 @@
{{form.company_name}}
</div>
</div>
</template>
<template v-slot:cda v-if="form.type==1 && form.visit_area && form.visit_area.name=='生产区'">
<div class="xy-table-item">
<div class="xy-table-item-label">
CDA编号：
</div>
<div class="xy-table-item-content">
{{form.cda}}
</div>
</div>
</template>
<template v-slot:cda v-if="form.type==1 && form.visit_area && form.visit_area.name=='生产区'">
<div class="xy-table-item">
<div class="xy-table-item-label">
CDA编号：
</div>
<div class="xy-table-item-content">
{{form.cda}}
</div>
</div>
</template>
<template v-slot:cars>
<div class="xy-table-item">
@ -258,40 +258,40 @@
</div>
</div>
</div>
</template>
<template v-slot:visitorinfos>
<div class="xy-table-item">
<div class="xy-table-item-content" style="width:400px">
被访人信息：
</div>
</div>
</template> -->
<template v-slot:accept_admin_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>人员：
</div>
<div class="xy-table-item-content">
{{form.accept_admin?form.accept_admin.name:''}}
</div>
</div>
</template>
<template v-slot:visitorinfos1 v-if="form.visit_area && form.visit_area.name=='生产区'">
<div class="xy-table-item">
<div class="xy-table-item-content" style="width:400px">
陪同人信息：
</div>
</div>
</template>
<template v-slot:accompany_id v-if="form.visit_area && form.visit_area.name=='生产区'">
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>人员：
</div>
<div class="xy-table-item-content">
{{form.accompany?form.accompany.name:''}}
</div>
</div>
</template>
<template v-slot:visitorinfos>
<div class="xy-table-item">
<div class="xy-table-item-content" style="width:400px">
被访人信息：
</div>
</div>
</template> -->
<template v-slot:accept_admin_id>
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>人员：
</div>
<div class="xy-table-item-content">
{{form.accept_admin?form.accept_admin.name:''}}
</div>
</div>
</template>
<template v-slot:visitorinfos1 v-if="form.visit_area && form.visit_area.name=='生产区'">
<div class="xy-table-item">
<div class="xy-table-item-content" style="width:400px">
陪同人信息：
</div>
</div>
</template>
<template v-slot:accompany_id v-if="form.visit_area && form.visit_area.name=='生产区'">
<div class="xy-table-item">
<div class="xy-table-item-label">
<span style="color: red;font-weight: 600;padding-right: 4px;"></span>人员：
</div>
<div class="xy-table-item-content">
{{form.accompany?form.accompany.name:''}}
</div>
</div>
</template>
<template v-slot:accept_goods_admin_id v-if="form.type==3">
@ -342,7 +342,41 @@
</div>
</template>
<!-- 照片信息标题 -->
<template v-slot:photoinfo>
<div style="width:600px">
照片信息
</div>
</template>
<!-- 照片列表 -->
<template v-slot:photos>
<div class="xy-table-item" v-if="form.photos && form.photos.length > 0">
<div class="xy-table-item-content" style="width:100%">
<div class="photo-list">
<div class="photo-item" v-for="(photo, index) in form.photos" :key="index">
<div class="photo-wrapper">
<el-image
:src="photo.url"
:preview-src-list="form.photos.map(p => p.url)"
:initial-index="index"
fit="cover"
class="photo-image">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
<div class="photo-overlay">
<i class="el-icon-zoom-in"></i>
<span>点击预览</span>
</div>
</div>
<div class="photo-desc">{{ photo.description }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-slot:footerContent>
@ -382,7 +416,7 @@
formDataType: '',
formData: {
checkcode: '',
codeType: "",
codeType: "",
person_no: '',
car_no: '',
@ -399,18 +433,20 @@
mobile: "",
credent: 1,
idcard: "",
company_name: "",
company_name: "",
cda:'',
cars: "",
follw_people: [],
long_time: 0,
longrange: "",
visitorinfos: "",
accpet_department_id: "",
longrange: "",
visitorinfos: "",
accpet_department_id: "",
accept_admin_id: "",
visitorinfos1: "",
accompany_id:"",
accept_goods_admin_id: "",
photoinfo: "",
photos: "",
checkRecord: '',
checkForm: {},
checkText: ''
@ -425,9 +461,9 @@
car_no: [],
person_no: []
}, // 核验
codeTypeList: [{
id:0,
value:'请提醒陪同人签字'
codeTypeList: [{
id:0,
value:'请提醒陪同人签字'
},{
id: 1,
value: '入场'
@ -436,36 +472,36 @@
value: '离场'
}],
gateAdminId: '',
check_admin_name: "",
carfollowTable: [{
label: "车牌",
prop: "car",
width: 200
},{
label: "停车牌",
prop: "car_no",
width: 400,
customFn: (row, scope) => {
return (<el-input type="text" placeholder = "请填写停车牌"
v-model={row.car_no}>
</el-input>
)
}
}],
codefollowTable: [{
label: "姓名",
prop: "name",
width: 200
},{
label: "入场牌",
prop: "person_no",
width: 400,
customFn: (row, scope) => {
return (<el-input type="text" placeholder = "请填写入场牌"
v-model={row.person_no}>
</el-input>
)
}
check_admin_name: "",
carfollowTable: [{
label: "车牌",
prop: "car",
width: 200
},{
label: "停车牌",
prop: "car_no",
width: 400,
customFn: (row, scope) => {
return (<el-input type="text" placeholder = "请填写停车牌"
v-model={row.car_no}>
</el-input>
)
}
}],
codefollowTable: [{
label: "姓名",
prop: "name",
width: 200
},{
label: "入场牌",
prop: "person_no",
width: 400,
customFn: (row, scope) => {
return (<el-input type="text" placeholder = "请填写入场牌"
v-model={row.person_no}>
</el-input>
)
}
}],
followTable: [{
label: "姓名",
@ -530,24 +566,24 @@
if (this.formDataType == 'coderecord') {
this.codeForm.code = this.form.code
this.codeForm.admin_id = parseInt(this.gateAdminId)
this.codeForm.type = this.form.audit_status == 1 ? 1 : (this.form.audit_status == 3 && this.form.accept_admin_sign ? 2 : 0)
if(this.codeForm.type==1){
this.codeForm.person_no.push({name:this.form.name,person_no:''})
for(var k of this.form.follw_people){
this.codeForm.person_no.push({name:k.name,person_no:''})
}
for(var m of this.form.cars){
this.codeForm.car_no.push({car:m,car_no:''})
}
}else{
for(var k of this.form.person_no){
this.codeForm.person_no.push(JSON.parse(k))
}
for(var m of this.form.car_no){
this.codeForm.car_no.push(JSON.parse(m))
}
}
this.codeForm.type = this.form.audit_status == 1 ? 1 : (this.form.audit_status == 3 && this.form.accept_admin_sign ? 2 : 0)
if(this.codeForm.type==1){
this.codeForm.person_no.push({name:this.form.name,person_no:''})
for(var k of this.form.follw_people){
this.codeForm.person_no.push({name:k.name,person_no:''})
}
for(var m of this.form.cars){
this.codeForm.car_no.push({car:m,car_no:''})
}
}else{
for(var k of this.form.person_no){
this.codeForm.person_no.push(JSON.parse(k))
}
for(var m of this.form.car_no){
this.codeForm.car_no.push(JSON.parse(m))
}
}
}
} else {
@ -584,13 +620,13 @@
that.checkForm.audit_admin_id = item.audit_admin_id
that.isCheck = true
return
} else {
} else {
that.checkText = "请等待"+item.audit_admin.name+"审核"
// that.checkLevel.map(item1 => {
// if (item.level == item1.id) {
// that.checkText = item1.value
// }else{
// }else{
// }
// })
that.isCheck = false
@ -607,10 +643,10 @@
this.formDataType = ''
this.checkForm = {}
this.check_admin_name = ''
this.codeForm = {
type: 1,
car_no: [],
person_no: []
this.codeForm = {
type: 1,
car_no: [],
person_no: []
}
this.codeType = ''
this.gateAdminId = ''
@ -632,12 +668,12 @@
},
codeSubmit() {
let that = this
console.log(this.codeForm)
console.log(this.codeForm.person_no)
if(this.codeForm.type==0){
this.$successMessage('请提醒陪同人签字','','warning')
this.isShow = false
return
console.log(this.codeForm)
console.log(this.codeForm.person_no)
if(this.codeForm.type==0){
this.$successMessage('请提醒陪同人签字','','warning')
this.isShow = false
return
}
cancelCode({
...that.codeForm
@ -653,7 +689,7 @@
}
</script>
<style scoped>
<style scoped lang="scss">
.xy-table-item-label {
width: 180px !important;
}
@ -670,11 +706,180 @@
right: 4px;
}
/deep/ .el-radio__input {
::v-deep .el-radio__input {
vertical-align: super;
}
/deep/ .el-radio__label {
::v-deep .el-radio__label {
font-size: 32px;
}
</style>
// 照片列表样式
.photo-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-top: 5px;
.photo-item {
display: flex;
flex-direction: column;
align-items: center;
.photo-wrapper {
position: relative;
width: 120px;
height: 160px;
border-radius: 8px;
overflow: hidden;
.photo-image {
width: 100%;
height: 100%;
border: 2px solid #e4e7ed;
cursor: pointer;
transition: all 0.3s;
&:hover {
border-color: #409eff;
}
::v-deep .el-image__inner {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
i {
font-size: 40px;
}
}
}
.photo-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
i {
font-size: 32px;
color: #fff;
margin-bottom: 8px;
}
span {
color: #fff;
font-size: 14px;
font-weight: 500;
}
}
&:hover {
.photo-overlay {
opacity: 1;
}
.photo-image ::v-deep .el-image__inner {
transform: scale(1.1);
}
}
}
.photo-desc {
margin-top: 8px;
font-size: 12px;
color: #909399;
text-align: center;
max-width: 120px;
word-break: break-all;
}
}
}
</style>
<style lang="scss">
// 优化图片预览器的关闭按钮样式（全局样式）
.el-image-viewer__wrapper {
.el-image-viewer__close {
width: 50px !important;
height: 50px !important;
font-size: 28px !important;
background: rgba(0, 0, 0, 0.7) !important;
border-radius: 50% !important;
color: #fff !important;
top: 20px !important;
right: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all 0.3s !important;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5) !important;
&:hover {
background: rgba(255, 73, 73, 0.9) !important;
transform: scale(1.1) rotate(90deg) !important;
}
}
// 优化左右切换按钮
.el-image-viewer__prev,
.el-image-viewer__next {
width: 50px !important;
height: 50px !important;
font-size: 28px !important;
background: rgba(0, 0, 0, 0.6) !important;
border-radius: 50% !important;
color: #fff !important;
transition: all 0.3s !important;
&:hover {
background: rgba(64, 158, 255, 0.9) !important;
transform: scale(1.1) !important;
}
}
// 优化操作栏按钮
.el-image-viewer__actions__inner {
background: rgba(0, 0, 0, 0.7) !important;
border-radius: 30px !important;
padding: 10px 20px !important;
i {
color: #fff !important;
font-size: 24px !important;
margin: 0 8px !important;
transition: all 0.3s !important;
&:hover {
color: #409eff !important;
transform: scale(1.2) !important;
}
}
}
// 优化遮罩层
.el-image-viewer__mask {
background: rgba(0, 0, 0, 0.85) !important;
}
}
</style>

1198
src/views/visit/record.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save