线路功能增加背景图片
This commit is contained in:
fan
parent
1d428805f3
commit
57bb7acc60
@ -24,14 +24,33 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-form-item label="描述：" prop="desc">
|
||||
<el-input
|
||||
v-model="ruleForm.desc"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="描述：" prop="desc">
|
||||
<el-input
|
||||
v-model="ruleForm.desc"
|
||||
type="textarea"
|
||||
:rows="4"
|
||||
placeholder="请输入内容"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="背景：" prop="bgUrl">
|
||||
<div style="display: flex;align-items: flex-start;">
|
||||
<el-select v-model="ruleForm.bgUrl" size="mini" clearable>
|
||||
<el-option
|
||||
v-for="item in bgUrlList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<img :src="ossUrl+ruleForm.bgUrl" style="width: 200px;margin-left: 15px;">
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-card style="padding: 10px;">
|
||||
<el-table
|
||||
:data="endTableData"
|
||||
@ -159,13 +178,32 @@ export default {
|
||||
ruleForm: {
|
||||
name: '',
|
||||
type: '',
|
||||
desc: ''
|
||||
desc: '',
|
||||
bgUrl: ''
|
||||
},
|
||||
memberMetroList: [],
|
||||
memberRailwayList: [],
|
||||
memberEmergencyList: []
|
||||
memberEmergencyList: [],
|
||||
bgUrlList: [
|
||||
{ label: '运行图编制', value: '/logo/chartPreparation.png' },
|
||||
{ label: '调度仿真', value: '/logo/dispatchingPlan.png' },
|
||||
{ label: '考试', value: '/logo/exam.png' },
|
||||
{ label: '综合演练', value: '/logo/joinRoom.png' },
|
||||
{ label: '场景实训', value: '/logo/sceneTraining.png' },
|
||||
{ label: '派班', value: '/logo/schedulingSimulation.png' },
|
||||
{ label: '单操仿真', value: '/logo/singleTraining.png' },
|
||||
{ label: '车站仿真', value: '/logo/stationSimulation.png' },
|
||||
{ label: '车辆段', value: '/logo/trainDepot.png' },
|
||||
{ label: '实训设计', value: '/logo/trainingDesign.png' },
|
||||
{ label: '模拟驾驶', value: '/logo/simulatedDriving.png' }
|
||||
]
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ossUrl() {
|
||||
return this.$store.state.user.ossUrl;
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
queryPaperList({ mapId: this.$route.query.mapId, findState: 3 }).then(resp => {
|
||||
@ -220,6 +258,7 @@ export default {
|
||||
this.mapSystemId = row.id;
|
||||
this.ruleForm.name = row.name;
|
||||
this.ruleForm.desc = row.desc || '';
|
||||
this.ruleForm.bgUrl = row.bgUrl || '';
|
||||
this.ruleForm.type = row.paramVO.type;
|
||||
this.typeChange(this.ruleForm.type);
|
||||
this.frontTableData.forEach(item => {
|
||||
@ -338,7 +377,8 @@ export default {
|
||||
this.ruleForm = {
|
||||
name: '',
|
||||
type: '',
|
||||
desc: ''
|
||||
desc: '',
|
||||
bgUrl: ''
|
||||
};
|
||||
this.frontTableData = [
|
||||
{ key: 'singleMember', label: '是否单角色', value: false, type: 'checkbox' },
|
||||
@ -384,6 +424,7 @@ export default {
|
||||
mapId: this.$route.query.mapId,
|
||||
name: this.ruleForm.name,
|
||||
desc: this.ruleForm.desc,
|
||||
bgUrl: this.ruleForm.bgUrl,
|
||||
paramVO: {
|
||||
type: this.ruleForm.type,
|
||||
itemMap:itemMap,
|
||||
|
||||
@ -7,11 +7,21 @@
|
||||
<template v-for="item in subsetList">
|
||||
<el-collapse-item :key="item" :title="item" :name="item" class="function-box">
|
||||
<div style="display: flex;flex-wrap:wrap; justify-content:center;padding-bottom:30px">
|
||||
<template>
|
||||
<el-card v-for="system in subsetMap[item]" :key="system.id" class="box-card">
|
||||
<div style="text-align: center;font-size: 26px;font-weight: bolder;color: #0C161A;">{{ system.name }}</div>
|
||||
<div class="content-box">{{ system.desc }}</div>
|
||||
<el-button style="position: absolute;bottom: 15px;left: 0;right: 0;margin: 0 auto;width: 60px;" size="small" type="primary" @click="enterSimulation(system)">进入</el-button>
|
||||
<template v-for="system in subsetMap[item]">
|
||||
<el-card v-if="system.bgUrl" :key="system.id" :body-style="{ padding: '0px' }" class="box-card">
|
||||
<div class="bg-img-box" :style="{backgroundImage: 'url(' + ossUrl + system.bgUrl + ')' }" @click="enterSimulation(system)">
|
||||
<div class="card-box-title white-font left-margin-title" style="font-size: 22px;">{{ system.name }}</div>
|
||||
<el-tooltip effect="dark" placement="top-start">
|
||||
<div slot="content" style="width: 250px;">{{ system.desc }}</div>
|
||||
<div class="content-box white-font left-margin-content" style="font-size: 12px;">{{ system.desc }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card v-else :key="system.id" :body-style="{ padding: '0px' }" class="box-card">
|
||||
<div class="bg-img-box" @click="enterSimulation(system)">
|
||||
<div class="card-box-title">{{ system.name }}</div>
|
||||
<div class="content-box">{{ system.desc }}</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
</div>
|
||||
@ -209,6 +219,9 @@ export default {
|
||||
name = map.name;
|
||||
}
|
||||
return name;
|
||||
},
|
||||
ossUrl() {
|
||||
return this.$store.state.user.ossUrl;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -332,21 +345,49 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
.box-card {
|
||||
width: 30%;
|
||||
padding: 10px;
|
||||
height: 220px;
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
.bg-img-box {
|
||||
padding: 10px;
|
||||
height: 220px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat:no-repeat;
|
||||
}
|
||||
.white-font{
|
||||
color: #fbfbfb;
|
||||
}
|
||||
.left-margin-title{
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 45%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.left-margin-content{
|
||||
width: 50%;
|
||||
position: relative;
|
||||
left: 45%;
|
||||
height: 60px;
|
||||
}
|
||||
.card-box-title {
|
||||
text-align: center;
|
||||
font-size: 26px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
.content-box {
|
||||
font-size: 14px;
|
||||
color: #0C161A;
|
||||
text-indent: 28px;
|
||||
height: 100px;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break:break-all;
|
||||
display:-webkit-box;
|
||||
-webkit-line-clamp:4;
|
||||
-webkit-line-clamp:3;
|
||||
-webkit-box-orient:vertical;
|
||||
}
|
||||
.box-card .el-tooltip__popper {
|
||||
width: 300px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user