Skip to content

X
xcLab
提交 5b2c5f48 authored 作者: Lxq's avatar Lxq
浏览文件
操作

合并分支 'lxq' 到 'master'

Lxq 查看合并请求 !2
上级 37481a8e d359421e
显示空白字符变更
内嵌 并排
正在显示 包含 534 行增加 和 64 行删除
.eslintrc.js
浏览文件 @ 5b2c5f48
......@@ -18,6 +18,6 @@ module.exports = {
'camelcase': 2,//强制驼峰法命名
'vars-on-top': 2,//var必须放在作用域顶部
'no-redeclare': 2,//禁止重复声明变量
'complexity': [0, 11]//循环复杂度
'complexity': [0, 11],//循环复杂度
}
}
config.js
浏览文件 @ 5b2c5f48
......@@ -4,12 +4,14 @@
// 服务地址
// const IP = 'https://www.easy-mock.com/mock/5b70ec93ad23a1570071a34e/Interview'; // easymock
const IP = '192.168.0.112:8077';
const IP = 'http://192.168.0.116:8077';
const WS = '192.168.0.116:8077';
// 请求目标服务器域名配置
const DOMAIN_NAME = {
URL_CNODEJS: IP, // 网关 服务端口
WS_CONT: WS
};
export default DOMAIN_NAME;
package.json
浏览文件 @ 5b2c5f48
......@@ -21,6 +21,7 @@
"@vue/cli-service": "~4.2.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.1.2",
"vue-loader": "^15.9.1",
"vue-template-compiler": "^2.6.11"
}
}
src/assets/css/base.css
浏览文件 @ 5b2c5f48
......@@ -12,7 +12,7 @@ textarea, p, blockquote, th, td {
/* height: 100%;*/
/*}*/
body {
font-size: 16px;
font-size: 18px;
/*background-image: url("../img/baseImg/bg.png");*/
/*background-repeat: no-repeat;*/
background-size: cover;
......
src/components/dial/newApply.vue 0 → 100644
浏览文件 @ 5b2c5f48
<template>
<div class="newApply">
<p>技术路线</p>
<div class="newApply-box" >
<div class="whole" v-for="(item,index) in val ">
<div class="newApply-title">
<!--<el-radio v-model="tech" :label="1">{{item.name}}</el-radio>-->
<span @click="check(index)"> <i :class="(isCheck==index) ? 'isActive': ''"></i> </span>
<div>{{item.name}}</div>
</div>
<div class="newApply-content">
<div>
<span>操作系统：<i>{{item.os.version}}</i></span>
<span>数据库：<i>{{item.db.version}}</i></span>
<span>中间件：<i>{{item.midWare.version}}</i></span>
</div>
</div>
</div>
</div>
<div class="line"></div>
<div class="newApplyBtn">
<span @click="cancle">取消</span>
<span @click="makeSure">确定</span>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
name: 'newApply',
// import引入的组件需要注入到对象中才能使用
components: {},
props: ['val','applyId'],
data () {
// 这里存放数据
return {
tech: '',
isCheck: '',
itemId: ''
};
},
// 方法集合
methods: {
cancle() {
this.$emit('on-close');
},
check(i) {
console.log('选中',i)
this.isCheck = i;
},
makeSure() {
let a = this.applyId;
let b = this.isCheck + 1;
let obj = {
id: a,
techId: b
}
this.$server.postMidify(obj).then(res => {
console.log('postMidify',res.data);
this.$emit('on-close');
}).catch(err => {
console.log(err)
this.$message.error('请求失败')
})
}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {
'val': function(val) {
console.log('技术路线数据',val)
},
'applyId': function(applyId) {
console.log('项目id',applyId)
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
</script>
<style scoped>
.newApply {
width: 810px;
height: 518px;
background: #fff;
border-radius: 11px;
position: absolute;
top: 17px;
left: -425px;
}
.newApply p {
width: 100%;
height: 58px;
font-size: 18px;
text-align: center;
line-height: 58px;
background: #ebf0f8;
color: #333;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
}
.newApply-box{
display: flex;
justify-content: space-around;
align-items: center;
}
.newApply-title {
text-align: center;
margin: 25px 0;
}
.newApply-title span i{
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #666;
margin-left: 58px;
margin-top: 3px;
float: left;
}
.newApply-content {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 0;
}
.newApply-content div {
text-align: right;
}
.newApply-content div span {
display: block;
height: 45px;
line-height: 45px;
color: #666;
margin-bottom: 20px;
width: 200px;
}
.newApply-content div span i {
display: inline-block;
width: 64%;
background: #f5f8fd;
height: 35px;
border: 1px solid rgba(8,104,157,.3);
text-align: center;
color: #333;
}
.newApplyBtn {
text-align: center;
}
.newApplyBtn span {
display: inline-block;
width: 100px;
height: 34px;
line-height: 34px;
background: #4877e6;
color: #fff;
text-align: center;
border-radius: 5px;
margin-left: 60px;
}
.newApplyBtn span:hover {
background: #1c45a4;
}
.line {
width: 71%;
margin: 0 auto;
border: 1px solid rgba(8,104,157,.1);
margin-bottom: 50px;
}
.isActive {
/*background: #1E8255;*/
/*border: 1px solid red;*/
width: 14px;
height: 14px;
background: url("../../assets/img/check.png") no-repeat;
background-size: 100% 100%;
background-color: transparent;
border: none;
}
</style>
\ No newline at end of file
src/router/index.js
浏览文件 @ 5b2c5f48
......@@ -18,23 +18,21 @@ const routes = [
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
}, {
path: '/webs',
name: 'webs',
// 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: "home" */ '../views/webs.vue')
},
{
}, {
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: "labSystem" */ '../views/labSystem.vue')
},
}
]
},
]
......
src/services/axios.js
浏览文件 @ 5b2c5f48
......@@ -5,6 +5,7 @@ import baseUrl from '../../config';
// axios.defaults.withCredentials = true;
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
console.log(config)
// console.log(store.getters.getSession.session)
// config.headers.session = store.getters.getSession.session;
// 预处理请求信息（config 发出的数据） 下方是三种请求，李迪凡的
......
src/services/server.js
浏览文件 @ 5b2c5f48
......@@ -11,16 +11,32 @@ import axios from '@/services/axios';
*/
// import qs from 'qs';
const server = {
getCeShi() { // 测试接口
return axios('/resume', {
getProject(id) { // 获取项目详情
return axios('/project/get/' + id, {
method: 'get'
});
})
},
postadd(data) { // 新增角色
return axios('/role/add', {
findAll() { // 技术路线
return axios('/tech/findAll/', {
method: 'get'
})
},
postMidify(data) { // 项目修改
return axios('/project/modify', {
method: 'post',
data: data
});
})
},
setPath(data) { // 修改路径
return axios('/project/setPath', {
method: 'post',
data: data
})
},
getDeploy(id) { // 获取项目详情
return axios('/project/deploy/' + id, {
method: 'get'
})
},
}
export default server;
src/views/labSystem.vue
浏览文件 @ 5b2c5f48
<!-- XClab系统页面 -->
<template>
<div class="labsystem">
<div class="labContent">
......@@ -7,48 +8,48 @@
</div>
<div class="themeContent">
<div class="themeBtn"> <span>项目归档</span> </div>
<div class="themeName"> <i></i> XXX项目 </div>
<div class="themeName"> <i></i> {{name}} </div>
<div class="themeOne">
<p class="themeOne-title"> <i></i> 项目配置详情 <span><img src="../assets/img/edit.png" alt="">编辑</span> </p>
<p class="themeOne-title"> <i></i> 项目信息 <!--<span class="edit"><img src="../assets/img/edit.png" alt="">编辑</span>--> </p>
<div class="themeOne-context">
<el-row :gutter="24">
<el-col :offset="1" :span="11">
<div>访问路径： <span></span> </div>
<div>项目路径： <span @click="openAnother(path)">{{path}}</span></div>
</el-col>
<el-col :offset="1" :span="11">
<div>gitlab地址： <span></span> </div>
<div>gitlab地址： <span>{{gitPath}}</span> </div>
</el-col>
</el-row>
</div>
</div>
<div class="themeTwo">
<p class="themeOne-title"> <i></i> 项目配置详情 <span><img src="../assets/img/save.png" alt="">保存</span> </p>
<p class="themeOne-title"> <i></i> 项目配置详情 <span class="save"><img src="../assets/img/save.png" alt="">保存</span> </p>
<div class="themeTwo-context">
<el-row>
<el-col :span="8">
<div>
<span class="">打包方式：</span>
<el-select v-model="method" placeholder="请选择">
<el-option label="方式1" :value="1"></el-option>
<el-option label="方式2" :value="2"></el-option>
<el-option label="方式3" :value="3"></el-option>
<el-select v-model="pack" placeholder="请选择">
<el-option label="maven" :value="0"></el-option>
<el-option label="cnpm" :value="1"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="8">
<div>
<span class="">代码类型：</span>
<el-select v-model="type" placeholder="请选择">
<el-option label="方式1" :value="1"></el-option>
<el-option label="方式2" :value="2"></el-option>
<el-option label="方式3" :value="3"></el-option>
<el-select v-model="codeType" placeholder="请选择">
<el-option label="js/html/css" :value="0"></el-option>
<el-option label="java" :value="1"></el-option>
</el-select>
</div>
</el-col>
<el-col :span="8">
<div>
<span class="">编译频率：</span>
<el-input style="width:217px;" v-model="hz" placeholder="请输入"></el-input>
<span class="">日志保存时间：</span>
<el-input style="width:117px;" v-model="rate" placeholder="请输入"></el-input>
天
</div>
</el-col>
</el-row>
......@@ -56,10 +57,9 @@
<el-col :span="8">
<div>
<span class="">编译版本：</span>
<el-select v-model="version" placeholder="请选择">
<el-option label="方式1" :value="1"></el-option>
<el-option label="方式2" :value="2"></el-option>
<el-option label="方式3" :value="3"></el-option>
<el-select v-model="compile" placeholder="请选择">
<el-option label="jdk1.8" :value="0"></el-option>
<el-option label="nodejs10.16" :value="1"></el-option>
</el-select>
</div>
</el-col>
......@@ -67,73 +67,228 @@
</div>
</div>
<div class="themeThree">
<p class="themeOne-title"> <i></i> 项目环境 <span><img src="../assets/img/apply.png" alt="">重新申请</span> </p>
<p class="themeOne-title"> <i></i> 项目环境 <span class="apply" @click="apply"><img src="../assets/img/apply.png" alt="">重新申请</span> </p>
<div class="themeThree-context">
<span class="deploy" @click="deploy">部署</span>
<p style="line-height: 50px">
访问路径：
<span>
<a v-if="editLink === false" @click="openLink(pathSuffix)" class="aLinkClick">{{pathSuffix}}</a>
<el-input
v-if="editLink === true"
type="textarea"
rows="1"
resize="none"
placeholder="请输入demo链接"
v-model="pathSuffix">
</el-input>
</span>
<i class="edit editPlus" v-if="editLink === false" @click="editLinkClick"><img src="../assets/img/edit.png" alt=""> 编辑</i>
<i class="edit editPlus" v-if="editLink === true" @click="saveLinkClick"><img src="../assets/img/edit.png" alt=""> 保存</i>
</p>
<div>
<i></i>
服务器：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
<span>型号/版本: <a>{{os.version}}</a> </span>
<span>ip: <a>{{os.ip}}</a></span>
</div>
<div>
<i></i>
中间件：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
<span>端口号：</span>
<span>型号/版本: <a>{{mid.version}}</a> </span>
<span>ip: <a>{{mid.ip}}</a></span>
<span>端口号：<a>{{mid.port}}</a> </span>
</div>
<div>
<i></i>
数据库：
<span>型号/版本: <span>X86</span> </span>
<span>ip: <span>192.168.1.123</span></span>
<span>端口号：</span>
<span>用户名：</span>
<span>密码：</span>
<span>型号/版本: <a>{{db.version}}</a> </span>
<span>ip: <a>{{db.ip}}</a></span>
<span>端口号：<a>{{db.port}}</a> </span>
<span>用户名：<a>{{db.userName}}</a></span>
<span>密码：<a>{{db.password}}</a></span>
</div>
</div>
</div>
<div class="themeFour">
<p class="themeOne-title"> <i></i> 项目运行日志 <span><img src="../assets/img/refresh.png" alt="">刷新</span> </p>
<p class="themeOne-title"> <i></i> 项目运行日志 <span class="refresh"><img src="../assets/img/refresh.png" alt="">刷新</span> </p>
<div class="themeFour-context">
<!--<div v-if="logData.length === 0" class="logNone">暂无数据</div>-->
<div class="logData">
<el-scrollbar ref="elscroll" style="height:100%;">
<!--<div ref="logDiv" id="logDiv">-->
<!--<ul ref="logUl">-->
<!--<li class="logLi" v-for="(item,index) in logData" :key="index">{{item}}</li>-->
<!--<li>{{logData}}</li>-->
<!--</ul>-->
<textarea name="" id="" cols="30" rows="10">{{logData}}</textarea>
<!--</div>-->
</el-scrollbar>
</div>
</div>
</div>
</div>
</div>
<!--重新申请弹窗-->
<el-dialog :visible.sync="applyModal" width="0%" >
<newApply :val="applyMessage" :applyId="applyId" @on-close="reset()"></newApply>
<img src="../assets/img/close.png" class="closeModel" @click="reset()">
</el-dialog>
<!--重新申请弹窗-->
</div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import newApply from '../components/dial/newApply';
import baseUrl from '../../config';
export default {
name: 'labSystem',
// import引入的组件需要注入到对象中才能使用
components: {},
components: {newApply},
props: {},
data () {
data() {
// 这里存放数据
return {
method: '', // 打包方式
type: '', // 代码类型
hz: '', // 编译频率
version: '', //编译版本
id: 1, //
path: '', // 项目路径
gitPath: '', // git路径
name:'', // 项目名字
pack: '', // 打包方式
codeType: '', // 代码类型
rate: '', // 编译频率
compile: '', // 编译版本
os: '', // 服务器
mid: '', // 中间件
db: '', // 数据库
applyModal: false, // 重新申请弹窗
applyMessage: '', // 弹窗数据
applyId:'', // 传给弹窗的项目id
editLink: false, // 编辑链接
pathSuffix: '', // 链接
jenkinsName: '', // webstock
logData:'', // 日志
data: ''
};
},
// 方法集合
methods: {
getProject() {
console.log(3333)
this.$server.getProject(this.id).then(res => {
console.log(res.data);
this.path = res.data.path
this.gitPath = res.data.gitPath
this.name = res.data.name
this.pack = res.data.pack
this.codeType = res.data.codeType
this.rate = res.data.rate
this.compile = res.data.compile
this.os = res.data.os;
// console.log('服务器',this.os)
this.mid = res.data.mid;
// console.log('中间件',this.mid)
this.db = res.data.db;
// console.log('数据库',this.db)
this.pathSuffix = res.data.pathSuffix
this.jenkinsName = res.data.jenkinsName
this.copyWebsocket(res.data.jenkinsName)
}).catch(err => {
// console.log(err);
this.$message.error('数据请求失败');
})
},
// 重新申请
apply() {
// console.log(1)
this.applyModal = true
this.$server.findAll().then(res => {
// console.log(res.data);
this.applyMessage = res.data
this.applyId = this.id
// console.log('77777',this.applyId)
}).catch(err => {
// console.log(err)
this.$message.error('请求失败')
})
},
reset(){
this.applyModal = false;
},
openLink(val) {
console.log(val)
},
// 编辑
editLinkClick() {
this.editLink = !this.editLink;
},
// 保存
saveLinkClick() {
console.log(this.pathSuffix)
let obj = {
"pathSuffix": this.pathSuffix,
"id": this.id,
}
console.log(obj)
this.$server.setPath(obj).then(res => {
console.log(res.data);
console.log('77777')
this.editLink = false
this.getProject();
}).catch(err => {
console.log(err)
this.$message.error('请求失败')
})
},
// 打开项目路径链接新页面
openAnother(val) {
console.log(val)
window.open(this.val, '_blank').location;
},
// 部署
deploy() {
this.$server.getDeploy(this.id).then(res => {
console.log(res.data);
console.log('77777');
}).catch(err => {
console.log(err)
this.$message.error('请求失败')
})
},
// websocket
copyWebsocket(val) {
// Create WebSocket connection.
// console.log('this.jenkinsName2121',this.jenkinsName)
// const socket = new WebSocket('ws://' + baseUrl.WS_CONT + '/webServer/${this.jenkinsName}');
const socket = new WebSocket(`ws://${baseUrl.WS_CONT}/webServer/${val}`);
// Connection opened
socket.addEventListener('open', function (event) {
socket.send('Hello Server!');
});
// Listen for messages
socket.addEventListener('message', function (event) {
// console.log('Message from server ', event.data);
this.logData = event.data
// logData: event.data
console.log('this.logData', this.logData)
});
}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成（可以访问当前this实例）
// 生命周期 - 创建完成（可以访问当前this实例）
created () {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted () {},
mounted () {
this.getProject();
// this.copyWebsocket();
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
......@@ -148,7 +303,7 @@ export default {
destroyed () {},
// 如果页面有keep-alive缓存功能，这个函数会触发
activated () {},
}
}
</script>
<style scoped>
......@@ -236,8 +391,20 @@ export default {
.themeOne-title span img {
margin-right: 8px;
}
.themeOne-title span img:hover {
.themeOne-title span:hover {
color: #4877e6;
}
.themeOne-title .edit:hover img {
content: url("../assets/img/eidth.png");
}
.themeOne-title .save:hover img {
content: url("../assets/img/saveh.png");
}
.themeOne-title .apply:hover img {
content: url("../assets/img/applyh.png");
}
.themeOne-title .refresh:hover img {
content: url("../assets/img/refreshh.png");
}
/* 二级标题样式可以重复使用 */
.themeOne >>> div span {
......@@ -245,9 +412,9 @@ export default {
display: inline-block;
width: 60%;
height: 36px;
background: #f5f8fd;
border: 1px solid #d5e3ff;
border-radius: 2px;
/*background: #f5f8fd;*/
/*border: 1px solid #d5e3ff;*/
/*border-radius: 2px;*/
line-height: 36px;
padding: 0 12px;
margin-bottom: -14px;
......@@ -263,7 +430,27 @@ export default {
}
.themeThree-context {
height: 85px;
height: 150px;
color: #666;
position: relative;
}
.themeThree-context p {
height: 50px;
}
.themeThree-context p span {
/*color: #333;*/
display: inline-block;
width: 33%;
/*height: 36px;*/
/*background: #f5f8fd;*/
/*border: 1px solid #d5e3ff;*/
/*border-radius: 2px;*/
/*line-height: 36px;*/
/*padding: 0 12px;*/
margin-bottom: -14px
}
.themeThree-context div {
margin-bottom: 10px;
}
.themeThree-context div i {
display: inline-block;
......@@ -272,5 +459,59 @@ export default {
border-radius: 50%;
background: rgb(72,119,230);
}
.themeThree-context div span {
display: inline-block;
width: 15%;
padding-left: 30px;
}
.themeThree-context div span a {
color: #333;
}
.closeModel {
position: absolute;
right: -360px;
top: 36px;
cursor: pointer;
}
.closeModel:hover {
content: url("../assets/img/closeh.png");
}
.editPlus {
color: rgba(72,119,230,.6);
}
.editPlus:hover {
color: #4877e6;
}
.editPlus:hover img {
content: url("../assets/img/eidth.png");
}
.editPlus img {
margin-right: 8px;
}
.aLinkClick {
padding-left: 23px;
}
.deploy {
display: inline-block;
position: absolute;
right: 15px;
top: 17px;
color: rgba(72,119,230,.6);
}
.deploy:hover {
color: #4877e6;
}
.logData{
margin: 0 10px;
height: 24vh;
overflow-y: auto;
}
.logLi{
color: #FFF;
font-size: 16px;
padding: 10px 10px;
text-align: left;
border-bottom: 3px dotted rgba(3,110,183, 0.2);
word-wrap:break-word;
}
</style>
\ No newline at end of file
src/views/webs.vue
浏览文件 @ 5b2c5f48
<template>
<div>
webstocket
<div>
webstocket
webstocket
webstocket
</div>
</div>
</template>
......@@ -23,7 +28,7 @@ export default {
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.websocket = new WebSocket(`ws://192.168.0.112:8076/webServer/abc`)
this.websocket = new WebSocket(`ws://192.168.1.54:8077/webServer/abc`)
this.initWebSocket();
console.log(this.websocket)
}
......@@ -35,8 +40,11 @@ export default {
// //连接成功
this.websocket.onopen = this.setOnopenMessage;
//收到消息的回调
this.websocket.onmessage = this.setOnmessageMessage;
console.log('连接成功2222',this.websocket.onmessage)
//连接关闭的回调
this.websocket.onclose = this.setOncloseMessage;
......
vue.config.js
浏览文件 @ 5b2c5f48
......@@ -46,7 +46,7 @@ module.exports = {
// webpack-dev-server 相关配置
devServer: {
open: true,
host: 'localhost',
host: '0.0.0.0',
port: 8088,
https: false,
hotOnly: false,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论