大屏 vue openlayers 基础项目
vue2+openlayers6 基础大屏地图项目
基本效果图
项目部分代码
<template>
<div class="left-bg">
<!-- 日历组件 -->
<!-- https://www.npmjs.com/package/zc-components -->
<zc-date
class="date-select"
type="ym"
inputFilling
v-model="dateValue"
></zc-date>
<!-- 分隔小组件形式 -->
<left-box1 @fun="clickFun"></left-box1>
<left-box2></left-box2>
</div>
</template>
<template>
<div :style="[{ marginTop: !isFull ? '5rem' : '0rem' }]" class="center-bg">
<map-vue></map-vue>
<zc-box
marginTop="2rem"
titleType="big"
height="36rem"
title="辖区企业自查自纠"
v-if="!isFull"
showButton
buttonTitle="详情"
@fun="clickFun"
>
<zc-echarts id="echarts-center" :option="lineOption"></zc-echarts>
</zc-box>
<zc-table-box
:titleData="titleData"
:option="option"
:listData="listData"
ref="boxInfo"
:percent="['value3']"
></zc-table-box>
</div>
</template>
<template>
<transition name="fade">
<div v-if="show" :class="[{ 'table-box-bg-basic': showModal }]">
<div class="table-box-bg">
<div class="table">
<div class="header">
<div class="title">
<div
v-show="titleArr.length > 0"
v-for="(item, itemIndex) in titleArr"
:key="itemIndex + 'idx'"
:class="[
{ 'add-margin': itemIndex !== 0 },
{ 'add-border': itemIndex == basicIndex },
{ 'add-color': itemIndex !== basicIndex },
]"
@click="clickTitle(itemIndex)"
>
{{ item }}
</div>
<div v-show="titleArr.length == 0">{{ title }}</div>
</div>
<div class="close"><span @click="closeTable">关闭</span></div>
</div>
<div class="line"></div>
<div v-if="showSelect" class="reset-class">
<el-select
v-model="value"
@change="changeTime"
size="mini"
placeholder="请选择"
>
<el-option
v-for="item in options"
:key="item.label"
:label="item.value"
:value="item.label"
>
</el-option>
</el-select>
</div>
<zc-table
style="
border-top: 1px solid #0b4580;
border-bottom: 1px solid #0b4580;
"
width="150rem"
:titleData="titleData"
:listData="tableData"
:option="option"
:height="showSelect ? '61rem' : '65rem'"
:limitMoveNum="17"
:tableIndex="true"
:status="1"
:titleOption="{
height: '4.5rem',
background: 'rgba(3,21,54,0.5)',
}"
:percent="percent"
:setWidth="['10rem', '', '', '']"
></zc-table>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: {
/* 是否开启背景模态框,默认开启 */
showModal: {
type: Boolean,
default: () => {
return true;
},
},
/* 数据源 */
listData: {
type: Array,
default: () => {
return [];
},
},
/* 是否显示月份搜索 */
showSelect: {
type: Boolean,
default: () => {
return false;
},
},
/* 表格标题list */
titleData: {
type: Array,
default: () => {
return ["列一", "列二", "列三", "列四"];
},
},
/* 取值项 */
option: {
type: Array,
default: () => {
return [];
},
},
/* 是否多组表格数据 */
isTables: {
type: Boolean,
default: () => {
return false;
},
},
/* 百分比显示数据 */
percent: {
type: Array,
default: () => {
return [];
},
},
},
watch: {
listData: {
handler(val) {
/* 深拷贝赋值 */
let data = JSON.parse(JSON.stringify(val));
/* 非多数组 */
if (!this.isTables) {
this.tableData = data;
} else {
/* 多数组默认取当前高亮列表 */
this.tableData = data[this.basicIndex].data;
}
},
},
},
data() {
return {
show: false, //show the table
title: "", //表格标题
titleArr: [], //表格标题数组
basicIndex: 0, //默认下标值
/* 下拉框的选项 */
options: [
{
value: "一月",
label: "1",
},
{
value: "二月",
label: "2",
},
{
value: "三月",
label: "3",
},
{
value: "四月",
label: "4",
},
{
value: "五月",
label: "5",
},
{
value: "六月",
label: "6",
},
{
value: "七月",
label: "7",
},
{
value: "八月",
label: "8",
},
{
value: "九月",
label: "9",
},
{
value: "十月",
label: "10",
},
{
value: "十一月",
label: "11",
},
{
value: "十二月",
label: "12",
},
{
value: "全年",
label: "",
},
],
value: "", //下拉框获取的值
tableData: [], //给表格组件的数据
};
},
methods: {
/* 打开table组件 */
openTable() {
/* 在渲染完成之后再走方法 */
this.$nextTick(() => {
var mo = function (e) {
e.preventDefault();
};
document.body.style.overflow = "hidden";
document.addEventListener("touchmove", mo, false); //禁止页面滑动
this.show = true;
});
},
/* 关闭table组件 */
closeTable() {
var mo = function (e) {
e.preventDefault();
};
document.body.style.overflow = ""; //出现滚动条
document.removeEventListener("touchmove", mo, false);
/* 清空掉默认值 */
this.titleArr = [];
this.title = "";
/* 设置回默认值 */
this.basicIndex = 0;
this.show = false;
},
/* 标题的点击方法 */
clickTitle(index) {
let data = JSON.parse(JSON.stringify(this.listData));
this.tableData = data[index].data;
this.basicIndex = index;
/* 方法,待后面具体实现 */
this.$emit("changetitle");
},
/* 获取当前时间 */
getTime() {
var date = new Date();
var seperator1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var currentdate = year + seperator1 + month;
return currentdate;
},
/* 切换时间选项的回调方法 */
changeTime(val) {
this.$emit("changetime", val);
},
},
mounted() {
/* 设置默认当前月 */
this.value = this.getTime().split("-")[1];
/* 页面渲染完成设置键盘监听事件 */
this.$nextTick(() => {
document.addEventListener("keyup", (e) => {
if (e.keyCode == 27) {
this.closeTable();
}
});
});
},
};
</script>
<style lang="scss" scoped>
.table-box-bg-basic {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1001;
margin: auto auto;
background-color: rgb(255, 255, 255, 0.1);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
}
.table-box-bg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("~@/assets/images/bg_view_l.png");
background-size: 100% 100%;
width: 160rem;
height: 85rem;
z-index: 99999999999; //最大,防止其他popup影响
margin: auto auto;
.table {
width: 150rem;
height: 75rem;
margin: 2rem auto;
margin-top: 4rem;
.header {
display: flex;
.title {
flex: 1;
color: #00d1ff;
font-size: 2rem;
font-weight: 500;
display: flex;
div {
position: relative;
cursor: pointer;
}
}
.close {
width: 5rem;
text-align: right;
span {
color: #00d1ff;
background: #f5f5f500;
padding: 0.2rem 1rem;
border-radius: 0.5rem;
border: 1px solid #00d1ff;
cursor: pointer;
}
}
}
.line {
border: 1px solid #0b4580;
margin: 3rem 0;
}
}
}
.add-margin {
margin-left: 2rem;
}
.add-border::before {
content: " ";
width: 22rem;
height: 0;
border-bottom: 0.3rem #00d1ff solid;
position: absolute;
top: 5.5rem;
border-radius: 0.5rem;
transition: 0.3s;
}
.add-color {
color: #f5f5f5 !important;
}
.reset-class {
text-align: right;
margin-bottom: 2rem;
v-deep.el-input__inner {
background: #0c3878 !important;
}
::v-deep .el-select-dropdown {
background: #0c3878 !important;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
项目获取
下载地址是:https://download.csdn.net/download/weixin_52318785/86777842,无需积分,项目组件式开发,开箱即用,注释啥的挺全,欢迎看看或者评论