提交 0319e1dd authored 作者: Your Name's avatar Your Name

改版样式

上级 33fce49f
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
// 服务地址 // 服务地址
// 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.246:8077'; const IP = 'http://120.55.57.35:8077';
const WS = '192.168.1.54:8077'; const WS = '120.55.57.35: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';
......
<!-- 重新审请页面 -->
<template>
<div class="newApply">
<p> <span>技术路线</span></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="(index == isCheck - 1) ? '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 class="Btn-cancle" @click="cancle">取消</span>
<span class="Btn-makeSure" @click="makeSure">确定</span>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
export default {
name: 'reapply',
// import引入的组件需要注入到对象中才能使用
components: {},
props: ['val','applyId','osId'],
data () {
// 这里存放数据
return {
tech: '',
isCheck: '',
itemId: ''
};
},
// 方法集合
methods: {
cancle() {
this.$emit('on-close');
},
check(i) {
console.log('选中',i)
console.log(this.isCheck)
this.isCheck = i + 1
console.log(this.isCheck)
},
makeSure() {
let a = this.applyId;
let b = this.isCheck;
let obj = {
id: a,
techId: b
}
this.$server.postMidify(obj).then(res => {
console.log('postMidify',res);
this.$emit('on-close');
this.$emit('on-closeWeb');
this.$emit('on-project');
// this.$emit('on-websocket');
}).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)
},
'osId': function(osId) {
console.log('osIdid',osId)
this.isCheck = this.osId
},
},
//生命周期 - 创建完成(可以访问当前this实例)
created () {
},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
console.log(this.osId)
this.isCheck = this.osId
console.log('122222',this.isCheck)
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {
// this.check(this.osId);
},
// 生命周期 - 销毁之前
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;
line-height: 58px;
background: #ebf0f8;
text-align: left;
font-weight: bold;
color: #151033;
}
.newApply p span {
display: inline-block;
padding-left: 35px;
}
.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;
color: #fff;
text-align: center;
margin-left: 60px;
}
/*.newApplyBtn span:hover {*/
/*!*background: #1c45a4;*!*/
/*}*/
.Btn-cancle {
background: #acb6d1;
}
.Btn-makeSure {
background: #151033;
}
.Btn-cancle:hover {
background: #ccd1dd;
}
.Btn-makeSure:hover {
background: #3b3b56;
}
.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
...@@ -31,39 +31,63 @@ const routes = [ ...@@ -31,39 +31,63 @@ const routes = [
path: '/', path: '/',
name: 'Home', name: 'Home',
component: Home, component: Home,
redirect: '/verifyEnvironment', redirect: '/labSystem1',
children: [ 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: '/labSystem', path: '/testAnalysis',
name: 'labSystem', 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')
},
{
path: '/labSystem1',
name: 'labSystem1',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/labSystem.vue') component: () => import(/* webpackChunkName: "about" */ '../views/labSystem1.vue')
}, },
{ {
path: '/verifyEnvironment', path: '/verifyEnvironment1',
name: 'verifyEnvironment', name: 'verifyEnvironment1',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/verifyEnvironment.vue') component: () => import(/* webpackChunkName: "about" */ '../views/verifyEnvironment1.vue')
}, },
{ {
path: '/qualityResult', path: '/qualityResult1',
name: 'qualityResult', name: 'qualityResult1',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/qualityResult.vue') component: () => import(/* webpackChunkName: "about" */ '../views/qualityResult1.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')
}, },
] ]
}, },
......
差异被折叠。
<!-- <!-- 量化体验结果页面 --> -->
<template>
<div class="qualityResult">
<div class="labContent">
<div class="labContent-title">
<img src="../assets/image/logoEn.png" alt="">
<p >XC环境验证系统</p>
</div>
<div class="labContent-back">
<span class="backImg" @click="backPath"></span>
</div>
<div class="theme">
<div class="themeContent">
<div class="themeName"> <i></i> 量化体验结果 </div>
<div class="qualityResult-table">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
align="center"
label="体验项"
width="180">
</el-table-column>
<el-table-column
prop="last"
align="center"
label="上次操作(技术路线)"
width="180">
</el-table-column>
<el-table-column
prop="avg.1"
align="center"
label="龙芯">
</el-table-column>
<el-table-column
prop="avg.2"
align="center"
label="鲲鹏">
</el-table-column>
<el-table-column
prop="avg.3"
align="center"
label="X86">
</el-table-column>
</el-table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
export default {
name: 'quality-result1',
// import引入的组件需要注入到对象中才能使用
components: {
},
props: {},
data () {
// 这里存放数据
return {
tableData: [
// {name:'xxx',last:'xxx',avg:{1:12,2:12,3:32}},
// {name:'xxx',last:'xxx',avg:{1:12,2:12,3:32}},
// {name:'xxx',last:'xxx',avg:{1:12,2:12,3:32}},
// {name:'xxx',last:'xxx',avg:{1:12,2:12,3:32}},
// {name:'xxx',last:'xxx',avg:{1:12,2:12,3:32}},
// {name:'xxx',last:'xxx',avg:{1:12,2:12,3:32}}
],
lastest: '',
// avg: ''
};
},
// 方法集合
methods: {
backPath() {
this.$router.push('/verifyEnvironment1')
}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成(可以访问当前this实例)
created () {},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted () {
console.log(JSON.parse(sessionStorage.getItem("tableData")))
this.tableData = JSON.parse(sessionStorage.getItem("tableData"))
// for(let item of this.tableData){
// console.log(item)
// this.lastest = item.last
// console.log(this.lastest)
// this.lastest == -1 ? '-' : '121'
// }
},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能,这个函数会触发
activated () {},
}
</script>
<style scoped>
.qualityResult {
height: 96vh;
overflow-y: scroll;
}
.labContent-title {
height: 138px;
line-height: 138px;
text-align: center;
font-size: 60px;
font-weight: bold;
color: #151033;
}
.labContent-title p {
display: inline-block;
}
.labContent-title img {
margin-right: 20px;
margin-bottom: 17px;
}
.theme {
padding: 22px 50px;
background: #f5f7ff;
}
.themeContent {
height: 122vh;
background: #fff;
padding: 60px 30px 20px 30px;
}
/*返回按钮*/
.qualityResult .labContent-back{
padding: 0 88px;
}
.qualityResult .backImg{
width: 25px;
height: 25px;
position: absolute;
top:180px;
cursor: pointer;
background-image: url('../assets/img/back.png');
}
.qualityResult .backImg:hover{
background-image: url('../assets/img/back-select.png');
}
/*返回按钮*/
.themeName {
text-align: left;
position: relative;
background-color: #f5f7ff;
height: 38px;
width: 100%;
line-height: 38px;
font-weight: bold;
font-size: 20px
}
.themeName i {
display: block;
float: left;
background-color: #151033;
height: 38px;
width: 14px;
margin-right: 10px;
}
/*表格样式*/
.qualityResult-table {
margin-top: 32px;
}
.qualityResult-table >>> .el-table__body {
border-collapse:separate;
border-spacing:0px 6px;
}
.qualityResult-table >>> .el-table thead tr th {
color: #fff;
background: #151033;
font-size: 18px;
height: 72px;
}
.qualityResult-table >>> .is-center {
border-right: none;
}
.qualityResult-table >>> .el-table__row {
height: 66px;
background: #f5f7ff;
color: #787682;
font-size: 18px;
}
.qualityResult-table >>> .el-table td {
border-bottom: none;
}
.qualityResult-table >>> .el-table--enable-row-hover .el-table__body tr:hover>td {
background-color: #e1e6f4;
}
</style>
\ No newline at end of file
...@@ -13,13 +13,13 @@ ...@@ -13,13 +13,13 @@
体验项: 体验项:
<span> <span>
<el-select style="margin-left: 10px;width:200px;" v-model="testType" placeholder="请选择"> <el-select style="margin-left: 10px;width:200px;" v-model="testType" placeholder="请选择">
<el-option <el-option
v-for="item in options" v-for="item in options"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</span> </span>
</p> </p>
<p> <p>
......
...@@ -67,11 +67,12 @@ export default { ...@@ -67,11 +67,12 @@ export default {
}, },
// 方法集合 // 方法集合
methods: { methods: {
// 画最左边的echarts // 画最左边的echarts
// drawLeft() { // drawLeft() {
// // 基于准备好的dom,初始化echarts实例 // // 基于准备好的dom,初始化echarts实例
// let LeftChart = this.$echarts.init(document.getElementById("charts-left")); // let LeftChart = this.$echarts.init(document.getElementById("charts-left"));
// // 绘制图表 // 绘制图表
// LeftChart.setOption({ // LeftChart.setOption({
// tooltip: { // tooltip: {
// trigger: 'item', // trigger: 'item',
......
<!-- <!-- XC 环境认证系统页面 --> -->
<template>
<div class="verifyEnvironment">
<div class="labContent">
<div class="labContent-title">
<img src="../assets/image/logo.png" alt="">
<p >XC环境认证系统</p>
</div>
<div class="theme">
<div class="themeContent">
<div class="themeName"> <i></i> XXX环境 </div>
<div class="themeOne">
<div class="threeTitle">xxx项目</div>
<div>
<ul>
<li class="reuseLi" v-for="(item,index) in dataLi">
<div class="reuseLi-top">
<img src="../assets/image/testEn.png" alt="">
<span>{{item.name}}</span>
</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>
<p class="reuseLi-btn"><a @click="experience(item.id)">体验</a></p>
</li>
</ul>
</div>
<div class="resultBtn">
<span @click="Jump">量化体检结果>></span>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
// 例如:import 《组件名称》 from '《组件路径》';
export default {
name: 'verify-environment1',
// import引入的组件需要注入到对象中才能使用
components: {
},
props: {},
data () {
// 这里存放数据
return {
dataLi: [
{name:'龙芯',os: '龙芯',database: '瀚高',middle: '金蝶',id: 1},
{name:'x86',os: 'x86',database: '瀚高',middle: '金蝶',id: 3},
{name:'鲲鹏',os: '鲲鹏',database: '瀚高',middle: '金蝶',id: 2}
]
};
},
// 方法集合
methods: {
// 体检结果
Jump() {
const id = 2 // 项目id
this.$server.getProject(id).then(res => { // 获取项目详情
console.log(res)
this.$server.getPerformanceData(res.data.techId).then(res => { // 根据项目techID获取性能表格数据
console.log(res)
sessionStorage.setItem('tableData', JSON.stringify(res.data)) // 存储表格数据
this.$router.push('/qualityResult1'); // 跳转表格
console.log(JSON.parse(sessionStorage.getItem("tableData")))
})
})
},
// 体验
experience(id) {
let data = {
id: 2, // 项目id
techId: id // 操作系统id
}
this.$server.postModify(data).then(res => { // 传输每次体验系统id
console.log(res)
// window.open('http://192.168.1.244:8081/workbook/#/login', '_blank').location;
// test -test -test
})
if(id==1){
window.open('http://192.168.1.244:8081/workbook/#/login', '_blank').location;
}else if(id ==2) {
window.open('http://192.168.1.245:8080/workbook/#/login', '_blank').location;
}else{
window.open('http://192.168.1.246:8080/workbook/#/login', '_blank').location;
}
}
},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
//生命周期 - 创建完成(可以访问当前this实例)
created () {},
// 生命周期 - 挂载完成(可以访问DOM元素)
mounted () {},
// 生命周期 - 创建之前
beforeCreate () {},
// 生命周期 - 挂载之前
beforeMount () {},
// 生命周期 - 更新之前
beforeUpdate () {},
// 生命周期 - 更新之后
updated () {},
// 生命周期 - 销毁之前
beforeDestroy () {},
// 生命周期 - 销毁完成
destroyed () {},
// 如果页面有keep-alive缓存功能,这个函数会触发
activated () {},
}
</script>
<style scoped>
.verifyEnvironment {
height: 96vh;
overflow-y: scroll;
}
.labContent-title {
height: 138px;
line-height: 138px;
text-align: center;
font-size: 60px;
font-weight: bold;
color: #151033;
}
.labContent-title p {
display: inline-block;
}
.labContent-title img {
margin-right: 20px;
margin-bottom: 17px;
}
.theme {
padding: 22px 50px;
background: #f5f7ff;
}
.themeContent {
height: 122vh;
background: #fff;
padding: 20px 30px;
}
.themeName {
text-align: left;
position: relative;
background-color: #f5f7ff;
height: 38px;
width: 100%;
line-height: 38px;
font-weight: bold;
font-size: 20px
}
.themeName i {
display: block;
float: left;
background-color: #151033;
height: 38px;
width: 14px;
margin-right: 10px;
}
.themeOne {
padding: 30px 50px;
}
.threeTitle {
color: #151033;
padding-bottom: 18px;
font-weight: bold;
}
.reuseLi {
width: 100%;
height: 234px;
background: #f5f7ff;
margin-bottom: 20px;
}
.reuseLi-top,.reuseLi-bottom {
padding-left: 20px;
}
.reuseLi-top {
padding-top: 18px;
}
.reuseLi-top img {
padding-right: 12px;
}
.reuseLi-top span {
font-size: 16px;
color: #151033;
font-weight: bold;
}
.reuseLi-bottom {
height: 115px;
display: flex;
justify-content: space-around;
align-items: center;
border-top: 1px solid #e1e6f4;
border-bottom: 1px solid #e1e6f4;
width: 90%;
margin: 0 auto;
}
.reuseLi-bottom p {
line-height: 37px;
}
.reuseLi-bottom p span {
display: inline-block;
width: 170px;
border: 1px solid #a8d5f4;
height: 35px;
margin-bottom: -13px;
padding-left: 18px;
background: #f5f8fd;
}
.reuseLi-btn {
text-align: right;
width: 90%;
margin: 0 auto;
padding-top: 12px;
}
.reuseLi-btn a {
display: inline-block;
width: 68px;
height: 32px;
line-height: 32px;
background: #151033;
text-align: center;
color: #fff;
cursor: pointer;
}
.reuseLi-btn a:hover {
background: #3b3b56;
}
.resultBtn {
text-align: right;
}
.resultBtn span {
display: inline-block;
width: 166px;
height: 34px;
line-height: 34px;
background: #151033;
color: #fff;
text-align: center;
cursor: pointer;
}
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论