admin/zhgdyunapp_vue3
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

flx：优化

Browse Source
This commit is contained in:
Rain_ 2025-11-27 17:15:44 +08:00
parent 6850d543f7
commit 1c1cdaeec3
6 changed files with 221 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
components/g-picker/g-picker.vue
View File

@ -15,17 +15,38 @@
</van-field>
<text @click="confirm">确认</text>
</view>
<!-- <view class="g-picker-list"> -->
<scroll-view class="g-picker-list" scroll-y="true">
<view class="g-picker-item" v-for="(col, inx) in searchList" :key="inx"
@click="checkItem(col, inx)">
<view :class="['g-picker-item_label', col._check ? 'g-picker-item--actived' : '']"
:style="{color: col._check ? activedColor : '#333'}">{{ col[filter.label] }}</view>
<u-icon class="g-picker-item_icon" v-show="col._check" name="checkbox-mark"
:color="activedColor"></u-icon>
<!-- 使用计算属性实现滚动加载 -->
<scroll-view
class="g-picker-list"
scroll-y="true"
@scrolltolower="loadMore"
ref="scrollView"
>
<view
class="g-picker-item"
v-for="(col, inx) in displayData"
:key="col[this.filter.value] || inx"
@click="checkItem(col, inx)"
>
<view
:class="['g-picker-item_label', col._check ? 'g-picker-item--actived' : '']"
:style="{color: col._check ? activedColor : '#333'}"
>
{{ col[filter.label] }}
</view>
<u-icon
class="g-picker-item_icon"
v-show="col._check"
name="checkbox-mark"
:color="activedColor"
></u-icon>
</view>
<!-- 加载状态提示 -->
<view class="load-more" v-if="hasMoreData || isLoading">
<text v-if="isLoading">加载中...</text>
<text v-else-if="!hasMoreData">没有更多了</text>
</view>
</scroll-view>
<!-- </view> -->
</view>
</van-popup>
</view>
@ -90,6 +111,11 @@
placeholder: {
type: String,
default: "请选择"
},
// 每页加载数量
pageSize: {
type: Number,
default: 50
}
},
data() {
@ -98,6 +124,9 @@
columnsList: [],
value_chx: [],
searchName: "",
// 滚动加载相关状态
currentPage: 1,
isLoading: false
}
},
watch: {
@ -115,21 +144,55 @@
this.$set(val, '_check', false)
}
}
// 重置页码
this.currentPage = 1
},
immediate: true
},
// 监听搜索关键词变化，重置页码
searchName: {
handler() {
this.currentPage = 1
}
},
// 监听弹窗显示状态
show: {
handler(newVal) {
if (newVal) {
this.$nextTick(() => {
// 弹窗打开时确保滚动到顶部
if (this.$refs.scrollView) {
this.$refs.scrollView.scrollTop = 0
}
})
}
}
}
},
computed: {
searchList() {
const resultList = this.columnsList.filter(item => this.searchName ? item[this.filter.label].includes(this.searchName) : true)
// 计算过滤后的数据
filteredData() {
const resultList = this.columnsList.filter(item =>
this.searchName ? item[this.filter.label].includes(this.searchName) : true
)
// 处理默认选中项
this.defaultList.forEach(item => {
const find = resultList.find(ele => ele[this.filter.value] == item);
if(find) {
find._check = true;
}
})
// console.log(resultList, 1111)
return resultList;
},
// 计算当前应该显示的数据（使用计算属性实现滚动加载）
displayData() {
// 根据当前页码和每页数量计算显示的数据范围
const endIndex = this.currentPage * this.pageSize;
return this.filteredData.slice(0, endIndex);
},
// 判断是否还有更多数据
hasMoreData() {
return this.displayData.length < this.filteredData.length;
}
},
methods: {
@ -137,6 +200,20 @@
if (this.disabled) return
this.show = true
},
// 滚动到底部加载更多
loadMore() {
// 如果正在加载或没有更多数据，则不执行操作
if (this.isLoading || !this.hasMoreData) return;
this.isLoading = true;
// 模拟异步加载延迟
setTimeout(() => {
// 增加页码，触发计算属性重新计算显示数据
this.currentPage++;
this.isLoading = false;
}, 100);
},
reShow() {
let data = this.value.split(",")
setTimeout(() => {
@ -148,14 +225,11 @@
checkItem(col, inx) {
col._check = !col._check
},
// close() {
// this.show = false
// this.$emit("close")
// },
confirm() {
let value = [],
label = []
this.value_chx = this.columns.filter(v => v._check)
// 从完整数据源中获取所有选中项
this.value_chx = this.columnsList.filter(v => v._check)
for (let val of this.value_chx) {
value.push(val[this.filter.value])
label.push(val[this.filter.label])
@ -216,7 +290,6 @@
.g-picker-list {
min-height: 30vh;
max-height: 60vh;
// overflow-y: scroll;
.g-picker-item {
position: relative;
@ -244,6 +317,14 @@
transform: translateY(-50%);
}
}
// 加载更多提示样式
.load-more {
text-align: center;
padding: 20rpx 0;
font-size: 24rpx;
color: #999;
}
}
}
}

4
main.js
View File

@ -88,8 +88,8 @@ export function createApp() {
// app.config.globalProperties.url_config = 'http://182.90.224.237:51234/' //雄哥内网穿透地址
// app.config.globalProperties.url_config = 'http://jxj.zhgdyun.com:61212/' //杰哥内网穿透地址
// app.config.globalProperties.url_config = 'http://192.168.34.221:28888/' //郭圣雄本地
// app.config.globalProperties.url_config = 'http://192.168.34.221:9111/' //郭圣雄本地
app.config.globalProperties.url_config = 'http://101.43.164.214:11000/' //包头映射
app.config.globalProperties.url_config = 'http://192.168.34.221:19113/' //郭圣雄本地
// app.config.globalProperties.url_config = 'http://101.43.164.214:11000/' //包头映射
app.config.globalProperties.work_url = 'http://192.168.34.133:5173/wflowApp/#/' // 工作流地址
// app.config.globalProperties.url_config = 'http://182.90.224.237:51234/' //郭圣雄本地
// app.config.globalProperties.url_config = 'http://192.168.34.155:19111/' //彭洁本地

30
pages/alarmPage/disposition/disposition.vue
View File

@ -1,16 +1,20 @@
<template>
<view>
<view class="barBox">
<headers :showBack="true">
<headers class="" :showBack="true">
<view class="headerName">
违章处置
</view>
</headers>
<!-- <headers :showBack="true">
<view class="title">
<view class="backBtn">
<view>
<!-- <span class="back" @click="goBack()">返回</span> -->
<span class="tip">违章处置</span>
</view>
</view>
</view>
</headers>
</headers> -->
</view>
<view class="content">
<view class="row-line">
@ -45,7 +49,7 @@
</option>
</select> -->
<view class="row-input">
<picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
<!-- <picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
<view class="picker" style="margin-left: 24rpx;">
<view class="" style="color: #e1e1e1;" v-if="!selectedItem.workerName">
请选择违章人员
@ -54,7 +58,10 @@
{{selectedItem.workerName}}
</view>
</view>
</picker>
</picker> -->
<g-picker style="flex: 1" :searchFlag="true" :value="selectedItem.workerName" :columns="workerList"
:filter="{label: 'workerName', value: 'id'}" input-align="left"
@confirm="handleChangeEnterprise"></g-picker>
</view>
</view>
</view>
@ -130,6 +137,13 @@
this.getWorkerList()
},
methods: {
handleChangeEnterprise(e, values, labels) {
// console.log(e, values, labels)
// this.workerId = values.join(',');
this.workerId = values;
this.selectedItem.workerName = labels.join('、')
// selectedItem.workerName
},
onChange(e) {
const index = e.detail.value;
this.selectedItem = this.workerList[index];
@ -335,6 +349,9 @@
display: flex;
align-items: center;
border-radius: 6rpx;
.g-picker {
padding: 24rpx 32rpx;
}
}
.select-container{
// height: 80px;
@ -367,7 +384,8 @@
height: 44px;
line-height: 44px;
font-size: 40rpx;
width: 750rpx;
width: 100%;
// width: 750rpx;
// background-color: #5181F6;
// color: #fff;
text-align: center;

28
pages/carViolation/disposition/disposition.vue
View File

@ -1,16 +1,20 @@
<template>
<view>
<view class="barBox">
<headers :showBack="true">
<headers class="" :showBack="true">
<view class="headerName">
违章处置
</view>
</headers>
<!-- <headers :showBack="true">
<view class="title">
<view class="backBtn">
<view>
<!-- <span class="back" @click="goBack()">返回</span> -->
<span class="tip">违章处置</span>
</view>
</view>
</view>
</headers>
</headers> -->
</view>
<view class="content">
<!-- <view class="row-line">
@ -69,7 +73,7 @@
</view>
<view class="row-content">
<view class="row-input">
<picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
<!-- <picker mode="selector" :range="workerList" range-key="workerName" @change="onChange" filterable>
<view class="picker" style="margin-left: 24rpx;">
<view class="" style="color: #e1e1e1;" v-if="!selectedItem.workerName">
请选择违章人员
@ -78,7 +82,10 @@
{{selectedItem.workerName}}
</view>
</view>
</picker>
</picker> -->
<g-picker style="flex: 1" :searchFlag="true" :value="selectedItem.workerName" :columns="workerList"
:filter="{label: 'workerName', value: 'id'}" input-align="left"
@confirm="handleChangeEnterprise"></g-picker>
</view>
</view>
</view>
@ -172,7 +179,13 @@
this.alarmType = this.alarmTypeItem.data
console.log("change!!!!!!!!!")
},
handleChangeEnterprise(e, values, labels) {
// console.log(e, values, labels)
// this.workerId = values.join(',');
this.workerId = values;
this.selectedItem.workerName = labels.join('、')
// selectedItem.workerName
},
confirm(){
console.log(">>>>>>>>>>>>>>>>>>>>>>>");
console.log(this.selectedItem);
@ -509,6 +522,9 @@
display: flex;
align-items: center;
border-radius: 6rpx;
.g-picker {
padding: 24rpx 32rpx;
}
}
.select-container{
// height: 80px;

67
pages/carViolation/indexTwo.vue
View File

@ -24,7 +24,7 @@
</picker>
</view>
</view>
<view class="alarm_main" :style="{paddingTop: (mobileTopHeight + 90) * 1.5 + 'rpx'}">
<view class="alarm_main" :style="{paddingTop: (mobileTopHeight + 110) * 1.5 + 'rpx'}">
<!-- <view class="alarm-item" v-for="(item,index) in listData" :key="index" @click="goHiidden()"> -->
<view class="alarm-item" v-for="(item,index) in listData" :key="index">
<view class="item-bottom">
@ -55,7 +55,8 @@
<!-- <view class="header-info">{{}}</view> -->
<view class="header-info">
<!-- 车辆报警 -->
{{ item.alarmType ? showType[item.alarmType - 1].value : '' }}
<!-- {{ item.alarmType ? showType[item.alarmType].value : '' }} -->
{{ item.carNumber }}({{ item.currentSpeed }}km/h)
</view>
<view class="logo">
<image src="/static/aiWarn/aiWarn.png"></image>
@ -112,42 +113,7 @@
systemInfo: {
statusBarHeight: 0
},
showType: [{
id: "",
value: '全部',
},{
id: 1,
value: '安全帽报警',
},
{
id: 2,
value: '明火报警'
},
{
id: 3,
value: '聚众报警'
},
{
id: 4,
value: '未戴安全帽报警'
},
{
id: 5,
value: '越界报警'
},
{
id: 6,
value: '闯入报警'
},
{
id: 7,
value: '反光衣报警'
},
{
id: 8,
value: '未穿反光衣'
},
],
showType: [],
btnAuth: true,
userInfo: {},
searchDate: "",
@ -165,6 +131,7 @@
})
this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
this.searchForm.attendanceDate = GetDateStr(0, '-');
this.getAlarmTypeList();
},
onShow() {
this.systemInfo = uni.getStorageSync('systemInfo')
@ -197,6 +164,30 @@
console.log('this.mobileTopHeight', this.mobileTopHeight)
},
methods: {
getAlarmTypeList() {
this.sendRequest({
url: 'xmgl/dictionaryItem/list',
data: {
projectSn: this.projectSn,
dictionaryEncoding: "car_danger_detect_record_alarm_type"
},
success: res => {
if (res.code == 200) {
console.log('alarmTypeList', res)
const dataList = res.result.map(item => {
return {
id: item.data,
value: item.name,
}
})
this.showType = [{
id: "",
value: '全部',
}, ...dataList]
}
}
})
},
changeDate(e) {
this.searchForm.attendanceDate = e.detail.value
this.pageNo = 1

52
pages/carViolation/manualCapture/index.vue
View File

@ -42,10 +42,28 @@
<view class="row-line">
<view class="row-label">
<text style="color: firebrick;">*</text>
<text>违规地点</text>
<text>来源</text>
</view>
<view class="row-content">
<input class="uni-input" placeholder="请输入违规地点" :value="alarmDesc" @blur="bindTextAreaBlur" />
<input class="uni-input" placeholder="请输入来源" :value="alarmDesc" @blur="bindTextAreaBlur" />
</view>
</view>
<view class="row-line">
<view class="row-label">
<text style="color: firebrick;">*</text>
<text>车牌号</text>
</view>
<view class="row-content">
<input class="uni-input" placeholder="请输入车牌号" :value="carNumber" @blur="bindTextAreaBlur" />
</view>
</view>
<view class="row-line">
<view class="row-label">
<text style="color: firebrick;">*</text>
<text>当前车速(km/h)</text>
</view>
<view class="row-content">
<input class="uni-input" placeholder="请输入当前车速" :value="currentSpeed" @blur="bindTextAreaBlur" />
</view>
</view>
<view class="row-line">
@ -170,6 +188,8 @@
isDis: '1',
workerId: [],
alarmDesc: '',
carNumber: "",
currentSpeed: "",
deductScore: '',
workerList: [],
workerInfoList: [],
@ -308,7 +328,21 @@
}
if (!this.alarmDesc) {
uni.showToast({
title: '请输入违规地点',
title: '请输入来源',
icon: "none"
})
return
}
if (!this.carNumber) {
uni.showToast({
title: '请输入车牌号',
icon: "none"
})
return
}
if (!this.currentSpeed) {
uni.showToast({
title: '请输入当前车速',
icon: "none"
})
return
@ -329,6 +363,8 @@
handleResult: 1,
handleDone: true,
alarmDesc: this.alarmDesc,
carNumber: this.carNumber,
currentSpeed: this.currentSpeed,
handleType: this.isDis,
workerInfoList: this.workerId.map(item => {
return {
@ -384,7 +420,7 @@
url: 'xmgl/dictionaryItem/list',
data: {
projectSn: this.projectSn,
dictionaryEncoding: "ai_analyse_hard_ware_alarm_record_type"
dictionaryEncoding: "car_danger_detect_record_alarm_type"
},
success: res => {
if (res.code == 200) {
@ -416,9 +452,11 @@
}
},
cleanForm() {
this.workerId = ''
this.alarmDesc = ''
this.deductScore = ''
this.workerId = '';
this.alarmDesc = '';
this.carNumber = '';
this.currentSpeed = '';
this.deductScore = '';
},
bindTextAreaBlur(e) {
this.alarmDesc = e.detail.value