<template>
|
<div class="themaic">
|
<el-card style="height: 100%">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<div class="th_title">专题地图</div>
|
</el-col>
|
<el-col :span="4" :offset="14">
|
<el-input size="small" placeholder="请输入内容" 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">地图名称:</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">按时间排序:</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">按浏览次数排序:</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">
|
<label style="margin-right: 10px">共找到{{ listcount }}个结果</label>
|
</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-pagination layout="prev, pager, next, jumper" :total="pagesize" @size-change="handleSizeChange"
|
@current-change="handleCurrentChange" />
|
</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 @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: "",
|
listcount: 7,
|
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.timeindex = 7888;
|
},
|
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;
|
|
|
|
// var url = "http://localhost/" + res.pop;
|
// window.open(
|
// url,
|
// "newwindow",
|
// "height=750, width=1400, top=150,left=400 "
|
// );
|
},
|
},
|
};
|
</script>
|
|
<style>
|
.themaic {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
cursor: pointer;
|
overflow: hidden;
|
}
|
|
.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 .midedle_div {
|
width: 23.5%;
|
height: 250px;
|
float: left;
|
margin-right: 1%;
|
margin-bottom: 1%;
|
position: relative;
|
}
|
|
.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;
|
}
|
|
/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
|
color: #fff;
|
} */
|
</style>
|
