<template>
|
<div class="themaic">
|
<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-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() {
|
|
},
|
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>
|
