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文件到底要放在什么地方合适， 就看你文件结构了。

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