380 lines
9.3 KiB
Vue
380 lines
9.3 KiB
Vue
<template>
|
||
<div class="e-scene-logging">
|
||
<div class="device-children-header">
|
||
<div class="left-link-home" @click="handleLinkToHome">
|
||
<icon class="iconfont iconfanhui_1"></icon>
|
||
<span class="link-bt-title">返回</span>
|
||
</div>
|
||
<div class="lift-gateway-info">
|
||
<span class="gateway-label">场景名称：</span>
|
||
<span class="gateway-adders">{{ sceneInfo.sceneName || '--'
|
||
}}</span>
|
||
</div>
|
||
<div class="right-operate">
|
||
<el-select
|
||
v-model="queryParams.method"
|
||
clearable
|
||
placeholder="触发方式"
|
||
size="small"
|
||
style="margin-right: 10px"
|
||
width="300"
|
||
>
|
||
<el-option
|
||
v-for="(value, keys) in triggerMethod"
|
||
:key="keys"
|
||
:label="value"
|
||
:value="keys"
|
||
></el-option>
|
||
</el-select>
|
||
|
||
<el-date-picker
|
||
v-model="time"
|
||
:clearable="false"
|
||
:default-time="['00:00:00', '23:59:59']"
|
||
end-placeholder="结束日期"
|
||
range-separator="至"
|
||
size="small"
|
||
start-placeholder="开始日期"
|
||
style="margin-right: 10px"
|
||
type="datetimerange"
|
||
@change="queryTimeChange"
|
||
>
|
||
</el-date-picker>
|
||
|
||
<div class="operate-refresh" @click="handleRefresh">查询</div>
|
||
</div>
|
||
</div>
|
||
<div class="device-children-center">
|
||
<el-table
|
||
v-loading="tableLoading"
|
||
:data="tableList"
|
||
:height="total > 0 ? '470px' : '510px'"
|
||
>
|
||
<el-table-column
|
||
:index="
|
||
(idx) => {
|
||
return idx + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
|
||
}
|
||
"
|
||
align="center"
|
||
label="序号"
|
||
type="index"
|
||
width="80px"
|
||
></el-table-column>
|
||
|
||
<el-table-column
|
||
align="center"
|
||
label="触发方式"
|
||
prop="method"
|
||
width="150px"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span :title="scope.row.method" class="lay-table-textarea">
|
||
{{ triggerMethod[scope.row.method]}}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="left"
|
||
label="内容"
|
||
prop="content"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span :title="scope.row.content" class="lay-table-textarea">
|
||
{{ scope.row.content }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
|
||
<el-table-column
|
||
align="center"
|
||
label="创建时间"
|
||
prop="createTime"
|
||
width="160px"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span :title="scope.row.createTime" class="lay-table-textarea">
|
||
{{ scope.row.createTime }}
|
||
</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<pagination
|
||
v-show="total > 0"
|
||
:limit.sync="queryParams.pageSize"
|
||
:page.sync="queryParams.pageNum"
|
||
:total="total"
|
||
@pagination="getList"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { projectSceneLoggingList } from "@/api/iot/project_new";
|
||
const triggerMethod = {
|
||
MANUAL: "手动触发",
|
||
TIMER: "定时触发",
|
||
DEVICE: "设备触发",
|
||
};
|
||
export default {
|
||
name: "ELogging",
|
||
props: {
|
||
sceneInfo: {
|
||
type: Object,
|
||
require: true,
|
||
},
|
||
sourceId: {
|
||
type: [String, Number],
|
||
require: true,
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
},
|
||
tableLoading: true,
|
||
tableList: [],
|
||
projectModelList: [],
|
||
tableSelectList: [],
|
||
stompClient: null,
|
||
socket_flag: true,
|
||
timeout_flag: null,
|
||
total: 0,
|
||
time: [],
|
||
triggerMethod,
|
||
};
|
||
},
|
||
created() {
|
||
this.newTime();
|
||
this.getList();
|
||
},
|
||
methods: {
|
||
newTime() {
|
||
const startTime = this.parseTime(new Date(), "{y}-{m}-{d} 00:00:00");
|
||
const endTime = this.parseTime(new Date(), "{y}-{m}-{d} 23:59:59");
|
||
this.time = [startTime, endTime];
|
||
this.queryParams.startDate = startTime;
|
||
this.queryParams.endDate = endTime;
|
||
},
|
||
queryTimeChange(val) {
|
||
if (val) {
|
||
this.queryParams.startDate = this.parseTime(
|
||
val[0],
|
||
"{y}-{m}-{d} {h}:{i}:{s}"
|
||
);
|
||
this.queryParams.endDate = this.parseTime(
|
||
val[1],
|
||
"{y}-{m}-{d} {h}:{i}:{s}"
|
||
);
|
||
} else {
|
||
this.queryParams.startDate = null;
|
||
this.queryParams.endDate = null;
|
||
}
|
||
},
|
||
handleLinkToHome() {
|
||
this.$emit("handleLinkToHome");
|
||
},
|
||
// 处理数据 成为表格可用 列数据
|
||
handleTableFilter(list) {
|
||
var resultList = [];
|
||
if (list && list.length > 0) {
|
||
list.forEach((v) => {
|
||
resultList.push({
|
||
label: v["unitName"] ? `${v["name"]}(${v["unitName"]})` : v["name"],
|
||
align: "center",
|
||
prop: v["key"],
|
||
width: list.length > 5 ? "200px" : "",
|
||
});
|
||
});
|
||
}
|
||
return resultList;
|
||
},
|
||
// 查询 子设备列表数据---需要考虑到型号的问题
|
||
getList() {
|
||
this.tableList = [];
|
||
this.tableLoading = true;
|
||
projectSceneLoggingList(
|
||
Object.assign(
|
||
{
|
||
sceneId: this.sourceId,
|
||
},
|
||
this.queryParams
|
||
)
|
||
).then((res) => {
|
||
this.tableList = res.rows;
|
||
this.total = res.total;
|
||
this.tableLoading = false;
|
||
});
|
||
},
|
||
handleRefresh() {
|
||
this.queryParams.pageNum = 1;
|
||
this.getList();
|
||
},
|
||
// 表格 分页查询
|
||
handleQuery(e) {
|
||
this.queryParams = Object.assign(this.queryParams, e);
|
||
this.getList();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.e-scene-logging {
|
||
width: 100%;
|
||
height: 100%;
|
||
.device-children-header {
|
||
width: 100%;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
.left-link-home {
|
||
width: 70px;
|
||
height: 32px;
|
||
background: #f4f5f7;
|
||
border-radius: 5px;
|
||
font-size: 12px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #6b778c;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.link-bt-title {
|
||
margin-left: 5px;
|
||
}
|
||
}
|
||
.lift-gateway-info {
|
||
width: calc(100% - 920px);
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-left: 10px;
|
||
// justify-content: space-around;
|
||
.gateway-label {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 300;
|
||
color: #6b778c;
|
||
text-overflow: ellipsis;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.gateway-adders {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 300;
|
||
color: #344567;
|
||
width: calc(95% - 60px);
|
||
text-overflow: ellipsis;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.gateway-did {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 300;
|
||
color: #344567;
|
||
width: calc(55% - 20% - 80px);
|
||
text-overflow: ellipsis;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.gateway-stu {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 300;
|
||
color: #009003;
|
||
width: calc(18% - 80px);
|
||
text-overflow: ellipsis;
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.off-line {
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
.right-operate {
|
||
width: 870px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
font-weight: 400;
|
||
color: #344567;
|
||
font-size: 12px;
|
||
font-family: Source Han Sans CN;
|
||
cursor: default;
|
||
.operate-refresh {
|
||
width: 60px;
|
||
height: 32px;
|
||
background: #f4f5f7;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 5px;
|
||
}
|
||
.operate-onekey-on {
|
||
width: 75px;
|
||
height: 30px;
|
||
background: #f4f5f7;
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 5px;
|
||
font-weight: 400;
|
||
color: #344567;
|
||
}
|
||
.but-disable {
|
||
color: #6b778c;
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
}
|
||
.device-children-center {
|
||
.children-device-operate {
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
align-items: baseline;
|
||
cursor: default;
|
||
> span {
|
||
display: block;
|
||
width: 50px;
|
||
text-align: center;
|
||
font-size: 13px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 300;
|
||
color: #1890ff;
|
||
align-items: center;
|
||
> i {
|
||
font-size: 16px;
|
||
margin-right: 1px;
|
||
}
|
||
}
|
||
.span-disable {
|
||
color: #6b778c;
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
.children-device-online {
|
||
font-size: 13px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #009003;
|
||
}
|
||
.children-device-offline {
|
||
font-size: 13px;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
}
|
||
</style>
|