alert rules
This commit is contained in:
44
src/api/device/alert.js
Normal file
44
src/api/device/alert.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询设备告警列表
|
||||
export function listAlert(query) {
|
||||
return request({
|
||||
url: "/device/alert/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询设备告警详细
|
||||
export function getAlert(alertId) {
|
||||
return request({
|
||||
url: "/device/alert/" + alertId,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 新增设备告警
|
||||
export function addAlert(data) {
|
||||
return request({
|
||||
url: "/device/alert",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改设备告警
|
||||
export function updateAlert(data) {
|
||||
return request({
|
||||
url: "/device/alert",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除设备告警
|
||||
export function delAlert(alertId) {
|
||||
return request({
|
||||
url: "/device/alert/" + alertId,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
44
src/api/product/alertRule.js
Normal file
44
src/api/product/alertRule.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询设备告警列表
|
||||
export function listAlertRule(query) {
|
||||
return request({
|
||||
url: "/product/alertRule/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询设备告警详细
|
||||
export function getAlertRule(alertId) {
|
||||
return request({
|
||||
url: "/product/alertRule/" + alertId,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 新增设备告警
|
||||
export function addAlertRule(data) {
|
||||
return request({
|
||||
url: "/product/alertRule",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改设备告警
|
||||
export function updateAlertRule(data) {
|
||||
return request({
|
||||
url: "/product/alertRule",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除设备告警
|
||||
export function delAlertRule(alertId) {
|
||||
return request({
|
||||
url: "/product/alertRule/" + alertId,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
44
src/api/thingsmodel/model.js
Normal file
44
src/api/thingsmodel/model.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询物模型列表
|
||||
export function listModel(query) {
|
||||
return request({
|
||||
url: "/thingsmodel/model/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询物模型详细
|
||||
export function getModel(modelId) {
|
||||
return request({
|
||||
url: "/thingsmodel/model/" + modelId,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 新增物模型
|
||||
export function addModel(data) {
|
||||
return request({
|
||||
url: "/thingsmodel/model",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改物模型
|
||||
export function updateModel(data) {
|
||||
return request({
|
||||
url: "/thingsmodel/model",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除物模型
|
||||
export function delModel(modelId) {
|
||||
return request({
|
||||
url: "/thingsmodel/model/" + modelId,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
44
src/api/thingsmodel/template.js
Normal file
44
src/api/thingsmodel/template.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
// 查询物模型模板列表
|
||||
export function listTemplate(query) {
|
||||
return request({
|
||||
url: "/thingsmodel/template/list",
|
||||
method: "get",
|
||||
params: query,
|
||||
});
|
||||
}
|
||||
|
||||
// 查询物模型模板详细
|
||||
export function getTemplate(templateId) {
|
||||
return request({
|
||||
url: "/thingsmodel/template/" + templateId,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
// 新增物模型模板
|
||||
export function addTemplate(data) {
|
||||
return request({
|
||||
url: "/thingsmodel/template",
|
||||
method: "post",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 修改物模型模板
|
||||
export function updateTemplate(data) {
|
||||
return request({
|
||||
url: "/thingsmodel/template",
|
||||
method: "put",
|
||||
data: data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除物模型模板
|
||||
export function delTemplate(templateId) {
|
||||
return request({
|
||||
url: "/thingsmodel/template/" + templateId,
|
||||
method: "delete",
|
||||
});
|
||||
}
|
||||
@ -13,16 +13,25 @@ export const vertificateMethodOptions = new Map([
|
||||
[2, "加密认证"],
|
||||
[3, "简单+加密"],
|
||||
]);
|
||||
|
||||
export const isTopMap = new Map([
|
||||
[0, "是"],
|
||||
[1, "否"],
|
||||
export const dataTypeMap = new Map([
|
||||
["integer", "整数"],
|
||||
["decimal", "小数"],
|
||||
["bool", "布尔"],
|
||||
["enum", "枚举"],
|
||||
["string", "字符串"],
|
||||
["array", "数组"],
|
||||
]);
|
||||
|
||||
export const isMonitor = new Map([
|
||||
[0, "是"],
|
||||
[1, "否"],
|
||||
// export const isTopMap = new Map([[0, "是"], [1, "否"]]);
|
||||
export const isSysMap = new Map([
|
||||
[0, "否"],
|
||||
[1, "是"],
|
||||
]);
|
||||
export const modelType = new Map([
|
||||
[1, "属性"],
|
||||
[2, "功能"],
|
||||
[3, "事件"],
|
||||
]);
|
||||
// export const isMonitor = new Map([[0, "是"], [1, "否"]]);
|
||||
|
||||
export const productStatusMap = [
|
||||
{
|
||||
|
||||
49
src/utils/thingsmodel.js
Normal file
49
src/utils/thingsmodel.js
Normal file
@ -0,0 +1,49 @@
|
||||
/** 格式化显示数据定义 */
|
||||
export const formatSpecsDisplay = (json) => {
|
||||
let specs = JSON.parse(json);
|
||||
if (!specs) {
|
||||
return;
|
||||
}
|
||||
if (specs.type === "integer" || specs.type === "decimal") {
|
||||
return (
|
||||
"<span style='width:50%;display:inline-block;'>最大值：<span style=\"color:#F56C6C\">" +
|
||||
specs.max +
|
||||
'</span></span>最小值：<span style="color:#F56C6C">' +
|
||||
specs.min +
|
||||
"</span><br /><span style='width:50%;display:inline-block;'>步长：<span style=\"color:#F56C6C\">" +
|
||||
specs.step +
|
||||
'</span></span>单位：<span style="color:#F56C6C">' +
|
||||
specs.unit
|
||||
);
|
||||
} else if (specs.type === "string") {
|
||||
return (
|
||||
'最大长度：<span style="color:#F56C6C">' + specs.maxLength + "</span>"
|
||||
);
|
||||
} else if (specs.type === "array") {
|
||||
return (
|
||||
'数组类型：<span style="color:#F56C6C">' + specs.arrayType + "</span>"
|
||||
);
|
||||
} else if (specs.type === "enum") {
|
||||
let items = "";
|
||||
for (let i = 0; i < specs.enumList.length; i++) {
|
||||
items =
|
||||
items +
|
||||
"<span style='width:50%;display:inline-block;'>" +
|
||||
specs.enumList[i].value +
|
||||
"：<span style='color:#F56C6C'>" +
|
||||
specs.enumList[i].text +
|
||||
"</span></span>";
|
||||
if (i > 0 && i % 2 !== 0) {
|
||||
items = items + "<br />";
|
||||
}
|
||||
}
|
||||
return items;
|
||||
} else if (specs.type === "bool") {
|
||||
return (
|
||||
"<span style='width:50%;display:inline-block;'>0：<span style=\"color:#F56C6C\">" +
|
||||
specs.falseText +
|
||||
'</span></span>1：<span style="color:#F56C6C">' +
|
||||
specs.trueText
|
||||
);
|
||||
}
|
||||
};
|
||||
21
src/views/components/model-type-tags/index.vue
Normal file
21
src/views/components/model-type-tags/index.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<el-tag v-if="type === 1" effect="dark" size="small" type="success">
|
||||
属性
|
||||
</el-tag>
|
||||
<el-tag v-else-if="type === 2" effect="dark" size="small" type="warning">
|
||||
功能
|
||||
</el-tag>
|
||||
<el-tag v-else-if="type === 3" effect="dark" size="small"> 事件 </el-tag>
|
||||
<el-tag v-else effect="dark" size="small" type="info"> 未知 </el-tag>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
349
src/views/product/device/alert/index.vue
Normal file
349
src/views/product/device/alert/index.vue
Normal file
@ -0,0 +1,349 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="" prop="tenantId">
|
||||
<el-input
|
||||
v-model="queryParams.tenantId"
|
||||
clearable
|
||||
placeholder="请输入"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警名称" prop="alertName">
|
||||
<el-input
|
||||
v-model="queryParams.alertName"
|
||||
clearable
|
||||
placeholder="请输入告警名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警级别" prop="alertLevel">
|
||||
<el-input
|
||||
v-model="queryParams.alertLevel"
|
||||
clearable
|
||||
placeholder="请输入告警级别"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品ID" prop="productId">
|
||||
<el-input
|
||||
v-model="queryParams.productId"
|
||||
clearable
|
||||
placeholder="请输入产品ID"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="Search" type="primary" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:add']"
|
||||
icon="Plus"
|
||||
plain
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:edit']"
|
||||
:disabled="single"
|
||||
icon="Edit"
|
||||
plain
|
||||
type="success"
|
||||
@click="handleUpdate"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:remove']"
|
||||
:disabled="multiple"
|
||||
icon="Delete"
|
||||
plain
|
||||
type="danger"
|
||||
@click="handleDelete"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:export']"
|
||||
icon="Download"
|
||||
plain
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="alertList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" label="告警ID" prop="alertId" />
|
||||
<el-table-column align="center" label="" prop="tenantId" />
|
||||
<el-table-column align="center" label="告警名称" prop="alertName" />
|
||||
<el-table-column align="center" label="告警级别" prop="alertLevel" />
|
||||
<el-table-column align="center" label="产品ID" prop="productId" />
|
||||
<el-table-column align="center" label="触发器" prop="triggers" />
|
||||
<el-table-column align="center" label="执行动作" prop="actions" />
|
||||
<el-table-column align="center" label="告警状态" prop="status" />
|
||||
<el-table-column align="center" label="备注" prop="remark" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:edit']"
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:remove']"
|
||||
icon="Delete"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改设备告警对话框 -->
|
||||
<el-dialog v-model="open" :title="title" append-to-body width="500px">
|
||||
<el-form ref="alertRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-form-item label="" prop="tenantId">
|
||||
<el-input v-model="form.tenantId" placeholder="请输入" />
|
||||
</el-form-item>
|
||||
<el-form-item label="告警名称" prop="alertName">
|
||||
<el-input v-model="form.alertName" placeholder="请输入告警名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="告警级别" prop="alertLevel">
|
||||
<el-input v-model="form.alertLevel" placeholder="请输入告警级别" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品ID" prop="productId">
|
||||
<el-input v-model="form.productId" placeholder="请输入产品ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入内容"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script name="Alert" setup>
|
||||
import {
|
||||
addAlert,
|
||||
delAlert,
|
||||
getAlert,
|
||||
listAlert,
|
||||
updateAlert,
|
||||
} from "@/api/device/alert";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const alertList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tenantId: null,
|
||||
alertName: null,
|
||||
alertLevel: null,
|
||||
productId: null,
|
||||
triggers: null,
|
||||
actions: null,
|
||||
status: null,
|
||||
},
|
||||
rules: {
|
||||
alertName: [
|
||||
{ required: true, message: "告警名称不能为空", trigger: "blur" },
|
||||
],
|
||||
alertLevel: [
|
||||
{ required: true, message: "告警级别不能为空", trigger: "blur" },
|
||||
],
|
||||
productId: [{ required: true, message: "产品ID不能为空", trigger: "blur" }],
|
||||
triggers: [{ required: true, message: "触发器不能为空", trigger: "blur" }],
|
||||
actions: [{ required: true, message: "执行动作不能为空", trigger: "blur" }],
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询设备告警列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listAlert(queryParams.value).then((response) => {
|
||||
alertList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
alertId: null,
|
||||
tenantId: null,
|
||||
alertName: null,
|
||||
alertLevel: null,
|
||||
productId: null,
|
||||
triggers: null,
|
||||
actions: null,
|
||||
status: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
remark: null,
|
||||
};
|
||||
proxy.resetForm("alertRef");
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.alertId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加设备告警";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _alertId = row.alertId || ids.value;
|
||||
getAlert(_alertId).then((response) => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改设备告警";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["alertRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.alertId != null) {
|
||||
updateAlert(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addAlert(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _alertIds = row.alertId || ids.value;
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除设备告警编号为"' + _alertIds + '"的数据项？')
|
||||
.then(function () {
|
||||
return delAlert(_alertIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"device/alert/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`alert_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
getList();
|
||||
</script>
|
||||
@ -5,6 +5,7 @@
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
:size="productId ? 'small' : 'default'"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
>
|
||||
@ -89,6 +90,7 @@
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['product:firmware:add']"
|
||||
:size="productId ? 'small' : 'default'"
|
||||
icon="Plus"
|
||||
plain
|
||||
type="primary"
|
||||
@ -100,6 +102,7 @@
|
||||
<el-button
|
||||
v-hasPermi="['product:firmware:edit']"
|
||||
:disabled="single"
|
||||
:size="productId ? 'small' : 'default'"
|
||||
icon="Edit"
|
||||
plain
|
||||
type="success"
|
||||
@ -111,6 +114,7 @@
|
||||
<el-button
|
||||
v-hasPermi="['product:firmware:remove']"
|
||||
:disabled="multiple"
|
||||
:size="productId ? 'small' : 'default'"
|
||||
icon="Delete"
|
||||
plain
|
||||
type="danger"
|
||||
@ -121,6 +125,7 @@
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['product:firmware:export']"
|
||||
:size="productId ? 'small' : 'default'"
|
||||
icon="Download"
|
||||
plain
|
||||
type="warning"
|
||||
@ -136,6 +141,7 @@
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:border="!!productId"
|
||||
:data="firmwareList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
@ -234,7 +240,7 @@
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="form.productId"
|
||||
:disabled="productId"
|
||||
:disabled="!!productId"
|
||||
:remote-method="getProductOptions"
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs tab-position="left">
|
||||
<el-tabs tab-position="top">
|
||||
<el-tab-pane label="基本信息">
|
||||
<el-form
|
||||
ref="productRef"
|
||||
@ -8,117 +8,78 @@
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-row :gutter="100">
|
||||
<el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input
|
||||
v-model="form.productName"
|
||||
placeholder="请输入产品名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择产品分类" prop="categoryId">
|
||||
<el-tree-select
|
||||
v-model="form.categoryId"
|
||||
:data="categoryOptions"
|
||||
:props="{
|
||||
value: 'categoryId',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
}"
|
||||
check-strictly
|
||||
placeholder="请选择产品分类"
|
||||
value-key="categoryId"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="租户ID" prop="tenantId">
|
||||
<el-select
|
||||
v-model="form.tenantId"
|
||||
:remote-method="getTenantList"
|
||||
filterable
|
||||
remote
|
||||
remote-show-suffix
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tenantOptions"
|
||||
:key="item.tenantId"
|
||||
:label="item.tenantName"
|
||||
:value="item.tenantId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入内容"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
|
||||
<el-form-item label="产品编码SN" prop="productSn">
|
||||
<el-input
|
||||
v-model="form.productSn"
|
||||
placeholder="请输入产品编码SN"
|
||||
>
|
||||
<template #suffix>
|
||||
<el-icon v-if="isProductSnUnique === true" color="green">
|
||||
<SuccessFilled />
|
||||
</el-icon>
|
||||
<el-icon
|
||||
v-else-if="isProductSnUnique === false"
|
||||
color="red"
|
||||
>
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="mqtt账号" prop="mqttAccount">
|
||||
<el-input
|
||||
v-model="form.mqttAccount"
|
||||
placeholder="请输入mqtt账号"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="mqtt密码" prop="mqttPassword">
|
||||
<el-input
|
||||
v-model="form.mqttPassword"
|
||||
placeholder="请输入mqtt密码"
|
||||
type="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品秘钥" prop="mqttSecret">
|
||||
<el-input
|
||||
v-model="form.mqttSecret"
|
||||
placeholder="请输入产品秘钥"
|
||||
type="password"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="认证方式" prop="vertificateMethod">
|
||||
<el-select
|
||||
v-model="form.vertificateMethod"
|
||||
placeholder="请选择认证方式"
|
||||
>
|
||||
<el-option
|
||||
v-for="[value, key] in vertificateMethodOptions"
|
||||
:key="value"
|
||||
:label="key"
|
||||
:value="value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">
|
||||
<el-form-item label="图片地址" prop="imgUrl">
|
||||
<!-- <el-input v-model="form.imgUrl" placeholder="请输入图片地址" />-->
|
||||
<image-upload v-model="form.imgUrl" :limit="1"></image-upload>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-col :span="20">
|
||||
<!-- <el-row :gutter="100">-->
|
||||
<!-- <el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">-->
|
||||
<!-- <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">-->
|
||||
<div
|
||||
:style="{
|
||||
padding: '0 200px',
|
||||
marginTop: '20px',
|
||||
}"
|
||||
>
|
||||
<el-form-item label="产品编码SN" prop="productSn">
|
||||
<el-input v-model="form.productSn" placeholder="请输入产品编码SN">
|
||||
<template #suffix>
|
||||
<el-icon v-if="isProductSnUnique === true" color="green">
|
||||
<SuccessFilled />
|
||||
</el-icon>
|
||||
<el-icon v-else-if="isProductSnUnique === false" color="red">
|
||||
<CircleCloseFilled />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<InfoFilled />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品名称" prop="productName">
|
||||
<el-input
|
||||
v-model="form.productName"
|
||||
placeholder="请输入产品名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品分类" prop="categoryId">
|
||||
<el-tree-select
|
||||
v-model="form.categoryId"
|
||||
:data="categoryOptions"
|
||||
:props="{
|
||||
value: 'categoryId',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
}"
|
||||
check-strictly
|
||||
clearable
|
||||
placeholder="请选择产品分类"
|
||||
value-key="categoryId"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备类型" prop="deviceType">
|
||||
<el-select v-model="form.deviceType" clearable>
|
||||
<el-option :value="1" label="直连设备" />
|
||||
<el-option :value="2" label="网关子设备" />
|
||||
<el-option :value="3" label="网关设备" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="厂商" prop="companyName">
|
||||
<el-input
|
||||
v-model="form.companyName"
|
||||
placeholder="请输入厂商名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="型号" prop="model">
|
||||
<el-input v-model="form.model" placeholder="请输入型号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入描述"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片地址" prop="imgUrl">
|
||||
<!-- <el-input v-model="form.imgUrl" placeholder="请输入图片地址" />-->
|
||||
<image-upload v-model="form.imgUrl" :limit="1"></image-upload>
|
||||
</el-form-item>
|
||||
<el-form-item style="text-align: center; margin: 40px 0px">
|
||||
<el-button
|
||||
v-if="form.status !== 2"
|
||||
@ -127,14 +88,140 @@
|
||||
>提交
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</div>
|
||||
|
||||
<!-- <el-form-item label="租户" prop="tenantId">-->
|
||||
<!-- <el-tooltip content="在此输入搜索关键字" effect="light" placement="right">-->
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="form.tenantId"-->
|
||||
<!-- :remote-method="getTenantList"-->
|
||||
<!-- filterable-->
|
||||
<!-- placeholder="请选择租户"-->
|
||||
<!-- remote-->
|
||||
<!-- remote-show-suffix-->
|
||||
<!-- >-->
|
||||
<!--<!– @blur="showTenantTip=false"–>-->
|
||||
<!-- <!– @focus="showTenantTip=true"–>-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="item in tenantOptions"-->
|
||||
<!-- :key="item.tenantId"-->
|
||||
<!-- :label="item.tenantName"-->
|
||||
<!-- :value="item.tenantId"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-tooltip>-->
|
||||
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">-->
|
||||
<!-- <el-form-item label="产品编码SN" prop="productSn">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="form.productSn"-->
|
||||
<!-- placeholder="请输入产品编码SN"-->
|
||||
<!-- >-->
|
||||
<!-- <template #suffix>-->
|
||||
<!-- <el-icon v-if="isProductSnUnique === true" color="green">-->
|
||||
<!-- <SuccessFilled />-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- <el-icon-->
|
||||
<!-- v-else-if="isProductSnUnique === false"-->
|
||||
<!-- color="red"-->
|
||||
<!-- >-->
|
||||
<!-- <CircleCloseFilled />-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- <el-icon v-else>-->
|
||||
<!-- <InfoFilled />-->
|
||||
<!-- </el-icon>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!--<!– <el-form-item label="mqtt账号" prop="mqttAccount">–>-->
|
||||
<!--<!– <el-input–>-->
|
||||
<!--<!– v-model="form.mqttAccount"–>-->
|
||||
<!--<!– placeholder="请输入mqtt账号"–>-->
|
||||
<!--<!– />–>-->
|
||||
<!--<!– </el-form-item>–>-->
|
||||
<!--<!– <el-form-item label="mqtt密码" prop="mqttPassword">–>-->
|
||||
<!--<!– <el-input–>-->
|
||||
<!--<!– v-model="form.mqttPassword"–>-->
|
||||
<!--<!– placeholder="请输入mqtt密码"–>-->
|
||||
<!--<!– type="password"–>-->
|
||||
<!--<!– />–>-->
|
||||
<!--<!– </el-form-item>–>-->
|
||||
<!--<!– <el-form-item label="产品秘钥" prop="mqttSecret">–>-->
|
||||
<!--<!– <el-input–>-->
|
||||
<!--<!– v-model="form.mqttSecret"–>-->
|
||||
<!--<!– placeholder="请输入产品秘钥"–>-->
|
||||
<!--<!– type="password"–>-->
|
||||
<!--<!– />–>-->
|
||||
<!--<!– </el-form-item>–>-->
|
||||
<!--<!– <el-form-item label="认证方式" prop="vertificateMethod">–>-->
|
||||
<!--<!– <el-select–>-->
|
||||
<!--<!– v-model="form.vertificateMethod"–>-->
|
||||
<!--<!– placeholder="请选择认证方式"–>-->
|
||||
<!--<!– >–>-->
|
||||
<!--<!– <el-option–>-->
|
||||
<!--<!– v-for="[value, key] in vertificateMethodOptions"–>-->
|
||||
<!--<!– :key="value"–>-->
|
||||
<!--<!– :label="key"–>-->
|
||||
<!--<!– :value="value"–>-->
|
||||
<!--<!– />–>-->
|
||||
<!--<!– </el-select>–>-->
|
||||
<!--<!– </el-form-item>–>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">-->
|
||||
|
||||
<!-- <el-form-item label="mqtt账号" prop="mqttAccount">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="form.mqttAccount"-->
|
||||
<!-- placeholder="请输入mqtt账号"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="mqtt密码" prop="mqttPassword">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="form.mqttPassword"-->
|
||||
<!-- placeholder="请输入mqtt密码"-->
|
||||
<!-- type="password"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="产品秘钥" prop="mqttSecret">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="form.mqttSecret"-->
|
||||
<!-- placeholder="请输入产品秘钥"-->
|
||||
<!-- type="password"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="认证方式" prop="vertificateMethod">-->
|
||||
<!-- <el-select-->
|
||||
<!-- v-model="form.vertificateMethod"-->
|
||||
<!-- placeholder="请选择认证方式"-->
|
||||
<!-- >-->
|
||||
<!-- <el-option-->
|
||||
<!-- v-for="[value, key] in vertificateMethodOptions"-->
|
||||
<!-- :key="value"-->
|
||||
<!-- :label="key"-->
|
||||
<!-- :value="value"-->
|
||||
<!-- />-->
|
||||
<!-- </el-select>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :lg="12" :md="24" :sm="24" :xl="8" :xs="24">-->
|
||||
|
||||
<!-- </el-col>-->
|
||||
<!-- </el-row>-->
|
||||
<!-- <el-col :span="20">-->
|
||||
|
||||
<!-- </el-col>-->
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :disabled="!form.productId" label="产品模型">
|
||||
<model
|
||||
v-if="form.productId"
|
||||
ref="modelRef"
|
||||
:model-json="form.thingsModelsJson"
|
||||
:product="form"
|
||||
:product-id="form.productId"
|
||||
@model-updated="getData"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
@ -142,7 +229,9 @@
|
||||
<firmware v-if="form.productId" :product-id="form.productId" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :disabled="!form.productId" label="设备授权"></el-tab-pane>
|
||||
<el-tab-pane :disabled="!form.productId" label="告警配置"></el-tab-pane>
|
||||
<el-tab-pane :disabled="!form.productId" label="告警配置">
|
||||
<alert :product="form" :product-id="form.productId" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :disabled="!form.productId" label="控制界面"></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
@ -151,7 +240,7 @@
|
||||
<script setup>
|
||||
import Firmware from "@/views/product/firmware/index.vue";
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
import Model from "@/views/product/product/components/model.vue";
|
||||
import Model from "@/views/product/product/panes/model.vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import {
|
||||
addProduct,
|
||||
@ -164,8 +253,8 @@ import { listTenant } from "@/api/system/tenant";
|
||||
import ImageUpload from "@/components/ImageUpload/index.vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import tab from "@/plugins/tab";
|
||||
import { vertificateMethodOptions } from "@/constant/dict";
|
||||
import { debounce } from "lodash-es";
|
||||
import Alert from "@/views/product/product/panes/alert.vue";
|
||||
|
||||
const checkProductSnUnique = debounce((rule, value, callback) => {
|
||||
if (!value) {
|
||||
@ -217,6 +306,7 @@ const productRef = ref();
|
||||
const categoryOptions = ref([]); // 产品分类树形选择
|
||||
const tenantOptions = ref([]);
|
||||
const isProductSnUnique = ref();
|
||||
const showTenantTip = ref(false);
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
@ -233,6 +323,8 @@ function reset() {
|
||||
thingsModelsJson: null,
|
||||
deviceType: null,
|
||||
vertificateMethod: null,
|
||||
model: null,
|
||||
companyName: null,
|
||||
imgUrl: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
@ -301,7 +393,14 @@ onMounted(() => {
|
||||
});
|
||||
|
||||
getCategoryList();
|
||||
getTenantList();
|
||||
// getTenantList();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-tabs__nav-wrap) {
|
||||
.el-tabs__nav-scroll {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
<el-tree-select
|
||||
v-model="queryParams.categoryId"
|
||||
:data="categoryOptions"
|
||||
clearable
|
||||
:props="{
|
||||
value: 'categoryId',
|
||||
label: 'name',
|
||||
@ -149,10 +150,10 @@
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" label="产品ID" prop="productId" />
|
||||
<!-- <el-table-column align="center" label="产品ID" prop="productId" />-->
|
||||
<el-table-column align="center" label="产品编码SN" prop="productSn" />
|
||||
<el-table-column align="center" label="产品名称" prop="productName" />
|
||||
<el-table-column align="center" label="产品分类ID" prop="categoryId">
|
||||
<el-table-column align="center" label="产品分类" prop="categoryId">
|
||||
<template #default="{ row }">
|
||||
{{ findNode(categoryOptions, row.categoryId)?.name }}
|
||||
</template>
|
||||
@ -196,7 +197,10 @@
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="产品图片" prop="imgUrl">
|
||||
<template #default="{ row }">
|
||||
<el-image :src="`/dev-api/${row.imgUrl}`"></el-image>
|
||||
<el-image
|
||||
:preview-src-list="[`${baseUrl}/${row.imgUrl}`]"
|
||||
:src="`${baseUrl}/${row.imgUrl}`"
|
||||
></el-image>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="备注" prop="remark" />
|
||||
@ -212,7 +216,7 @@
|
||||
link
|
||||
type="primary"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
>{{ scope.row.status === 2 ? "查看" : "修改" }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['product:product:remove']"
|
||||
|
||||
942
src/views/product/product/panes/alert.vue
Normal file
942
src/views/product/product/panes/alert.vue
Normal file
@ -0,0 +1,942 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="" prop="tenantId">
|
||||
<el-input
|
||||
v-model="queryParams.tenantId"
|
||||
clearable
|
||||
placeholder="请输入"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警名称" prop="alertName">
|
||||
<el-input
|
||||
v-model="queryParams.alertName"
|
||||
clearable
|
||||
placeholder="请输入告警名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警级别" prop="alertLevel">
|
||||
<el-input
|
||||
v-model="queryParams.alertLevel"
|
||||
clearable
|
||||
placeholder="请输入告警级别"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品ID" prop="productId">
|
||||
<el-input
|
||||
v-model="queryParams.productId"
|
||||
clearable
|
||||
placeholder="请输入产品ID"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button icon="Search" type="primary" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<!-- TODO: v-hasPermi="['device:alert:add']"-->
|
||||
<el-button
|
||||
icon="Plus"
|
||||
plain
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
icon="refresh"
|
||||
plain
|
||||
size="small"
|
||||
type="success"
|
||||
@click="getList"
|
||||
>刷新
|
||||
</el-button>
|
||||
</el-col>
|
||||
<!-- <el-col :span="1.5">-->
|
||||
<!-- <el-button-->
|
||||
<!-- v-hasPermi="['device:alert:edit']"-->
|
||||
<!-- :disabled="single"-->
|
||||
<!-- icon="Edit"-->
|
||||
<!-- plain-->
|
||||
<!-- type="success"-->
|
||||
<!-- @click="handleUpdate"-->
|
||||
<!-- >修改-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="1.5">-->
|
||||
<!-- <el-button-->
|
||||
<!-- v-hasPermi="['device:alert:remove']"-->
|
||||
<!-- :disabled="multiple"-->
|
||||
<!-- icon="Delete"-->
|
||||
<!-- plain-->
|
||||
<!-- type="danger"-->
|
||||
<!-- @click="handleDelete"-->
|
||||
<!-- >删除-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-col>-->
|
||||
<!-- <el-col :span="1.5">-->
|
||||
<!-- <el-button-->
|
||||
<!-- v-hasPermi="['device:alert:export']"-->
|
||||
<!-- icon="Download"-->
|
||||
<!-- plain-->
|
||||
<!-- type="warning"-->
|
||||
<!-- @click="handleExport"-->
|
||||
<!-- >导出-->
|
||||
<!-- </el-button>-->
|
||||
<!-- </el-col>-->
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="alertList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<!-- <el-table-column align="center" label="告警ID" prop="alertId" />-->
|
||||
<!-- <el-table-column align="center" label="" prop="tenantId" />-->
|
||||
<el-table-column align="center" label="告警名称" prop="alertName" />
|
||||
<el-table-column align="center" label="告警级别" prop="alertLevel" />
|
||||
<el-table-column align="center" label="产品" prop="productId" />
|
||||
<el-table-column align="center" label="触发器" prop="triggers" />
|
||||
<el-table-column align="center" label="执行动作" prop="actions" />
|
||||
<el-table-column align="center" label="告警状态" prop="status" />
|
||||
<el-table-column align="center" label="备注" prop="remark" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:edit']"
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleUpdate(row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['device:alert:remove']"
|
||||
icon="Delete"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDelete(row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改设备告警对话框 -->
|
||||
<el-dialog v-model="open" :title="title" append-to-body width="800px">
|
||||
<div
|
||||
class="el-divider el-divider--horizontal"
|
||||
style="margin-top: -25px"
|
||||
></div>
|
||||
<el-form ref="alertRef" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row :gutter="50">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="告警名称" prop="alertName">
|
||||
<el-input v-model="form.alertName" placeholder="请输入告警名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="告警级别" prop="alertLevel">
|
||||
<el-select
|
||||
v-model="form.alertLevel"
|
||||
placeholder="请选择告警级别"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in iot_alert_level"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="parseInt(dict.value)"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警状态">
|
||||
<el-switch
|
||||
v-model="form.status"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入内容"
|
||||
rows="6"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="触发器" prop="triggers">
|
||||
<el-select
|
||||
v-model="form.condition"
|
||||
placeholder="请选择"
|
||||
style="margin-bottom: 10px; width: 100%"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in triggerConditions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div
|
||||
v-for="(item, index) in form.triggers"
|
||||
:key="index"
|
||||
style="margin-bottom: 15px; border: 1px solid #ddd; padding: 10px"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-select
|
||||
v-model="item.source"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
@change="changeTriggerSource"
|
||||
>
|
||||
<el-option
|
||||
v-for="subItem in triggerSource"
|
||||
:key="subItem.value"
|
||||
:label="subItem.label"
|
||||
:value="subItem.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col v-if="item.source === 2" :offset="1" :span="16">
|
||||
<el-time-picker
|
||||
v-model="timerTimeValue"
|
||||
:disabled="item.isAdvance === 1"
|
||||
placeholder="选择执行时间"
|
||||
size="small"
|
||||
value-format="HH:mm"
|
||||
@change="timeChange"
|
||||
></el-time-picker>
|
||||
</el-col>
|
||||
<el-col
|
||||
v-if="index !== 0"
|
||||
:offset="item.source === 1 ? 17 : 1"
|
||||
:span="2"
|
||||
><a style="color: #f56c6c" @click="removeTriggerItem(index)"
|
||||
>删除</a
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!--定时-->
|
||||
<el-row v-if="item.source === 2">
|
||||
<el-col :span="24">
|
||||
<el-row style="margin-bottom: 5px">
|
||||
<el-col :span="4">
|
||||
<el-select
|
||||
v-model="timerWeekRepeatValue"
|
||||
:disabled="item.isAdvance === 1"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
@change="repeatChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timerWeekRepeats"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col
|
||||
v-if="timerWeekRepeatValue === 3"
|
||||
:offset="1"
|
||||
:span="15"
|
||||
>
|
||||
<el-select
|
||||
v-model="timerWeekValue"
|
||||
:disabled="item.isAdvance === 1"
|
||||
multiple
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
style="width: 485px"
|
||||
@change="weekChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timerWeeks"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :span="18">
|
||||
<el-input
|
||||
v-model="item.cronExpression"
|
||||
:disabled="item.isAdvance === 0"
|
||||
placeholder="cron执行表达式"
|
||||
size="small"
|
||||
>
|
||||
<template slot="append">
|
||||
<el-button
|
||||
:disabled="item.isAdvance === 0"
|
||||
type="primary"
|
||||
@click="handleShowCron(item, index)"
|
||||
>
|
||||
生成表达式
|
||||
<i class="el-icon-time el-icon--right"></i>
|
||||
</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="4">
|
||||
<el-checkbox
|
||||
v-model="item.isAdvance"
|
||||
:false-label="0"
|
||||
:true-label="1"
|
||||
@change="customerCronChange"
|
||||
>
|
||||
自定义表达式
|
||||
</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--设备-->
|
||||
<el-row>
|
||||
<el-col :span="4">
|
||||
<el-select
|
||||
v-model="item.modelType"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="subItem in modelTypes"
|
||||
:key="subItem.value"
|
||||
:label="subItem.label"
|
||||
:value="subItem.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="4">
|
||||
<el-select
|
||||
v-model="item.modelType"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="subItem in modelTypes"
|
||||
:key="subItem.value"
|
||||
:label="subItem.label"
|
||||
:value="subItem.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="5">
|
||||
<el-select
|
||||
v-model="item.operator"
|
||||
placeholder="请选择操作符"
|
||||
size="small"
|
||||
>
|
||||
<el-option key="=" label="等于(=)" value="=" />
|
||||
<el-option key="!=" label="不等于(!=)" value="!=" />
|
||||
<el-option key=">" label="大于(>)" value=">" />
|
||||
<el-option key="<" label="小于(<)" value="<" />
|
||||
<el-option key=">=" label="大于等于(>=)" value=">=" />
|
||||
<el-option key="<=" label="小于等于(<=)" value="<=" />
|
||||
<el-option
|
||||
key="contain"
|
||||
label="包含(contain)"
|
||||
value="contain"
|
||||
/>
|
||||
<el-option
|
||||
key="notcontain"
|
||||
label="不包含(not contain)"
|
||||
value="notcontain"
|
||||
/>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="5">
|
||||
<el-input v-model="item.value" placeholder="值" size="small" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div>
|
||||
+ <a style="color: #409eff" @click="addTriggerItem()">添加触发器</a>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="执行动作">
|
||||
<el-row
|
||||
v-for="(item, index) in form.actions"
|
||||
:key="index"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<el-col :span="4">
|
||||
<el-select v-model="item.modelType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="subItem in modelTypes"
|
||||
:key="subItem.value"
|
||||
:label="subItem.label"
|
||||
:value="subItem.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="4">
|
||||
<el-select v-model="item.modelType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="subItem in modelTypes"
|
||||
:key="subItem.value"
|
||||
:label="subItem.label"
|
||||
:value="subItem.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="11">
|
||||
<el-input v-model="item.value" placeholder="值" />
|
||||
</el-col>
|
||||
<el-col v-if="index !== 0" :offset="1" :span="2"
|
||||
><a style="color: #f56c6c" @click="removeActionItem(index)"
|
||||
>删除</a
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
<div>
|
||||
+
|
||||
<a style="color: #409eff" @click="addActionItem()">添加执行动作</a>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
v-model="openCron"
|
||||
append-to-body
|
||||
class="scrollbar"
|
||||
destroy-on-close
|
||||
title="Cron表达式生成器"
|
||||
>
|
||||
<crontab
|
||||
:expression="expression"
|
||||
style="padding-bottom: 80px"
|
||||
@fill="crontabFill"
|
||||
@hide="openCron = false"
|
||||
></crontab>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 添加或修改设备告警对话框 -->
|
||||
<!-- <el-dialog v-model="open" :title="title" append-to-body width="500px">-->
|
||||
<!-- <el-form ref="alertRef" :model="form" :rules="rules" label-width="80px">-->
|
||||
<!-- <el-form-item label="" prop="tenantId">-->
|
||||
<!-- <el-input v-model="form.tenantId" placeholder="请输入" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="告警名称" prop="alertName">-->
|
||||
<!-- <el-input v-model="form.alertName" placeholder="请输入告警名称" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="告警级别" prop="alertLevel">-->
|
||||
<!-- <el-input v-model="form.alertLevel" placeholder="请输入告警级别" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="产品ID" prop="productId">-->
|
||||
<!-- <el-input v-model="form.productId" placeholder="请输入产品ID" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="备注" prop="remark">-->
|
||||
<!-- <el-input v-model="form.remark" placeholder="请输入内容" type="textarea" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </el-form>-->
|
||||
<!-- <template #footer>-->
|
||||
<!-- <div class="dialog-footer">-->
|
||||
<!-- <el-button type="primary" @click="submitForm">确 定</el-button>-->
|
||||
<!-- <el-button @click="cancel">取 消</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dialog>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script name="Alert" setup>
|
||||
import Crontab from "@/components/Crontab/index.vue";
|
||||
import {
|
||||
addAlertRule,
|
||||
delAlertRule,
|
||||
getAlertRule,
|
||||
listAlertRule,
|
||||
updateAlertRule,
|
||||
} from "@/api/product/alertRule";
|
||||
import { getCurrentInstance, reactive, ref, toRefs, watch } from "vue";
|
||||
import { useDict } from "@/utils/dict";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
const props = defineProps({
|
||||
product: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
});
|
||||
|
||||
const { product } = toRefs(props);
|
||||
|
||||
const timerWeeks = [
|
||||
{
|
||||
value: 1,
|
||||
label: "周一",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "周二",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "周三",
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: "周四",
|
||||
},
|
||||
{
|
||||
value: 5,
|
||||
label: "周五",
|
||||
},
|
||||
{
|
||||
value: 6,
|
||||
label: "周六",
|
||||
},
|
||||
{
|
||||
value: 7,
|
||||
label: "周日",
|
||||
},
|
||||
];
|
||||
|
||||
// 执行动作源
|
||||
const actionSource = [
|
||||
{
|
||||
value: 1,
|
||||
label: "设备",
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: "告警输出",
|
||||
},
|
||||
];
|
||||
// 物模型类别
|
||||
const modelTypes = [
|
||||
{
|
||||
value: 1,
|
||||
label: "属性",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "功能",
|
||||
},
|
||||
];
|
||||
// 触发器条件
|
||||
const triggerConditions = [
|
||||
{
|
||||
value: "all",
|
||||
label: "满足所有条件",
|
||||
},
|
||||
{
|
||||
value: "any",
|
||||
label: "满足任一条件",
|
||||
},
|
||||
];
|
||||
// 告警状态
|
||||
const alertType = [
|
||||
{
|
||||
value: 1,
|
||||
label: "启动",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "停止",
|
||||
},
|
||||
];
|
||||
|
||||
const alertList = ref([]);
|
||||
const open = ref(false);
|
||||
const openCron = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const expression = ref(""); // 传入的表达式
|
||||
const triggerIndex = ref(0); // 触发器的索引，用于接收传入的表达式
|
||||
const timerWeekRepeatValue = ref("1");
|
||||
const timerWeekValue = ref([1, 2, 3, 4, 5, 6, 7]);
|
||||
const triggerSource = ref([
|
||||
{
|
||||
value: 1,
|
||||
label: "设备",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "定时",
|
||||
},
|
||||
]);
|
||||
|
||||
const { iot_alert_level, sys_job_status } = useDict(
|
||||
"iot_alert_level",
|
||||
"sys_job_status"
|
||||
);
|
||||
const data = reactive({
|
||||
form: {
|
||||
condition: "all", // 触发器条件
|
||||
triggers: [],
|
||||
actions: [],
|
||||
},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
tenantId: null,
|
||||
alertName: null,
|
||||
alertLevel: null,
|
||||
productId: null,
|
||||
triggers: null,
|
||||
actions: null,
|
||||
status: null,
|
||||
},
|
||||
rules: {
|
||||
alertName: [
|
||||
{ required: true, message: "告警名称不能为空", trigger: "blur" },
|
||||
],
|
||||
alertLevel: [
|
||||
{ required: true, message: "告警级别不能为空", trigger: "blur" },
|
||||
],
|
||||
productId: [{ required: true, message: "产品ID不能为空", trigger: "blur" }],
|
||||
triggers: [{ required: true, message: "触发器不能为空", trigger: "blur" }],
|
||||
actions: [{ required: true, message: "执行动作不能为空", trigger: "blur" }],
|
||||
},
|
||||
// 产品
|
||||
productInfo: {},
|
||||
thingsModel: {},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules, productInfo } = toRefs(data);
|
||||
|
||||
watch(product, (val) => {
|
||||
productInfo.value = val;
|
||||
if (productInfo.value && productInfo.value.productId !== 0) {
|
||||
queryParams.value.productId = productInfo.value.productId;
|
||||
getList();
|
||||
// TODO:获取缓存的Json物模型
|
||||
// getModel(val.productId).then(response => {
|
||||
// thingsModel.value = JSON.parse(response.data);
|
||||
// });
|
||||
}
|
||||
});
|
||||
|
||||
/** 查询设备告警列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listAlertRule(queryParams.value).then((response) => {
|
||||
alertList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
alertId: null,
|
||||
tenantId: null,
|
||||
alertName: null,
|
||||
alertLevel: null,
|
||||
productId: null,
|
||||
// triggers: null,
|
||||
// actions: null,
|
||||
status: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
remark: null,
|
||||
condition: "all", // 触发器条件
|
||||
triggers: [
|
||||
{
|
||||
id: "",
|
||||
name: "",
|
||||
value: "",
|
||||
deviceId: 0,
|
||||
deviceName: "请选择一个设备",
|
||||
source: 1, //1=设备，2=定时，3=告警输出
|
||||
modelType: 1, // 1=属性，2=功能
|
||||
jobId: 0,
|
||||
cronExpression: "",
|
||||
isAdvance: 0,
|
||||
},
|
||||
],
|
||||
actions: [
|
||||
{
|
||||
id: "",
|
||||
name: "",
|
||||
value: "",
|
||||
deviceId: 0,
|
||||
deviceName: "请选择一个设备",
|
||||
source: 1, //1=设备，2=定时，3=告警输出
|
||||
modelType: 1, // 1=属性，2=功能
|
||||
},
|
||||
],
|
||||
};
|
||||
proxy.resetForm("alertRef");
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.alertId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加设备告警";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _alertId = row.alertId || ids.value;
|
||||
getAlertRule(_alertId).then((response) => {
|
||||
form.value = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改设备告警";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["alertRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.alertId != null) {
|
||||
updateAlertRule(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
addAlertRule(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _alertIds = row.alertId || ids.value;
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除设备告警编号为"' + _alertIds + '"的数据项？')
|
||||
.then(function () {
|
||||
return delAlertRule(_alertIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"device/alert/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`alert_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
/** 添加动作 */
|
||||
const addActionItem = () => {
|
||||
form.value.actions.push({
|
||||
id: "",
|
||||
name: "",
|
||||
value: "",
|
||||
});
|
||||
};
|
||||
/** 删除动作 */
|
||||
const removeActionItem = (index) => {
|
||||
form.value.actions.splice(index, 1);
|
||||
};
|
||||
/** 触发器源改变事件 **/
|
||||
const changeTriggerSource = () => {
|
||||
setTriggerSource();
|
||||
};
|
||||
/** 设置触发器源 **/
|
||||
const setTriggerSource = () => {
|
||||
// 触发器智能包含一个定时
|
||||
let hasTimer = false;
|
||||
for (let i = 0; i < form.value.triggers.length; i++) {
|
||||
if (form.value.triggers[i].source === 2) {
|
||||
hasTimer = true;
|
||||
}
|
||||
}
|
||||
if (hasTimer) {
|
||||
triggerSource.value = [
|
||||
{
|
||||
value: 1,
|
||||
label: "设备",
|
||||
},
|
||||
];
|
||||
} else {
|
||||
//定时
|
||||
triggerSource.value = [
|
||||
{
|
||||
value: 1,
|
||||
label: "设备",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "定时",
|
||||
},
|
||||
];
|
||||
}
|
||||
};
|
||||
/** 添加触发器 */
|
||||
const addTriggerItem = () => {
|
||||
setTriggerSource();
|
||||
form.value.triggers.push({
|
||||
id: "",
|
||||
name: "",
|
||||
value: "",
|
||||
deviceId: 0,
|
||||
deviceName: "请选择一个设备",
|
||||
source: 1, //1=设备，2=定时，3=告警输出
|
||||
modelType: 1, // 1=属性，2=功能
|
||||
jobId: 0,
|
||||
cronExpression: "",
|
||||
isAdvance: 0,
|
||||
});
|
||||
};
|
||||
/** 删除触发器 */
|
||||
const removeTriggerItem = (index) => {
|
||||
form.value.triggers.splice(index, 1);
|
||||
setTriggerSource();
|
||||
};
|
||||
/** cron表达式按钮操作 */
|
||||
const handleShowCron = (item, index) => {
|
||||
expression.value = item.cronExpression;
|
||||
triggerIndex.value = index;
|
||||
openCron.value = true;
|
||||
};
|
||||
/** 确定后回传值 */
|
||||
const crontabFill = (value) => {
|
||||
form.value.triggers[triggerIndex.value].cronExpression = value;
|
||||
};
|
||||
/** 修改重复事件 **/
|
||||
const repeatChange = (data) => {
|
||||
if (timerWeekRepeatValue.value === 1) {
|
||||
// 每天
|
||||
timerWeekValue.value = [1, 2, 3, 4, 5, 6, 7];
|
||||
form.value.repeat = 1;
|
||||
} else if (timerWeekRepeatValue.value === 2) {
|
||||
// 仅此一次
|
||||
timerWeekValue.value = [];
|
||||
form.value.isRepeat = 0;
|
||||
} else {
|
||||
// 指定
|
||||
form.value.isRepeat = 1;
|
||||
}
|
||||
gentCronExpression();
|
||||
};
|
||||
/** 星期改变事件 **/
|
||||
const weekChange = (data) => {
|
||||
gentCronExpression();
|
||||
};
|
||||
/** 时间改变事件 **/
|
||||
const timeChange = (data) => {
|
||||
gentCronExpression();
|
||||
};
|
||||
/**自定义cron表达式选项改变事件 */
|
||||
const customerCronChange = (data) => {
|
||||
gentCronExpression();
|
||||
};
|
||||
/** 生成cron表达式**/
|
||||
const gentCronExpression = () => {
|
||||
if (timerTimeValue.value === "") {
|
||||
proxy.$modal.alertError("执行时间不能为空");
|
||||
}
|
||||
let minute = timerTimeValue.value.substring(0, 2);
|
||||
let hour = timerTimeValue.value.substring(3);
|
||||
let week = "*";
|
||||
if (timerWeekValue.value.length > 0) {
|
||||
week = timerWeekValue.value;
|
||||
}
|
||||
form.value.triggers[triggerIndex.value].cronExpression =
|
||||
"0 " + minute + " " + hour + " ? * " + week;
|
||||
};
|
||||
|
||||
getList();
|
||||
</script>
|
||||
@ -12,7 +12,12 @@
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button icon="upload" plain size="small" type="success" @click=""
|
||||
<el-button
|
||||
icon="upload"
|
||||
plain
|
||||
size="small"
|
||||
type="success"
|
||||
@click="handleImport"
|
||||
>导入
|
||||
</el-button>
|
||||
</el-col>
|
||||
@ -22,7 +27,7 @@
|
||||
plain
|
||||
size="small"
|
||||
type="warning"
|
||||
@click="emits('model-updated')"
|
||||
@click="getList"
|
||||
>刷新
|
||||
</el-button>
|
||||
</el-col>
|
||||
@ -32,14 +37,24 @@
|
||||
plain
|
||||
size="small"
|
||||
type="info"
|
||||
@click="openJsonViewer = true"
|
||||
@click="handleOpenThingsModel"
|
||||
>预览
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
icon="download"
|
||||
plain
|
||||
size="small"
|
||||
type="success"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-table :data="modelList" border size="small">
|
||||
<el-table-column align="center" label="名称" prop="name" />
|
||||
<el-table-column align="center" label="标识符" prop="id" />
|
||||
<el-table-column align="center" label="名称" prop="modelName" />
|
||||
<el-table-column align="center" label="标识符" prop="identifier" />
|
||||
|
||||
<!-- <el-table-column align="center" label="首页显示" prop="isTop">-->
|
||||
<!-- <template #default="{row}">-->
|
||||
@ -53,41 +68,44 @@
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column align="center" label="物模型类别" prop="type">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.type === 3" size="small">事件</el-tag>
|
||||
<el-tag v-else-if="row.type === 2" size="small">功能</el-tag>
|
||||
<el-tag v-else-if="row.type === 1" size="small">属性</el-tag>
|
||||
<el-tag v-else size="small">未知</el-tag>
|
||||
<model-type-tags :type="row.type" />
|
||||
<!-- <el-tag v-if="row.type === 3" size="small" type="danger">事件</el-tag>-->
|
||||
<!-- <el-tag v-else-if="row.type === 2" size="small" type="success">功能</el-tag>-->
|
||||
<!-- <el-tag v-else-if="row.type === 1" size="small">属性</el-tag>-->
|
||||
<!-- <el-tag v-else size="small">未知</el-tag>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数据类型" prop="datatype">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.datatype === 'integer'" size="small">整数</el-tag>
|
||||
<el-tag v-else-if="row.datatype === 'decimal'" size="small"
|
||||
>小数</el-tag
|
||||
>
|
||||
>小数
|
||||
</el-tag>
|
||||
<el-tag v-else-if="row.datatype === 'bool'" size="small">布尔</el-tag>
|
||||
<el-tag v-else-if="row.datatype === 'enum'" size="small">枚举</el-tag>
|
||||
<el-tag v-else-if="row.datatype === 'string'" size="small"
|
||||
>字符串</el-tag
|
||||
>
|
||||
>字符串
|
||||
</el-tag>
|
||||
<el-tag v-else-if="row.datatype === 'array'" size="small"
|
||||
>数组</el-tag
|
||||
>
|
||||
>数组
|
||||
</el-tag>
|
||||
<el-tag v-else size="small">未知</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否只读" prop="isReadonly">
|
||||
<el-table-column align="center" label="只读数据" prop="isOnlyRead">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
:type="
|
||||
row.isReadonly === 0
|
||||
row.isOnlyRead === 0
|
||||
? 'success'
|
||||
: row.isReadonly === 1
|
||||
: row.isOnlyRead === 1
|
||||
? 'warning'
|
||||
: ''
|
||||
"
|
||||
>
|
||||
{{ row.isReadonly === 0 ? "否" : row.isReadonly === 1 ? "是" : "" }}
|
||||
{{
|
||||
row.isOnlyRead === 0 ? "否" : row.isOnlyRead === 1 ? "是" : "未知"
|
||||
}}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -128,16 +146,16 @@
|
||||
<!-- 添加或修改物模型对话框 -->
|
||||
<el-dialog v-model="open" :title="title" append-to-body width="600px">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="模型名称" prop="name">
|
||||
<el-form-item label="模型名称" prop="modelName">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
v-model="form.modelName"
|
||||
placeholder="请输入物模型名称，例如：温度"
|
||||
style="width: 385px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符" prop="id">
|
||||
<el-form-item label="标识符" prop="identifier">
|
||||
<el-input
|
||||
v-model="form.id"
|
||||
v-model="form.identifier"
|
||||
placeholder="请输入标识符，例如：temperature"
|
||||
style="width: 385px"
|
||||
/>
|
||||
@ -149,9 +167,9 @@
|
||||
<el-radio-button :label="3">事件</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否只读" prop="isReadonly">
|
||||
<el-form-item label="只读数据" prop="isOnlyRead">
|
||||
<el-switch
|
||||
v-model="form.isReadonly"
|
||||
v-model="form.isOnlyRead"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
active-color="#13ce66"
|
||||
@ -336,10 +354,74 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="openJsonViewer" append-to-body width="600px">
|
||||
<json-viewer :value="JSON.parse(modelJson)" copyable>
|
||||
<template #copy>复制</template>
|
||||
</json-viewer>
|
||||
<el-dialog
|
||||
v-model="openJsonViewer"
|
||||
:title="title"
|
||||
append-to-body
|
||||
width="600px"
|
||||
>
|
||||
<div
|
||||
:style="{
|
||||
height: '60vh',
|
||||
overflowY: 'scroll',
|
||||
overflowX: 'hidden',
|
||||
}"
|
||||
>
|
||||
<json-viewer :expandDepth="4" :value="thingsModel" copyable expanded>
|
||||
<template #copy>复制</template>
|
||||
</json-viewer>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 用户导入对话框 -->
|
||||
<el-dialog
|
||||
v-model="upload.open"
|
||||
:title="upload.title"
|
||||
append-to-body
|
||||
width="400px"
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
:action="upload.url"
|
||||
:auto-upload="false"
|
||||
:disabled="upload.isUploading"
|
||||
:headers="upload.headers"
|
||||
:limit="1"
|
||||
:on-progress="handleFileUploadProgress"
|
||||
:on-success="handleFileSuccess"
|
||||
accept=".json"
|
||||
drag
|
||||
>
|
||||
<el-icon class="el-icon--upload">
|
||||
<upload-filled />
|
||||
</el-icon>
|
||||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||||
<template #tip>
|
||||
<div class="el-upload__tip text-center">
|
||||
<!-- <div class="el-upload__tip">-->
|
||||
<!-- <el-checkbox-->
|
||||
<!-- v-model="upload.updateSupport"-->
|
||||
<!-- />-->
|
||||
<!-- 是否更新已经存在的用户数据-->
|
||||
<!-- </div>-->
|
||||
<!-- <span>仅允许导入xls、xlsx格式文件。</span>-->
|
||||
<!-- <el-link-->
|
||||
<!-- :underline="false"-->
|
||||
<!-- style="font-size: 12px; vertical-align: baseline"-->
|
||||
<!-- type="primary"-->
|
||||
<!-- @click="importTemplate"-->
|
||||
<!-- >下载模板-->
|
||||
<!-- </el-link-->
|
||||
<!-- >-->
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitFileForm">确 定</el-button>
|
||||
<el-button @click="upload.open = false">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@ -347,12 +429,18 @@
|
||||
<script setup>
|
||||
import { useRoute } from "vue-router";
|
||||
import { reactive, ref, toRefs, watch } from "vue";
|
||||
import { updateProduct } from "@/api/product/product";
|
||||
import "vue3-json-viewer/dist/index.css";
|
||||
import { JsonViewer } from "vue3-json-viewer";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
import {
|
||||
addModel,
|
||||
delModel,
|
||||
getModel,
|
||||
listModel,
|
||||
updateModel,
|
||||
} from "@/api/thingsmodel/model";
|
||||
import ModelTypeTags from "@/views/components/model-type-tags";
|
||||
import { getToken } from "@/utils/auth";
|
||||
|
||||
const emits = defineEmits(["model-updated"]);
|
||||
|
||||
@ -361,13 +449,17 @@ const props = defineProps({
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
productId: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
modelJson: {
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
const { product, modelJson } = toRefs(props);
|
||||
const { product, modelJson, productId } = toRefs(props);
|
||||
const formRef = ref();
|
||||
|
||||
const uploadRef = ref();
|
||||
const route = useRoute();
|
||||
/**
|
||||
* 检查标识符唯一性
|
||||
@ -375,25 +467,40 @@ const route = useRoute();
|
||||
const checkIdIsUnique = (rule, value, callback) => {
|
||||
if (
|
||||
modelList.value.findIndex(
|
||||
(el) => el.id === value && el.modelId !== form.value.modelId
|
||||
(el) => el.identifier === value && el.modelId !== form.value.modelId
|
||||
) > -1
|
||||
) {
|
||||
callback(new Error("标识符不可重复"));
|
||||
callback(new Error("同一产品下,标识符必须唯一"));
|
||||
}
|
||||
callback();
|
||||
};
|
||||
const data = reactive({
|
||||
// 物模型
|
||||
thingsModel: {},
|
||||
queryParams: {
|
||||
// pageNum: 1,
|
||||
// pageSize: 100,
|
||||
modelName: null,
|
||||
productId: null,
|
||||
tenantId: null,
|
||||
identifier: null,
|
||||
type: null,
|
||||
datatype: null,
|
||||
specs: null,
|
||||
isTop: null,
|
||||
isMonitor: null,
|
||||
},
|
||||
form: {},
|
||||
rules: {
|
||||
// TODO: 标识符 id 不可重复
|
||||
name: [
|
||||
modelName: [
|
||||
{
|
||||
required: true,
|
||||
message: "物模型名称不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
id: [
|
||||
identifier: [
|
||||
{
|
||||
required: true,
|
||||
message: "标识符，产品下唯一不能为空",
|
||||
@ -403,6 +510,10 @@ const data = reactive({
|
||||
validator: checkIdIsUnique,
|
||||
trigger: "change",
|
||||
},
|
||||
{
|
||||
validator: checkIdIsUnique,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
datatype: [
|
||||
{
|
||||
@ -421,7 +532,69 @@ const data = reactive({
|
||||
},
|
||||
});
|
||||
const modelList = ref([]);
|
||||
const { form, rules } = toRefs(data);
|
||||
const { form, rules, queryParams, thingsModel } = toRefs(data);
|
||||
|
||||
/*** 用户导入参数 */
|
||||
const upload = reactive({
|
||||
// 是否显示弹出层（用户导入）
|
||||
open: false,
|
||||
// 弹出层标题（用户导入）
|
||||
title: "",
|
||||
// 是否禁用上传
|
||||
isUploading: false,
|
||||
// 是否更新已经存在的用户数据
|
||||
updateSupport: 0,
|
||||
// 设置上传的请求头部
|
||||
headers: { Authorization: "Bearer " + getToken() },
|
||||
// 上传的地址
|
||||
url:
|
||||
import.meta.env.VITE_APP_BASE_API +
|
||||
"/thingsmodel/model/importData/" +
|
||||
productId.value,
|
||||
});
|
||||
|
||||
/** 下载模板操作 */
|
||||
function importTemplate() {
|
||||
proxy.download(
|
||||
"system/user/importTemplate",
|
||||
{},
|
||||
`user_template_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
/** 导入按钮操作 */
|
||||
function handleImport() {
|
||||
upload.title = "用户导入";
|
||||
upload.open = true;
|
||||
}
|
||||
|
||||
/**文件上传中处理 */
|
||||
const handleFileUploadProgress = (event, file, fileList) => {
|
||||
upload.isUploading = true;
|
||||
};
|
||||
/** 文件上传成功处理 */
|
||||
const handleFileSuccess = (response, file, fileList) => {
|
||||
upload.open = false;
|
||||
upload.isUploading = false;
|
||||
uploadRef.value.handleRemove(file);
|
||||
if (response.code === 200) {
|
||||
ElMessageBox.alert(
|
||||
"<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
|
||||
response.msg +
|
||||
"</div>",
|
||||
"导入结果",
|
||||
{ dangerouslyUseHTMLString: true }
|
||||
);
|
||||
getList();
|
||||
} else {
|
||||
ElMessage.error(response.msg ?? "导入失败");
|
||||
}
|
||||
};
|
||||
|
||||
/** 提交上传文件 */
|
||||
function submitFileForm() {
|
||||
uploadRef.value.submit();
|
||||
}
|
||||
|
||||
const open = ref(false); // 是否显示编辑对话框
|
||||
const openJsonViewer = ref(false);
|
||||
@ -432,36 +605,55 @@ const modelTypeMap = new Map([
|
||||
[2, "functions"],
|
||||
[3, "events"],
|
||||
]);
|
||||
watch(modelJson, (value) => {
|
||||
if (value) {
|
||||
try {
|
||||
const { functions, events, properties } = JSON.parse(value);
|
||||
modelList.value = [
|
||||
...properties.map((el) => ({
|
||||
...el,
|
||||
modelType: "properties",
|
||||
type: 1,
|
||||
})),
|
||||
...functions.map((el) => ({
|
||||
...el,
|
||||
modelType: "functions",
|
||||
type: 2,
|
||||
})),
|
||||
...events.map((el) => ({
|
||||
...el,
|
||||
modelType: "events",
|
||||
type: 3,
|
||||
})),
|
||||
];
|
||||
modelList.value = modelList.value.sort(
|
||||
(a, b) => b.createTime - a.createTime
|
||||
);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
});
|
||||
// watch(modelJson, (value) => {
|
||||
// if (value) {
|
||||
// try {
|
||||
// const { functions, events, properties } = JSON.parse(value);
|
||||
// modelList.value = [
|
||||
// ...properties.map((el) => ({
|
||||
// ...el,
|
||||
// modelType: "properties",
|
||||
// type: 1
|
||||
// })),
|
||||
// ...functions.map((el) => ({
|
||||
// ...el,
|
||||
// modelType: "functions",
|
||||
// type: 2
|
||||
// })),
|
||||
// ...events.map((el) => ({
|
||||
// ...el,
|
||||
// modelType: "events",
|
||||
// type: 3
|
||||
// }))
|
||||
// ];
|
||||
// modelList.value = modelList.value.sort(
|
||||
// (a, b) => b.createTime - a.createTime
|
||||
// );
|
||||
// } catch (e) {
|
||||
// console.log(e);
|
||||
// }
|
||||
// }
|
||||
// });
|
||||
|
||||
const getList = () => {
|
||||
listModel(queryParams.value).then((response) => {
|
||||
modelList.value = response.rows;
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
productId,
|
||||
(value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
queryParams.value.productId = value;
|
||||
getList();
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
const reset = () => {
|
||||
form.value = {
|
||||
templateId: null,
|
||||
@ -470,13 +662,13 @@ const reset = () => {
|
||||
userName: null,
|
||||
tenantId: null,
|
||||
tenantName: null,
|
||||
id: null,
|
||||
identifier: null,
|
||||
type: 1,
|
||||
datatype: "integer",
|
||||
isSys: null,
|
||||
isTop: null,
|
||||
isMonitor: null,
|
||||
isReadonly: 0,
|
||||
isOnlyRead: 0,
|
||||
delFlag: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
@ -509,9 +701,41 @@ const handleAdd = () => {
|
||||
};
|
||||
|
||||
const handleUpdate = (row) => {
|
||||
form.value = cloneDeep(row);
|
||||
open.value = true;
|
||||
title.value = "修改物模型";
|
||||
reset();
|
||||
getModel(row.modelId).then((response) => {
|
||||
let tempForm = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改物模型";
|
||||
// Json转对象
|
||||
tempForm.specs = JSON.parse(tempForm.specs);
|
||||
if (!tempForm.specs.enumList) {
|
||||
tempForm.specs.enumList = [
|
||||
{
|
||||
value: "",
|
||||
text: "",
|
||||
},
|
||||
];
|
||||
}
|
||||
if (!tempForm.specs.arrayType) {
|
||||
tempForm.specs.arrayType = "int";
|
||||
}
|
||||
form.value = tempForm;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出物模型json
|
||||
*/
|
||||
const handleExport = () => {
|
||||
ElMessageBox.confirm(`是否确认导出物模型json?`)
|
||||
.then(() => {
|
||||
makeThingsModelObject();
|
||||
const jsonBlob = new Blob([JSON.stringify(thingsModel.value)], {
|
||||
type: "text/plain;charset=utf-8",
|
||||
});
|
||||
saveAs(jsonBlob, `things-model-${productId.value}.json`);
|
||||
})
|
||||
.catch(() => {});
|
||||
};
|
||||
|
||||
/**
|
||||
@ -521,19 +745,16 @@ const handleUpdate = (row) => {
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(`是否确认删除`)
|
||||
.then(() => {
|
||||
const _model = JSON.parse(modelJson.value);
|
||||
const modelType = modelTypeMap.get(row.type);
|
||||
_model[modelType] = _model[modelType].filter(
|
||||
(el) => el.modelId !== row.modelId
|
||||
);
|
||||
return updateProduct({
|
||||
productId: product.value.productId,
|
||||
thingsModelsJson: JSON.stringify(_model),
|
||||
});
|
||||
// const _model = JSON.parse(modelJson.value);
|
||||
// const modelType = modelTypeMap.get(row.type);
|
||||
// _model[modelType] = _model[modelType].filter(
|
||||
// (el) => el.modelId !== row.modelId
|
||||
// );
|
||||
return delModel(row.modelId);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
ElMessage.success("删除成功");
|
||||
emits("model-updated");
|
||||
});
|
||||
};
|
||||
// 类型改变
|
||||
@ -549,7 +770,9 @@ const typeChange = (label) => {
|
||||
form.value.datatype = "integer";
|
||||
}
|
||||
};
|
||||
|
||||
const dataTypeChange = () => {};
|
||||
|
||||
// 实时监测改变
|
||||
const changeMonitor = (isMonitor) => {
|
||||
if (
|
||||
@ -561,6 +784,57 @@ const changeMonitor = (isMonitor) => {
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成物模型json对象
|
||||
*/
|
||||
const makeThingsModelObject = () => {
|
||||
// 生成物模型
|
||||
thingsModel.value = {
|
||||
properties: [],
|
||||
functions: [],
|
||||
events: [],
|
||||
};
|
||||
for (let i = 0; i < modelList.value.length; i++) {
|
||||
let thingsItem = {};
|
||||
thingsItem.id = modelList.value[i].identifier;
|
||||
thingsItem.name = modelList.value[i].modelName;
|
||||
|
||||
thingsItem.isTop = modelList.value[i].isTop;
|
||||
thingsItem.isMonitor = modelList.value[i].isMonitor;
|
||||
thingsItem.isOnlyRead = modelList.value[i].isOnlyRead;
|
||||
thingsItem.datatype = JSON.parse(modelList.value[i].specs);
|
||||
if (modelList.value[i].type === 1) {
|
||||
//属性
|
||||
// thingsItem.isTop = modelList.value[i].isTop;
|
||||
// thingsItem.isMonitor = modelList.value[i].isMonitor;
|
||||
// thingsItem.isOnlyRead = modelList.value[i].isOnlyRead;
|
||||
// thingsItem.datatype = JSON.parse(modelList.value[i].specs);
|
||||
thingsModel.value.properties.push(thingsItem);
|
||||
} else if (modelList.value[i].type === 2) {
|
||||
// 功能
|
||||
// thingsItem.isTop = modelList.value[i].isTop;
|
||||
// thingsItem.isMonitor = modelList.value[i].isMonitor;
|
||||
// thingsItem.isOnlyRead = modelList.value[i].isOnlyRead;
|
||||
// thingsItem.datatype = JSON.parse(modelList.value[i].specs);
|
||||
thingsModel.value.functions.push(thingsItem);
|
||||
} else if (modelList.value[i].type === 3) {
|
||||
// 事件
|
||||
// thingsItem.isTop = modelList.value[i].isTop;
|
||||
// thingsItem.isMonitor = modelList.value[i].isMonitor;
|
||||
// thingsItem.isOnlyRead = modelList.value[i].isOnlyRead;
|
||||
// thingsItem.datatype = JSON.parse(modelList.value[i].specs);
|
||||
thingsModel.value.events.push(thingsItem);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**查看物模型 */
|
||||
const handleOpenThingsModel = () => {
|
||||
makeThingsModelObject();
|
||||
title.value = "物模型";
|
||||
openJsonViewer.value = true;
|
||||
};
|
||||
|
||||
/** 添加枚举项 */
|
||||
const addEnumItem = () => {
|
||||
form.value.specs.enumList.push({
|
||||
@ -583,47 +857,54 @@ const submitForm = () => {
|
||||
form.value.specs = formatThingsSpecs();
|
||||
form.value.productId = product.value.productId;
|
||||
form.value.productName = product.value.productName;
|
||||
form.value.updateTime = Date.now();
|
||||
const _modelJson = JSON.parse(modelJson.value);
|
||||
const modelType = modelTypeMap.get(form.value.type);
|
||||
_modelJson[modelType].forEach((el, index) => {
|
||||
if (el.modelId === form.value.modelId) {
|
||||
_modelJson[modelType][index] = form.value;
|
||||
}
|
||||
});
|
||||
updateProduct({
|
||||
productId: product.value.productId,
|
||||
thingsModelsJson: JSON.stringify(_modelJson),
|
||||
}).then((resp) => {
|
||||
ElMessage.success("修改成功");
|
||||
open.value = false;
|
||||
emits("model-updated");
|
||||
});
|
||||
form.value.tenantId = product.value.tenantId;
|
||||
// form.value.updateTime = Date.now();
|
||||
// const _modelJson = JSON.parse(modelJson.value);
|
||||
// const modelType = modelTypeMap.get(form.value.type);
|
||||
// _modelJson[modelType].forEach((el, index) => {
|
||||
// if (el.modelId === form.value.modelId) {
|
||||
// _modelJson[modelType][index] = form.value;
|
||||
// }
|
||||
// });
|
||||
// updateProduct({
|
||||
// productId: product.value.productId,
|
||||
// thingsModelsJson: JSON.stringify(_modelJson)
|
||||
// }).then((resp) => {
|
||||
// ElMessage.success("修改成功");
|
||||
// open.value = false;
|
||||
// emits("model-updated");
|
||||
// });
|
||||
// if (this.form.type == 2) {
|
||||
// this.form.isMonitor = 0;
|
||||
// } else if (this.form.type == 3) {
|
||||
// this.form.isMonitor = 0;
|
||||
// this.form.isTop = 0;
|
||||
// }
|
||||
// updateModel(this.form).then((response) => {
|
||||
// this.$modal.msgSuccess("修改成功");
|
||||
// this.open = false;
|
||||
// this.getList();
|
||||
// });
|
||||
updateModel(form.value).then((response) => {
|
||||
ElMessage.success("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
// 格式化specs
|
||||
form.value.modelId = uuidv4();
|
||||
// form.value.modelId = uuidv4();
|
||||
form.value.specs = formatThingsSpecs();
|
||||
form.value.createTime = Date.now();
|
||||
// form.value.createTime = Date.now();
|
||||
form.value.productId = product.value.productId;
|
||||
form.value.productName = product.value.productName;
|
||||
form.value.tenantId = product.value.tenantId;
|
||||
// if (form.value.type === 2) {
|
||||
// form.value.isMonitor = 0;
|
||||
// } else if (form.value.type === 3) {
|
||||
// form.value.isMonitor = 0;
|
||||
// form.value.isTop = 0;
|
||||
// }
|
||||
const _modelJson = JSON.parse(modelJson.value);
|
||||
addModel(form.value).then((response) => {
|
||||
ElMessage.success("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
// const _modelJson = JSON.parse(modelJson.value);
|
||||
// _modelJson.properties.forEach((el, idx) => {
|
||||
// _modelJson.properties[idx] = {
|
||||
// ...el, modelId: uuidv4()
|
||||
@ -639,31 +920,31 @@ const submitForm = () => {
|
||||
// ...el, modelId: uuidv4()
|
||||
// };
|
||||
// });
|
||||
if (form.value.type === 1) {
|
||||
_modelJson.properties.push(form.value);
|
||||
} else if (form.value.type === 2) {
|
||||
_modelJson.functions.push(form.value);
|
||||
} else if (form.value.type === 3) {
|
||||
_modelJson.events.push(form.value);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
updateProduct({
|
||||
productId: product.value.productId,
|
||||
thingsModelsJson: JSON.stringify(_modelJson),
|
||||
}).then((resp) => {
|
||||
emits("model-updated");
|
||||
ElMessage.success("新增成功");
|
||||
open.value = false;
|
||||
});
|
||||
// if (form.value.type === 1) {
|
||||
// _modelJson.properties.push(form.value);
|
||||
// } else if (form.value.type === 2) {
|
||||
// _modelJson.functions.push(form.value);
|
||||
// } else if (form.value.type === 3) {
|
||||
// _modelJson.events.push(form.value);
|
||||
// } else {
|
||||
// return;
|
||||
// }
|
||||
// updateProduct({
|
||||
// productId: product.value.productId,
|
||||
// thingsModelsJson: JSON.stringify(_modelJson)
|
||||
// }).then((resp) => {
|
||||
// emits("model-updated");
|
||||
// ElMessage.success("新增成功");
|
||||
// open.value = false;
|
||||
// });
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 格式化显示数据定义 */
|
||||
const formatSpecsDisplay = (specs) => {
|
||||
// let specs = JSON.parse(json);
|
||||
const formatSpecsDisplay = (json) => {
|
||||
let specs = JSON.parse(json);
|
||||
if (!specs) {
|
||||
return;
|
||||
}
|
||||
@ -730,11 +1011,14 @@ const formatThingsSpecs = () => {
|
||||
} else if (form.value.datatype === "enum") {
|
||||
_data.enumList = form.value.specs.enumList;
|
||||
}
|
||||
// return JSON.stringify(data);
|
||||
return _data;
|
||||
console.log(_data);
|
||||
return JSON.stringify(_data);
|
||||
// return _data;
|
||||
};
|
||||
|
||||
function getModelData() {}
|
||||
|
||||
// getList();
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
730
src/views/thingsmodel/model/index.vue
Normal file
730
src/views/thingsmodel/model/index.vue
Normal file
@ -0,0 +1,730 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="物模型名称" prop="modelName">
|
||||
<el-input
|
||||
v-model="queryParams.modelName"
|
||||
clearable
|
||||
placeholder="请输入物模型名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="queryParams.productId"
|
||||
:remote-method="getProductOptions"
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
remote
|
||||
remote-show-suffix
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productOptions"
|
||||
:key="item.productId"
|
||||
:label="item.productName"
|
||||
:value="item.productId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="租户" prop="tenantId">
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.tenantId"-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入租户ID"-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<el-select
|
||||
v-model="queryParams.tenantId"
|
||||
:remote-method="getTenantOptions"
|
||||
filterable
|
||||
remote
|
||||
remote-show-suffix
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tenantOptions"
|
||||
:key="item.tenantId"
|
||||
:label="item.tenantName"
|
||||
:value="item.tenantId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符，产品下唯一" prop="identifier">
|
||||
<el-input
|
||||
v-model="queryParams.identifier"
|
||||
clearable
|
||||
placeholder="请输入标识符，产品下唯一"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否首页显示" prop="isTop">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.isTop"-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入是否首页显示"-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="是否实时监测" prop="isMonitor">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.isMonitor"-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入是否实时监测"-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button icon="Search" type="primary" @click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:model:add']"
|
||||
icon="Plus"
|
||||
plain
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:model:edit']"
|
||||
:disabled="single"
|
||||
icon="Edit"
|
||||
plain
|
||||
type="success"
|
||||
@click="handleUpdate"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:model:remove']"
|
||||
:disabled="multiple"
|
||||
icon="Delete"
|
||||
plain
|
||||
type="danger"
|
||||
@click="handleDelete"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:model:export']"
|
||||
icon="Download"
|
||||
plain
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="modelList"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" label="物模型ID" prop="modelId" />
|
||||
<el-table-column align="center" label="物模型名称" prop="modelName" />
|
||||
<el-table-column align="center" label="产品ID" prop="productId" />
|
||||
<el-table-column align="center" label="租户ID" prop="tenantId" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="标识符，产品下唯一"
|
||||
prop="identifier"
|
||||
/>
|
||||
<el-table-column align="center" label="模型类别" prop="type">
|
||||
<template #default="{ row }">
|
||||
<model-type-tags :type="row.type" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数据类型" prop="datatype">
|
||||
<template #default="{ row }">
|
||||
{{ dataTypeMap.get(row.datatype) ?? "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="数据定义"
|
||||
min-width="150"
|
||||
prop="specs"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- {{ formatSpecsDisplay(row.specs) }}-->
|
||||
<div v-html="formatSpecsDisplay(row.specs)"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="是否首页显示" prop="isTop" />-->
|
||||
<!-- <el-table-column align="center" label="是否实时监测" prop="isMonitor" />-->
|
||||
<el-table-column align="center" label="备注" prop="remark" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:model:edit']"
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:model:remove']"
|
||||
icon="Delete"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改物模型对话框 -->
|
||||
<el-dialog v-model="open" :title="title" append-to-body width="600px">
|
||||
<el-form
|
||||
ref="modelRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="left"
|
||||
label-width="160px"
|
||||
>
|
||||
<el-form-item label="物模型名称" prop="modelName">
|
||||
<el-input v-model="form.modelName" placeholder="请输入物模型名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="产品" prop="productId">
|
||||
<el-select
|
||||
v-model="form.productId"
|
||||
:remote-method="getProductOptions"
|
||||
filterable
|
||||
placeholder="请选择产品"
|
||||
remote
|
||||
remote-show-suffix
|
||||
>
|
||||
<el-option
|
||||
v-for="item in productOptions"
|
||||
:key="item.productId"
|
||||
:label="item.productName"
|
||||
:value="item.productId"
|
||||
/>
|
||||
</el-select>
|
||||
<!-- <el-input v-model="form.productId" placeholder="请输入产品ID" />-->
|
||||
</el-form-item>
|
||||
<el-form-item label="租户" prop="tenantId">
|
||||
<!-- <el-input v-model="form.tenantId" placeholder="请输入租户ID" />-->
|
||||
<el-select
|
||||
v-model="form.tenantId"
|
||||
:remote-method="getTenantOptions"
|
||||
filterable
|
||||
remote
|
||||
remote-show-suffix
|
||||
>
|
||||
<el-option
|
||||
v-for="item in tenantOptions"
|
||||
:key="item.tenantId"
|
||||
:label="item.tenantName"
|
||||
:value="item.tenantId"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符，产品下唯一" prop="identifier">
|
||||
<el-input
|
||||
v-model="form.identifier"
|
||||
placeholder="请输入标识符，产品下唯一"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否首页显示" prop="isTop">-->
|
||||
<!-- <el-input v-model="form.isTop" placeholder="请输入是否首页显示" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="是否实时监测" prop="isMonitor">-->
|
||||
<!-- <el-input v-model="form.isMonitor" placeholder="请输入是否实时监测" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入内容"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型类别" prop="type">
|
||||
<el-radio-group v-model="form.type" @change="typeChange(form.type)">
|
||||
<el-radio-button :label="1">属性</el-radio-button>
|
||||
<el-radio-button :label="2">功能</el-radio-button>
|
||||
<el-radio-button :label="3">事件</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item label="数据类型" prop="datatype">
|
||||
<el-select
|
||||
v-model="form.datatype"
|
||||
placeholder="请选择数据类型"
|
||||
style="width: 175px"
|
||||
@change="dataTypeChange"
|
||||
>
|
||||
<el-option key="integer" label="整数" value="integer"></el-option>
|
||||
<el-option key="decimal" label="小数" value="decimal"></el-option>
|
||||
<el-option
|
||||
key="bool"
|
||||
:disabled="form.type === 1"
|
||||
label="布尔"
|
||||
value="bool"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="enum"
|
||||
:disabled="form.type === 1"
|
||||
label="枚举"
|
||||
value="enum"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="string"
|
||||
:disabled="form.type === 1"
|
||||
label="字符串"
|
||||
value="string"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="array"
|
||||
:disabled="form.type === 1"
|
||||
label="数组"
|
||||
value="array"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="form.datatype === 'integer' || form.datatype === 'decimal'">
|
||||
<el-form-item label="取值范围">
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.min"
|
||||
placeholder="最小值"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="2" align="center">到</el-col>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.max"
|
||||
placeholder="最大值"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位">
|
||||
<el-input
|
||||
v-model="form.specs.unit"
|
||||
placeholder="请输入单位，例如：℃"
|
||||
style="width: 385px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="步长">
|
||||
<el-input
|
||||
v-model="form.specs.step"
|
||||
placeholder="请输入步长，例如：1"
|
||||
style="width: 385px"
|
||||
type="number"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'bool'">
|
||||
<el-form-item label="布尔值" prop="">
|
||||
<el-row style="margin-bottom: 10px">
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.falseText"
|
||||
placeholder="例如：关闭"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="10"> （0 值对应文本）</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.trueText"
|
||||
placeholder="例如：打开"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="10"> （1 值对应文本）</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'enum'">
|
||||
<el-form-item label="枚举项" prop="">
|
||||
<el-row
|
||||
v-for="(item, index) in form.specs.enumList"
|
||||
:key="'enum' + index"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="item.value"
|
||||
placeholder="参数值，例如：0"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="11">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
placeholder="参数描述，例如：中速档位"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col v-if="index !== 0" :offset="1" :span="2"
|
||||
><a style="color: #f56c6c" @click="removeEnumItem(index)"
|
||||
>删除</a
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
<div>
|
||||
+ <a style="color: #409eff" @click="addEnumItem()">添加枚举项</a>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'string'">
|
||||
<el-form-item label="最大长度" prop="">
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.maxLength"
|
||||
placeholder="例如：1024"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="14">（字符串的最大长度）</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'array'">
|
||||
<el-form-item label="数组类型" prop="">
|
||||
<el-radio-group v-model="form.specs.arrayType">
|
||||
<el-radio label="int">int（整数）</el-radio>
|
||||
<el-radio label="double">double（小数）</el-radio>
|
||||
<el-radio label="string">string（字符串）</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script name="Model" setup>
|
||||
import {
|
||||
addModel,
|
||||
delModel,
|
||||
getModel,
|
||||
listModel,
|
||||
updateModel,
|
||||
} from "@/api/thingsmodel/model";
|
||||
import { formatSpecsDisplay } from "@/utils/thingsmodel";
|
||||
import { listProduct } from "@/api/product/product";
|
||||
import { listTenant } from "@/api/system/tenant";
|
||||
import ModelTypeTags from "@/views/components/model-type-tags";
|
||||
import { dataTypeMap } from "../../../constant/dict";
|
||||
import { ref } from "vue";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const modelList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const productOptions = ref([]);
|
||||
const tenantOptions = ref([]);
|
||||
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
modelName: null,
|
||||
productId: null,
|
||||
tenantId: null,
|
||||
identifier: null,
|
||||
type: null,
|
||||
datatype: null,
|
||||
specs: null,
|
||||
isTop: null,
|
||||
isMonitor: null,
|
||||
},
|
||||
rules: {
|
||||
modelName: [
|
||||
{ required: true, message: "物模型名称不能为空", trigger: "blur" },
|
||||
],
|
||||
productId: [{ required: true, message: "产品ID不能为空", trigger: "blur" }],
|
||||
tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
|
||||
identifier: [
|
||||
{
|
||||
required: true,
|
||||
message: "标识符，产品下唯一不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
type: [{ required: true, message: "模型类别不能为空", trigger: "change" }],
|
||||
datatype: [
|
||||
{ required: true, message: "数据类型不能为空", trigger: "change" },
|
||||
],
|
||||
specs: [{ required: true, message: "数据定义不能为空", trigger: "blur" }],
|
||||
isTop: [
|
||||
{ required: true, message: "是否首页显示不能为空", trigger: "blur" },
|
||||
],
|
||||
isMonitor: [
|
||||
{ required: true, message: "是否实时监测不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物模型列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listModel(queryParams.value).then((response) => {
|
||||
modelList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
modelId: null,
|
||||
modelName: null,
|
||||
productId: null,
|
||||
tenantId: null,
|
||||
identifier: null,
|
||||
type: 1,
|
||||
datatype: "integer",
|
||||
specs: {
|
||||
enumList: [
|
||||
{
|
||||
value: "",
|
||||
text: "",
|
||||
},
|
||||
],
|
||||
arrayType: "int",
|
||||
},
|
||||
isTop: 0,
|
||||
isMonitor: 0,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
remark: null,
|
||||
};
|
||||
proxy.resetForm("modelRef");
|
||||
}
|
||||
|
||||
const dataTypeChange = () => {};
|
||||
|
||||
// 类型改变
|
||||
const typeChange = (label) => {
|
||||
// if (label === 2 || label === 3) {
|
||||
// form.value.isMonitor = 0;
|
||||
// }
|
||||
if (
|
||||
label === 1 &&
|
||||
form.value.datatype !== "integer" &&
|
||||
form.value.datatype !== "decimal"
|
||||
) {
|
||||
form.value.datatype = "integer";
|
||||
}
|
||||
};
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.modelId);
|
||||
single.value = selection.length != 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
// 格式化物模型
|
||||
const formatThingsSpecs = () => {
|
||||
let _data = {};
|
||||
_data.type = form.value.datatype;
|
||||
if (form.value.datatype === "integer" || form.value.datatype === "decimal") {
|
||||
_data.min = Number(form.value.specs.min);
|
||||
_data.max = Number(form.value.specs.max);
|
||||
_data.unit = form.value.specs.unit;
|
||||
_data.step = Number(form.value.specs.step);
|
||||
} else if (form.value.datatype === "string") {
|
||||
_data.maxLength = Number(form.value.specs.maxLength);
|
||||
} else if (form.value.datatype === "bool") {
|
||||
_data.falseText = form.value.specs.falseText;
|
||||
_data.trueText = form.value.specs.trueText;
|
||||
} else if (form.value.datatype === "array") {
|
||||
_data.arrayType = form.value.specs.arrayType;
|
||||
} else if (form.value.datatype === "enum") {
|
||||
_data.enumList = form.value.specs.enumList;
|
||||
}
|
||||
console.log(_data);
|
||||
return JSON.stringify(_data);
|
||||
// return _data;
|
||||
};
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加物模型";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _modelId = row.modelId || ids.value;
|
||||
getModel(_modelId).then((response) => {
|
||||
let tempForm = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改物模型";
|
||||
// Json转对象
|
||||
tempForm.specs = JSON.parse(tempForm.specs);
|
||||
if (!tempForm.specs.enumList) {
|
||||
tempForm.specs.enumList = [
|
||||
{
|
||||
value: "",
|
||||
text: "",
|
||||
},
|
||||
];
|
||||
}
|
||||
if (!tempForm.specs.arrayType) {
|
||||
tempForm.specs.arrayType = "int";
|
||||
}
|
||||
form.value = tempForm;
|
||||
// form.value = response.data;
|
||||
// open.value = true;
|
||||
// title.value = "修改物模型";
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["modelRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.modelId != null) {
|
||||
form.value.specs = formatThingsSpecs();
|
||||
updateModel(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
form.value.specs = formatThingsSpecs();
|
||||
addModel(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _modelIds = row.modelId || ids.value;
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除物模型编号为"' + _modelIds + '"的数据项？')
|
||||
.then(function () {
|
||||
return delModel(_modelIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"thingsmodel/model/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`model_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
const productOptionsLoading = ref(true);
|
||||
|
||||
function getProductOptions(keyword) {
|
||||
productOptionsLoading.value = true;
|
||||
listProduct({
|
||||
productName: keyword,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
}).then((resp) => {
|
||||
productOptions.value = resp.rows;
|
||||
productOptionsLoading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
const getTenantOptions = async (keyword) => {
|
||||
const response = await listTenant({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
tenantName: keyword,
|
||||
});
|
||||
tenantOptions.value = response.rows;
|
||||
};
|
||||
getTenantOptions();
|
||||
getProductOptions();
|
||||
getList();
|
||||
</script>
|
||||
688
src/views/thingsmodel/template/index.vue
Normal file
688
src/views/thingsmodel/template/index.vue
Normal file
@ -0,0 +1,688 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-form
|
||||
v-show="showSearch"
|
||||
ref="queryRef"
|
||||
:inline="true"
|
||||
:model="queryParams"
|
||||
label-position="left"
|
||||
label-width="100px"
|
||||
>
|
||||
<el-form-item label="物模型名称" prop="templateName">
|
||||
<el-input
|
||||
v-model="queryParams.templateName"
|
||||
clearable
|
||||
placeholder="请输入物模型名称"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="租户ID" prop="tenantId">
|
||||
<el-input
|
||||
v-model="queryParams.tenantId"
|
||||
clearable
|
||||
placeholder="请输入租户ID"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符，产品下唯一" prop="identifier">
|
||||
<el-input
|
||||
v-model="queryParams.identifier"
|
||||
clearable
|
||||
placeholder="请输入标识符，产品下唯一"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否系统通用" prop="isSys">
|
||||
<el-input
|
||||
v-model="queryParams.isSys"
|
||||
clearable
|
||||
placeholder="请输入是否系统通用"
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否首页显示" prop="isTop">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.isTop"-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入是否首页显示"-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="是否实时监测" prop="isMonitor">-->
|
||||
<!-- <el-input-->
|
||||
<!-- v-model="queryParams.isMonitor"-->
|
||||
<!-- clearable-->
|
||||
<!-- placeholder="请输入是否实时监测"-->
|
||||
<!-- @keyup.enter="handleQuery"-->
|
||||
<!-- />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button icon="Search" type="primary" @click="handleQuery"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="10" class="mb8">
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:template:add']"
|
||||
icon="Plus"
|
||||
plain
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:template:edit']"
|
||||
:disabled="single"
|
||||
icon="Edit"
|
||||
plain
|
||||
type="success"
|
||||
@click="handleUpdate"
|
||||
>修改
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:template:remove']"
|
||||
:disabled="multiple"
|
||||
icon="Delete"
|
||||
plain
|
||||
type="danger"
|
||||
@click="handleDelete"
|
||||
>删除
|
||||
</el-button>
|
||||
</el-col>
|
||||
<el-col :span="1.5">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:template:export']"
|
||||
icon="Download"
|
||||
plain
|
||||
type="warning"
|
||||
@click="handleExport"
|
||||
>导出
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar
|
||||
v-model:showSearch="showSearch"
|
||||
@queryTable="getList"
|
||||
></right-toolbar>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="templateList"
|
||||
border
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column align="center" type="selection" width="55" />
|
||||
<el-table-column align="center" label="物模型ID" prop="templateId" />
|
||||
<el-table-column align="center" label="物模型名称" prop="templateName" />
|
||||
<el-table-column align="center" label="租户ID" prop="tenantId" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="标识符，产品下唯一"
|
||||
prop="identifier"
|
||||
/>
|
||||
<el-table-column align="center" label="模型类别" prop="type">
|
||||
<template #default="{ row }">
|
||||
<el-tag size="small">
|
||||
{{ modelType.get(row.type) ?? "未知" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="数据类型">
|
||||
<template #default="{ row }">
|
||||
{{ dataTypeMap.get(row.datatype) ?? "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
header-align="center"
|
||||
label="数据定义"
|
||||
min-width="150"
|
||||
prop="specs"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<div v-html="formatSpecsDisplay(row.specs)"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="是否系统通用" prop="isSys">
|
||||
<template #default="{ row }">
|
||||
{{ isSysMap.get(row.isSys) ?? "未知" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column align="center" label="是否首页显示" prop="isTop" />-->
|
||||
<!-- <el-table-column align="center" label="是否实时监测" prop="isMonitor" />-->
|
||||
<el-table-column align="center" label="备注" prop="remark" />
|
||||
<el-table-column align="center" label="状态" prop="status" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
class-name="small-padding fixed-width"
|
||||
label="操作"
|
||||
>
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:template:edit']"
|
||||
icon="Edit"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleUpdate(scope.row)"
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
v-hasPermi="['thingsmodel:template:remove']"
|
||||
icon="Delete"
|
||||
link
|
||||
type="primary"
|
||||
@click="handleDelete(scope.row)"
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
v-model:page="queryParams.pageNum"
|
||||
:total="total"
|
||||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<!-- 添加或修改物模型模板对话框 -->
|
||||
<el-dialog v-model="open" :title="title" append-to-body width="500px">
|
||||
<el-form
|
||||
ref="templateRef"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="left"
|
||||
label-width="120px"
|
||||
>
|
||||
<el-form-item label="物模型名称" prop="templateName">
|
||||
<el-input
|
||||
v-model="form.templateName"
|
||||
placeholder="请输入物模型名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="租户ID" prop="tenantId">
|
||||
<el-input v-model="form.tenantId" placeholder="请输入租户ID" />
|
||||
</el-form-item>
|
||||
<el-form-item label="标识符，产品下唯一" prop="identifier">
|
||||
<el-input
|
||||
v-model="form.identifier"
|
||||
placeholder="请输入标识符，产品下唯一"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否系统通用" prop="isSys">
|
||||
<!-- <el-input v-model="form.isSys" placeholder="请输入是否系统通用" />-->
|
||||
<el-switch
|
||||
v-model="form.isSys"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="模型类别" prop="type">
|
||||
<el-radio-group v-model="form.type" @change="typeChange(form.type)">
|
||||
<el-radio-button :label="1">属性</el-radio-button>
|
||||
<el-radio-button :label="2">功能</el-radio-button>
|
||||
<el-radio-button :label="3">事件</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="是否首页显示" prop="isTop">-->
|
||||
<!-- <el-input v-model="form.isTop" placeholder="请输入是否首页显示" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- <el-form-item label="是否实时监测" prop="isMonitor">-->
|
||||
<!-- <el-input v-model="form.isMonitor" placeholder="请输入是否实时监测" />-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input
|
||||
v-model="form.remark"
|
||||
placeholder="请输入内容"
|
||||
type="textarea"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-divider />
|
||||
<el-form-item label="数据类型" prop="datatype">
|
||||
<el-select
|
||||
v-model="form.datatype"
|
||||
placeholder="请选择数据类型"
|
||||
style="width: 175px"
|
||||
@change="dataTypeChange"
|
||||
>
|
||||
<el-option key="integer" label="整数" value="integer"></el-option>
|
||||
<el-option key="decimal" label="小数" value="decimal"></el-option>
|
||||
<el-option
|
||||
key="bool"
|
||||
:disabled="form.type === 1"
|
||||
label="布尔"
|
||||
value="bool"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="enum"
|
||||
:disabled="form.type === 1"
|
||||
label="枚举"
|
||||
value="enum"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="string"
|
||||
:disabled="form.type === 1"
|
||||
label="字符串"
|
||||
value="string"
|
||||
></el-option>
|
||||
<el-option
|
||||
key="array"
|
||||
:disabled="form.type === 1"
|
||||
label="数组"
|
||||
value="array"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<div v-if="form.datatype === 'integer' || form.datatype === 'decimal'">
|
||||
<el-form-item label="取值范围">
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.min"
|
||||
placeholder="最小值"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="2" align="center">到</el-col>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.max"
|
||||
placeholder="最大值"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item label="单位">
|
||||
<el-input
|
||||
v-model="form.specs.unit"
|
||||
placeholder="请输入单位，例如：℃"
|
||||
style="width: 385px"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="步长">
|
||||
<el-input
|
||||
v-model="form.specs.step"
|
||||
placeholder="请输入步长，例如：1"
|
||||
style="width: 385px"
|
||||
type="number"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'bool'">
|
||||
<el-form-item label="布尔值" prop="">
|
||||
<el-row style="margin-bottom: 10px">
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.falseText"
|
||||
placeholder="例如：关闭"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="10"> （0 值对应文本）</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.trueText"
|
||||
placeholder="例如：打开"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="10"> （1 值对应文本）</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'enum'">
|
||||
<el-form-item label="枚举项" prop="">
|
||||
<el-row
|
||||
v-for="(item, index) in form.specs.enumList"
|
||||
:key="'enum' + index"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="item.value"
|
||||
placeholder="参数值，例如：0"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="11">
|
||||
<el-input
|
||||
v-model="item.text"
|
||||
placeholder="参数描述，例如：中速档位"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col v-if="index !== 0" :offset="1" :span="2"
|
||||
><a style="color: #f56c6c" @click="removeEnumItem(index)"
|
||||
>删除</a
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
<div>
|
||||
+ <a style="color: #409eff" @click="addEnumItem()">添加枚举项</a>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'string'">
|
||||
<el-form-item label="最大长度" prop="">
|
||||
<el-row>
|
||||
<el-col :span="9">
|
||||
<el-input
|
||||
v-model="form.specs.maxLength"
|
||||
placeholder="例如：1024"
|
||||
type="number"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :offset="1" :span="14">（字符串的最大长度）</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div v-if="form.datatype === 'array'">
|
||||
<el-form-item label="数组类型" prop="">
|
||||
<el-radio-group v-model="form.specs.arrayType">
|
||||
<el-radio label="int">int（整数）</el-radio>
|
||||
<el-radio label="double">double（小数）</el-radio>
|
||||
<el-radio label="string">string（字符串）</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script name="Template" setup>
|
||||
import {
|
||||
addTemplate,
|
||||
delTemplate,
|
||||
getTemplate,
|
||||
listTemplate,
|
||||
updateTemplate,
|
||||
} from "@/api/thingsmodel/template";
|
||||
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
|
||||
import { dataTypeMap, isSysMap, modelType } from "@/constant/dict";
|
||||
import { formatSpecsDisplay } from "@/utils/thingsmodel";
|
||||
import { listTenant } from "@/api/system/tenant";
|
||||
|
||||
const { proxy } = getCurrentInstance();
|
||||
|
||||
const templateList = ref([]);
|
||||
const open = ref(false);
|
||||
const loading = ref(true);
|
||||
const showSearch = ref(true);
|
||||
const ids = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const title = ref("");
|
||||
const tenantOptions = ref([]);
|
||||
const data = reactive({
|
||||
form: {},
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
templateName: null,
|
||||
tenantId: null,
|
||||
identifier: null,
|
||||
type: null,
|
||||
datatype: null,
|
||||
specs: null,
|
||||
isSys: null,
|
||||
isTop: null,
|
||||
isMonitor: null,
|
||||
status: null,
|
||||
},
|
||||
rules: {
|
||||
templateName: [
|
||||
{ required: true, message: "物模型名称不能为空", trigger: "blur" },
|
||||
],
|
||||
tenantId: [{ required: true, message: "租户ID不能为空", trigger: "blur" }],
|
||||
identifier: [
|
||||
{
|
||||
required: true,
|
||||
message: "标识符，产品下唯一不能为空",
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
type: [{ required: true, message: "模型类别不能为空", trigger: "change" }],
|
||||
datatype: [
|
||||
{ required: true, message: "数据类型不能为空", trigger: "change" },
|
||||
],
|
||||
specs: [{ required: true, message: "数据定义不能为空", trigger: "blur" }],
|
||||
isSys: [
|
||||
{ required: true, message: "是否系统通用不能为空", trigger: "blur" },
|
||||
],
|
||||
isTop: [
|
||||
{ required: true, message: "是否首页显示不能为空", trigger: "blur" },
|
||||
],
|
||||
isMonitor: [
|
||||
{ required: true, message: "是否实时监测不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
const { queryParams, form, rules } = toRefs(data);
|
||||
|
||||
/** 查询物模型模板列表 */
|
||||
function getList() {
|
||||
loading.value = true;
|
||||
listTemplate(queryParams.value).then((response) => {
|
||||
templateList.value = response.rows;
|
||||
total.value = response.total;
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 取消按钮
|
||||
function cancel() {
|
||||
open.value = false;
|
||||
reset();
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
function reset() {
|
||||
form.value = {
|
||||
templateId: null,
|
||||
templateName: null,
|
||||
tenantId: null,
|
||||
identifier: null,
|
||||
type: 1,
|
||||
datatype: "integer",
|
||||
specs: {
|
||||
enumList: [
|
||||
{
|
||||
value: "",
|
||||
text: "",
|
||||
},
|
||||
],
|
||||
arrayType: "int",
|
||||
},
|
||||
isSys: null,
|
||||
isTop: null,
|
||||
isMonitor: null,
|
||||
createBy: null,
|
||||
createTime: null,
|
||||
remark: null,
|
||||
status: null,
|
||||
};
|
||||
proxy.resetForm("templateRef");
|
||||
}
|
||||
|
||||
/** 搜索按钮操作 */
|
||||
function handleQuery() {
|
||||
queryParams.value.pageNum = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
/** 重置按钮操作 */
|
||||
function resetQuery() {
|
||||
proxy.resetForm("queryRef");
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
// 多选框选中数据
|
||||
function handleSelectionChange(selection) {
|
||||
ids.value = selection.map((item) => item.templateId);
|
||||
single.value = selection.length !== 1;
|
||||
multiple.value = !selection.length;
|
||||
}
|
||||
|
||||
/** 新增按钮操作 */
|
||||
function handleAdd() {
|
||||
reset();
|
||||
open.value = true;
|
||||
title.value = "添加物模型模板";
|
||||
}
|
||||
|
||||
/** 修改按钮操作 */
|
||||
function handleUpdate(row) {
|
||||
reset();
|
||||
const _templateId = row.templateId || ids.value;
|
||||
getTemplate(_templateId).then((response) => {
|
||||
const tempForm = response.data;
|
||||
open.value = true;
|
||||
title.value = "修改物模型模板";
|
||||
// Json转对象
|
||||
tempForm.specs = JSON.parse(tempForm.specs);
|
||||
if (!tempForm.specs.enumList) {
|
||||
tempForm.specs.enumList = [
|
||||
{
|
||||
value: "",
|
||||
text: "",
|
||||
},
|
||||
];
|
||||
}
|
||||
if (!tempForm.specs.arrayType) {
|
||||
tempForm.specs.arrayType = "int";
|
||||
}
|
||||
form.value = tempForm;
|
||||
});
|
||||
}
|
||||
|
||||
/** 提交按钮 */
|
||||
function submitForm() {
|
||||
proxy.$refs["templateRef"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (form.value.templateId != null) {
|
||||
// 格式化specs
|
||||
form.value.specs = formatThingsSpecs();
|
||||
updateTemplate(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("修改成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
} else {
|
||||
// 格式化specs
|
||||
form.value.specs = formatThingsSpecs();
|
||||
addTemplate(form.value).then((response) => {
|
||||
proxy.$modal.msgSuccess("新增成功");
|
||||
open.value = false;
|
||||
getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/** 删除按钮操作 */
|
||||
function handleDelete(row) {
|
||||
const _templateIds = row.templateId || ids.value;
|
||||
proxy.$modal
|
||||
.confirm('是否确认删除物模型模板编号为"' + _templateIds + '"的数据项？')
|
||||
.then(function () {
|
||||
return delTemplate(_templateIds);
|
||||
})
|
||||
.then(() => {
|
||||
getList();
|
||||
proxy.$modal.msgSuccess("删除成功");
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/** 导出按钮操作 */
|
||||
function handleExport() {
|
||||
proxy.download(
|
||||
"thingsmodel/template/export",
|
||||
{
|
||||
...queryParams.value,
|
||||
},
|
||||
`template_${new Date().getTime()}.xlsx`
|
||||
);
|
||||
}
|
||||
|
||||
// 类型改变
|
||||
const typeChange = (label) => {
|
||||
// if (label === 2 || label === 3) {
|
||||
// form.value.isMonitor = 0;
|
||||
// }
|
||||
if (
|
||||
label === 1 &&
|
||||
form.value.datatype !== "integer" &&
|
||||
form.value.datatype !== "decimal"
|
||||
) {
|
||||
console.log(form.value);
|
||||
form.value.datatype = "integer";
|
||||
}
|
||||
};
|
||||
const dataTypeChange = () => {};
|
||||
|
||||
/** 添加枚举项 */
|
||||
const addEnumItem = () => {
|
||||
form.value.specs.enumList.push({
|
||||
value: "",
|
||||
text: "",
|
||||
});
|
||||
};
|
||||
|
||||
/** 删除枚举项 */
|
||||
const removeEnumItem = (index) => {
|
||||
form.value.specs.enumList.splice(index, 1);
|
||||
};
|
||||
|
||||
// 格式化物模型
|
||||
const formatThingsSpecs = () => {
|
||||
const data = {};
|
||||
data.type = form.value.datatype;
|
||||
if (form.value.datatype === "integer" || form.value.datatype === "decimal") {
|
||||
data.min = Number(form.value.specs.min);
|
||||
data.max = Number(form.value.specs.max);
|
||||
data.unit = form.value.specs.unit;
|
||||
data.step = Number(form.value.specs.step);
|
||||
} else if (form.value.datatype === "string") {
|
||||
data.maxLength = Number(form.value.specs.maxLength);
|
||||
} else if (form.value.datatype === "bool") {
|
||||
data.falseText = form.value.specs.falseText;
|
||||
data.trueText = form.value.specs.trueText;
|
||||
} else if (form.value.datatype === "array") {
|
||||
data.arrayType = form.value.specs.arrayType;
|
||||
} else if (form.value.datatype === "enum") {
|
||||
data.enumList = form.value.specs.enumList;
|
||||
}
|
||||
return JSON.stringify(data);
|
||||
};
|
||||
|
||||
const getTenantList = async (keyword) => {
|
||||
const response = await listTenant({
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
tenantName: keyword,
|
||||
});
|
||||
tenantOptions.value = response.rows;
|
||||
};
|
||||
getList();
|
||||
getTenantList();
|
||||
</script>
|
||||
@ -31,7 +31,7 @@ export default defineConfig(({ mode, command }) => {
|
||||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
"/dev-api": {
|
||||
target: "http://192.168.1.5:1616",
|
||||
target: "http://192.168.1.6:1616",
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, ""),
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user