web页面集成

648540858

2020-10-10 c6e8b341f3e266c857622e59d67edd1457be144e

web页面集成

 web_src/src/assets/loading.png

 web_src/src/assets/login-bg.jpg

 web_src/src/assets/login-cloud.png

 web_src/src/assets/logo.png

 web_src/src/assets/play.png

 web_src/src/components/Loading.vue

New file
@@ -0,0 +1,98 @@
//loading效果组件

<template>
<div class="loadEffect" :style="{marginTop: marginTop? marginTop : '50%'}">
    <span class="ld-span"></span>
    <span class="ld-span"></span>
    <span class="ld-span"></span>
    <span class="ld-span"></span>
    <span class="ld-span"></span>
    <span class="ld-span"></span>
    <span class="ld-span"></span>
    <span class="ld-span"></span>
</div>
</template>

<script>
export default {
  name: 'Loading',
  props: ["marginTop"]

}
</script>

<style scoped>
.loadEffect{
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
    position: relative;
    top:-50px;
    margin-top:50%;
    transform: scale(.5)
}
.loadEffect .ld-span{
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #67e7d5;
    position: absolute;
    -webkit-animation: load 1.04s ease infinite;
}
@-webkit-keyframes load{
    0%{
    -webkit-transform: scale(1.2);
    opacity: 1;
    }
    100%{
    -webkit-transform: scale(.3);
    opacity: 0.5;
    }
}
.loadEffect .ld-span:nth-child(1){
    left: 0;
    top: 50%;
    margin-top:-10px;
    -webkit-animation-delay:0.13s;
}
.loadEffect .ld-span:nth-child(2){
    left: 14px;
    top: 14px;
    -webkit-animation-delay:0.26s;
}
.loadEffect .ld-span:nth-child(3){
    left: 50%;
    top: 0;
    margin-left: -10px;
    -webkit-animation-delay:0.39s;
}
.loadEffect .ld-span:nth-child(4){
    top: 14px;
    right:14px;
    -webkit-animation-delay:0.52s;
}
.loadEffect .ld-span:nth-child(5){
    right: 0;
    top: 50%;
    margin-top:-10px;
    -webkit-animation-delay:0.65s;
}
.loadEffect .ld-span:nth-child(6){
    right: 14px;
    bottom:14px;
    -webkit-animation-delay:0.78s;
}
.loadEffect .ld-span:nth-child(7){
    bottom: 0;
    left: 50%;
    margin-left: -10px;
    -webkit-animation-delay:0.91s;
}
.loadEffect .ld-span:nth-child(8){
    bottom: 14px;
    left: 14px;
    -webkit-animation-delay:1.04s;
}
</style>

 web_src/src/components/Login.vue

New file
@@ -0,0 +1,180 @@
<template>
<div class="login" id="login">
    <a href="javascript:;" class="log-close"><i class="icons close"></i></a>
    <div class="log-bg">
        <div class="log-cloud cloud1"></div>
        <div class="log-cloud cloud2"></div>
        <div class="log-cloud cloud3"></div>
        <div class="log-cloud cloud4"></div>

        <div class="log-logo">Welcome!</div>
        <div class="log-text"></div>
    </div>
    <div class="log-email">
        <input type="text" placeholder="用户名" :class="'log-input' + (username==''?' log-input-empty':'')" v-model="username"><input type="password" placeholder="密码" :class="'log-input' + (password==''?' log-input-empty':'')"  v-model="password">
        <a href="javascript:;" class="log-btn" @click="login" >登录</a>
    </div>
    <Loading v-if="isLoging" marginTop="-30%"></Loading>
</div>
</template>

<script>
import Loading from './Loading.vue'
import crypto from 'crypto'
export default {
  name: 'Login',
  data(){
      return {
      isLoging: false,
          username: '',
          password: ''
      }
  },
  components:{
    Loading
  },
  created(){
  var that = this;
  document.onkeydown = function(e) {
    var key = window.event.keyCode;
    if (key == 13) {
      that.login();
    }
  }

  },
  methods:{

      //登录逻辑
      login(){
          if(this.username!='' && this.password!=''){
              this.toLogin();
          }
      },

      //登录请求
      toLogin(){

          //一般要跟后端了解密码的加密规则
          //这里例子用的哈希算法来自./js/sha1.min.js

          //需要想后端发送的登录参数
          let loginParam = {
              username: this.username,
              password: crypto.createHash('md5').update(this.password, "utf8").digest('hex')
          }
      var that = this;
      //设置在登录状态
      this.isLoging = true;

      this.$axios.get("/auth/login",{
        params: loginParam
      } )
      .then(function (res) {
        console.log(JSON.stringify(res));
          if (res.data == "success") {
            that.$cookies.set("session", {"username": that.username}) ;
            //登录成功后
            that.$router.push('/');
          }
      })
      .catch(function (error) {
        console.log(error);
      });



    },
     setCookie: function (cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                console.info(cname + "=" + cvalue + "; " + expires);
                document.cookie = cname + "=" + cvalue + "; " + expires;
                console.info(document.cookie);
            },
  }
}
</script>

<style scoped>
.login{position: fixed; overflow: hidden;left: 50%; margin-left: -250px; top:50%; margin-top: -350px; width: 500px; min-height: 555px; z-index: 10; right: 140px; background: #fff;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px; -webkit-box-shadow:  0px 3px 16px -5px #070707; box-shadow:  0px 3px 16px -5px #070707}
.log-close{display: block; position: absolute; top:12px; right: 12px; opacity: 1;}
.log-close:hover .icons{transform: rotate(180deg);}
.log-close .icons{opacity: 1; transition: all .3s}
.log-cloud{background-image: url(../assets/login-cloud.png); width: 63px ;height: 40px; position: absolute; z-index: 1}
.login .cloud1{top:21px; left: -30px; transform: scale(.6); animation: cloud1 20s linear infinite;}
.login .cloud2{top:87px; right: 20px; animation: cloud2 19s linear infinite;}
.login .cloud3{top:160px; left: 5px;transform: scale(.8);animation: cloud3 21s linear infinite;}
.login .cloud4{top:150px; left: -40px;transform: scale(.4);animation: cloud4 19s linear infinite;}
.log-bg{background: url(../assets/login-bg.jpg); width: 100%; height: 312px; overflow: hidden;}
.log-logo{height: 80px; margin: 120px auto 25px; text-align: center; color: #1fcab3; font-weight: bold; font-size: 40px;}
.log-text{color: #57d4c3; font-size: 13px; text-align: center; margin: 0 auto;}
.log-logo,.log-text{z-index: 2}
.icons{background:url(../assets/icons.png) no-repeat; display: inline-block;}
.close{height:16px;width:16px;background-position:-13px 0;}
.login-email{height:17px;width:29px;background-position:-117px 0;}

.log-btns{padding: 15px 0; margin: 0 auto;}
.log-btn{width:402px; display: block; text-align: left; line-height: 50px;margin:0 auto 15px; height:50px; color:#fff; font-size:13px;-webkit-border-radius: 5px; background-color: #3B5999;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
position: relative;}
.log-btn.tw{background-color: #13B4E9}
.log-btn.email{background-color: #50E3CE}
.log-btn:hover,.log-btn:focus{color: #fff; opacity: .8;}

.log-email{text-align: center; margin-top: 20px;}
.log-email .log-btn{background-color: #50E3CE;text-align: center;}
.log-input-empty{border: 1px solid #f37474 !important;}
.isloading{background: #d6d6d6}
.log-btn .icons{margin-left: 30px; vertical-align: middle;}
.log-btn .text{left: 95px; line-height: 50px; text-align: left; position: absolute;}
.log-input{width: 370px;overflow: hidden; padding: 0 15px;font-size: 13px; border: 1px solid #EBEBEB; margin:0 auto 15px; height: 48px; line-height: 48px; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;}
.log-input.warn{border: 1px solid #f88787}

 @-webkit-keyframes cloud1 {
    0%{left: 200px}
    100%{left:-130px;}
}
@keyframes cloud1{
    0%{left: 200px}
    100%{left:-130px;}
}

 @-webkit-keyframes cloud2 {
    0%{left:500px;}
    100%{left:-90px;}
}
@keyframes cloud2{
    0%{left:500px;}
    100%{left:-90px;}
}

@-webkit-keyframes cloud3 {
    0%{left:620px;}
    100%{left:-70px;}
}
@keyframes cloud3{
    0%{left:620px;}
    100%{left:-70px;}
}@-webkit-keyframes cloud4 {
    0%{left:100px;}
    100%{left:-70px;}
}
@keyframes cloud4{
    0%{left:100px;}
    100%{left:-70px;}
}

</style>

 web_src/src/components/UiHeader.vue

New file
@@ -0,0 +1,26 @@
<template>
    <div id="UiHeader">
        <el-menu router :default-active="this.$route.path" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" mode="horizontal">
            <el-menu-item index="/">控制台</el-menu-item>
            <el-menu-item index="/videoList">设备列表</el-menu-item>
            <!-- <el-menu-item index="/videoReplay">录像回看</el-menu-item> -->
            <!-- <el-menu-item index="4">级联设置</el-menu-item> -->
            <el-menu-item style="float: right;" @click="loginout">退出</el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    name: "UiHeader",
    methods:{

          loginout(){
            // 删除cookie，回到登录页面
            this.$cookies.remove("session");
            this.$router.push('/login');
        },
    }
}

</script>

 web_src/src/components/channelList.vue

New file
@@ -0,0 +1,304 @@
<template>
    <div id="channelList">
        <el-container>

            <el-header>
                <uiHeader></uiHeader>
            </el-header>
            <el-main>
                <div style="background-color: #FFFFFF; position: relative; padding: 1rem 0.5rem 0.5rem 0.5rem; text-align: center;">
                    <span style="font-size: 1rem; font-weight: 500; ">通道列表({{parentChannelId ==0 ? deviceId:parentChannelId}})</span>

                </div>
                <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;font-size: 14px;">
                    <el-button icon="el-icon-arrow-left" size="mini" style="margin-right: 1rem;" @click="showDevice">返回</el-button>
                    搜索: <el-input @input="search" style="margin-right: 1rem; width: auto;" size="mini" placeholder="关键字" prefix-icon="el-icon-search" v-model="searchSrt" clearable> </el-input>

                    通道类型: <el-select size="mini" @change="search" style="margin-right: 1rem;" v-model="channelType" placeholder="请选择" default-first-option>
                        <el-option label="全部" value="" ></el-option>
                        <el-option label="设备" value="false"></el-option>
                        <el-option label="子目录" value="true" ></el-option>
                    </el-select>
                    在线状态: <el-select size="mini" @change="search" v-model="online" placeholder="请选择" default-first-option>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="在线" value="on"></el-option>
                        <el-option label="离线" value="off"></el-option>
                    </el-select>

                </div>
                <devicePlayer ref="devicePlayer"></devicePlayer>
                <!--设备列表-->
                <el-table ref="channelListTable" :data="deviceChannelList" :height="winHeight" border style="width: 100%">
                    <el-table-column prop="channelId" label="通道编号" width="210">
                        </el-table-column>
                        <el-table-column prop="name" label="通道名称" width="500">
                        </el-table-column>
                        <el-table-column prop="subCount" label="子节点数">
                        </el-table-column>
                        <el-table-column prop="ptztypeText" label="云台类型">
                        </el-table-column>
                        <el-table-column label="操作" width="240" align="center" fixed="right">
                            <template slot-scope="scope">
                                <el-button size="mini" icon="el-icon-video-play" v-if="scope.row.parental == 0" @click="sendDevicePush(scope.row)">预览视频</el-button>
                                <el-button size="mini" icon="el-icon-s-open"  type="primary" v-if="scope.row.parental == 1" @click="changeSubchannel(scope.row)">查看子目录</el-button>
                                <!-- <el-button size="mini" @click="sendDevicePush(scope.row)">录像查询</el-button> -->
                            </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="currentChange"
                    :current-page="currentPage"
                    :page-size="count"
                    :page-sizes="[15, 20, 30, 50]"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>

            </el-main>
        </el-container>
    </div>
</template>

<script>
     import devicePlayer from './gb28181/devicePlayer.vue'
     import uiHeader from './UiHeader.vue'
    export default {
        name: 'channelList',
        components: {
            devicePlayer,
            uiHeader
        },
        data() {
            return {
                deviceId: this.$route.params.deviceId,
                parentChannelId: this.$route.params.parentChannelId,
                deviceChannelList: [],
                videoComponentList: [],
                currentPlayerInfo: {}, //当前播放对象
                updateLooper: 0, //数据刷新轮训标志
                searchSrt: "",
                channelType: "",
                online: "",
                winHeight: window.innerHeight - 250,
                currentPage: parseInt(this.$route.params.page),
                count: parseInt(this.$route.params.count),
                total:0,
                beforeUrl:"/videoList"
            };
        },

        mounted() {
            this.initData();
            // this.updateLooper = setInterval(this.initData, 10000);
        },
        destroyed() {
            this.$destroy('videojs');
            clearTimeout(this.updateLooper);
        },
        methods: {
            initData: function() {
                if (this.parentChannelId == "" || this.parentChannelId == 0 ) {
                    this.getDeviceChannelList();
                }else{
                    this.showSubchannels();
                }

            },
            initParam: function(){
                this.deviceId= this.$route.params.deviceId;
                this.parentChannelId= this.$route.params.parentChannelId;
                this.currentPage= parseInt(this.$route.params.page);
                this.count= parseInt(this.$route.params.count);
                if (this.parentChannelId == "" || this.parentChannelId == 0 ) {
                    this.beforeUrl = "/videoList"
                }

            },
            currentChange: function(val){
                var url = `/${this.$router.currentRoute.name}/${this.deviceId}/${this.parentChannelId}/${this.count}/${val}`
                console.log(url)
                this.$router.push(url).then(()=>{
                    this.initParam();
                    this.initData();
                })
            },
            handleSizeChange: function(val){
                var url = `/${this.$router.currentRoute.name}/${this.$router.params.deviceId}/${this.$router.params.parentChannelId}/${val}/1`
                this.$router.push(url).then(()=>{
                    this.initParam();
                    this.initData();
                })

            },
            getDeviceChannelList: function() {
                let that = this;
                console.log(this.currentPage - 1)

                this.$axios.get(`/api/devices/${this.$route.params.deviceId}/channels`,{
                    params: {
                        page: that.currentPage - 1,
                        count: that.count,
                        query: that.searchSrt,
                        online: that.online,
                        channelType: that.channelType
                    }
                } )
                .then(function (res) {
                    console.log(res);
                    that.total = res.data.total;
                    that.deviceChannelList = res.data.data;
                    // 防止出现表格错位
                    that.$nextTick(()=>{
                        that.$refs.channelListTable.doLayout();
                    })
                })
                .catch(function (error) {
                    console.log(error);
                });

            },


            //gb28181平台对接
            //刷新设备信息
            refDevice: function(itemData) {
                ///api/devices/{deviceId}/sync
                console.log("刷新对应设备:" + itemData.deviceId);
                this.$axios({
                    method: 'post',
                    url: '/api/devices/' + itemData.deviceId + '/sync'
                }).then(function(res) {
                    // console.log("刷新设备结果："+JSON.stringify(res));
                }).catch(function(e) {
                    that.$message({
                        showClose: true,
                        message: '请求成功',
                        type: 'success'
                    });
                });;
            },
            //通知设备上传媒体流
            sendDevicePush: function(itemData) {
                let deviceId = this.deviceId;

                let channelId = itemData.channelId;
                console.log("通知设备推流1：" + deviceId + " : " + channelId);
                let that = this;
                this.$axios({
                    method: 'get',
                    url: '/api/play/' + deviceId + '/' + channelId
                }).then(function(res) {
                    let ssrc = res.data.ssrc;
                    that.$refs.devicePlayer.play(res.data,deviceId,channelId);
                }).catch(function(e) {
                });
            },
            showDevice: function(){
                this.$router.push(this.beforeUrl).then(()=>{
                    this.initParam();
                    this.initData();
                })
            },
            changeSubchannel(itemData) {
                console.log(this.$router.currentRoute)
                this.beforeUrl = this.$router.currentRoute.path;

                var url = `/${this.$router.currentRoute.name}/${this.$router.currentRoute.params.deviceId}/${itemData.channelId}/${this.$router.currentRoute.params.count}/1`
                this.$router.push(url).then(()=>{
                    this.searchSrt= "";
                    this.channelType= "";
                    this.online= "";
                    this.initParam();
                    this.initData();
                })
            },
            showSubchannels: function(channelId){
                let that = this;

                this.$axios.get(`/api/subChannels/${this.deviceId}/${this.parentChannelId}/channels`,{
                    params: {
                        page: that.currentPage - 1,
                        count: that.count,
                        query: that.searchSrt,
                        online: that.online,
                        channelType: that.channelType
                    }
                } )
                .then(function (res) {
                    that.total = res.data.total;
                    that.deviceChannelList = res.data.data;
                    // 防止出现表格错位
                    that.$nextTick(()=>{
                        that.$refs.channelListTable.doLayout();
                    })
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            search: function() {
                console.log(this.searchSrt)
                this.currentPage = 1;
                this.total = 0;
                this.initData();
            }

        }
    };
</script>

<style>
    .videoList {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .video-item {
        position: relative;
        width: 15rem;
        height: 10rem;
        margin-right: 1rem;
        background-color: #000000;
    }

    .video-item-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
    }

    .video-item-img:after {
        content: "";
        display: inline-block;
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 3rem;
        height: 3rem;
        background-image: url("../assets/loading.png");
        background-size: cover;
        background-color: #000000;
    }

    .video-item-title {
        position: absolute;
        bottom: 0;
        color: #000000;
        background-color: #ffffff;
        line-height: 1.5rem;
        padding: 0.3rem;
        width: 14.4rem;
    }
</style>

 web_src/src/components/control.vue

New file
@@ -0,0 +1,346 @@
<template>
    <div id="app">
        <el-container>
            <el-header>
                <uiHeader></uiHeader>
            </el-header>
            <el-main>
                <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
                    <span style="font-size: 1rem; font-weight: bold;">控制台</span>
                    <div style="position: absolute; right: 1rem; top: 0.3rem;">
                        <el-popover placement="bottom" width="750" height="300" trigger="click">
                            <div style="height: 600px;overflow:auto;">
                                <table class="table-c" cellspacing="0">
                                    <tr v-for="(value, key, index) in serverConfig">
                                        <td style="width: 18rem; text-align: right;">{{ key }}</td>
                                        <td style="width: 33rem; text-align:left">{{ value }}</td>
                                    </tr>
                                </table>
                            </div>
                            <el-button type="primary" slot="reference" size="mini" @click="getServerConfig()">查看服务器配置</el-button>
                        </el-popover>
                        <el-button style="margin-left: 1rem;" type="danger" size="mini" @click="reStartServer()">重启服务器</el-button>
                    </div>
                </div>
                <el-row :gutter="30">
                    <el-col :span="12"><div class="control-table" id="ThreadsLoad">table1</div></el-col>
                    <el-col :span="12"><div class="control-table" id="WorkThreadsLoad">table2</div></el-col>
                </el-row>
                <el-table :data="allSessionData" style="margin-top: 1rem;">
                    <el-table-column prop="peer_ip" label="远端"></el-table-column>
                    <el-table-column prop="local_ip" label="本地"></el-table-column>
                    <el-table-column prop="typeid" label="类型"></el-table-column>
                    <el-table-column align="right">
                        <template slot="header" slot-scope="scope">
                            <el-button icon="el-icon-refresh-right" circle @click="getAllSession()"></el-button>
                        </template>
                        <template slot-scope="scope">
                            <el-button @click.native.prevent="deleteRow(scope.$index, allSessionData)" type="text" size="small">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-main>
            <!-- <el-footer style="position: absolute; bottom: 0; width: 100%;">ZLMediaKit-VUE_UI v1</el-footer> -->
        </el-container>

    </div>
</template>

<script>

import uiHeader from './UiHeader.vue'

import echarts from 'echarts';
export default {
    name: 'app',
    components: {
        echarts,
        uiHeader
    },
    data() {
        return {
            tableOption: {
                // legend: {},
                xAxis: {},
                yAxis: {},
                label: {},
                tooltip: {},
                dataZoom: [],
                series: []
            },
            table1Option: {
                // legend: {},
                xAxis: {},
                yAxis: {},
                label: {},
                tooltip: {},
                series: []
            },
            mChart: null,
            mChart1: null,
            charZoomStart: 0,
            charZoomEnd: 100,
            chartInterval: 0, //更新图表统计图定时任务标识
            allSessionData: [],
            visible: false,
            serverConfig: {}
        };
    },
    mounted() {
        this.getAllSession();
        this.initTable();
        this.updateData();
        this.chartInterval = setInterval(this.updateData, 3000);
    },
    destroyed() {
        clearInterval(this.chartInterval); //释放定时任务
    },
    methods: {
        updateData: function() {
            this.getThreadsLoad();
        },
        /**
         * 获取线程状态
         */
        getThreadsLoad: function() {
            let that = this;
            this.$axios({
                method: 'get',
                url: '/zlm/index/api/getThreadsLoad'
            }).then(function(res) {
                if (res.data.code == 0) {
                    that.tableOption.xAxis.data.push(new Date().toLocaleTimeString());
                    that.table1Option.xAxis.data.push(new Date().toLocaleTimeString());

                    for (var i = 0; i < res.data.data.length; i++) {
                        if (that.tableOption.series[i] === undefined) {
                            let data = {
                                data: [],
                                type: 'line'
                            };
                            let data1 = {
                                data: [],
                                type: 'line'
                            };
                            data.data.push(res.data.data[i].delay);
                            data1.data.push(res.data.data[i].load);
                            that.tableOption.series.push(data);
                            that.table1Option.series.push(data1);
                        } else {
                            that.tableOption.series[i].data.push(res.data.data[i].delay);
                            that.table1Option.series[i].data.push(res.data.data[i].load);
                        }
                    }
                    that.tableOption.dataZoom[0].start = that.charZoomStart;
                    that.tableOption.dataZoom[0].end = that.charZoomEnd;
                    that.table1Option.dataZoom[0].start = that.charZoomStart;
                    that.table1Option.dataZoom[0].end = that.charZoomEnd;
                    //that.myChart = echarts.init(document.getElementById('ThreadsLoad'));
                    that.myChart.setOption(that.tableOption, true);
                    // that.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
                    that.myChart1.setOption(that.table1Option, true);
                }
            });
        },
        initTable: function() {
            let that = this;
            this.tableOption.xAxis = {
                type: 'category',
                data: [], // x轴数据
                name: '时间', // x轴名称
                // x轴名称样式
                nameTextStyle: {
                    fontWeight: 300,
                    fontSize: 15
                }
            };
            this.tableOption.yAxis = {
                type: 'value',
                name: '延迟率', // y轴名称
                boundaryGap: [0, '100%'],
                max: 100,
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value} %'
                },
                // y轴名称样式
                nameTextStyle: {
                    fontWeight: 300,
                    fontSize: 15
                }
            };
            this.tableOption.dataZoom = [
                {
                    show: true,
                    start: this.charZoomStart,
                    end: this.charZoomEnd
                }
            ];
            this.myChart = echarts.init(document.getElementById('ThreadsLoad'));
            this.myChart.setOption(this.tableOption);
            this.myChart.on('dataZoom', function(event) {
                if (event.batch) {
                    that.charZoomStart = event.batch[0].start;
                    that.charZoomEnd = event.batch[0].end;
                } else {
                    that.charZoomStart = event.start;
                    that.charZoomEnd = event.end;
                }
            });

            this.table1Option.xAxis = {
                type: 'category',
                data: [], // x轴数据
                name: '时间', // x轴名称
                // x轴名称样式
                nameTextStyle: {
                    fontWeight: 300,
                    fontSize: 15
                }
            };
            this.table1Option.yAxis = {
                type: 'value',
                name: '负载率', // y轴名称
                boundaryGap: [0, '100%'],
                max: 100,
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value} %'
                },
                // y轴名称样式
                nameTextStyle: {
                    fontWeight: 300,
                    fontSize: 15
                }
            };
            this.table1Option.dataZoom = [
                {
                    show: true,
                    start: this.charZoomStart,
                    end: this.charZoomEnd
                }
            ];
            this.myChart1 = echarts.init(document.getElementById('WorkThreadsLoad'));
            this.myChart1.setOption(this.table1Option);
            this.myChart1.on('dataZoom', function(event) {
                if (event.batch) {
                    that.charZoomStart = event.batch[0].start;
                    that.charZoomEnd = event.batch[0].end;
                } else {
                    that.charZoomStart = event.start;
                    that.charZoomEnd = event.end;
                }
            });
        },

        getAllSession: function() {
            let that = this;
            that.allSessionData = [];
            console.log("地址："+'/zlm/index/api/getAllSession');
            this.$axios({
                method: 'get',
                url: '/zlm/index/api/getAllSession'
            }).then(function(res) {
                res.data.data.forEach(item => {
                    let data = {
                        peer_ip: item.peer_ip,
                        local_ip: item.local_ip,
                        typeid: item.typeid,
                        id: item.id
                    };
                    that.allSessionData.push(data);
                });
            });
        },
        getServerConfig: function() {
            let that = this;
            this.$axios({
                method: 'get',
                url: '/zlm/index/api/getServerConfig'
            }).then(function(res) {
                that.serverConfig = res.data.data[0];
                that.visible = true;
            });
        },
        reStartServer: function() {
            let that = this;
            this.$confirm('此操作将重启媒体服务器, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let that = this;
                this.$axios({
                    method: 'get',
                    url: '/zlm/index/api/restartServer'
                }).then(function(res) {
                    that.getAllSession();
                    if (res.data.code == 0) {
                        that.$message({
                            type: 'success',
                            message: '操作完成'
                        });
                    }
                });
            });
        },
        deleteRow: function(index, tabledata) {
            let that = this;
            this.$confirm('此操作将断开该通信链路, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    that.deleteSession(tabledata[index].id);
                })
                .catch(() => {
                    console.log('id：' + JSON.stringify(tabledata[index]));
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            console.log(JSON.stringify(tabledata[index]));
        },
        deleteSession: function(id) {
            let that = this;
            this.$axios({
                method: 'get',
                url: '/zlm/index/api/kick_session&id=' + id
            }).then(function(res) {
                that.getAllSession();
                that.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            });
        }
    }
};
</script>

<style>
#app {
    height: 100%;
}
.control-table {
    background-color: #ffffff;
    height: 25rem;
}
.table-c {
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}
.table-c td {
    border-left: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    padding: 0.2rem;
}
.el-table {
    width: 99.9% !important;
}
</style>

 web_src/src/components/gb28181/devicePlayer.vue

New file
@@ -0,0 +1,377 @@
<template>
    <div id="devicePlayer">
        <el-dialog title="视频播放" top="0" :visible.sync="showVideoDialog" :destroy-on-close="true" @close="stop()">
      <LivePlayer v-if="showVideoDialog" ref="videoPlayer" :videoUrl="videoUrl" :error="videoError" fluent autoplay live stretch></LivePlayer>
            <div id="shared" style="text-align: right; margin-top: 1rem;">
                <el-tabs v-model="tabActiveName">
                    <el-tab-pane label="媒体流信息" name="media">
                        <div style="margin-bottom: 0.5rem;">
                            <el-button type="primary" size="small" @click="playRecord(true, '')">播放</el-button>
                             <el-button type="primary" size="small" @click="startRecord()">录制</el-button>
                             <el-button type="primary" size="small" @click="stopRecord()">停止录制</el-button>
                        </div>
                        <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                            <span style="width: 5rem; line-height: 2.5rem; text-align: right;">播放地址：</span>
                            <el-input v-model="getPlayerShared.sharedUrl" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedUrl)"></el-input>
                        </div>
                        <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                            <span style="width: 5rem; line-height: 2.5rem; text-align: right;">iframe：</span>
                            <el-input v-model="getPlayerShared.sharedIframe" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedIframe)"></el-input>
                        </div>
                        <div style="display: flex; margin-bottom: 0.5rem; height: 2.5rem;">
                            <span style="width: 5rem; line-height: 2.5rem; text-align: right;">资源地址：</span>
                            <el-input v-model="getPlayerShared.sharedRtmp" :disabled="true" v-on:click.native="copySharedInfo(getPlayerShared.sharedRtmp)"></el-input>
                        </div>
                    </el-tab-pane>
                    <!--{"code":0,"data":{"paths":["22-29-30.mp4"],"rootPath":"/home/kkkkk/Documents/ZLMediaKit/release/linux/Debug/www/record/hls/kkkkk/2020-05-11/"}}-->
                    <el-tab-pane label="录像查询" name="second">
                        <el-date-picker v-model="videoHistory.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间"
                         @change="recordList()"></el-date-picker>
                        <el-date-picker v-model="videoHistory.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间"
                         @change="recordList()"></el-date-picker>
                        <el-table :data="videoHistory.searchHistoryResult" style="width: 100%">
                            <el-table-column label="名称" prop="name" width="150"></el-table-column>
                            <el-table-column label="文件" prop="filePath" width="300"></el-table-column>
                            <el-table-column label="开始时间" prop="startTime" width="160"></el-table-column>
                            <el-table-column label="结束时间" prop="endTime" width="160"></el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini" @click="playRecord(false, scope.row)">播放</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <!--遥控界面-->
                    <el-tab-pane label="云台控制" name="third">
                        <div style="display: flex; justify-content: center;">
                            <div class="control-wrapper">
                                <div class="control-btn control-top" @mousedown="ptzCamera(0, 1, 0)" @mouseup="ptzCamera(0, 0, 0)">
                                    <i class="el-icon-caret-top"></i>
                                    <div class="control-inner-btn control-inner"></div>
                                </div>
                                <div class="control-btn control-left" @mousedown="ptzCamera(1, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
                                    <i class="el-icon-caret-left"></i>
                                    <div class="control-inner-btn control-inner"></div>
                                </div>
                                <div class="control-btn control-bottom" @mousedown="ptzCamera(0, 2, 0)" @mouseup="ptzCamera(0, 0, 0)">
                                    <i class="el-icon-caret-bottom"></i>
                                    <div class="control-inner-btn control-inner"></div>
                                </div>
                                <div class="control-btn control-right" @mousedown="ptzCamera(2, 0, 0)" @mouseup="ptzCamera(0, 0, 0)">
                                    <i class="el-icon-caret-right"></i>
                                    <div class="control-inner-btn control-inner"></div>
                                </div>
                                <div class="control-round">
                                    <div class="control-round-inner"><i class="fa fa-pause-circle"></i></div>
                                </div>

                                <div style="position: absolute; left: 7.25rem; top: 1.25rem" @mousedown="ptzCamera(0, 0, 2)" @mouseup="ptzCamera(0, 0, 0)"><i
                                     class="el-icon-zoom-in" style="font-size: 1.875rem;"></i></div>
                                <div style="position: absolute; left: 7.25rem; top: 3.25rem; font-size: 1.875rem;" @mousedown="ptzCamera(0, 0, 1)"
                                 @mouseup="ptzCamera(0, 0, 0)"><i class="el-icon-zoom-out"></i></div>
                            </div>
                        </div>

                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import LivePlayer from '@liveqing/liveplayer'
    export default {
        name: 'devicePlayer',
        props: {},
        components: {
            LivePlayer
        },
        computed: {
            getPlayerShared: function() {
        return {
                    sharedUrl: window.location.host + '/' + this.videoUrl,
                    sharedIframe: '<iframe src="' + window.location.host + '/' + this.videoUrl + '"></iframe>',
                    sharedRtmp: this.videoUrl
                };
            }
        },
        created() {
            // this.videoHistory.searchHistoryResult = falsificationData.recordData.recordList;
        },
        data() {
            return {
                video:'http://lndxyj.iqilu.com/public/upload/2019/10/14/8c001ea0c09cdc59a57829dabc8010fa.mp4',
                videoUrl: '',
                videoHistory: {
                    startTime: '',
                    endTime: '',
                    searchHistoryResult: [] //媒体流历史记录搜索结果
                },
                showVideoDialog: false,
                normalssrc: '',
                ssrc: '',
                deviceId: '',
                channelId: '',
                tabActiveName: 'media'
            };
        },
        methods: {

            play: function(streamInfo, deviceId, channelId) {
        this.ssrc = streamInfo.ssrc;
                this.deviceId = deviceId;
                this.channelId = channelId;
                this.videoUrl = streamInfo.flv + "?" + new Date().getTime();
                this.showVideoDialog = true;
                console.log(this.ssrc);
            },
            stop: function() {
                console.log('关闭视频');
                this.$refs.videoPlayer.pause();
                this.videoUrl = '';
                this.showVideoDialog = false;
                this.$axios({
                    method: 'post',
                    url: '/api/play/' + this.ssrc + '/stop'
                }).then(function(res) {
                    console.log(JSON.stringify(res));
                });

                this.$axios({
                    method: 'post',
                    url: '/api/playback/' + this.ssrc + '/stop'
                }).then(function(res) {
                    console.log(JSON.stringify(res));
                });
            },
            copySharedInfo: function(data) {
                console.log('复制内容：' + data);
                let _this = this;
                this.$copyText(data).then(
                    function(e) {
                        _this.$message({
                            showClose: true,
                            message: '复制成功',
                            type: 'success'
                        });
                    },
                    function(e) {
                        _this.$message({
                            showClose: true,
                            message: '复制失败，请手动复制',
                            type: 'error'
                        });
                    }
                );
            },

            recordList: function() {
                if (!this.videoHistory.startTime || !this.videoHistory.endTime) {
                    return;
                }
                let that = this;
                this.$axios({
                    method: 'get',
                    url: '/api/record/' + this.deviceId + '/' + this.channelId + '?startTime=' + this.videoHistory
                        .startTime + '&endTime=' + this.videoHistory.endTime
                }).then(function(res) {
                    console.log(JSON.stringify(res));
                }).catch(function(e) {
                    // that.videoHistory.searchHistoryResult = falsificationData.recordData;
                });

            },
            playRecord: function(isBackLive, rowData) {
                let that = this;
                if(isBackLive){
                    this.videoUrl=this.getVideoUrlBySsrc(this.normalssrc);
                    return;
                }
                this.$axios({
                    method: 'get',
                    url: '/api/playback/' + this.deviceId + '/' + this.channelId + '?startTime=' + rowData.startTime + '&endTime=' +
                        rowData.endTime
                }).then(function(res) {
                    let ssrc = res.data.ssrc;
                     that.videoUrl = that.getVideoUrlBySsrc(ssrc);
                    //that.videoUrl='http://hls.cntv.kcdnvip.com/asp/hls/main/0303000a/3/default/f466089412c04a759c5515dbfcc3ac3d/main.m3u8?maxbr=2048';
                });

            },
            ptzCamera: function(leftRight, upDown, zoom) {
                console.log('云台控制：' + leftRight + ' : ' + upDown + " : " + zoom);
                let that = this;
                this.$axios({
                    method: 'post',
                    url: '/api/ptz/' + this.deviceId + '/' + this.channelId + '?leftRight=' + leftRight + '&upDown=' + upDown +
                        '&inOut=' + zoom + '&moveSpeed=50&zoomSpeed=50'
                }).then(function(res) {});
            },
            //////////////////////播放器事件处理//////////////////////////
            videoError:function(e){
                console.log("播放器错误："+JSON.stringify(e));
            }
        }
    };
</script>

<style>
    .control-wrapper {
        position: relative;
        width: 6.25rem;
        height: 6.25rem;
        max-width: 6.25rem;
        max-height: 6.25rem;
        margin: 0 auto;
        border-radius: 100%;
        float: left;
    }

    .control-btn {
        display: flex;
        justify-content: center;
        position: absolute;
        width: 44%;
        height: 44%;
        border-radius: 5px;
        border: 1px solid #78aee4;
        box-sizing: border-box;
        transition: all 0.3s linear;
    }

    .control-btn i {
        font-size: 20px;
        color: #78aee4;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .control-round {
        position: absolute;
        top: 21%;
        left: 21%;
        width: 58%;
        height: 58%;
        background: #fff;
        border-radius: 100%;
    }

    .control-round-inner {
        position: absolute;
        left: 15%;
        top: 15%;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 70%;
        height: 70%;
        font-size: 40px;
        color: #78aee4;
        border: 1px solid #78aee4;
        border-radius: 100%;
        transition: all 0.3s linear;
    }

    .control-inner-btn {
        position: absolute;
        width: 60%;
        height: 60%;
        background: #fafafa;
    }

    .control-top {
        top: -8%;
        left: 27%;
        transform: rotate(-45deg);
        border-radius: 5px 100% 5px 0;
    }

    .control-top i {
        transform: rotate(45deg);
        border-radius: 5px 100% 5px 0;
    }

    .control-top .control-inner {
        left: -1px;
        bottom: 0;
        border-top: 1px solid #78aee4;
        border-right: 1px solid #78aee4;
        border-radius: 0 100% 0 0;
    }

    .control-top .fa {
        transform: rotate(45deg) translateY(-7px);
    }

    .control-left {
        top: 27%;
        left: -8%;
        transform: rotate(45deg);
        border-radius: 5px 0 5px 100%;
    }

    .control-left i {
        transform: rotate(-45deg);
    }

    .control-left .control-inner {
        right: -1px;
        top: -1px;
        border-bottom: 1px solid #78aee4;
        border-left: 1px solid #78aee4;
        border-radius: 0 0 0 100%;
    }

    .control-left .fa {
        transform: rotate(-45deg) translateX(-7px);
    }

    .control-right {
        top: 27%;
        right: -8%;
        transform: rotate(45deg);
        border-radius: 5px 100% 5px 0;
    }

    .control-right i {
        transform: rotate(-45deg);
    }

    .control-right .control-inner {
        left: -1px;
        bottom: -1px;
        border-top: 1px solid #78aee4;
        border-right: 1px solid #78aee4;
        border-radius: 0 100% 0 0;
    }

    .control-right .fa {
        transform: rotate(-45deg) translateX(7px);
    }

    .control-bottom {
        left: 27%;
        bottom: -8%;
        transform: rotate(45deg);
        border-radius: 0 5px 100% 5px;
    }

    .control-bottom i {
        transform: rotate(-45deg);
    }

    .control-bottom .control-inner {
        top: -1px;
        left: -1px;
        border-bottom: 1px solid #78aee4;
        border-right: 1px solid #78aee4;
        border-radius: 0 0 100% 0;
    }

    .control-bottom .fa {
        transform: rotate(-45deg) translateY(7px);
    }
</style>

 web_src/src/components/videoList.vue

New file
@@ -0,0 +1,241 @@
<template>
    <div id="app">
        <el-container>

            <el-header>
                <uiHeader></uiHeader>
            </el-header>
            <el-main>
                <div style="background-color: #FFFFFF; margin-bottom: 1rem; position: relative; padding: 0.5rem; text-align: left;">
                    <span style="font-size: 1rem; font-weight: bold;">设备列表</span>
                    <div style="position: absolute; right: 1rem; top: 0.3rem;">
                        <el-button icon="el-icon-refresh-right" circle size="mini" @click="getDeviceList()"></el-button>
                    </div>
                </div>
                <devicePlayer ref="devicePlayer"></devicePlayer>
                <!--设备列表-->
                <el-table :data="deviceList" border style="width: 100%" :height="winHeight">
                    <el-table-column prop="name" label="名称" width="180" align="center">
                    </el-table-column>
                    <el-table-column prop="deviceId" label="设备编号" width="240" align="center">
                    </el-table-column>
                    <el-table-column label="地址" width="180" align="center">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.host.address }}</el-tag>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="manufacturer" label="厂家" align="center">
                    </el-table-column>
                    <el-table-column prop="model" label="固件版本" align="center">
                    </el-table-column>
                    <el-table-column prop="transport" label="通讯方式" align="center">
                    </el-table-column>
                    <el-table-column prop="channelCount" label="通道数" align="center">
                    </el-table-column>
                    <el-table-column label="状态" width="180" align="center">
                        <template slot-scope="scope">
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.online==1?'在线' :'离线'}}</el-tag>
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="240" align="center" fixed="right">
                        <template slot-scope="scope">
                            <el-button size="mini" icon="el-icon-refresh"  @click="refDevice(scope.row)">刷新</el-button>
                            <el-button size="mini" icon="el-icon-s-open"  type="primary" @click="showChannelList(scope.row)">查看通道</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    style="float: right"
                    @size-change="handleSizeChange"
                    @current-change="currentChange"
                    :current-page="currentPage"
                    :page-size="count"
                    :page-sizes="[15, 25, 35, 50]"
                    layout="total, sizes, prev, pager, next"
                    :total="total">
                </el-pagination>

            </el-main>
        </el-container>
    </div>
</template>

<script>
     import devicePlayer from './gb28181/devicePlayer.vue'
     import uiHeader from './UiHeader.vue'
    export default {
        name: 'app',
        components: {
            devicePlayer,
            uiHeader
        },
        data() {
            return {
                deviceList: [], //设备列表
                currentDevice: {}, //当前操作设备对象

                videoComponentList: [],
                updateLooper: 0, //数据刷新轮训标志
                currentDeviceChannelsLenth:0,
                winHeight: window.innerHeight - 200,
                currentPage:1,
                count:15,
                total:0
            };
        },
        computed: {
            getcurrentDeviceChannels: function() {
                let data = this.currentDevice['channelMap'];
                let channels = null;
                if (data) {
                    channels = Object.keys(data).map(key => {
                        return data[key];
                    });
                    this.currentDeviceChannelsLenth = channels.length;
                }

                console.log("数据：" + JSON.stringify(channels));
                return channels;
            }
        },
        mounted() {
            this.initData();
            this.updateLooper = setInterval(this.initData, 10000);
        },
        destroyed() {
            this.$destroy('videojs');
            clearTimeout(this.updateLooper);
        },
        methods: {
            initData: function() {
                this.getDeviceList();
            },
            currentChange: function(val){
                this.currentPage = val;
                this.getDeviceList();
            },
            handleSizeChange: function(val){
                this.count = val;
                this.getDeviceList();
            },
            getDeviceList: function() {
                let that = this;

                this.$axios.get(`/api/devices`,{
                    params: {
                        page: that.currentPage - 1,
                        count: that.count
                    }
                } )
                .then(function (res) {
                    console.log(res);
                    that.total = res.data.total;
                    that.deviceList = res.data.data;
                })
                .catch(function (error) {
                    console.log(error);
                });

            },
            showChannelList: function(row) {
                console.log(JSON.stringify(row))
                this.$router.push(`/channelList/${row.deviceId}/0/15/1`);
            },


            //gb28181平台对接
            //刷新设备信息
            refDevice: function(itemData) {
                ///api/devices/{deviceId}/sync
                console.log("刷新对应设备:" + itemData.deviceId);
                this.$axios({
                    method: 'post',
                    url: '/api/devices/' + itemData.deviceId + '/sync'
                }).then(function(res) {
                    // console.log("刷新设备结果："+JSON.stringify(res));
                }).catch(function(e) {
                    that.$message({
                        showClose: true,
                        message: '请求成功',
                        type: 'success'
                    });
                });;
            },
            //通知设备上传媒体流
            sendDevicePush: function(itemData) {
                let deviceId = this.currentDevice.deviceId;
                let channelId = itemData.channelId;
                console.log("通知设备推流1：" + deviceId + " : " + channelId);
                let that = this;
                this.$axios({
                    method: 'get',
                    url: '/api/play/' + deviceId + '/' + channelId
                }).then(function(res) {
                    let ssrc = res.data.ssrc;
                    that.$refs.devicePlayer.play(ssrc,deviceId,channelId);
                }).catch(function(e) {
                });
            }

        }
    };
</script>

<style>
    .videoList {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .video-item {
        position: relative;
        width: 15rem;
        height: 10rem;
        margin-right: 1rem;
        background-color: #000000;
    }

    .video-item-img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        height: 100%;
    }

    .video-item-img:after {
        content: "";
        display: inline-block;
        position: absolute;
        z-index: 2;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 3rem;
        height: 3rem;
        background-image: url("../assets/loading.png");
        background-size: cover;
        background-color: #000000;
    }

    .video-item-title {
        position: absolute;
        bottom: 0;
        color: #000000;
        background-color: #ffffff;
        line-height: 1.5rem;
        padding: 0.3rem;
        width: 14.4rem;
    }
</style>

 web_src/src/main.js

New file
@@ -0,0 +1,25 @@
import Vue from 'vue';
import App from './App.vue';
Vue.config.productionTip = false;
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import router from './router/index.js';
import axios from 'axios';
import VueCookies from 'vue-cookies';

import echarts from 'echarts';
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
Vue.use(ElementUI);
Vue.use(VueCookies);
Vue.prototype.$axios = axios;

axios.defaults.baseURL = (process.env.NODE_ENV === 'development') ? process.env.BASE_API : "";

Vue.prototype.$cookies.config(60*30);


new Vue({
    router: router,
    render: h => h(App),
}).$mount('#app')