0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交：项目详情页 场景控制 添加 场景触发日志，以及执行一次的操作

This commit is contained in:
23688nl 2022-09-27 15:49:31 +08:00
parent e4b1b2553f
commit 11a717959a
3 changed files with 711 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/iot/project_new.js
View File

@ -215,3 +215,20 @@ export function projectSceneChangeStatus(data) {
data: data
})
}
// 查询 场景控制 新增
export function projectSceneSingleRun(id) {
return request({
url: "/iot/scene/execOnece/" + id,
method: "post"
});
}
// 查询 场景控制 日志 列表
export function projectSceneLoggingList(query) {
return request({
url: "/iot/scene/log",
method: "get",
params: query
});
}

379
src/views/iot/project/profileV2/ESceneManage/ELogging.vue Normal file
View File

@ -0,0 +1,379 @@
<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"
size="small"
width="300"
style="margin-right: 10px"
placeholder="触发方式"
clearable
>
<el-option
v-for="(value, keys) in triggerMethod"
:key="keys"
:label="value"
:value="keys"
></el-option>
</el-select>
<el-date-picker
v-model="time"
size="small"
@change="queryTimeChange"
:clearable="false"
type="datetimerange"
:default-time="['00:00:00', '23:59:59']"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="margin-right: 10px"
>
</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 ? '530px' : '270px'"
>
<el-table-column
type="index"
label="序号"
align="center"
:index="
(idx) => {
return idx + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
}
"
width="80px"
></el-table-column>
<el-table-column
label="触发方式"
width="150px"
align="center"
prop="method"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.method">
{{ triggerMethod[scope.row.method]}}
</span>
</template>
</el-table-column>
<el-table-column
label="内容"
align="left"
prop="content"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.content">
{{ scope.row.content }}
</span>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
width="160px"
prop="createTime"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.createTime">
{{ scope.row.createTime }}
</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@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} {h}:{i}:{s}");
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>

582
src/views/iot/project/profileV2/ESceneManage/index.vue
View File

@ -1,179 +1,186 @@
<template>
<div class="e-scene-manage">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button
<div v-show="!isLoggingViewShow">
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button
>
<el-button @click="handleQuery" size="mini">刷新</el-button>
</el-col>
</el-row>
<div class="e-alarm-table">
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '530px' : '270px'"
>
<el-button @click="handleQuery" size="mini">刷新</el-button>
</el-col>
</el-row>
<el-table-column
type="index"
label="序号"
align="center"
:index="indexFormatter"
width="80px"
></el-table-column>
<div class="e-alarm-table">
<el-table
v-loading="tableLoading"
:data="tableList"
:height="total > 0 ? '530px' : '270px'"
>
<el-table-column
type="index"
label="序号"
align="center"
:index="indexFormatter"
width="80px"
></el-table-column>
<el-table-column
label="场景名称"
width="200px"
align="left"
prop="sceneName"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.sceneName">
{{ scope.row.sceneName }}
</span>
</template>
</el-table-column>
<el-table-column
label="场景编码"
align="left"
width="200"
prop="sceneCode"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.sceneCode">
{{ scope.row.sceneCode }}
</span>
</template>
</el-table-column>
<el-table-column
label="场景模式"
align="left"
width="120"
prop="relation"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.relation">
{{ scope.row.relation }}
</span>
</template>
</el-table-column>
<el-table-column
label="场景名称"
width="200px"
align="left"
prop="sceneName"
<el-table-column label="状态" align="center" prop="runStatus">
<template slot-scope="scope">
<span class="lay-table-textarea">
{{ scope.row.runStatus == "0" ? "启用" : "停止" }}
</span>
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
width="160px"
prop="createTime"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.createTime">
{{ scope.row.createTime }}
</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
width="300"
prop="alarmTime"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
<el-button
size="mini"
type="text"
:icon="
scope.row.runStatus == '0'
? 'el-icon-open'
: 'el-icon-turn-off'
"
@click="handleChangeStatus(scope.row)"
>{{ scope.row.runStatus == "0" ? "停止" : "启用" }}</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-video-play"
@click="handleSingleRun(scope.row)"
>执行</el-button
>
<el-button size="mini" type="text" @click="handleLoggingView(scope.row)" icon="el-icon-takeaway-box"
>指令历史</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getTableList"
/>
</div>
<div class="e-dialog">
<!-- 添加或修改建筑类型对话框 -->
<el-dialog
:title="title"
:visible="open"
@close="open = false"
class="eldialog-wrap"
width="880px"
append-to-body
:close-on-click-modal="false"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.sceneName">
{{ scope.row.sceneName }}
</span>
</template>
</el-table-column>
<el-table-column
label="场景编码"
align="left"
width="200"
prop="sceneCode"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.sceneCode">
{{ scope.row.sceneCode }}
</span>
</template>
</el-table-column>
<el-table-column
label="场景模式"
align="left"
width="120"
prop="relation"
>
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.relation">
{{ scope.row.relation }}
</span>
</template>
</el-table-column>
<el-table-column
label="状态"
align="center"
prop="runStatus"
>
<template slot-scope="scope">
<span class="lay-table-textarea">
{{ scope.row.runStatus == '0' ? "启用" : "停止" }}
</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" width="160px" prop="createTime">
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.createTime">
{{ scope.row.createTime }}
</span>
</template>
</el-table-column>
<!-- <el-table-column label="执行设备" align="left" prop="triggerDevices">
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.triggerDevices">
{{ scope.row.triggerDevices }}
</span>
</template>
</el-table-column> -->
<el-table-column
label="操作"
align="center"
width="200"
prop="alarmTime"
>
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>编辑</el-button
>
<el-button
size="mini"
type="text"
:icon="scope.row.runStatus == '0' ? 'el-icon-video-pause' : 'el-icon-video-play'"
@click="handleChangeStatus(scope.row)"
>{{ scope.row.runStatus == '0' ? '停止' : '启用' }}</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
<!-- <el-button size="mini" type="text" icon="el-icon-search"
>详情</el-button
> -->
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="page.pageNum"
:limit.sync="page.pageSize"
@pagination="getTableList"
/>
</div>
<div class="e-dialog">
<!-- 添加或修改建筑类型对话框 -->
<el-dialog
:title="title"
:visible="open"
@close="open = false"
class="eldialog-wrap"
width="880px"
append-to-body
:close-on-click-modal="false"
>
<el-form
ref="form"
:model="form"
style="padding-right: 20px"
:rules="rules"
label-width="100px"
>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="场景名称：" prop="sceneName">
<el-input
v-model="form.sceneName"
placeholder="请输入场景名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="场景编码：" prop="sceneCode">
<el-input
v-model="form.sceneCode"
placeholder="请输入场景编码"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form
ref="form"
:model="form"
style="padding-right: 20px"
:rules="rules"
label-width="100px"
>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="场景名称：" prop="sceneName">
<el-input
v-model="form.sceneName"
placeholder="请输入场景名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="场景编码：" prop="sceneCode">
<el-input
v-model="form.sceneCode"
placeholder="请输入场景编码"
/>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form-item label="描述" prop="buildingTypeName">
<el-input
v-model="form.buildingTypeName"
@ -181,54 +188,7 @@
/>
</el-form-item>
</el-col> -->
<el-col :span="24">
<span
class="e-form-item__label"
style="
text-align: right;
vertical-align: middle;
font-size: 14px;
color: #606266;
width: 80px;
word-break: break-all;
font-weight: 600;
"
>
触发器列表：
</span>
<div>
<e-tag-card
style="margin-top: 5px"
v-for="(item, idx) in form.triggers"
:key="item.guid || getGuid()"
type="info"
>
<e-scene-triggers
slot="body"
:dataItem="item"
:sourceId="sourceId"
@change="
(v) => {
form.triggers[idx] = v;
}
"
@handleDel="
(v) => {
form.triggers.splice(idx, 1);
}
"
></e-scene-triggers>
</e-tag-card>
</div>
<el-button
icon="el-icon-plus"
type="text"
@click="handleAddTrigger"
>新增触发器</el-button
>
</el-col>
<el-col :span="24">
<div>
<el-col :span="24">
<span
class="e-form-item__label"
style="
@ -240,50 +200,105 @@
word-break: break-all;
font-weight: 600;
"
>执行动作：</span
>
</div>
<div>
<e-tag-card
style="margin-top: 5px"
v-for="(item, idx) in form.actions"
:key="item.guid || getGuid()"
type="info"
触发器列表：
</span>
<div>
<e-tag-card
style="margin-top: 5px"
v-for="(item, idx) in form.triggers"
:key="item.guid || getGuid()"
type="info"
>
<e-scene-triggers
slot="body"
:dataItem="item"
:sourceId="sourceId"
@change="
(v) => {
form.triggers[idx] = v;
}
"
@handleDel="
(v) => {
form.triggers.splice(idx, 1);
}
"
></e-scene-triggers>
</e-tag-card>
</div>
<el-button
icon="el-icon-plus"
type="text"
@click="handleAddTrigger"
>新增触发器</el-button
>
<e-scene-action
slot="body"
:dataItem="item"
:sourceId="sourceId"
@change="
(v) => {
form.actions[idx] = v;
}
</el-col>
<el-col :span="24">
<div>
<span
class="e-form-item__label"
style="
text-align: right;
vertical-align: middle;
font-size: 14px;
color: #606266;
width: 80px;
word-break: break-all;
font-weight: 600;
"
@handleDel="
(v) => {
form.actions.splice(idx, 1);
}
"
/>
</e-tag-card>
</div>
<el-button
type="text"
icon="el-icon-plus"
@click="handleAddAction"
>新增动作</el-button
>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="submitForm"
>确 定</el-button
>
<el-button @click="cancel" size="mini">取 消</el-button>
</div>
</el-dialog>
>执行动作：</span
>
</div>
<div>
<e-tag-card
style="margin-top: 5px"
v-for="(item, idx) in form.actions"
:key="item.guid || getGuid()"
type="info"
>
<e-scene-action
slot="body"
:dataItem="item"
:sourceId="sourceId"
@change="
(v) => {
form.actions[idx] = v;
}
"
@handleDel="
(v) => {
form.actions.splice(idx, 1);
}
"
/>
</e-tag-card>
</div>
<el-button
type="text"
icon="el-icon-plus"
@click="handleAddAction"
>新增动作</el-button
>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="submitForm"
>确 定</el-button
>
<el-button @click="cancel" size="mini">取 消</el-button>
</div>
</el-dialog>
</div>
</div>
<e-logging v-if="isLoggingViewShow"
:sourceId="loggingSourceId"
:sceneInfo="loggingSourceObject"
@handleLinkToHome="() => {
isLoggingViewShow = false;
}"
></e-logging>
</div>
</template>
<script>
@ -293,12 +308,14 @@ import {
projectSceneUpdate,
projectSceneDetail,
projectSceneDelete,
projectSceneChangeStatus
projectSceneChangeStatus,
projectSceneSingleRun,
} from "@/api/iot/project_new";
import DialogTemplate from "@/components/DialogTemplate";
import ESceneTriggers from "./ESceneTriggers/index";
import ETagCard from "@/components/Cards/ETagCard";
import ESceneAction from "./ESceneAction/index";
import ELogging from './ELogging'
export default {
name: "ESceneManage",
@ -328,15 +345,18 @@ export default {
},
},
},
components: { DialogTemplate, ESceneTriggers, ETagCard, ESceneAction },
components: { DialogTemplate, ESceneTriggers, ETagCard, ESceneAction, ELogging },
data() {
return {
queryParams: {},
isLoggingViewShow: false,
loggingSourceId: null,
loggingSourceObject: {},
page: {
pageNum: 1,
pageSize: 10,
orderByColumn: "createTime",
isAsc: "desc"
isAsc: "desc",
},
title: "新增场景",
total: 0,
@ -457,6 +477,7 @@ export default {
!e.sceneActionDevices[0]["deviceKey"])
) {
this.msgError("执行条件中有条件未选择设备或者分组！");
isTrue = false;
}
if (
@ -516,15 +537,19 @@ export default {
});
},
handleChangeStatus(row) {
this.$confirm(row.runStatus ? '是否停止场景?' : '是否开启场景?', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
this.$confirm(
row.runStatus == "0" ? "是否停止场景?" : "是否开启场景?",
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () {
return projectSceneChangeStatus({
recordId: row.recordId,
runStatus: row.runStatus == '0' ? '1' : '0'
runStatus: row.runStatus == "0" ? "1" : "0",
});
})
.then(() => {
@ -532,6 +557,29 @@ export default {
this.msgSuccess("成功");
});
},
handleLoggingView(row) {
this.loggingSourceId = row.recordId;
this.loggingSourceObject = row;
this.isLoggingViewShow = true;
},
/**
* 场景 执行一次 方法
* @param {*} row
*/
handleSingleRun(row) {
this.$confirm("是否确认执行一次此场景?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return projectSceneSingleRun(row.recordId);
})
.then(() => {
this.handleQuery();
this.msgSuccess("请求成功!");
});
},
handleDelete(row) {
const projectIds = row.recordId;
this.$confirm("是否删除该选项?", "警告", {