From 950c7bf191b173b45eedd08fd2d576bb093186ca Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 13 十二月 2022 18:43:50 +0800
Subject: [PATCH] 综合展示分析
---
src/views/Thematic/index.vue | 405 ++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 326 insertions(+), 79 deletions(-)
diff --git a/src/views/Thematic/index.vue b/src/views/Thematic/index.vue
index 3a2e5cb..0b27a8f 100644
--- a/src/views/Thematic/index.vue
+++ b/src/views/Thematic/index.vue
@@ -1,6 +1,138 @@
<template>
<div class="themaic">
- <el-card style="height: 100%">
+ <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>
@@ -95,7 +227,7 @@
- </div> -->
+ </div>
<table>
<tr>
@@ -126,13 +258,7 @@
</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"
@@ -142,7 +268,11 @@
width="99%"
:before-close="handleClose"
>
- <map-View @close="close" :typeIndex="typeIndex"></map-View>
+ <map-View
+ v-if="dialogVisible"
+ @close="close"
+ :typeIndex="typeIndex"
+ ></map-View>
</el-dialog>
</div>
</template>
@@ -157,7 +287,8 @@
return {
dialogVisible: false,
input3: '',
- listcount: 7,
+ count: 0,
+ listcount: 0,
checkindex: 1,
timeindex: 1,
pagesize: 10,
@@ -230,7 +361,10 @@
typeIndex: '',
};
},
- mounted() {},
+ mounted() {
+ this.count = this.middleList.length;
+ this.listcount = this.middleList.length;
+ },
created() {
var val = this.$store.state.currentPerms;
var permsEntity = this.$store.state.permsEntity;
@@ -274,94 +408,207 @@
},
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 "
- // );
+ this.dialogVisible = true;
},
},
};
</script>
-<style>
+<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 .el-divider--horizontal {
+// margin: 10px 0 !important;
+// }
-.themaic .th_title {
- font-size: 22px;
- font-family: Microsoft YaHei;
- font-weight: bold;
- color: #3b4d6e;
-}
+// .themaic .th_title {
+// font-size: 22px;
+// font-family: Microsoft YaHei;
+// font-weight: bold;
+// color: #3b4d6e;
+// }
-.radiusSearch .el-input__wrapper {
- border-radius: 50px;
-}
+// .radiusSearch .el-input__wrapper {
+// border-radius: 50px;
+// }
-.themaic .active {
- color: #409eff;
-}
+// .themaic .active {
+// color: #409eff;
+// }
-.themaic .themic_middle_card {
- border: transparent;
-}
+// .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 .themic_middle_card .el-card__body {
+// padding: 0px;
+// }
-.themaic .midedle_div .middle_card {
- width: 100%;
- height: 100%;
-}
+// .themaic
-.themaic .midedle_div .middle_card .el-card__body {
- padding: 10px;
-}
+// .themaic .midedle_div .middle_card {
+// width: 100%;
+// height: 100%;
+// }
-.themaic .midedle_div .t1 {
- font-size: 16px;
- font-family: Microsoft YaHei;
- font-weight: bold;
- color: #000000;
-}
+// .themaic .midedle_div .middle_card .el-card__body {
+// padding: 10px;
+// }
-.themaic .midedle_div .t2 {
- font-size: 13px;
- font-family: Microsoft YaHei;
- font-weight: 400;
- color: #3f3f3f;
- margin-right: 10px;
-}
+// .themaic .midedle_div .t1 {
+// font-size: 16px;
+// font-family: Microsoft YaHei;
+// font-weight: bold;
+// color: #000000;
+// }
-.themaic .midedle_div .middle_image {
- width: 94%;
- /* margin-top: 10px; */
- height: 73%;
- position: absolute;
-}
+// .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 {
@@ -386,8 +633,8 @@
margin: 0;
font-size: 20px;
}
-
-/* .themaic .el-dialog .el-dialog__header .el-dialog__headerbtn {
- color: #fff;
-} */
+.el-card {
+ background: #303030;
+ border: 0px;
+}
</style>
--
Gitblit v1.9.3