Skip to content

X
xcLab
提交 cd9173c3 authored 作者: Your Name's avatar Your Name
浏览文件
操作

环境验证

上级 80a7722a
隐藏空白字符变更
内嵌 并排
正在显示 包含 760 行增加 和 149 行删除
config.js
浏览文件 @ cd9173c3
...@@ -4,10 +4,10 @@ ...@@ -4,10 +4,10 @@
// 服务地址 // 服务地址
// const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock // const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock
// const IP = 'http://192.168.1.54:8077'; const IP = 'http://192.168.1.54:8077';
// const WS = '192.168.1.54:8077'; const WS = '192.168.1.54:8077';
const IP = 'http://120.55.57.35:8077'; // const IP = 'http://120.55.57.35:8077';
const WS = '120.55.57.35:8077'; // const WS = '120.55.57.35:8077';
// 请求目标服务器域名配置 // 请求目标服务器域名配置
const DOMAIN_NAME = { const DOMAIN_NAME = {
......
package-lock.json
浏览文件 @ cd9173c3
{ {
"name": "test1", "name": "xclab",
"version": "0.1.0", "version": "0.1.0",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
...@@ -3006,6 +3006,14 @@ ...@@ -3006,6 +3006,14 @@
"safer-buffer": "^2.1.0" "safer-buffer": "^2.1.0"
} }
}, },
"echarts": {
"version": "4.7.0",
"resolved": "https://registry.npmjs.org/echarts/-/echarts-4.7.0.tgz",
"integrity": "sha512-NlOTdUcAsIyCCG+N4uh0ZEvXtrPW2jvcuqf03RyqYeCKzyPbiOQ4I3MdKXMhxG3lBdqQNdNXVT71SB4KTQjN0A==",
"requires": {
"zrender": "4.3.0"
}
},
"ee-first": { "ee-first": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
...@@ -10637,6 +10645,11 @@ ...@@ -10637,6 +10645,11 @@
"dev": true "dev": true
} }
} }
},
"zrender": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.0.tgz",
"integrity": "sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA=="
} }
} }
} }
package.json
浏览文件 @ cd9173c3
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2", "axios": "^0.19.2",
"echarts": "^4.7.0",
"element-ui": "^2.13.0", "element-ui": "^2.13.0",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.1.5", "vue-router": "^3.1.5",
......
src/components/dial/newApply.vue
浏览文件 @ cd9173c3
<!-- 技术路线 -->
<template> <template>
<div class="newApply"> <div class="newApply">
<p>技术路线</p> <p>技术路线</p>
...@@ -7,6 +8,7 @@ ...@@ -7,6 +8,7 @@
<!--<el-radio v-model="tech" :label="1">{{item.name}}</el-radio>--> <!--<el-radio v-model="tech" :label="1">{{item.name}}</el-radio>-->
<span @click="check(index)"> <i :class="(index == isCheck - 1) ? 'isActive': ''"></i> </span> <span @click="check(index)"> <i :class="(index == isCheck - 1) ? 'isActive': ''"></i> </span>
<div>{{item.name}}</div> <div>{{item.name}}</div>
</div> </div>
<div class="newApply-content"> <div class="newApply-content">
<div> <div>
...@@ -52,7 +54,6 @@ export default { ...@@ -52,7 +54,6 @@ export default {
console.log(this.isCheck) console.log(this.isCheck)
this.isCheck = i + 1 this.isCheck = i + 1
console.log(this.isCheck) console.log(this.isCheck)
}, },
makeSure() { makeSure() {
let a = this.applyId; let a = this.applyId;
......
src/main.js
浏览文件 @ cd9173c3
...@@ -6,6 +6,9 @@ import router from './router'; ...@@ -6,6 +6,9 @@ import router from './router';
import store from './store'; import store from './store';
import server from './services/server'; import server from './services/server';
import './assets/css/base.css'; import './assets/css/base.css';
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.prototype.$server = server; Vue.prototype.$server = server;
Vue.use(ElementUI); Vue.use(ElementUI);
......
src/router/index.js
浏览文件 @ cd9173c3
// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import labSystem from '../views/labSystem.vue'
//
// Vue.use(VueRouter)
//
// const routes = [
// {
// path: '/',
// name: 'labSystem',
// component: labSystem
// },
// ]
//
// const router = new VueRouter({
// // mode: 'history',
// base: process.env.BASE_URL,
// routes
// })
//
// export default router
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import labSystem from '../views/labSystem.vue' import Home from '../views/Home.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/', path: '/',
name: 'labSystem', name: 'Home',
component: labSystem component: Home,
redirect: '/labSystem',
children: [
{
path: '/labSystem',
name: 'labSystem',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/labSystem.vue')
},
{
path: '/verifyEnvironment',
name: 'verifyEnvironment',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/verifyEnvironment.vue')
},
{
path: '/qualityResult',
name: 'qualityResult',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/qualityResult.vue')
},
{
path: '/testAnalysis',
name: 'testAnalysis',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/testAnalysis.vue')
},
]
}, },
] ]
const router = new VueRouter({ const router = new VueRouter({
// mode: 'history', routes
base: process.env.BASE_URL,
routes
}) })
export default router export default router
src/views/labSystem.vue
浏览文件 @ cd9173c3
...@@ -167,9 +167,8 @@ export default { ...@@ -167,9 +167,8 @@ export default {
pathSuffix: '', // 链接 pathSuffix: '', // 链接
jenkinsName: '', // webstock jenkinsName: '', // webstock
logData:'', // 日志 logData:'', // 日志
data: '', techId: '', // techID技术路线
osId: '', osId: '', // 传给子组件 用于选中对比的id
techId: ''
}; };
}, },
// 方法集合 // 方法集合
...@@ -194,11 +193,7 @@ export default { ...@@ -194,11 +193,7 @@ export default {
this.pathSuffix = res.data.pathSuffix this.pathSuffix = res.data.pathSuffix
this.jenkinsName = res.data.jenkinsName this.jenkinsName = res.data.jenkinsName
this.copyWebsocket(res.data.jenkinsName) this.copyWebsocket(res.data.jenkinsName)
// localStorage.setItem('jenkinsName',this.jenkinsName);
// console.log(localStorage.getItem('jenkinsName'))
this.techId = res.data.techId; this.techId = res.data.techId;
console.log('66666666',this.techId)
}).catch(err => { }).catch(err => {
// console.log(err); // console.log(err);
this.$message.error('数据请求失败'); this.$message.error('数据请求失败');
...@@ -213,7 +208,7 @@ export default { ...@@ -213,7 +208,7 @@ export default {
this.applyMessage = res.data this.applyMessage = res.data
this.applyId = this.id this.applyId = this.id
this.osId = this.techId this.osId = this.techId
console.log('909090',this.osId) // console.log('909090',this.osId)
// console.log('77777',this.applyId) // console.log('77777',this.applyId)
}).catch(err => { }).catch(err => {
// console.log(err) // console.log(err)
...@@ -293,15 +288,8 @@ export default { ...@@ -293,15 +288,8 @@ export default {
console.log(1) console.log(1)
this.getProject(); this.getProject();
}, },
// newWebsocket(){
// console.log(99)
// this.copyWebsocket();
// },
websocketCosle(e){ websocketCosle(e){
this.WS.close() this.WS.close()
// const socket = new WebSocket(`ws://${baseUrl.WS_CONT}/webServer/${this.jenkinsName}`);
// socket.close();
// this.copyWebsocket();
} }
}, },
// 监听属性 类似于data概念 // 监听属性 类似于data概念
......
src/views/qualityResult.vue 0 → 100644
浏览文件 @ cd9173c3
<!-- 量化体验结果页面 -->
<template>
<div class="qualityResult">
<div class="labContent">
<div class="labContent-title">
<p >XC环境验证系统</p>
</div>
<div class="themeContent">
<div class="themeName"> <i></i> 量化体验结果页面 </div>
<div class="qualityResult-table">
<el-table
border
stripe
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
align="center"
label="体验项"
width="180">
</el-table-column>
<el-table-column
prop="name"
align="center"
label="上次操作(技术路线)"
width="180">
</el-table-column>
<el-table-column
prop="address"
align="center"
label="技术路线1">
</el-table-column>
<el-table-column
prop="address"
align="center"
label="技术路线2">
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'qualityResult',
// import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
};
},
// 方法集合
methods: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
.qualityResult {
background: #ebf0f8;
padding: 30px 45px ;
height: 96vh;
overflow-y: scroll;
}
.labContent {
width: 100%;
background: #fff;
height: 163vh;
}
.labContent-title p {
font-size: 24px;
color: #233b6e;
padding: 30px;
text-align: center;
}
.themeContent {
padding: 0 64px;
}
.themeName {
text-align: left;
position: relative;
background-color: #ecf1fc;
height: 40px;
margin-top: 40px;
width: 100%;
line-height: 40px;
font-weight: bold;
font-size: 20px
}
.themeName i {
display: block;
float: left;
background-color: #4877e6;
height: 40px;
width: 4px;
margin-right: 10px;
}
/*table表格样式*/
.qualityResult-table {
margin-top: 32px;
}
.qualityResult-table >>> .el-table {
box-shadow:0 0 9px 3px #f5f8fd;
}
.qualityResult-table >>> .el-table thead {
color: #333;
}
.qualityResult-table >>> .el-table td, .el-table th.is-leaf {
border-right: none;
}
.qualityResult-table >>> .el-table_1_column_1 {
border-right: none;
}
.qualityResult-table >>> .el-table_1_column_2 {
border-right: none;
}
.qualityResult-table >>> .el-table_1_column_3 {
border-right: none;
}
.qualityResult-table >>> .el-table th, .el-table tr {
height: 70px;
}
.qualityResult-table >>> .el-table__body .el-table__row {
height: 60px;
}
.qualityResult-table >>> .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: blue;
color: #fff;
}
.qualityResult-table >>> .el-table--striped .el-table__body tr.el-table__row--striped:hover td {
background-color: blue;
color: #fff;
}
.qualityResult-table >>> .el-table--striped .el-table__body tr.el-table__row--striped td {
background: #f5f8fd;
}
</style>
\ No newline at end of file
src/views/testAnalysis.vue 0 → 100644
浏览文件 @ cd9173c3
<!-- 体验分析页面 -->
<template>
<div class="testAnalysis">
<div class="labContent">
<div class="labContent-title">
<p >XC环境验证系统</p>
</div>
<div class="themeContent">
<div class="themeName"> <i></i> xx体验分析 </div>
<div class="">
<div class="testAnalysis-first">
<p>
体验项：
<span>
<el-select style="margin-left: 10px;width:200px;" v-model="testType" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</span>
</p>
<p>
时间：
<span>
<el-date-picker
v-model="valueDate"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']">
</el-date-picker>
</span>
</p>
</div>
<div class="testAnalysis-second">
<p class="secondP" >
路线选择：
<span>
<ul class="secondUl" style="height: 100%;">
<li @click="allCheckClick" class="allCheck"> <i :class="{ allcheckImg:allCheck === true}" ></i> 全选</li>
<li class="testLi" style="height: 50px;" v-for="(item, index) in checkList" :key="index">
<div class="testLi-text">
<span :class="{'checkImg': checkImg === index,}" class="tickCheck" @click="tickClick(item,index)"></span>
<span class="" :title="item.name">{{item.name}}</span>
</div>
</li>
</ul>
</span>
</p>
</div>
<div class="testAnalysis-third">
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'testAnalysis',
// import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {
testType: '',
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}],
valueDate: '',
checkList: [ // 全选 选择
{name: '技术路线1'},
{name: '技术路线2'},
{name: '技术路线3'},
{name: '技术路线4'},
{name: '技术路线5'},
],
checkImg: -1,
allCheck: false
};
},
// 方法集合
methods: {
tickClick(item,index) {
console.log(item,index)
this.checkImg = index
},
allCheckClick() {
this.allCheck = !this.allCheck;
}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
.testAnalysis {
background: #ebf0f8;
padding: 30px 45px ;
height: 96vh;
overflow-y: scroll;
}
.labContent {
width: 100%;
background: #fff;
height: 163vh;
}
.labContent-title p {
font-size: 24px;
color: #233b6e;
padding: 30px;
text-align: center;
}
.themeContent {
padding: 0 64px;
}
.themeName {
text-align: left;
position: relative;
background-color: #ecf1fc;
height: 40px;
margin-top: 40px;
width: 100%;
line-height: 40px;
font-weight: bold;
font-size: 20px
}
.themeName i {
display: block;
float: left;
background-color: #4877e6;
height: 40px;
width: 4px;
margin-right: 10px;
}
.testAnalysis-first {
padding: 32px 0;
display: flex;
justify-content: space-around;
align-items: center;
}
/*全选*/
.allCheck i,.tickCheck {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
background: url("../assets/img/testAn/check.png") no-repeat;
background-size: 100% 100%;
margin-right: 8px;
}
.tickCheck:hover {
/*background: blue;*/
/*border-radius: 5px;*/
}
.checkImg {
background: url("../assets/img/testAn/ischeck.png") no-repeat;
}
.allCheck .allcheckImg {
background: url("../assets/img/testAn/ischeck.png") no-repeat;
}
.secondUl {
display: flex;
justify-content: space-around;
align-items: center;
}
.secondP {
padding-left: 60px;
}
.secondP span {
}
.secondUl li {
height: 50px;
}
</style>
\ No newline at end of file
src/views/verifyEnvironment.vue 0 → 100644
浏览文件 @ cd9173c3
<!-- 环境验证页面 -->
<template>
<div class="verifyEnvironment">
<div class="labContent">
<div class="labContent-title">
<p >XC环境验证系统</p>
</div>
<div class="themeContent">
<div class="themeName"> <i></i> XXX环境 </div>
<div class="themeOne">
<p class="themeOne-title"> <i></i> 环境详情 </p>
<div class="themeOne-context">
<img src="../assets/img/save.png" alt="">
<div style="width: 100px;height: 100px;">
<span id="charts-left" style="width: 100px;height: 100px;" class="chart-left"></span>
</div>
</div>
</div>
<div class="themeTwo">
<p class="themeOne-title"> <i></i> 项目体验 </p>
<div class="themeTwo-context">
<div class="threeTitle">xxx项目</div>
<div class="">
<ul>
<li class="reuseLi" v-for="(item,index) in dataLi">
<div class="reuseLi-top">
<i></i>
<span>{{item.name}}</span>
<a>体验</a>
</div>
<div class="reuseLi-bottom">
<!--<p v-for="(item,index) in dataOne" :key="index">{{item.name}}：<span></span></p>-->
<p>操作系统：<span>{{item.os}}</span></p>
<p>数据库：<span>{{item.database}}</span></p>
<p>中间件：<span>{{item.middle}}</span></p>
</div>
</li>
</ul>
</div>
<div class="resultBtn">
<span >量化体检结果>></span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'verifyEnvironment',
// import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {
dataLi: [
{name:'体验环境1',os: '龙芯',database: 'mysql',middle: '金蝶'},
{name:'体验环境1',os: '龙芯',database: 'highgo',middle: '金蝶'}
]
};
},
// 方法集合
methods: {
// 画最左边的echarts
drawLeft() {
// 基于准备好的dom，初始化echarts实例
let LeftChart = this.$echarts.init(document.getElementById("charts-left"));
// 绘制图表
LeftChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问',]
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
]
}
]
});
},
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
this.drawLeft();
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
.verifyEnvironment {
background: #ebf0f8;
padding: 30px 45px ;
height: 96vh;
overflow-y: scroll;
}
.labContent {
width: 100%;
background: #fff;
height: 163vh;
}
.labContent-title p {
font-size: 24px;
color: #233b6e;
padding: 30px;
text-align: center;
}
.themeContent {
padding: 0 64px;
}
.themeName {
text-align: left;
position: relative;
background-color: #ecf1fc;
height: 40px;
margin-top: 40px;
width: 100%;
line-height: 40px;
font-weight: bold;
font-size: 20px
}
.themeName i {
display: block;
float: left;
background-color: #4877e6;
height: 40px;
width: 4px;
margin-right: 10px;
}
/* 二级标题样式可以重复使用 */
.themeOne-title {
position: relative;
font-size: 20px;
margin-top: 20px;
color: #333;
height: 40px;
width: 100%;
text-align: left;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
}
.themeOne-title i {
width: 4px;
height: 20px;
float: left;
display: block;
background-color: #4877e6;
margin-top: 10px;
}
/*二级标题的内容*/
.themeOne-context {
width: 90%;
height: 115px;
border: 2px solid #eaf1ff;
margin-top: 10px;
margin-bottom: 30px;
padding: 30px 50px 30px 50px;
}
.themeTwo-context {
width: 90%;
/*height: 115px;*/
border: 2px solid #eaf1ff;
margin-top: 10px;
margin-bottom: 30px;
padding: 30px 50px 30px 50px;
}
.threeTitle {
color: #3a8ee6;
border-bottom: 4px solid #3a8ee6;
padding-bottom: 16px;
font-weight: bold;
}
.reuseLi-top {
margin-top: 18px;
}
.reuseLi-top i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(72,119,230);
margin-right: 4px;
}
.reuseLi-top a {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background: rgba(72,119,230,.6);
color: #fff;
text-align: center;
border-radius: 5px;
float: right;
}
.reuseLi-top a:hover {
background: #4877e6;
}
.reuseLi-bottom {
height: 115px;
border: 2px solid #eaf1ff;
margin-top: 18px;
display: flex;
justify-content: space-around;
align-items: center;
}
.reuseLi-bottom p span {
display: inline-block;
width: 170px;
border: 1px solid #eaf1ff;
height: 35px;
margin-bottom: -13px;
}
.resultBtn span {
display: inline-block;
width: 166px;
height: 34px;
line-height: 34px;
background: #4877e6;
color: #fff;
text-align: center;
border-radius: 5px;
margin: 40px 0 10px 0;
}
.resultBtn span:hover {
background: #1c45a4;
}
</style>
\ No newline at end of file
src/views/webs.vue deleted 100644 → 0
浏览文件 @ 80a7722a
<template>
<div>
webstocket
<div>
webstocket
webstocket
webstocket
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'webs',
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data () {
// 这里存放数据
return {};
},
// 方法集合
methods: {
init() {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.websocket = new WebSocket(`ws://192.168.1.54:8077/webServer/abc`)
this.initWebSocket();
console.log(this.websocket)
}
},
initWebSocket() {
//连接错误
this.websocket.onerror = this.setErrorMessage;
// //连接成功
this.websocket.onopen = this.setOnopenMessage;
//收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage;
console.log('连接成功2222',this.websocket.onmessage)
//连接关闭的回调
this.websocket.onclose = this.setOncloseMessage;
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = this.onbeforeunload;
},
setErrorMessage() {
this.data = 'WebSocket连接发生错误' + ' 状态码：' + this.websocket.readyState;
},
setOnopenMessage() {
this.data = 'WebSocket连接成功' + ' 状态码：' + this.websocket.readyState;
},
setOnmessageMessage(event) {
this.data = '服务端返回：' + event.data;
console.log(event.data);
// this.logData.push(event.data);
// this.$refs['elscroll'].wrap.scrollTop = this.$refs['elscroll'].wrap.scrollHeight;
},
setOncloseMessage() {
this.data = 'WebSocket连接关闭' + ' 状态码：' + this.websocket.readyState;
},
onbeforeunload() {
this.closeWebSocket();
},
//websocket发送消息
send() {
this.messages = {
token:this.token,
text:this.text,
}
this.websocket.send(this.text);
// this.websocket.send(this.messages);
this.text = '';
// this.messages = {};
},
closeWebSocket() {
console.log(this.websocket)
this.websocket.close();
},
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
created () {
this.init();
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {
this.init();
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论