<template>
|
<div class="themaic">
|
<div class="headera-title">
|
<div>
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
<el-form-item>
|
<label class="th_title">{{ $t('themaic.name') }}</label>
|
</el-form-item>
|
<el-form-item>
|
<el-input
|
:placeholder="$t('common.pleaseInput')"
|
suffix-icon="el-icon-search"
|
v-model="input3"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<div class="title_count" style="color: white">
|
{{ $t('themaic.find') }}
|
<label style="magin: 0% 15px">{{ listcount }}</label>
|
{{ $t('themaic.record') }}
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="header_right">
|
<el-form :inline="true" :model="form" class="demo-form-inline">
|
<el-form-item :label="$t('themaic.maptltle')">
|
<el-select
|
v-model="selvalue"
|
class="m-2"
|
placeholder="Select"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item>
|
<div class="margin-right: 32px;">
|
<label style="margin-right: 10px; color: white"
|
>{{ $t('themaic.sortbytime') }}:</label
|
>
|
|
<i
|
@click="changetime(1)"
|
:class="{ active: timeindex == 1 }"
|
class="el-icon-caret-bottom"
|
></i>
|
|
<i
|
@click="changetime(2)"
|
:class="{ active: timeindex == 2 }"
|
class="el-icon-caret-top"
|
></i>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<div>
|
<label style="margin-right: 10px; color: white"
|
>{{ $t('themaic.sortbyviews') }}:</label
|
>
|
|
<i
|
@click="changeChecked(1)"
|
:class="{ active: checkindex == 1 }"
|
class="el-icon-caret-bottom"
|
></i>
|
|
<i
|
@click="changeChecked(2)"
|
:class="{ active: checkindex == 2 }"
|
class="el-icon-caret-top"
|
></i>
|
</div>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
<div class="themaic_content">
|
<div
|
@click="showThematic(item)"
|
v-for="(item, i) in middleList"
|
class="midedle_div"
|
:key="i"
|
>
|
<el-card class="middle_card">
|
<table>
|
<tr>
|
<td>
|
<div class="midddle_title">
|
<div class="t1">{{ item.name }}</div>
|
<div>
|
<label class="t2">{{ item.time }}</label
|
><label class="t2">浏览{{ item.count }}次</label>
|
</div>
|
</div>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<div
|
class="middle_image"
|
:style="{
|
background: 'url(' + item.url + ') no-repeat center',
|
'background-size': '100% 100%',
|
}"
|
></div>
|
</td>
|
</tr>
|
<tr>
|
<td></td>
|
</tr>
|
</table>
|
</el-card>
|
</div>
|
</div>
|
<div style="display: flex; justify-content: center">
|
<div class="pagination_box">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="1"
|
:page-sizes="[1, 2, 5, 10]"
|
:page-size="10"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="count"
|
>
|
</el-pagination>
|
</div>
|
</div>
|
<!-- <el-card style="height: 100%">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<div class="th_title">{{ $t('themaic.name') }}</div>
|
</el-col>
|
<el-col :span="4" :offset="14">
|
<el-input
|
size="small"
|
:placeholder="$t('common.pleaseInput')"
|
suffix-icon="el-icon-search"
|
v-model="input3"
|
>
|
</el-input>
|
</el-col>
|
</el-row>
|
<el-divider />
|
<el-row>
|
<el-col :span="5">
|
<label style="margin-right: 10px"
|
>{{ $t('themaic.maptltle') }}:</label
|
>
|
<el-select
|
v-model="selvalue"
|
class="m-2"
|
placeholder="Select"
|
style="width: 150px"
|
>
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</el-col>
|
<el-col :span="3">
|
<div style="margin-top: 5px">
|
<label style="margin-right: 10px"
|
>{{ $t('themaic.sortbytime') }}:</label
|
>
|
|
<i
|
@click="changetime(1)"
|
:class="{ active: timeindex == 1 }"
|
class="el-icon-caret-bottom"
|
></i>
|
|
<i
|
@click="changetime(2)"
|
:class="{ active: timeindex == 2 }"
|
class="el-icon-caret-top"
|
></i>
|
</div>
|
</el-col>
|
<el-col :span="3">
|
<div style="margin-top: 5px">
|
<label style="margin-right: 10px"
|
>{{ $t('themaic.sortbyviews') }}:</label
|
>
|
|
<i
|
@click="changeChecked(1)"
|
:class="{ active: checkindex == 1 }"
|
class="el-icon-caret-bottom"
|
></i>
|
|
<i
|
@click="changeChecked(2)"
|
:class="{ active: checkindex == 2 }"
|
class="el-icon-caret-top"
|
></i>
|
</div>
|
</el-col>
|
<el-col :span="10"> </el-col>
|
<el-col :span="3">
|
<div style="margin-top: 5px">
|
{{ $t('themaic.find') }}
|
<label style="magin: 0% 15px">{{ listcount }}</label>
|
{{ $t('themaic.record') }}
|
</div>
|
</el-col>
|
</el-row>
|
<el-divider />
|
<el-card shadow="never" class="themic_middle_card">
|
<div
|
@click="showThematic(item)"
|
v-for="(item, i) in middleList"
|
class="midedle_div"
|
:key="i"
|
>
|
<el-card class="middle_card">
|
<!-- <div>
|
|
|
|
</div>
|
|
<table>
|
<tr>
|
<td>
|
<div class="t1">{{ item.name }}</div>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<div
|
class="middle_image"
|
:style="{
|
background: 'url(' + item.url + ') no-repeat center',
|
'background-size': '100% 100%',
|
}"
|
></div>
|
</td>
|
</tr>
|
<tr>
|
<td>
|
<div style="position: absolute; bottom: 2%; right: 4%">
|
<label class="t2">{{ item.time }}</label
|
><label class="t2">浏览{{ item.count }}次</label>
|
</div>
|
</td>
|
</tr>
|
</table>
|
</el-card>
|
</div>
|
</el-card>
|
-->
|
<el-dialog
|
class="themaic_dialog"
|
:modal-append-to-body="true"
|
:append-to-body="true"
|
:show-close="false"
|
:visible.sync="dialogVisible"
|
width="99%"
|
:before-close="handleClose"
|
>
|
<map-View
|
v-if="dialogVisible"
|
@close="close"
|
:typeIndex="typeIndex"
|
></map-View>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import mapView from '@/components/mapviewTwo';
|
export default {
|
components: {
|
mapView,
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
input3: '',
|
count: 0,
|
listcount: 0,
|
checkindex: 1,
|
timeindex: 1,
|
pagesize: 10,
|
selvalue: '全部',
|
|
middleList: [
|
{
|
index: '1',
|
name: '管道基础数据专题图',
|
time: '2022-07-10',
|
count: '28',
|
url: require('../../assets/img/themic/a1.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj1.html',
|
},
|
{
|
index: '2',
|
name: '用户使用情况专题图',
|
time: '2022-07-22',
|
count: '6',
|
url: require('../../assets/img/themic/a2.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj2.html',
|
},
|
{
|
index: '3',
|
name: '项目基本情况专题图',
|
time: '2022-06-25',
|
count: '23',
|
url: require('../../assets/img/themic/a3.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj3.html',
|
},
|
{
|
index: '4',
|
name: '项目进度管理专题图',
|
time: '2022-07-17',
|
count: '15',
|
url: require('../../assets/img/themic/a4.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj4.html',
|
},
|
{
|
index: '5',
|
name: '全球项目分布专题图',
|
time: '2022-07-20',
|
count: '7',
|
url: require('../../assets/img/themic/a5.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj5.html',
|
},
|
{
|
index: '6',
|
name: '全国管网分布专题图',
|
time: '2022-07-26',
|
count: '5',
|
url: require('../../assets/img/themic/a6.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj5.html',
|
},
|
{
|
index: '7',
|
name: '全国项目足迹专题图',
|
time: '2022-06-30',
|
count: '10',
|
url: require('../../assets/img/themic/a7.jpg'),
|
pop: '/LFWeb/content/right/xxtj/xxtj5.html',
|
},
|
],
|
options: [
|
{
|
value: '全部',
|
label: '全部',
|
},
|
],
|
typeIndex: '',
|
};
|
},
|
mounted() {
|
this.count = this.middleList.length;
|
this.listcount = this.middleList.length;
|
},
|
created() {
|
var val = this.$store.state.currentPerms;
|
var permsEntity = this.$store.state.permsEntity;
|
for (var i = 0; i < permsEntity.length; i++) {
|
if (permsEntity[i].perms == val) {
|
// this.showMenuChange(permsEntity[i], permsEntity);
|
console.log('专题图', permsEntity[i]);
|
}
|
}
|
},
|
methods: {
|
close() {
|
this.$confirm('确认关闭？')
|
.then((_) => {
|
this.dialogVisible = false;
|
})
|
.catch((_) => {});
|
},
|
handleSizeChange(val) {
|
console.log(`每页 ${val} 条`);
|
},
|
handleCurrentChange(val) {
|
console.log(`当前页: ${val}`);
|
},
|
handleClose(done) {
|
this.$confirm('确认关闭？')
|
.then((_) => {
|
done();
|
})
|
.catch((_) => {});
|
},
|
changeChecked(res) {
|
if (this.checkindex != res) {
|
this.checkindex = res;
|
}
|
},
|
changetime(res) {
|
if (this.timeindex != res) {
|
this.timeindex = res;
|
}
|
},
|
showThematic(res) {
|
this.typeIndex = res.index;
|
|
this.dialogVisible = true;
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.themaic {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
cursor: pointer;
|
overflow: hidden;
|
background: #303030;
|
|
.headera-title {
|
width: calc(100% - 2px);
|
height: 70px;
|
display: flex;
|
justify-content: space-between;
|
background: #353539;
|
.th_title {
|
width: 81px;
|
height: 20px;
|
font-size: 21px;
|
font-family: Source Han Sans SC;
|
font-weight: 400;
|
color: #009cff;
|
line-height: 49px;
|
margin-left: 30px;
|
bottom: 24px;
|
}
|
|
.title_count {
|
height: 18px;
|
font-size: 19px;
|
font-family: Source Han Sans CN;
|
font-weight: 200;
|
color: #ffffff;
|
}
|
.header_right {
|
float: right;
|
margin-right: 30px;
|
|
height: 100%;
|
width: auto;
|
}
|
.active {
|
color: #409eff;
|
}
|
}
|
.themaic_content {
|
width: calc(100% - 54px);
|
height: 80%;
|
display: flex;
|
flex-flow: row wrap;
|
|
justify-content: flex-start;
|
padding: 17px 27px 0px 27px;
|
|
.midedle_div {
|
width: 456px;
|
height: 303px;
|
margin-right: 10px;
|
.t1 {
|
font-size: 16px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 35px;
|
}
|
.middle_image {
|
height: 220px;
|
width: 415px;
|
}
|
.t2 {
|
font-size: 12px;
|
font-family: Microsoft YaHei;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 35px;
|
}
|
.midddle_title {
|
display: flex;
|
justify-content: space-between;
|
}
|
}
|
.themic_middle_card {
|
border: transparent;
|
}
|
/deep/.el-card {
|
background: #454545;
|
border: 1px solid #454545;
|
}
|
}
|
.pagination_box {
|
/deep/.el-input__inner {
|
background-color: transparent !important;
|
border: 1px solid;
|
color: white;
|
}
|
/deep/.el-pagination__total {
|
color: white;
|
}
|
/deep/.el-pagination__jump {
|
color: white;
|
}
|
/deep/.el-pager li.active {
|
color: #409eff;
|
}
|
/deep/.el-pager li {
|
color: white;
|
background: transparent;
|
}
|
/deep/.el-pager li {
|
color: white;
|
}
|
/deep/.btn-prev {
|
background: transparent;
|
}
|
/deep/.btn-next {
|
background: transparent;
|
}
|
}
|
/deep/.el-form-item__content {
|
line-height: 70px;
|
}
|
/deep/ .el-input__inner {
|
border: 1px solid white;
|
color: white;
|
}
|
/deep/.el-form-item__label {
|
color: white;
|
line-height: 70px;
|
}
|
/deep/ .el-form--inline .el-form-item {
|
margin-right: 32px;
|
}
|
}
|
|
// .themaic .el-divider--horizontal {
|
// margin: 10px 0 !important;
|
// }
|
|
// .themaic .th_title {
|
// font-size: 22px;
|
// font-family: Microsoft YaHei;
|
// font-weight: bold;
|
// color: #3b4d6e;
|
// }
|
|
// .radiusSearch .el-input__wrapper {
|
// border-radius: 50px;
|
// }
|
|
// .themaic .active {
|
// color: #409eff;
|
// }
|
|
// .themaic .themic_middle_card {
|
// border: transparent;
|
|
// }
|
|
// .themaic .themic_middle_card .el-card__body {
|
// padding: 0px;
|
// }
|
|
// .themaic
|
|
// .themaic .midedle_div .middle_card {
|
// width: 100%;
|
// height: 100%;
|
// }
|
|
// .themaic .midedle_div .middle_card .el-card__body {
|
// padding: 10px;
|
// }
|
|
// .themaic .midedle_div .t1 {
|
// font-size: 16px;
|
// font-family: Microsoft YaHei;
|
// font-weight: bold;
|
// color: #000000;
|
// }
|
|
// .themaic .midedle_div .t2 {
|
// font-size: 13px;
|
// font-family: Microsoft YaHei;
|
// font-weight: 400;
|
// color: #3f3f3f;
|
// margin-right: 10px;
|
// }
|
|
// .themaic .midedle_div .middle_image {
|
// width: 94%;
|
// /* margin-top: 10px; */
|
// height: 73%;
|
// position: absolute;
|
// }
|
</style>
|
<style>
|
.themaic_dialog .el-dialog {
|
background: rgba(0, 0, 0, 0.8) !important;
|
margin-top: 5px !important;
|
margin-bottom: 5px !important;
|
/* margin-top: 5px !important;
|
margin-top: 5px !important; */
|
}
|
|
.themaic_dialog .el-dialog__header {
|
background: transparent !important;
|
padding: 0;
|
margin: 0;
|
color: #fff;
|
}
|
|
.themaic_dialog .el-dialog__body {
|
background: transparent !important;
|
height: 98vh;
|
padding: 0;
|
margin: 0;
|
font-size: 20px;
|
}
|
.el-card {
|
background: #303030;
|
border: 0px;
|
}
|
</style>
|
