WTM 增加IOT 大屏展示界面页面

WTM作为一个.Net core的web快速开发框架，能省时省力快速出成果。

WTM作为通用的web框架，也可以用在IOT数据展示场景，有的宝宝就问了：我怎么给生成的项目增加一个页面来显示大屏幕呢？

第一步实现方法。 接下来我们就探索一个方式，就是在主页面，右上角增加一个按钮，点击一下就弹出来一个新的页面。

点击数据大屏，弹出一个新的页面，这个页面里边，就可以写一些代码来展示你的数据，比如用websocket技术或者API方式从后台获取数据。

第二步实现步骤。去生成WTM项目 wtmdoc.walkingtec.cn/setup，前端咱们选择UVE：

第三步 下载之后的环境配置这里就不说了，配置好数据库运行起来后，就可以开始改造了，

a. 在前 ClientApp\src\components\layout\components\Navbar\index.vue 文件里边增加“数据大屏” 按钮：

 <template v-if="device!=='mobile'"><screenBigData class="right-menu-item hover-effect" /><header-search class="right-menu-item" /><error-log  class="errLog-container right-menu-item hover-effect" /><screenfull class="right-menu-item hover-effect" /><size-select class="right-menu-item hover-effect" /><lang-select class="right-menu-item hover-effect" /><settings class="right-menu-item hover-effect" /></template>

b ，ClientApp\src\components\frame\ 下增加一个文件夹叫ScreenBigData，里边就是我们的点击按钮后的响应动作， ScreenBigData\index.vue

<template><div id="screenBigData"><!-- <svg-icon:name="isFullscreen? 'exit-fullscreen': 'fullscreen'"@click="onClick"/> --><el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom"><i class="el-icon-menu" @click.stop="onClick"> 数据大屏</i></el-tooltip></div>
</template><script lang="ts">
import screenfull from "screenfull";
import { Component, Vue } from "vue-property-decorator";
import { RouteRecord, Route } from "vue-router";
const sf = screenfull;@Component({name: "screenBigData"
})
export default class extends Vue {private isFullscreen = false;mounted() {if (sf && sf.enabled) {sf.on("change", this.change);}}beforeDestory() {if (sf && sf.enabled) {sf.off("change", this.change);}}private change() {if (sf && sf.enabled) {this.isFullscreen = sf.isFullscreen;}}private onClick() {//这样写是个组件啊，不对劲//this.$router.push("/bigdata");//试试这样let routeData = this.$router.resolve({ path: '/bigdata', query: {  } });console.log(routeData.href);window.open(routeData.href, '_blank');/*if (sf) {if (!sf.enabled) {this.$message({message: "you browser can not work",type: "warning"});return false;}sf.toggle();}*/}
}
</script>

c 上边的意思是说要跳转到一个页面，这个页面叫bigdata，接下来就造一个页面ClientApp\src\pages\htmlpage\index.vue，在这个下边建一个这个文件，之所叫htmlpage,是因为我想用现在很多的大屏幕模板都是静态html的。下边的index.html 就可以是任意的网页，你甚至可以在网上把现成的好看的页面放到这里边。

<template><div ><iframe  :src="url" width="100%" height="1080" frameborder="no" border="0" marginwidth="0" marginheight="0"  allowtransparency="yes" webkitallowfullscreen="yes" mozallowfullscreen="yes" allowfullscreen="yes"></iframe></div>
</template><script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({name: "bigdata"
})
export default class extends Vue {@Prop({ type: String, default: "/" })url = "./wwwbigdata/index.html";
}
</script>

d 增加路由，ClientApp\src\router\index.ts 这里边path 增加：

    {path: "/bigdata",component: () => import("@/pages/htmlpage/index.vue"),meta: { hidden: true }}

这个静态的htm文件到底要放在什么地方合适，就看你文件结构了。

不出意外你运行一下，就能看到效果了。

WTM 增加IOT 大屏展示界面页面相关推荐

onenet数据流模板_用中移物联网OneNET View2.0数据可视化工具做个大屏展示界面
## 1.试用背景与项目简介大家好,我是你们的老朋友xukejing,好久不见! 最近,中移物联网推出了OneNET View2.0数据可视化工具,它具有拖拽式编辑.多种功能组件.多数据源对接.自动 ...
Vuex与前端表格施展“组合拳”，实现大屏展示应用的交互增强
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 下图是一个产品开发中非常常见的大屏展示界面 ...
监管大屏系统_煤矿安全监管系统可视化大屏展示设计
项目背景近年来随着互联网信息技术的发展,各行业的远程数据监控系统应用日益广泛,在能源.矿产行业尤其突出.能源.矿产行业作业都在环境恶劣的偏远地区进行,监管部门需要远程实时掌握生产作业的安全情况,以实 ...
Vue大数据可视化（大屏展示）方案升级，发布全新Vue3版本
千呼万唤始出来,终于将原先的 Vue2 升级到了 Vue3,并且使用了 Ts,部分界面使用了 Tsx 的写法,欢迎大家来点个星星~ 项目地址:Vue3 可视化大屏展示,点颗星星吧~ 界面展示(这个是动 ...
Vue2.x动态组件的使用实现组件整合大屏展示
Vue2.x动态组件的使用实现组件整合大屏展示一.问题项目中开发多个可视化的页面(组件),现需要根据选择的数据和屏幕的配置数据将多个页面整合在同一个页面内,并且根据配置数据划分占比以及位置关系(横 ...
Qt制作大数据可视化大屏展示电子看板
Qt制作大数据可视化大屏展示电子看板解决当前最火的大数据可视化大屏展示,整个项目通过Qt开发,集成了QML/QChart/ECharts及自定义控件等模块,所有的可视化控件都可以集成到其中.可以随意 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
web大屏展示用到的组件_基于 HTML5 的工业组态高炉炼铁 3D 大屏可视化
前言在大数据盛行的现在,大屏数据可视化也已经成为了一个热门的话题.大屏可视化可以运用在众多领域中,比如工业互联网.医疗.交通.工业控制等等.将各项重要指标数据以图表.各种图形等形式表现在一个页面上, ...
PowerBI 秒级实时大屏展示方案全面助力双十一
双十一来了,你准备好了吗?不管你是否准备完毕,我们带来了全网首发的 PowerBI 秒级实时大屏展示方案,你可以直接用来展示双十一的实时状况. 我们一步步来说明这个套件模板教程. 真实效果功能如下: ...

WTM 增加IOT 大屏展示界面页面

WTM 增加IOT 大屏展示界面页面相关推荐

最新文章

热门文章