447 lines
12 KiB
Vue
447 lines
12 KiB
Vue
<template>
|
||
<div>
|
||
<div class="fullHeight" v-if="!infoDetailShow">
|
||
<div class="searchBtn">
|
||
<div
|
||
class="search-btn-item"
|
||
:class="checkIndex == index ? 'item-active' : ''"
|
||
v-for="(item, index) in searchBtnList"
|
||
:key="index"
|
||
@click="searchSelect(item, index)"
|
||
>
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<div class="searchBox whiteBlock">
|
||
<el-form
|
||
:inline="true"
|
||
ref="searchForm"
|
||
:model="searchForm"
|
||
size="medium"
|
||
style="width: 100%;display: flex;align-items: center;"
|
||
>
|
||
<!-- 人员名称 -->
|
||
<el-form-item label="" prop="deviceName">
|
||
<el-input
|
||
placeholder="请输入"
|
||
suffix-icon="el-icon-search"
|
||
v-model="searchForm.personName"
|
||
>
|
||
</el-input>
|
||
</el-form-item>
|
||
<!-- 设备序号 -->
|
||
<el-form-item label="应用标签" prop="deviceNumber">
|
||
<el-select
|
||
v-model="searchForm.departmentId"
|
||
placeholder="请选择"
|
||
clearable
|
||
:style="{ width: '100%' }"
|
||
>
|
||
<el-option
|
||
v-for="(item, index) in deviceList"
|
||
:key="index"
|
||
:label="item.deviceNumber"
|
||
:value="item.id"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<!-- 时间 -->
|
||
<el-form-item label="接收时间" style="margin-right: auto;">
|
||
<el-date-picker
|
||
size="medium"
|
||
v-model="daterange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
value-format="yyyy-MM-dd"
|
||
:start-placeholder="'开始日期'"
|
||
:end-placeholder="'结束日期'"
|
||
@change="changeDate"
|
||
>
|
||
</el-date-picker>
|
||
</el-form-item>
|
||
<!-- 条件查询按钮 -->
|
||
<el-form-item style="margin-right: 0px;">
|
||
<el-button type="primary" plain @click="searchList">查询</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div class="info-operate">
|
||
<span>消息列表</span>
|
||
<el-button type="primary" size="medium">标为已读</el-button>
|
||
<el-button type="danger" plain size="medium">删除</el-button>
|
||
</div>
|
||
<div class="table_wrap whiteBlock">
|
||
<el-table class="tables" v-loading="loading" :data="tableData">
|
||
<el-table-column type="selection" align="center" width="55" />
|
||
<el-table-column label="标题内容" align="center" prop="deviceName">
|
||
<el-button type="text" @click="infoDetailOpen">标题内容</el-button>
|
||
</el-table-column>
|
||
<el-table-column
|
||
label="类别"
|
||
align="center"
|
||
prop="deviceNumber"
|
||
width="180"
|
||
/>
|
||
<el-table-column
|
||
label="应用"
|
||
align="center"
|
||
prop="currentLocation"
|
||
width="180"
|
||
/>
|
||
<el-table-column label="标签" align="center" prop="speed" />
|
||
<el-table-column label="操作时间" align="center" prop="workStatus" />
|
||
</el-table>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pageInfo.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="Number(pageInfo.total)"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
<div class="info-content" v-else>
|
||
<div class="back-operate" @click="infoDetailShow = false;">
|
||
<i class="el-icon-arrow-left"></i>
|
||
<span>返回</span>
|
||
</div>
|
||
<div class="info-content-detail">
|
||
<div class="detail-title">人员未在场预警</div>
|
||
<div class="detail-sub-title">
|
||
<span>应用：劳务管理系统</span>
|
||
<span>标签：预警信息</span>
|
||
<span>接收时间：2024/03/03 23:50:00</span>
|
||
</div>
|
||
<div class="detail-content">人员未在场预警</div>
|
||
<div class="detail-content">人员未在场预警</div>
|
||
<div class="detail-content">人员未在场预警</div>
|
||
<div class="detail-content">人员未在场预警</div>
|
||
<div class="detail-content">人员未在场预警</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { rtToolPage } from "@/assets/js/api/workTicketManage.js";
|
||
import {} from "@/assets/js/api/devicePosition/payData";
|
||
export default {
|
||
mounted() {},
|
||
created() {
|
||
this.getList();
|
||
// this.getDutyPerson()
|
||
},
|
||
data() {
|
||
return {
|
||
infoDetailShow: false,
|
||
checkIndex: 0,
|
||
searchBtnList: [
|
||
{ name: "全部类别", value: "" },
|
||
{ name: "通知公告", value: "" },
|
||
{ name: "审批流程", value: "" },
|
||
{ name: "风险预警", value: "" },
|
||
{ name: "任务待办", value: "" },
|
||
{ name: "其他", value: "" },
|
||
],
|
||
devSn: "",
|
||
// 遮罩层
|
||
loading: false,
|
||
daterange: [],
|
||
pageInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 10, //条数
|
||
total: 1, //总条数
|
||
},
|
||
searchForm: {
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
projectSn: "", // 项目SN
|
||
personName: "",
|
||
deviceNumber: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
},
|
||
personList: [
|
||
{ id: 1, personName: "张三" },
|
||
{ id: 2, personName: "李四" },
|
||
{ id: 3, personName: "王二" },
|
||
],
|
||
deviceList: [
|
||
{ id: 1, deviceNumber: "EMP21313212135132" },
|
||
{ id: 2, deviceNumber: "EMP44613213543212" },
|
||
{ id: 3, deviceNumber: "EMP21321546312556" },
|
||
],
|
||
tableData: [
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 0,
|
||
deviceBattery: 50,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 0,
|
||
deviceBattery: 95,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 1,
|
||
deviceBattery: 18,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 1,
|
||
deviceBattery: 45,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 0,
|
||
deviceBattery: 81,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 1,
|
||
deviceBattery: 11,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 0,
|
||
deviceBattery: 67,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 1,
|
||
deviceBattery: 90,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 0,
|
||
deviceBattery: 16,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
{
|
||
deviceName: "挖掘机",
|
||
deviceNumber: "EMP21313212135132",
|
||
currentLocation: "123,4561,895,5648",
|
||
speed: "15km/h",
|
||
workStatus: 1,
|
||
deviceBattery: 80,
|
||
deviceVoltage: 3.7,
|
||
uploadTime: "2024-03-13 00:00:00",
|
||
},
|
||
],
|
||
};
|
||
},
|
||
methods: {
|
||
infoDetailOpen(){
|
||
this.infoDetailShow = true;
|
||
},
|
||
searchSelect(obj, index) {
|
||
this.checkIndex = index;
|
||
},
|
||
exportFn() {
|
||
window.location.href =
|
||
this.$http.defaults.baseURL +
|
||
"xmgl/standardCurrentData/exportExcelStandardCurrentData?devSn=" +
|
||
this.formInline.devSn +
|
||
"&projectSn=" +
|
||
this.projectSn +
|
||
"&startTime=" +
|
||
this.formInline.startTime +
|
||
"&endTime=" +
|
||
this.formInline.endTime;
|
||
},
|
||
//查询列表
|
||
getList() {
|
||
rtToolPage({
|
||
pageNo: this.pageInfo.pageNo,
|
||
pageSize: this.pageInfo.pageSize,
|
||
projectSn: this.$store.state.projectSn,
|
||
devSn: this.searchForm.devSn,
|
||
toolName: this.searchForm.toolName,
|
||
toolStatus: this.searchForm.toolStatus,
|
||
}).then((result) => {
|
||
if (result.success) {
|
||
this.List = result.result.records;
|
||
this.pageInfo.total = result.result.total;
|
||
}
|
||
});
|
||
},
|
||
SizeChange(val) {
|
||
this.pageInfo.pageSize = val;
|
||
this.getList();
|
||
},
|
||
CurrentChange(val) {
|
||
this.pageInfo.pageNo = val;
|
||
this.getList();
|
||
},
|
||
searchList() {
|
||
this.pageInfo.pageNo = 1; //页数
|
||
this.getList();
|
||
},
|
||
refresh() {
|
||
this.searchForm = {};
|
||
this.pageInfo.pageNo = 1; //页数
|
||
this.pageInfo.pageSize = 10; //条数
|
||
this.getList();
|
||
},
|
||
//选择条数
|
||
handleSizeChange(val) {
|
||
this.pageSize2 = val;
|
||
this.getPageList();
|
||
},
|
||
//选择分页
|
||
handleCurrentChange(val) {
|
||
this.pageNo2 = val;
|
||
this.getPageList();
|
||
},
|
||
changeDate() {
|
||
if (this.daterange) {
|
||
this.searchForm.startTime = this.daterange[0];
|
||
this.searchForm.endTime = this.daterange[1];
|
||
} else {
|
||
this.searchForm.startTime = "";
|
||
this.searchForm.endTime = "";
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.tables {
|
||
min-height: 0;
|
||
}
|
||
.searchBox {
|
||
height: 50px;
|
||
margin-bottom: 0px;
|
||
margin-top: 10px;
|
||
}
|
||
.searchBtn {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 15px;
|
||
margin-left: 25px;
|
||
.search-btn-item {
|
||
width: 65px;
|
||
padding: 5px 1px;
|
||
text-align: center;
|
||
border: 1px solid #638ef7;
|
||
border-radius: 3px;
|
||
font-size: 14px;
|
||
color: #638ef7;
|
||
cursor: pointer;
|
||
}
|
||
.item-active {
|
||
background-color: #5181f6;
|
||
color: white;
|
||
}
|
||
.search-btn-item:not(:last-child) {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.info-operate {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0px 25px 10px 25px;
|
||
> span:nth-child(1) {
|
||
margin-right: auto;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
}
|
||
}
|
||
.info-content{
|
||
.back-operate{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #5282F6;
|
||
height: 40px;
|
||
border-bottom: 2px solid #C8C8C8;
|
||
padding-bottom: 5px;
|
||
cursor: pointer;
|
||
.el-icon-arrow-left{
|
||
color: #5282F6;
|
||
margin-left: 15px;
|
||
}
|
||
>span{
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.info-content-detail{
|
||
margin-top: 80px;
|
||
.detail-title{
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #000000;
|
||
font-size: 18px;
|
||
text-align: center;
|
||
}
|
||
.detail-sub-title{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #000000;
|
||
font-size: 16px;
|
||
margin-top: 30px;
|
||
margin-bottom: 30px;
|
||
span:not(:last-child){
|
||
margin-right: 25px;
|
||
}
|
||
}
|
||
.detail-content{
|
||
font-family: PingFang SC, PingFang SC;
|
||
color: #000000;
|
||
font-size: 14px;
|
||
margin-bottom: 15px;
|
||
margin-left: 25px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|