This commit is contained in:
2023-05-12 17:24:21 +08:00
parent e08ed33cd9
commit d780951020
13 changed files with 586 additions and 85 deletions

8
.env.caddy Normal file
View File

@ -0,0 +1,8 @@
# 页面标题
VITE_APP_TITLE = 木鸢物联平台
# 开发环境配置
VITE_APP_ENV = 'caddy'
# 木鸢物联平台/开发环境
VITE_APP_BASE_API = '/prod-api'

View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = 木鸢物联平台
VITE_APP_ENV = 'production'
# 木鸢物联平台/生产环境
VITE_APP_BASE_API = '/prod-api'
VITE_APP_BASE_API = '/api'
# 是否在打包时开启压缩,支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip

View File

@ -1,3 +1,4 @@
:4173 {
handle_path /prod-api/* {
reverse_proxy 192.168.1.201:1616

2
env.d.ts vendored
View File

@ -1 +1 @@
/// <reference types="vite/client" />
/// <reference types="vite/client" />

View File

@ -8,8 +8,9 @@
"dev": "vite",
"build:prod": "vite build",
"build:stage": "vite build --mode staging",
"build:caddy": "vite build --mode caddy",
"preview": "vite preview",
"fmt": "prettier -w .",
"format": "prettier --write \"**/*.{js,ts,tsx,jsx,vue,md}\"",
"commit-push": "prettier -w . && git add . && git commit -m"
},
"repository": {

44
src/api/firmware/log.js Normal file
View File

@ -0,0 +1,44 @@
import request from "@/utils/request";
// 查询设备升级历史列表
export function listLog(query) {
return request({
url: "/firmware/log/list",
method: "get",
params: query,
});
}
// 查询设备升级历史详细
export function getLog(logId) {
return request({
url: "/firmware/log/" + logId,
method: "get",
});
}
// 新增设备升级历史
export function addLog(data) {
return request({
url: "/firmware/log",
method: "post",
data: data,
});
}
// 修改设备升级历史
export function updateLog(data) {
return request({
url: "/firmware/log",
method: "put",
data: data,
});
}
// 删除设备升级历史
export function delLog(logId) {
return request({
url: "/firmware/log/" + logId,
method: "delete",
});
}

View File

@ -1,29 +1,29 @@
<template>
<div class="upload-file">
<el-upload
multiple
ref="fileUpload"
:action="uploadFileUrl"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:headers="headers"
:limit="limit"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:show-file-list="false"
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
multiple
>
<!-- 上传按钮 -->
<el-button type="primary">选取文件</el-button>
</el-upload>
<!-- 上传提示 -->
<div class="el-upload__tip" v-if="showTip">
<div v-if="showTip" class="el-upload__tip">
请上传
<template v-if="fileSize">
大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b>
</template>
<template v-if="fileType">
<template v-if="fileType && fileType.length">
格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
</template>
的文件
@ -35,9 +35,9 @@
tag="ul"
>
<li
v-for="(file, index) in fileList"
:key="file.uid"
class="el-upload-list__item ele-upload-list__item-content"
v-for="(file, index) in fileList"
>
<el-link
:href="`${baseUrl}${file.url}`"
@ -47,9 +47,9 @@
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger"
>删除</el-link
>
<el-link :underline="false" type="danger" @click="handleDelete(index)"
>删除
</el-link>
</div>
</li>
</transition-group>
@ -158,7 +158,7 @@ function handleUploadError(err) {
// 上传成功回调
function handleUploadSuccess(res, file) {
if (res.code === 200) {
uploadList.value.push({ name: res.fileName, url: res.fileName });
uploadList.value.push({ name: res.fileName, url: res.url });
uploadedSuccessfully();
} else {
number.value--;
@ -210,22 +210,25 @@ function listToString(list, separator) {
}
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.upload-file-uploader {
margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
border: 1px solid #e4e7ed;
line-height: 2;
margin-bottom: 10px;
position: relative;
}
.upload-file-list .ele-upload-list__item-content {
display: flex;
justify-content: space-between;
align-items: center;
color: inherit;
}
.ele-upload-list__item-content-action .el-link {
margin-right: 10px;
}

View File

@ -277,6 +277,8 @@ onMounted(() => {
let wsUrl;
if (import.meta.env.VITE_APP_ENV === "development") {
wsUrl = `ws://192.168.1.201:1616/ws-msg/${userStore.uniqueId}/${userStore.userId}`;
} else if (import.meta.env.VITE_APP_ENV === "caddy") {
wsUrl = `ws://192.168.1.201:1616/ws-msg/${userStore.uniqueId}/${userStore.userId}`;
} else {
let protocol;
if (window.location.protocol === "https:") {
@ -284,9 +286,7 @@ onMounted(() => {
} else {
protocol = "ws:";
}
// TODO:
// wsUrl = `${protocol}//${window.location.host}/ws-msg/${userStore.userId}`;
wsUrl = `ws://192.168.1.201:1616/ws-msg/${userStore.uniqueId}/${userStore.userId}`;
wsUrl = `${protocol}//${window.location.host}/ws-msg/${userStore.uniqueId}/${userStore.userId}`;
}
const rws = new ReconnectingWebSocket(wsUrl);
rws.addEventListener("open", () => {
@ -300,7 +300,6 @@ onMounted(() => {
console.log("websocket error");
});
rws.addEventListener("message", (event) => {
console.log(event.data);
const wsData = JSON.parse(event.data);
if (wsData.type === "msg") {
if (visible.value && queryParams.value.status === 1) {

View File

@ -84,13 +84,13 @@ export const productStatusMap = [
export const firmwareLatestTypeOptions = [
{
label: "",
value: 0,
label: "禁用",
value: false,
elTagType: "danger",
},
{
label: "",
value: 1,
label: "启用",
value: true,
elTagType: "success",
},
];
@ -336,3 +336,16 @@ export const triggerTypeDict = [
elTagType: "success",
},
];
export const firmwareUpgradeStatus = [
{
label: "失败",
value: "2",
elTagType: "danger",
},
{
label: "成功",
value: "1",
elTagType: "success",
},
];

View File

@ -232,21 +232,31 @@
:prop="`triggers.${index}.productId`"
:rules="[{ required: true, message: '请选择产品' }]"
>
<el-tag
<el-tooltip
v-if="item.productId"
class="product-tags"
closable
type="info"
@close="
item.productId = null;
item.productName = null;
item.deviceId = null;
item.deviceName = null;
item.modelId = null;
"
effect="light"
placement="top"
trigger="hover"
>
{{ item.productName }}
</el-tag>
<template #content>
<p><b>产品名称 : </b>{{ item.productName }}</p>
<p><b>产品SN : </b>{{ item.productSn }}</p>
</template>
<el-tag
class="product-tags"
closable
type="info"
@close="
item.productId = null;
item.productName = null;
item.deviceId = null;
item.deviceName = null;
item.modelId = null;
"
>
{{ item.productName }}
</el-tag>
</el-tooltip>
<el-button
v-else
icon="plus"
@ -267,17 +277,28 @@
:prop="`triggers.${index}.deviceId`"
:rules="[{ required: true, message: '请选择设备' }]"
>
<el-tag
<el-tooltip
v-if="item.deviceId"
class="product-tags"
closable
type="info"
@close="
item.deviceId = null;
item.deviceName = null;
"
>{{ item.deviceName }}
</el-tag>
effect="light"
placement="top"
trigger="hover"
>
<template #content>
<p><b>设备名称 : </b>{{ item.deviceName }}</p>
<p><b>设备SN : </b>{{ item.deviceSn }}</p>
</template>
<el-tag
class="product-tags"
closable
type="info"
@close="
item.deviceId = null;
item.deviceName = null;
"
>{{ item.deviceName }}
</el-tag>
</el-tooltip>
<el-button
v-else
icon="plus"
@ -491,19 +512,29 @@
:prop="`actions.${index}.productId`"
:rules="[{ required: true, message: '请选择产品' }]"
>
<el-tag
<el-tooltip
v-if="item.productId"
class="product-tags"
closable
type="info"
@close="
item.productId = null;
item.productName = null;
item.modelId = null;
"
effect="light"
placement="top"
trigger="hover"
>
{{ item.productName }}
</el-tag>
<template #content>
<p><b>产品名称 : </b>{{ item.productName }}</p>
<p><b>产品SN : </b>{{ item.productSn }}</p>
</template>
<el-tag
class="product-tags"
closable
type="info"
@close="
item.productId = null;
item.productName = null;
item.modelId = null;
"
>
{{ item.productName }}
</el-tag>
</el-tooltip>
<el-button
v-else
icon="plus"
@ -524,17 +555,28 @@
:prop="`actions.${index}.deviceId`"
:rules="[{ required: true, message: '请选择设备' }]"
>
<el-tag
<el-tooltip
v-if="item.deviceId"
class="product-tags"
closable
type="info"
@close="
item.deviceId = null;
item.deviceName = null;
"
>{{ item.deviceName }}
</el-tag>
effect="light"
placement="top"
trigger="hover"
>
<template #content>
<p><b>设备名称 : </b>{{ item.deviceName }}</p>
<p><b>设备SN : </b>{{ item.deviceSn }}</p>
</template>
<el-tag
v-if="item.deviceId"
class="product-tags"
closable
type="info"
@close="
item.deviceId = null;
item.deviceName = null;
"
>{{ item.deviceName }}
</el-tag>
</el-tooltip>
<el-button
v-else
icon="plus"
@ -1281,3 +1323,15 @@ getList();
}
}
</style>
<style>
.el-popper.is-customized {
/* Set padding to ensure the height is 32px */
padding: 6px 12px;
background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}
.el-popper.is-customized .el-popper__arrow::before {
background: linear-gradient(45deg, #b2e68d, #bce689);
right: 0;
}
</style>

View File

@ -0,0 +1,355 @@
<template>
<div class="app-container">
<el-form
v-show="showSearch"
ref="queryRef"
:inline="true"
:model="queryParams"
label-width="68px"
label-position="left"
>
<el-form-item v-if="!productSn" label="产品SN" prop="productSn">
<el-input
v-model="queryParams.productSn"
clearable
placeholder="请输入产品SN"
@keyup.enter="handleQuery"
/>
</el-form-item>
<el-form-item v-if="!deviceSn" label="设备SN" prop="deviceSn">
<el-input
v-model="queryParams.deviceSn"
clearable
placeholder="请输入设备SN"
@keyup.enter="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="当前版本" prop="currentVersion">-->
<!-- <el-input-->
<!-- v-model="queryParams.currentVersion"-->
<!-- clearable-->
<!-- placeholder="请输入当前版本"-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item label="目标版本" prop="targetVersion">-->
<!-- <el-input-->
<!-- v-model="queryParams.targetVersion"-->
<!-- clearable-->
<!-- placeholder="请输入目标版本"-->
<!-- @keyup.enter="handleQuery"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item label="结果" prop="result">
<el-select
v-model="queryParams.result"
clearable
placeholder="请选择结果"
>
<el-option label="成功" value="1" />
<el-option label="失败" value="2" />
</el-select>
</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="['firmware:log:add']"-->
<!-- icon="Plus"-->
<!-- plain-->
<!-- type="primary"-->
<!-- @click="handleAdd"-->
<!-- >新增-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- v-hasPermi="['firmware:log:edit']"-->
<!-- :disabled="single"-->
<!-- icon="Edit"-->
<!-- plain-->
<!-- type="success"-->
<!-- @click="handleUpdate"-->
<!-- >修改-->
<!-- </el-button>-->
<!-- </el-col>-->
<el-col :span="1.5">
<el-button
v-hasPermi="['firmware:log:remove']"
:disabled="multiple"
icon="Delete"
plain
type="danger"
@click="handleDelete"
>删除
</el-button>
</el-col>
<el-col :span="1.5">
<el-button
v-hasPermi="['firmware:log: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="logList"
class="custom-table-style"
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="55" />
<!-- <el-table-column align="center" label="" prop="logId" />-->
<el-table-column align="center" label="产品SN" prop="productSn" />
<el-table-column align="center" label="产品名称" prop="productName" />
<el-table-column align="center" label="设备SN" prop="deviceSn" />
<el-table-column align="center" label="设备名称" prop="deviceName" />
<el-table-column align="center" label="当前版本" prop="currentVersion" />
<el-table-column align="center" label="目标版本" prop="targetVersion" />
<el-table-column align="center" label="结果" prop="result">
<template #default="{ row }">
<dict-tag :options="firmwareUpgradeStatus" :value="[row.result]" />
</template>
</el-table-column>
<el-table-column align="center" label="升级时间" prop="createTime" />
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
>
<template #default="scope">
<!-- <el-button v-hasPermi="['firmware:log:edit']" icon="Edit" link type="primary"-->
<!-- @click="handleUpdate(scope.row)">修改-->
<!-- </el-button>-->
<el-button
v-hasPermi="['firmware:log: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="logRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="产品SN" prop="productSn">
<el-input v-model="form.productSn" placeholder="请输入产品SN" />
</el-form-item>
<el-form-item label="设备SN" prop="deviceSn">
<el-input v-model="form.deviceSn" placeholder="请输入设备SN" />
</el-form-item>
<el-form-item label="当前版本" prop="currentVersion">
<el-input
v-model="form.currentVersion"
placeholder="请输入当前版本"
/>
</el-form-item>
<el-form-item label="目标版本" prop="targetVersion">
<el-input v-model="form.targetVersion" placeholder="请输入目标版本" />
</el-form-item>
<el-form-item label="结果1成功2失败" prop="result">
<el-input v-model="form.result" placeholder="请输入结果1成功2失败" />
</el-form-item>
<el-form-item label="租户ID" prop="tenantId">
<el-input v-model="form.tenantId" placeholder="请输入租户ID" />
</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="Log" setup>
import { addLog, delLog, getLog, listLog, updateLog } from "@/api/firmware/log";
import DictTag from "@/components/DictTag/index.vue";
import { firmwareUpgradeStatus } from "@/constant/dict";
const props = defineProps({
productSn: {
type: String,
},
deviceSn: {
type: String,
},
});
const { proxy } = getCurrentInstance();
const logList = 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,
productSn: props.productSn,
deviceSn: props.deviceSn,
currentVersion: null,
targetVersion: null,
result: null,
tenantId: null,
},
rules: {},
});
const { queryParams, form, rules } = toRefs(data);
/** 查询设备升级历史列表 */
function getList() {
loading.value = true;
listLog(queryParams.value).then((response) => {
logList.value = response.rows;
total.value = response.total;
loading.value = false;
});
}
// 取消按钮
function cancel() {
open.value = false;
reset();
}
// 表单重置
function reset() {
form.value = {
logId: null,
productSn: null,
deviceSn: null,
currentVersion: null,
targetVersion: null,
createTime: null,
result: null,
tenantId: null,
};
proxy.resetForm("logRef");
}
/** 搜索按钮操作 */
function handleQuery() {
queryParams.value.pageNum = 1;
getList();
}
/** 重置按钮操作 */
function resetQuery() {
proxy.resetForm("queryRef");
handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
ids.value = selection.map((item) => item.logId);
single.value = selection.length != 1;
multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
reset();
open.value = true;
title.value = "添加设备升级历史";
}
/** 修改按钮操作 */
function handleUpdate(row) {
reset();
const _logId = row.logId || ids.value;
getLog(_logId).then((response) => {
form.value = response.data;
open.value = true;
title.value = "修改设备升级历史";
});
}
/** 提交按钮 */
function submitForm() {
proxy.$refs["logRef"].validate((valid) => {
if (valid) {
if (form.value.logId != null) {
updateLog(form.value).then((response) => {
proxy.$modal.msgSuccess("修改成功");
open.value = false;
getList();
});
} else {
addLog(form.value).then((response) => {
proxy.$modal.msgSuccess("新增成功");
open.value = false;
getList();
});
}
}
});
}
/** 删除按钮操作 */
function handleDelete(row) {
const _logIds = row.logId || ids.value;
proxy.$modal
.confirm('是否确认删除设备升级历史编号为"' + _logIds + '"的数据项?')
.then(function () {
return delLog(_logIds);
})
.then(() => {
getList();
proxy.$modal.msgSuccess("删除成功");
})
.catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
proxy.download(
"firmware/log/export",
{
...queryParams.value,
},
`log_${new Date().getTime()}.xlsx`
);
}
getList();
</script>

View File

@ -145,7 +145,11 @@
<device-log :device-sn="form.serialNumber" :model-list="modelList" />
</el-tab-pane>
<el-tab-pane label="升级日志" lazy>
<upgrade-log />
<upgrade-log
v-if="form.serialNumber && form.productSn"
:device-sn="form.serialNumber"
:product-sn="form.productSn"
/>
</el-tab-pane>
</el-tabs>
</div>
@ -159,7 +163,7 @@ import { addDevice, getDevice, updateDevice } from "@/api/iot/device";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import DeviceLog from "@/views/iot/device/detail-panes/DeviceLog.vue";
import UpgradeLog from "@/views/iot/device/detail-panes/UpgradeLog.vue";
import UpgradeLog from "@/views/firmware/log/index.vue";
import MapSelect from "@/components/MapSelect/index.vue";
import { generateRandomString } from "@/utils";
import { listModel } from "@/api/thingsmodel/model";

View File

@ -147,8 +147,6 @@
@selection-change="handleSelectionChange"
>
<el-table-column align="center" type="selection" width="55" />
<el-table-column align="center" label="ID" prop="firmwareId">
</el-table-column>
<el-table-column align="center" label="固件名称" prop="firmwareName">
</el-table-column>
<el-table-column align="center" label="产品" prop="productId">
@ -167,11 +165,7 @@
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column
align="center"
label="是否最新版本"
prop="latestVersionFlag"
>
<el-table-column align="center" label="启用状态" prop="latestVersionFlag">
<template #default="{ row }">
<dict-tag
:options="firmwareLatestTypeOptions"
@ -180,7 +174,20 @@
</template>
</el-table-column>
<el-table-column align="center" label="固件版本" prop="version" />
<el-table-column align="center" label="文件路径" prop="downloadUrl" />
<el-table-column align="center" label="下载地址" prop="downloadUrl">
<template #default="{ row }">
<!-- <el-link :href="`${baseUrl}${row.downloadUrl}`" icon="download" target="_blank" type="primary">-->
<!-- 点击下载-->
<!-- </el-link>-->
<el-button
icon="CopyDocument"
link
type="primary"
@click="copyLink(row.downloadUrl)"
>
</el-button>
</template>
</el-table-column>
<el-table-column align="center" label="备注" prop="remark" />
<el-table-column
align="center"
@ -263,21 +270,21 @@
<!-- />-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<el-form-item label="是否最新版本" prop="latestVersionFlag">
<!-- <el-input v-model="form.latestVersionFlag" placeholder="请输入是否最新版本" />-->
<el-form-item label="启用状态" prop="latestVersionFlag">
<el-switch
v-model="form.latestVersionFlag"
:active-value="1"
:inactive-value="0"
active-text=""
inactive-text=""
:active-value="true"
:inactive-value="false"
active-text="启用"
inactive-text="禁用"
></el-switch>
</el-form-item>
<el-form-item label="固件版本" prop="version">
<el-input v-model="form.version" placeholder="请输入固件版本" />
</el-form-item>
<el-form-item label="文件路径" prop="downloadUrl">
<el-input v-model="form.downloadUrl" placeholder="请输入文件路径" />
<el-form-item label="固件包" prop="downloadUrl">
<!-- <el-input v-model="form.downloadUrl" placeholder="请输入文件路径" />-->
<file-upload v-model="form.downloadUrl" :file-type="[]" :limit="1" />
</el-form-item>
<el-form-item label="备注" prop="remark">
<el-input
@ -310,11 +317,13 @@ import { listTenant } from "@/api/system/tenant";
import { firmwareLatestTypeOptions } from "@/constant/dict";
import { getCurrentInstance, reactive, ref, toRefs } from "vue";
import DictTag from "@/components/DictTag/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import { ElMessage } from "element-plus";
const props = defineProps(["productId"]);
const { productId } = toRefs(props);
const { proxy } = getCurrentInstance();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const firmwareList = ref([]);
const open = ref(false);
const loading = ref(true);
@ -489,6 +498,16 @@ function getProductOptions(keyword) {
});
}
const copyLink = (downloadUrl) => {
try {
navigator.clipboard.writeText(
`${location.protocol}//${location.host}${baseUrl}${downloadUrl}`
);
ElMessage.success("已复制到剪贴板");
} catch (e) {
ElMessage.error("复制失败");
}
};
const getTenantOptions = async (keyword) => {
const response = await listTenant({
pageNum: 1,