admin/zhgdyun
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:修改页面分页bug

Browse Source
This commit is contained in:
vce 2024-03-22 10:36:36 +08:00
parent 9a719f3277
commit aa51505cd8
6 changed files with 203 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/views/projectFront/devicePosition/dataPay/dataModule/dataPayAlarmRecord.vue
View File

@ -30,13 +30,15 @@
</el-form> </el-form>
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" v-loading="loading" :data="tableData"> <vue-scroll style="height: 80%">
<el-table-column label="序号" align="center" type="index" width="200" /> <el-table class="tables" v-loading="loading" :data="tableData">
<el-table-column label="机械设备名称" align="center" prop="equipmentName" /> <el-table-column label="序号" align="center" type="index" width="200" />
<el-table-column label="设备序号" align="center" prop="devSn" /> <el-table-column label="机械设备名称" align="center" prop="equipmentName" />
<el-table-column label="报警时间" align="center" prop="alarmTime" /> <el-table-column label="设备序号" align="center" prop="devSn" />
<el-table-column label="报警信息" align="center" prop="alarmInfo" width="600"/> <el-table-column label="报警时间" align="center" prop="alarmTime" />
</el-table> <el-table-column label="报警信息" align="center" prop="alarmInfo" width="600"/>
</el-table>
</vue-scroll>
<el-pagination <el-pagination
class="pagerBox" class="pagerBox"
@size-change="SizeChange" @size-change="SizeChange"
@ -140,7 +142,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tables{ .tables{
min-height: 0; // min-height: 0;
} }
.tables2 { .tables2 {
min-height: auto; min-height: auto;

68
src/views/projectFront/devicePosition/dataPay/dataModule/dataPayRealTimeData.vue
View File

@ -29,38 +29,40 @@
</el-form> </el-form>
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" v-loading="loading" :data="tableData"> <vue-scroll style="height: 80%">
<el-table-column label="机械设备名称" align="center" prop="equipmentName" /> <el-table class="tables" v-loading="loading" :data="tableData">
<el-table-column label="设备序号" align="center" prop="devSn" width="180"/> <el-table-column label="机械设备名称" align="center" prop="equipmentName" />
<el-table-column label="当前位置" align="center" width="180"> <el-table-column label="设备序号" align="center" prop="devSn" width="180"/>
<template slot-scope="scope"> <el-table-column label="当前位置" align="center" width="180">
{{ '经度：' + scope.row.longitude + ' 纬度：' + scope.row.latitude }} <template slot-scope="scope">
</template> {{ '经度：' + scope.row.longitude + ' 纬度：' + scope.row.latitude }}
</el-table-column> </template>
<el-table-column label="速度" align="center" prop="speed" /> </el-table-column>
<el-table-column label="工作状态" align="center" prop="workStatus"> <el-table-column label="速度" align="center" prop="speed" />
<template slot-scope="scope"> <el-table-column label="工作状态" align="center" prop="workStatus">
<span v-if="scope.row.workStatus === 1">工作状态</span> <template slot-scope="scope">
<span v-if="scope.row.workStatus === 2">怠速状态</span> <span v-if="scope.row.workStatus === 1">工作状态</span>
<span v-if="scope.row.workStatus === 3">静止状态</span> <span v-if="scope.row.workStatus === 2">怠速状态</span>
<span v-if="scope.row.workStatus === 4">离线状态</span> <span v-if="scope.row.workStatus === 3">静止状态</span>
</template> <span v-if="scope.row.workStatus === 4">离线状态</span>
</el-table-column> </template>
<el-table-column label="设备电量" align="center" prop="equipmentPower"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="设备电量" align="center" prop="equipmentPower">
{{scope.row.equipmentPower}}% <template slot-scope="scope">
<!-- <span style="color: #67C23A" v-if="scope.row.equipmentPower >= 80">{{scope.row.equipmentPower}}%</span> {{scope.row.equipmentPower}}%
<span style="color: #E6A23C" v-else-if="scope.row.equipmentPower < 80 && scope.row.equipmentPower > 20">{{scope.row.equipmentPower}}%</span> <!-- <span style="color: #67C23A" v-if="scope.row.equipmentPower >= 80">{{scope.row.equipmentPower}}%</span>
<span style="color: #be0505" v-else-if="scope.row.equipmentPower <= 20">{{scope.row.equipmentPower}}%</span> --> <span style="color: #E6A23C" v-else-if="scope.row.equipmentPower < 80 && scope.row.equipmentPower > 20">{{scope.row.equipmentPower}}%</span>
</template> <span style="color: #be0505" v-else-if="scope.row.equipmentPower <= 20">{{scope.row.equipmentPower}}%</span> -->
</el-table-column> </template>
<el-table-column label="设备电压" align="center" prop="equipmentVoltage"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="设备电压" align="center" prop="equipmentVoltage">
{{ scope.row.equipmentVoltage + ' '}}伏特 <template slot-scope="scope">
</template> {{ scope.row.equipmentVoltage + ' '}}伏特
</el-table-column> </template>
<el-table-column label="上传时间" align="center" prop="uploadTime" width="180"/> </el-table-column>
</el-table> <el-table-column label="上传时间" align="center" prop="uploadTime" width="180"/>
</el-table>
</vue-scroll>
<el-pagination <el-pagination
class="pagerBox" class="pagerBox"
@size-change="SizeChange" @size-change="SizeChange"
@ -165,7 +167,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tables{ .tables{
min-height: 0; // min-height: 0;
} }
.tables2 { .tables2 {
min-height: auto; min-height: auto;

42
src/views/projectFront/devicePosition/deviceCentral/equipmentCentral.vue
View File

@ -21,26 +21,28 @@
</el-form> </el-form>
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" :data="tableData"> <vue-scroll style="height: 80%">
<el-table-column prop="equipmentName" align="center" label="机械设备名称" width="280"></el-table-column> <el-table class="tables" :data="tableData">
<el-table-column prop="devSn" align="center" label="设备序号"></el-table-column> <el-table-column prop="equipmentName" align="center" label="机械设备名称" width="280"></el-table-column>
<el-table-column prop="driverName" align="center" label="司机"></el-table-column> <el-table-column prop="devSn" align="center" label="设备序号"></el-table-column>
<el-table-column prop="createTime" align="center" label="新增时间"></el-table-column> <el-table-column prop="driverName" align="center" label="司机"></el-table-column>
<el-table-column align="center" label="操作" width="280"> <el-table-column prop="createTime" align="center" label="新增时间"></el-table-column>
<template slot-scope="scope"> <el-table-column align="center" label="操作" width="280">
<div class="tableBtns"> <template slot-scope="scope">
<div @click="edit(scope.row)" class="operationText"> <div class="tableBtns">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" /> <div @click="edit(scope.row)" class="operationText">
<span style="white-space: nowrap;">编辑</span> <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span style="white-space: nowrap;">编辑</span>
</div>
<div @click="deleteDev(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
<span style="white-space: nowrap;">删除</span>
</div>
</div> </div>
<div @click="deleteDev(scope.row)" class="operationText"> </template>
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" /> </el-table-column>
<span style="white-space: nowrap;">删除</span> </el-table>
</div> </vue-scroll>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange" <el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange"
:current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize" :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize"
layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background > layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background >
@ -237,7 +239,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tables{ .tables{
min-height: 0; // min-height: 0;
} }
.tables2 { .tables2 {
min-height: auto; min-height: auto;

18
src/views/projectFront/smartSafeHat/dataPay/dataModule/dataPayAlarmRecord.vue
View File

@ -30,13 +30,15 @@
</el-form> </el-form>
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" v-loading="loading" :data="tableData"> <vue-scroll style="height: 80%">
<el-table-column label="序号" align="center" type="index" width="200" /> <el-table class="tables" v-loading="loading" :data="tableData">
<el-table-column label="人员名称" align="center" prop="workerName" /> <el-table-column label="序号" align="center" type="index" width="200" />
<el-table-column label="设备序号" align="center" prop="devSn" /> <el-table-column label="人员名称" align="center" prop="workerName" />
<el-table-column label="报警时间" align="center" prop="alarmTime" /> <el-table-column label="设备序号" align="center" prop="devSn" />
<el-table-column label="报警信息" align="center" prop="alarmInfo" /> <el-table-column label="报警时间" align="center" prop="alarmTime" />
</el-table> <el-table-column label="报警信息" align="center" prop="alarmInfo" />
</el-table>
</vue-scroll>
<el-pagination <el-pagination
class="pagerBox" class="pagerBox"
@size-change="SizeChange" @size-change="SizeChange"
@ -161,7 +163,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tables{ .tables{
min-height: 0; // min-height: 0;
} }
.tables2 { .tables2 {
min-height: auto; min-height: auto;

169
src/views/projectFront/smartSafeHat/dataPay/dataModule/dataPayRealTimeData.vue
View File

@ -1,25 +1,57 @@
<template> <template>
<div class="fullHeight"> <div class="fullHeight">
<div class="searchBox whiteBlock"> <div class="searchBox whiteBlock">
<el-form :inline="true" ref="searchForm" :model="searchForm" size="medium"> <el-form
:inline="true"
ref="searchForm"
:model="searchForm"
size="medium"
>
<!-- 人员名称 --> <!-- 人员名称 -->
<el-form-item label="人员名称" prop="workerInfoId"> <el-form-item label="人员名称" prop="workerInfoId">
<el-select v-model="searchForm.workerInfoId" placeholder="请选择" clearable :style="{ width: '100%' }" > <el-select
<el-option v-for="(item, index) in workerList" :key="index" :label="item.workerName" :value="item.id" ></el-option> v-model="searchForm.workerInfoId"
placeholder="请选择"
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in workerList"
:key="index"
:label="item.workerName"
:value="item.id"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 设备序号 --> <!-- 设备序号 -->
<el-form-item label="设备序号" prop="devSn"> <el-form-item label="设备序号" prop="devSn">
<el-select v-model="searchForm.devSn" placeholder="请选择" clearable :style="{ width: '100%' }" > <el-select
<el-option v-for="(item, index) in devSnList" :key="index" :label="item.devSn" :value="item.devSn" ></el-option> v-model="searchForm.devSn"
placeholder="请选择"
clearable
:style="{ width: '100%' }"
>
<el-option
v-for="(item, index) in devSnList"
:key="index"
:label="item.devSn"
:value="item.devSn"
></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<!-- 时间 --> <!-- 时间 -->
<el-form-item label="时间"> <el-form-item label="时间">
<el-date-picker size="medium" v-model="daterange" type="datetimerange" :default-time="['00:00:00', '23:59:59']" <el-date-picker
range-separator="至" value-format="yyyy-MM-dd HH:mm:ss" size="medium"
:start-placeholder="'开始日期'" :end-placeholder="'结束日期'" v-model="daterange"
@change="changeDate"> type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
:start-placeholder="'开始日期'"
:end-placeholder="'结束日期'"
@change="changeDate"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<!-- 条件查询按钮 --> <!-- 条件查询按钮 -->
@ -30,16 +62,21 @@
</el-form> </el-form>
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" v-loading="loading" :data="tableData"> <vue-scroll style="height: 80%">
<el-table-column label="人员名称" align="center" prop="workerName" /> <el-table class="tables" v-loading="loading" :data="tableData">
<el-table-column label="设备序号" align="center" prop="devSn" /> <el-table-column label="人员名称" align="center" prop="workerName" />
<el-table-column label="当前位置" align="center" prop=""> <el-table-column label="设备序号" align="center" prop="devSn" />
<template slot-scope="scope"> <el-table-column label="当前位置" align="center" prop="">
{{ '经度：' + scope.row.longitude + ' 纬度：' + scope.row.latitude }} <template slot-scope="scope">
</template> {{
</el-table-column> "经度：" + scope.row.longitude + " 纬度：" + scope.row.latitude
<el-table-column label="上传时间" align="center" prop="uploadTime" /> }}
</el-table> </template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="uploadTime" />
</el-table>
</vue-scroll>
<el-pagination <el-pagination
class="pagerBox" class="pagerBox"
@size-change="SizeChange" @size-change="SizeChange"
@ -55,38 +92,42 @@
</div> </div>
</template> </template>
<script> <script>
import { getSafeHatPayDataPageApi,getDevSnListApi,getWorkerInfoListApi } from '@/assets/js/api/smartSafeHat/smartSafeHat.js' import {
getSafeHatPayDataPageApi,
getDevSnListApi,
getWorkerInfoListApi,
} from "@/assets/js/api/smartSafeHat/smartSafeHat.js";
export default { export default {
mounted() {}, mounted() {},
created() { created() {
this.getPage() this.getPage();
this.getDevSnList() this.getDevSnList();
this.getWorkerInfoList() this.getWorkerInfoList();
}, },
data() { data() {
return { return {
devSn: '', devSn: "",
// 遮罩层 // 遮罩层
loading: false, loading: false,
daterange: [], daterange: [],
pageInfo: { pageInfo: {
pageNo: 1, //页数 pageNo: 1, //页数
pageSize: 10, //条数 pageSize: 10, //条数
total: 0 //总条数 total: 0, //总条数
}, },
searchForm: { searchForm: {
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
projectSn: '', // 项目SN projectSn: "", // 项目SN
workerInfoId: '', workerInfoId: "",
devSn: '', devSn: "",
uploadTime_begin: '', uploadTime_begin: "",
uploadTime_end: '', uploadTime_end: "",
}, },
workerList: [], workerList: [],
devSnList: [], devSnList: [],
tableData: [], tableData: [],
} };
}, },
methods: { methods: {
//查询列表 //查询列表
@ -99,69 +140,69 @@ export default {
workerInfoId: this.searchForm.workerInfoId, workerInfoId: this.searchForm.workerInfoId,
uploadTime_begin: this.searchForm.uploadTime_begin, uploadTime_begin: this.searchForm.uploadTime_begin,
uploadTime_end: this.searchForm.uploadTime_end, uploadTime_end: this.searchForm.uploadTime_end,
}).then(result => { }).then((result) => {
if (result.success) { if (result.success) {
this.tableData = result.result.records this.tableData = result.result.records;
this.pageInfo.total = result.result.total this.pageInfo.total = result.result.total;
} }
}) });
}, },
async getDevSnList() { async getDevSnList() {
await getDevSnListApi().then(result => { await getDevSnListApi().then((result) => {
if (result.success) { if (result.success) {
this.devSnList = result.result this.devSnList = result.result;
} }
}) });
}, },
async getWorkerInfoList(){ async getWorkerInfoList() {
await getWorkerInfoListApi({ await getWorkerInfoListApi({
pageNo: 1, pageNo: 1,
// pageSize: this.pagInfo.pageSize, // pageSize: this.pagInfo.pageSize,
pageSize: 100000, pageSize: 100000,
projectSn: this.$store.state.projectSn, projectSn: this.$store.state.projectSn,
personType: 1 personType: 1,
}).then(result => { }).then((result) => {
if (result.success) { if (result.success) {
this.workerList = result.result.records this.workerList = result.result.records;
} }
}) });
}, },
SizeChange(val) { SizeChange(val) {
this.pageInfo.pageSize = val this.pageInfo.pageSize = val;
this.getPage() this.getPage();
}, },
CurrentChange(val) { CurrentChange(val) {
this.pageInfo.pageNo = val this.pageInfo.pageNo = val;
this.getPage() this.getPage();
}, },
searchList() { searchList() {
this.pageInfo.pageNo = 1 //页数 this.pageInfo.pageNo = 1; //页数
this.getPage() this.getPage();
}, },
refresh() { refresh() {
this.searchForm = {} this.searchForm = {};
this.pageInfo.pageNo = 1 //页数 this.pageInfo.pageNo = 1; //页数
this.pageInfo.pageSize = 10 //条数 this.pageInfo.pageSize = 10; //条数
this.getPage() this.getPage();
this.getDevSnList() this.getDevSnList();
this.getWorkerInfoList() this.getWorkerInfoList();
}, },
changeDate() { changeDate() {
if (this.daterange) { if (this.daterange) {
this.searchForm.uploadTime_begin = this.daterange[0] this.searchForm.uploadTime_begin = this.daterange[0];
this.searchForm.uploadTime_end = this.daterange[1] this.searchForm.uploadTime_end = this.daterange[1];
console.log(this.daterange) console.log(this.daterange);
} else { } else {
this.searchForm.uploadTime_begin = '' this.searchForm.uploadTime_begin = "";
this.searchForm.uploadTime_end = '' this.searchForm.uploadTime_end = "";
} }
}, },
} },
} };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tables{ .tables {
min-height: 0; // min-height: 0;
} }
.tables2 { .tables2 {
min-height: auto; min-height: auto;

40
src/views/projectFront/smartSafeHat/deviceCentral/deviceCentral.vue
View File

@ -21,25 +21,27 @@
</el-form> </el-form>
</div> </div>
<div class="table_wrap whiteBlock"> <div class="table_wrap whiteBlock">
<el-table class="tables" :data="tableData"> <vue-scroll style="height: 80%">
<el-table-column prop="workerName" align="center" label="人员名称" width="280"></el-table-column> <el-table class="tables" :data="tableData">
<el-table-column prop="devSn" align="center" label="设备序号"></el-table-column> <el-table-column prop="workerName" align="center" label="人员名称" width="280"></el-table-column>
<el-table-column prop="createTime" align="center" label="新增时间"></el-table-column> <el-table-column prop="devSn" align="center" label="设备序号"></el-table-column>
<el-table-column align="center" label="操作" width="280"> <el-table-column prop="createTime" align="center" label="新增时间"></el-table-column>
<template slot-scope="scope"> <el-table-column align="center" label="操作" width="280">
<div class="tableBtns"> <template slot-scope="scope">
<div @click="edit(scope.row)" class="operationText"> <div class="tableBtns">
<img src="@/assets/images/icon-edit.png" width="15px" height="15px" /> <div @click="edit(scope.row)" class="operationText">
<span style="white-space: nowrap;">编辑</span> <img src="@/assets/images/icon-edit.png" width="15px" height="15px" />
<span style="white-space: nowrap;">编辑</span>
</div>
<div @click="deleteDev(scope.row)" class="operationText">
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" />
<span style="white-space: nowrap;">删除</span>
</div>
</div> </div>
<div @click="deleteDev(scope.row)" class="operationText"> </template>
<img src="@/assets/images/icon-delete.png" width="15px" height="15px" /> </el-table-column>
<span style="white-space: nowrap;">删除</span> </el-table>
</div> </vue-scroll>
</div>
</template>
</el-table-column>
</el-table>
<el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange" <el-pagination class="pagerBox" @size-change="SizeChange" @current-change="CurrentChange"
:current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize" :current-page="pagInfo.pageNo" :page-sizes="$store.state.PAGESIZRS" :page-size="pagInfo.pageSize"
layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background > layout="total, sizes, prev, pager, next" :total="Number(pagInfo.total)" background >
@ -232,7 +234,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tables{ .tables{
min-height: 0; // min-height: 0;
} }
.tables2 { .tables2 {
min-height: auto; min-height: auto;