Skip to content

D
device-new-platform
Commit 894fc8ca authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

perf: 优化设备详情页面

parent 76621a8f
Hide whitespace changes
Inline Side-by-side
Showing with 425 additions and 325 deletions
device-manager-ui/admin/src/assets/mixins/formdialog.js
View file @ 894fc8ca
export default { export default {
created() { created() {
// this.getData(); // this.getData();
}, },
beforeDestroy() { beforeDestroy() {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
...@@ -8,30 +8,28 @@ export default { ...@@ -8,30 +8,28 @@ export default {
methods: { methods: {
// 渲染前置处理 // 渲染前置处理
beforeRender(data) { beforeRender(data) {
return data return data;
}, },
// 渲染后置处理 // 渲染后置处理
afterRender(data) { afterRender(data) {},
},
// 提交表单的前置处理 // 提交表单的前置处理
beforeSubmit(data) { beforeSubmit(data) {
return data return data;
}, },
// 提交表单的后置处理, 会阻断默认的回退行为 // 提交表单的后置处理, 会阻断默认的回退行为
afterSubmit(data) { afterSubmit(data) {
this.$router.go(-1); this.$router.go(-1);
}, },
// 开启、关闭 // 开启、关闭
changePath(path) { changePath(path) {
this.pageInfo.list = path + "/list"; this.pageInfo.list = path + "/list";
this.pageInfo.del = path + "/delete"; this.pageInfo.del = path + "/delete";
this.pageInfo.add = path + "/add"; this.pageInfo.add = path + "/add";
this.pageInfo.edit = path + "/edit"; this.pageInfo.edit = path + "/edit";
this.pageInfo.view = path + "/view"; this.pageInfo.view = path + "/view";
}, },
// 默认拉取数据 // 默认拉取数据
getData() { getData() {
this.loading = true; this.loading = true;
...@@ -46,19 +44,18 @@ export default { ...@@ -46,19 +44,18 @@ export default {
res.entity = this.util_toDateStr(res.entity, this.toDate); res.entity = this.util_toDateStr(res.entity, this.toDate);
this.form = Object.assign({}, this.form, res.entity); this.form = Object.assign({}, this.form, res.entity);
this.dict = Object.assign({}, this.dict, res.dict); this.dict = Object.assign({}, this.dict, res.dict);
this.afterRender(res); this.afterRender(res);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message) this.$message.error(error.message);
throw error throw error;
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.loading = false; this.loading = false;
}, 300); }, 300);
}) });
}, },
// 提交表单 // 提交表单
submitForm(ref) { submitForm(ref) {
...@@ -66,70 +63,81 @@ export default { ...@@ -66,70 +63,81 @@ export default {
el.validate((valid) => { el.validate((valid) => {
if (!valid) return; if (!valid) return;
this.loading = true; this.loading = true;
this.$post(this.urls.saveUrl || this.pageInfo.saveUrl, this.beforeSubmit(this.form)) this.$post(
.then(res => { this.urls.saveUrl || this.pageInfo.saveUrl,
this.beforeSubmit(this.form)
)
.then((res) => {
this.$message.success(res.msg); this.$message.success(res.msg);
this.afterSubmit(res); this.afterSubmit(res);
}) })
.catch(error => { .catch((error) => {
this.$message.error(error.message); this.$message.error(error.message);
}) })
.then(data => { .then((data) => {
clearTimeout(this.loadingTimer); clearTimeout(this.loadingTimer);
this.loadingTimer = setTimeout(() => { this.loadingTimer = setTimeout(() => {
this.loading = false; this.loading = false;
}, 200); }, 200);
}) });
}); });
}, },
// 复制一个数组或对象 // 复制一个数组或对象
util_copy(data) { util_copy(data) {
return JSON.parse(JSON.stringify(data)) return JSON.parse(JSON.stringify(data));
}, },
// 工具方法，把数字转化为字符串 // 工具方法，把数字转化为字符串
util_toString(data, array) { util_toString(data, array) {
//原始数据 //原始数据
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
//如果相等做操作 //如果相等做操作
dataCopy[item] = dataCopy[item] === undefined ? '' : dataCopy[item] + ''; dataCopy[item] =
}) dataCopy[item] === undefined ? "" : dataCopy[item] + "";
});
return dataCopy; return dataCopy;
}, },
// 工具方法，把字符串转化为数组 // 工具方法，把字符串转化为数组
util_toArrays(data, array) { util_toArrays(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
dataCopy[item] = dataCopy[item] === undefined ? [] : dataCopy[item].split(","); dataCopy[item] =
}) dataCopy[item] === undefined ? [] : dataCopy[item].split(",");
});
return dataCopy; return dataCopy;
}, },
// 工具方法，把字符串转化为格式化日期 // 工具方法，把字符串转化为格式化日期
util_toDateStr(data, array) { util_toDateStr(data, array) {
const dataCopy = Object.assign({}, data); const dataCopy = Object.assign({}, data);
array.forEach(item => { array.forEach((item) => {
dataCopy[item] = dataCopy[item] === undefined ? '' : this.util_formatterDate(dataCopy[item]); dataCopy[item] =
}) dataCopy[item] === undefined
? ""
: this.util_formatterDate(dataCopy[item]);
});
return dataCopy; return dataCopy;
}, },
util_formatterDate(time) { util_formatterDate(time) {
let date = new Date(Number(time)); let date = new Date(Number(time));
let Y = date.getFullYear() + '-'; let Y = date.getFullYear() + "-";
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; let M =
let D = this.panLeft(date.getDate()) + ' '; (date.getMonth() + 1 < 10
let h = this.panLeft(date.getHours()) + ':'; ? "0" + (date.getMonth() + 1)
let m = this.panLeft(date.getMinutes()) + ':'; : date.getMonth() + 1) + "-";
let D = this.panLeft(date.getDate()) + " ";
let h = this.panLeft(date.getHours()) + ":";
let m = this.panLeft(date.getMinutes()) + ":";
let s = this.panLeft(date.getSeconds()); let s = this.panLeft(date.getSeconds());
return Y + M + D + h + m + s; return Y + M + D + h + m + s;
}, },
panLeft(num) { panLeft(num) {
return num < 10 ? '0' + num : num; return num < 10 ? "0" + num : num;
}, },
// 从dict字段暴力取值，取不到则返回原值 // 从dict字段暴力取值，取不到则返回原值
util_formatter(key, val) { util_formatter(key, val) {
try { try {
return this.dict[key][val] return this.dict[key][val];
} catch (error) { } catch (error) {
return val; return val;
} }
...@@ -142,24 +150,24 @@ export default { ...@@ -142,24 +150,24 @@ export default {
} }
}); });
}, 0); }, 0);
} },
}, },
computed: { computed: {
pageInfo() { pageInfo() {
let currUrl = this.$route.path; let currUrl = this.$route.path;
let urlArray = currUrl.split('/'); let urlArray = currUrl.split("/");
let type = urlArray.pop(); let type = urlArray.pop();
urlArray.push('save'); urlArray.push("save");
let saveUrl = urlArray.join('/'); let saveUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('edit'); urlArray.push("edit");
let editUrl = urlArray.join('/'); let editUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('add'); urlArray.push("add");
let addUrl = urlArray.join('/'); let addUrl = urlArray.join("/");
urlArray.pop(); urlArray.pop();
urlArray.push('view'); urlArray.push("view");
let viewUrl = urlArray.join('/'); let viewUrl = urlArray.join("/");
return { return {
type, type,
currUrl, currUrl,
...@@ -183,9 +191,6 @@ export default { ...@@ -183,9 +191,6 @@ export default {
toString: [], // 需要把number转化为string的表单字段name数组 toString: [], // 需要把number转化为string的表单字段name数组
toArrays: [], // 需要把number转化为arrays的表单字段name数组 toArrays: [], // 需要把number转化为arrays的表单字段name数组
toDate: [], // 需要把number转化为date的表单字段name数组 toDate: [], // 需要把number转化为date的表单字段name数组
} };
} },
} };
device-manager-ui/admin/src/assets/mixins/table.js
View file @ 894fc8ca
...@@ -176,13 +176,14 @@ export default { ...@@ -176,13 +176,14 @@ export default {
// 格式化单元格数据 // 格式化单元格数据
formatter(row, column, val) { formatter(row, column, val) {
const content = formatter(this.tableData, column, val); const content = formatter(this.tableData, column, val);
return content ? ( return content ? (
<el-tag type={"info"} size="mini"> <el-tag type={"info"} size="mini">
{content} {content}
</el-tag> </el-tag>
) : ( ) : val ? (
val val
) : (
"--"
); );
}, },
......
device-manager-ui/admin/src/views/device/dialogshow.vue
View file @ 894fc8ca
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body> <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<!-- <Field :span="20" label="设备名称" prop="deviceName" v-model="form.deviceName" placeholder="请输入设备名称"/> --> <!-- <Field :span="20" label="设备名称" prop="deviceName" v-model="form.deviceName" placeholder="请输入设备名称"/> -->
<Field :span="20" label="设备编码" prop="deviceCode" v-model="form.deviceCode" placeholder="请输入设备编码"/> <Field
<Field :span="20" label="平台类型" prop="platformId" v-model="form.platformId" type="select" :enumData="dict.platformId" placeholder="请选择平台类型"/> :span="20"
<Field :span="20" label="产品类型" prop="productId" v-model="form.productId" type="select" :enumData="dict.productId" placeholder="请选择产品类型"/> label="设备编码"
<Field :span="20" label="设备的MAC地址" prop="deviceMac" v-model="form.deviceMac" placeholder="请输入设备的MAC地址"/> prop="deviceCode"
<!-- <Field :span="20" label="中心设备编码" v-model="form.centernum" placeholder="请输入中心设备编码"/> --> v-model="form.deviceCode"
<Field :span="20" disabled label="设备访问ip" v-model="form.ip" /> placeholder="请输入设备编码"
<Field :span="20" disabled label="端口" v-model="form.port" /> />
<Field :span="20" disabled label="站点编号" v-model="form.siteNum" /> <Field
<Field :span="20"
label="平台类型"
prop="platformId"
v-model="form.platformId"
type="select"
:enumData="dict.platformId"
placeholder="请选择平台类型"
/>
<Field
:span="20"
label="产品类型"
prop="productId"
v-model="form.productId"
type="select"
:enumData="dict.productId"
placeholder="请选择产品类型"
/>
<Field
:span="20"
label="设备的MAC地址"
prop="deviceMac"
v-model="form.deviceMac"
placeholder="请输入设备的MAC地址"
/>
<!-- <Field :span="20" label="中心设备编码" v-model="form.centernum" placeholder="请输入中心设备编码"/> -->
<Field :span="20" disabled label="设备访问ip" v-model="form.ip" />
<Field :span="20" disabled label="端口" v-model="form.port" />
<Field :span="20" disabled label="站点编号" v-model="form.siteNum" />
<Field
:span="20" :span="20"
label="设备生产商：" label="设备生产商："
placeholder="请选择设备生产商" placeholder="请选择设备生产商"
...@@ -21,133 +49,144 @@ ...@@ -21,133 +49,144 @@
type="select" type="select"
:enumData="dict.deviceFirmId" :enumData="dict.deviceFirmId"
/> />
<Field :span="20" label="备注" prop="deviceRemark" v-model="form.deviceRemark" type="textarea" placeholder="请输入备注"/> <Field
<Field :span="20" label="启用状态 " prop="status" v-model="form.status" type="radio" :enumData="dict.status" placeholder="请选择启用状态 "/> :span="20"
label="备注"
prop="deviceRemark"
</el-row> v-model="form.deviceRemark"
type="textarea"
</el-form> placeholder="请输入备注"
<div slot="footer" class="dialog-footer"> />
<el-button type="primary" class="addclass" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button> <Field
<el-button @click="cancel">取 消</el-button> :span="20"
</div> label="启用状态 "
</el-dialog> prop="status"
v-model="form.status"
type="radio"
:enumData="dict.status"
placeholder="请选择启用状态 "
/>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
class="addclass"
v-if="pageInfo.type !== 'view'"
@click="submitForm"
>确 定</el-button
>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template> </template>
<script> <script>
import form from "@/assets/mixins/formdialog"; import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow"; import dialogShow from "./dialogshow";
export default { export default {
mixins: [form], mixins: [form],
components: { components: {
dialogShow , dialogShow,
}, },
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 弹出层标题 // 弹出层标题
title: "设备", title: "设备",
// 是否显示弹出层 // 是否显示弹出层
open: false, open: false,
direction:"rtl", direction: "rtl",
toString:[ toString: ["deviceType", "deviceOnlineStatus", "status", "deviceFirmId"],
"deviceType", // 表单校验
"deviceOnlineStatus", rules: {
"status", deviceName: [
"deviceFirmId" { required: true, message: "请输入设备名称", trigger: "blur" },
], { max: 20, message: "最多只能录入20个字符", trigger: "blur" },
// 表单校验 ],
rules: { deviceType: [
deviceName: [ { required: true, message: "请输入设备类型", trigger: "blur" },
{required: true,message: "请输入设备名称", trigger: "blur" }, ],
{max: 20,message: "最多只能录入20个字符",trigger: "blur",}, deviceOnlineStatus: [
], { required: true, message: "请输入在线状态 ", trigger: "blur" },
deviceType: [ ],
{required: true,message: "请输入设备类型", trigger: "blur" }, status: [
], { required: true, message: "请输入启用状态 ", trigger: "blur" },
deviceOnlineStatus: [ ],
{required: true,message: "请输入在线状态 ", trigger: "blur" }, createTime: [{ required: true, message: "请选择创建时间" }],
], },
status: [ };
{required: true,message: "请输入启用状态 ", trigger: "blur" }, },
],
createTime: [
{required: true,message: "请选择创建时间" },
],
}
};
},
methods: { methods: {
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.editUrl;; this.urls.currUrl = this.pageInfo.editUrl;
this.getData(); this.getData();
this.pageInfo.type="edit" this.pageInfo.type = "edit";
this.title = "修改设备"; this.title = "修改设备";
}, },
/** 新增 */ /** 新增 */
add(row) { add(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl = this.pageInfo.addUrl; this.urls.currUrl = this.pageInfo.addUrl;
this.getData(); this.getData();
this.pageInfo.type="add" this.pageInfo.type = "add";
this.title = "新增设备"; this.title = "新增设备";
}, },
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset() this.reset();
this.query = { id: row.id }; this.query = { id: row.id };
this.urls.currUrl =this.pageInfo.viewUrl;; this.urls.currUrl = this.pageInfo.viewUrl;
this.getData(); this.getData();
this.pageInfo.type="view" this.pageInfo.type = "view";
this.title = "设备详细"; this.title = "设备详细";
}, },
/**取消按钮 */ /**取消按钮 */
cancel() { cancel() {
this.open = false; this.open = false;
}, },
/**获取数据后弹框 */ /**获取数据后弹框 */
afterRender(data) { afterRender(data) {
this.open = true; this.open = true;
}, },
afterSubmit(data) { afterSubmit(data) {
this.open = false; this.open = false;
this.$emit("ok"); this.$emit("ok");
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
deviceName : "", deviceName: "",
deviceCode : "", deviceCode: "",
deviceType : 1, deviceType: 1,
deviceMac : "", deviceMac: "",
ip : "", ip: "",
centernum : "", centernum: "",
port : "", port: "",
siteNum : "", siteNum: "",
deviceFirmId : null, deviceFirmId: null,
deviceFirmname : "", deviceFirmname: "",
deviceOnlineStatus : 0, deviceOnlineStatus: 0,
status : 0, status: 0,
deviceRemark : "", deviceRemark: "",
onlineTime : null, onlineTime: null,
offlineTime : null, offlineTime: null,
}; };
this.resetForm("form"); this.resetForm("form");
}, },
resetForm(refName) { resetForm(refName) {
if (this.$refs[refName]) { if (this.$refs[refName]) {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
}, },
}; };
</script> </script>
device-manager-ui/admin/src/views/device/drawershow.vue
View file @ 894fc8ca
<template> <template>
<!-- 弹出框表单 --> <!-- 弹出框表单 -->
<el-drawer <el-drawer
:title="title" :title="title"
:visible.sync="open" :visible.sync="open"
:direction="direction" :direction="direction"
size="70%" size="70%"
> >
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row> <el-row>
<Field <Field
label="设备名称" label="设备名称"
prop="deviceName" prop="deviceName"
v-model="form.deviceName" v-model="form.deviceName"
placeholder="请输入设备名称" placeholder="请输入设备名称"
/> />
<!-- <Field <!-- <Field
label="设备编码" label="设备编码"
...@@ -21,51 +21,51 @@ ...@@ -21,51 +21,51 @@
placeholder="请输入设备编码码" placeholder="请输入设备编码码"
/> --> /> -->
<Field <Field
label="MAC地址" label="MAC地址"
prop="deviceCode" prop="deviceCode"
v-model="form.deviceCode" v-model="form.deviceCode"
placeholder="请输入设备的MAC地址" placeholder="请输入设备的MAC地址"
/> />
<Field <Field
label="所属机构" label="所属机构"
prop="orgName" prop="orgName"
v-model="form.orgName" v-model="form.orgName"
placeholder="请输入设备的所属机构" placeholder="请输入设备的所属机构"
/> />
<!-- <Field label="平台类型" prop="platformId" v-model="form.platformId" type="select" :enumData="dict.platformId" placeholder="请选择平台类型"/> --> <!-- <Field label="平台类型" prop="platformId" v-model="form.platformId" type="select" :enumData="dict.platformId" placeholder="请选择平台类型"/> -->
<Field <Field
label="产品类型" label="产品类型"
prop="productId" prop="productId"
v-model="form.productId" v-model="form.productId"
type="select" type="select"
:enumData="dict.productId" :enumData="dict.productId"
@change="changeProduct" @change="changeProduct"
placeholder="请选择产品类型" placeholder="请选择产品类型"
/> />
<Field <Field
label="设备生产商" label="设备生产商"
placeholder="请选择设备生产商" placeholder="请选择设备生产商"
prop="deviceFirmId" prop="deviceFirmId"
v-model="form.deviceFirmId" v-model="form.deviceFirmId"
type="select" type="select"
:enumData="dict.deviceFirmId" :enumData="dict.deviceFirmId"
/> />
<Field <Field
label="设备来源" label="设备来源"
prop="deviceSrc" prop="deviceSrc"
v-model="form.deviceSrc" v-model="form.deviceSrc"
type="select" type="select"
:enumData="dict.deviceSrc" :enumData="dict.deviceSrc"
placeholder="请选择设备来源" placeholder="请选择设备来源"
/> />
<Field <Field
label="数据获取方式" label="数据获取方式"
prop="deviceDataSourceWay" prop="deviceDataSourceWay"
v-model="form.deviceDataSourceWay" v-model="form.deviceDataSourceWay"
type="select" type="select"
:enumData="dict.deviceDataSourceWay" :enumData="dict.deviceDataSourceWay"
placeholder="请选择数据获取方式" placeholder="请选择数据获取方式"
/> />
<!-- <Field <!-- <Field
label="经度" label="经度"
...@@ -80,107 +80,125 @@ ...@@ -80,107 +80,125 @@
placeholder="请输入纬度" placeholder="请输入纬度"
/> --> /> -->
<Field <Field
label="默认首页" label="默认首页"
prop="skinId" prop="skinId"
v-model="form.skinId" v-model="form.skinId"
@change="skinSelect" @change="skinSelect"
:enumData=" :enumData="
!form.productCode !form.productCode
? { 0: '无' } ? { 0: '无' }
: dict.skinProductCodeMap[form.productCode] : dict.skinProductCodeMap[form.productCode]
" "
type="select" type="select"
placeholder="选择首页" placeholder="选择首页"
/> />
<Field <Field
label="所属楼栋" label="所属楼栋"
prop="deviceInBuilding" prop="deviceInBuilding"
v-model="form.deviceInBuilding" v-model="form.deviceInBuilding"
type="num" type="num"
placeholder="请选择所属楼栋" placeholder="请选择所属楼栋"
></Field> ></Field>
<Field <Field
label="所属楼层" label="所属楼层"
prop="deviceInFloor" prop="deviceInFloor"
v-model="form.deviceInFloor" v-model="form.deviceInFloor"
type="num" type="num"
placeholder="请选择所属楼层" placeholder="请选择所属楼层"
/> />
<Field <Field
label="保修期至" label="保修期至"
prop="defectsLiabilityPeriod" prop="defectsLiabilityPeriod"
v-model="form.defectsLiabilityPeriod" v-model="form.defectsLiabilityPeriod"
type="datetime" type="datetime"
/> />
<Field <Field
label="负责人" label="负责人"
prop="leadingOfficial" prop="leadingOfficial"
v-model="form.leadingOfficial" v-model="form.leadingOfficial"
placeholder="请输入负责人" placeholder="请输入负责人"
/> />
<Field <Field
label="联系电话" label="联系电话"
prop="leadingOfficialTelephone" prop="leadingOfficialTelephone"
v-model="form.leadingOfficialTelephone" v-model="form.leadingOfficialTelephone"
placeholder="请输入联系电话" placeholder="请输入联系电话"
/> />
<Field <Field
label="接收异常短信" label="接收异常短信"
prop="isReceiveMess" prop="isReceiveMess"
v-model="form.isReceiveMess" v-model="form.isReceiveMess"
type="select" type="select"
:enumData="dict.isReceiveMess" :enumData="dict.isReceiveMess"
placeholder="请选择是否接收异常短信" placeholder="请选择是否接收异常短信"
/> />
<Field <Field
label="利旧设备" label="利旧设备"
prop="source" prop="source"
v-model="form.source" v-model="form.source"
type="select" type="select"
:enumData="dict.source" :enumData="dict.source"
placeholder="请选择状态 " placeholder="请选择状态 "
/> />
<Field <Field
label="启用状态" label="启用状态"
prop="enabled" prop="enabled"
v-model="form.enabled" v-model="form.enabled"
type="select" type="select"
:enumData="dict.enabled" :enumData="dict.enabled"
placeholder="请选择启用状态 " placeholder="请选择启用状态 "
/> />
<Field label="显示短信" prop="showSms" v-model="form.showSms" type="radio" :enumData="dict.showSms" placeholder="请选择是否显示短信"/> <Field
<Field label="显示打印机" prop="showPrint" v-model="form.showPrint" type="radio" :enumData="dict.showPrint" placeholder="请选择是否显示打印机"/> label="显示短信"
<Field label="小程序二维码" prop="showWechatQrCode" v-model="form.showWechatQrCode" type="radio" :enumData="dict.showWechatQrCode" placeholder="请选择是否显示小程序二维码"/> prop="showSms"
v-model="form.showSms"
type="radio"
:enumData="dict.showSms"
placeholder="请选择是否显示短信"
/>
<Field
label="显示打印机"
prop="showPrint"
v-model="form.showPrint"
type="radio"
:enumData="dict.showPrint"
placeholder="请选择是否显示打印机"
/>
<Field
label="小程序二维码"
prop="showWechatQrCode"
v-model="form.showWechatQrCode"
type="radio"
:enumData="dict.showWechatQrCode"
placeholder="请选择是否显示小程序二维码"
/>
<Field :span="24" label="上传图片" <Field :span="24" label="上传图片">
> <ImageUpload v-model="form.devicePhotoPath" prePath="/file/preview" />
<ImageUpload v-model="form.devicePhotoPath" prePath="/file/preview"
/>
</Field> </Field>
<Field <Field
label="授权码" label="授权码"
:span="24" :span="24"
prop="deviceAuthCode" prop="deviceAuthCode"
v-model="form.deviceAuthCode" v-model="form.deviceAuthCode"
type="textarea" type="textarea"
placeholder="请输入授权码" placeholder="请输入授权码"
/> />
<Field <Field
label="备注" label="备注"
:span="24" :span="24"
prop="deviceRemark" prop="deviceRemark"
v-model="form.deviceRemark" v-model="form.deviceRemark"
type="textarea" type="textarea"
placeholder="请输入备注" placeholder="请输入备注"
/> />
</el-row> </el-row>
<form-buttons @submit="submitForm" noCancelBtn/> <form-buttons @submit="submitForm" noCancelBtn />
</el-form> </el-form>
</el-drawer> </el-drawer>
</template> </template>
...@@ -229,20 +247,20 @@ export default { ...@@ -229,20 +247,20 @@ export default {
// 表单校验 // 表单校验
rules: { rules: {
deviceName: [ deviceName: [
{required: true, message: "请输入设备名称", trigger: "blur"}, { required: true, message: "请输入设备名称", trigger: "blur" },
{max: 20, message: "最多只能录入20个字符", trigger: "blur"}, { max: 20, message: "最多只能录入20个字符", trigger: "blur" },
], ],
deviceCode: [ deviceCode: [
{required: true, message: "请输入设备编码", trigger: "blur"}, { required: true, message: "请输入设备编码", trigger: "blur" },
], ],
deviceMac: [ deviceMac: [
{required: true, message: "请输入Mac地址", trigger: "blur"}, { required: true, message: "请输入Mac地址", trigger: "blur" },
], ],
platformId: [ platformId: [
{required: true, message: "请选择平台", trigger: "blur"}, { required: true, message: "请选择平台", trigger: "blur" },
], ],
productId: [{required: true, message: "请选择产品", trigger: "blur"}], productId: [{ required: true, message: "请选择产品", trigger: "blur" }],
}, },
}; };
}, },
...@@ -252,13 +270,14 @@ export default { ...@@ -252,13 +270,14 @@ export default {
this.form.productCode = this.dict.productCode[val]; this.form.productCode = this.dict.productCode[val];
}, },
skinSelect(val) { skinSelect(val) {
this.form.skinName = this.form.skinName = this.dict.skinProductCodeMap[this.form.productCode][
this.dict.skinProductCodeMap[this.form.productCode][val]; val
];
}, },
/** 编辑 */ /** 编辑 */
edit(row) { edit(row) {
this.reset(); this.reset();
this.query = {id: row.id}; this.query = { id: row.id };
this.urls.currUrl = "/device/edit"; this.urls.currUrl = "/device/edit";
this.siteName = row.siteName; this.siteName = row.siteName;
this.siteCode = row.siteCode; this.siteCode = row.siteCode;
...@@ -280,7 +299,7 @@ export default { ...@@ -280,7 +299,7 @@ export default {
/** 查看*/ /** 查看*/
view(row) { view(row) {
this.reset(); this.reset();
this.query = {id: row.id}; this.query = { id: row.id };
this.urls.currUrl = "/device/view"; this.urls.currUrl = "/device/view";
this.getData(); this.getData();
this.pageInfo.type = "view"; this.pageInfo.type = "view";
...@@ -314,8 +333,7 @@ export default { ...@@ -314,8 +333,7 @@ export default {
this.$refs[refName].resetFields(); this.$refs[refName].resetFields();
} }
}, },
handleClose() { handleClose() {},
},
}, },
}; };
</script> </script>
device-manager-ui/admin/src/views/device/drawerview.vue
View file @ 894fc8ca
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<el-form ref="form" :model="form" :rules="rules" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-tabs style="margin-left: 10px" v-model="activeName"> <el-tabs style="margin-left: 10px" v-model="activeName">
<el-tab-pane label="设备详情" name="deviceDetail"> <el-tab-pane label="设备详情" name="deviceDetail">
<view-show :form="viewInfo" :dict="dict" /> <view-show :siteInfo="siteInfo" :form="viewInfo" :dict="dict" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="告警记录" name="alarmLog"> <el-tab-pane label="告警记录" name="alarmLog">
<alarm-list :queryIn="{ alarmDevice: form.id }" /> <alarm-list :queryIn="{ alarmDevice: form.id }" />
...@@ -42,6 +42,13 @@ export default { ...@@ -42,6 +42,13 @@ export default {
alarmList, alarmList,
moduleList, moduleList,
}, },
props: {
siteInfo: {
type: Object,
required: true,
default: () => {},
},
},
data() { data() {
return { return {
activeName: "deviceDetail", activeName: "deviceDetail",
......
device-manager-ui/admin/src/views/device/list.vue
View file @ 894fc8ca
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
<drawer-show ref="drawerform" @ok="getData" /> <drawer-show ref="drawerform" @ok="getData" />
<drawer-view ref="drawerViewform" @ok="getData" /> <drawer-view ref="drawerViewform" :siteInfo="siteInfo" @ok="getData" />
</div> </div>
</template> </template>
...@@ -310,7 +310,7 @@ export default { ...@@ -310,7 +310,7 @@ export default {
siteId: null, siteId: null,
siteName: "", siteName: "",
siteCode: "", siteCode: "",
siteInfo: {},
updateSiteId: null, updateSiteId: null,
updateSiteName: "", updateSiteName: "",
updateSiteCode: "", updateSiteCode: "",
...@@ -476,6 +476,7 @@ export default { ...@@ -476,6 +476,7 @@ export default {
//this.info=res.data //this.info=res.data
this.siteName = res.data.siteName; this.siteName = res.data.siteName;
this.siteCode = res.data.siteCode; this.siteCode = res.data.siteCode;
this.siteInfo = res.data;
} }
}) })
.catch((error) => { .catch((error) => {
......
device-manager-ui/admin/src/views/device/view.vue
View file @ 894fc8ca
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
{{ form.lon }} {{ form.lon }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item <el-descriptions-item
label="经度" label="纬度"
label-class-name="labelClass" label-class-name="labelClass"
content-class-name="contentClass" content-class-name="contentClass"
> >
...@@ -231,7 +231,27 @@ ...@@ -231,7 +231,27 @@
设备位置 设备位置
</template> </template>
</el-descriptions> </el-descriptions>
<Map></Map> <!-- <Map></Map> -->
<div class="map">
<el-amap
vid="amaps"
:zoom="20"
viewMode="3D"
expandZoomRange
:center="[siteInfo.longitude, siteInfo.latitude]"
>
<el-amap-marker
vid="2"
topWhenClick
:label="{
content: `我在${siteInfo.detailAddress}`,
offset: [0, -20],
}"
:position="[siteInfo.longitude, siteInfo.latitude]"
:icon="require('@/assets/images/d.png')"
></el-amap-marker>
</el-amap>
</div>
</layout-view> </layout-view>
</template> </template>
...@@ -248,6 +268,11 @@ export default { ...@@ -248,6 +268,11 @@ export default {
type: Object, type: Object,
default: null, default: null,
}, },
siteInfo: {
type: Object,
required: true,
default: () => {},
},
}, },
components: {}, components: {},
created() {}, created() {},
...@@ -326,4 +351,8 @@ export default { ...@@ -326,4 +351,8 @@ export default {
.contentClass { .contentClass {
width: 600px; width: 600px;
} }
</style> .map {
\ No newline at end of file width: 100%;
height: 600px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment