<template>
|
<div class="box">
|
<div class="content left">
|
<div class="layout">
|
<div class="layout_box">
|
<left2_1></left2_1>
|
<left2_2></left2_2>
|
</div>
|
<div class="layout_box">
|
<left1_1 class="Left1_1"
|
@dataState="dataState(arguments)"></left1_1>
|
<left1_2></left1_2>
|
<left1_3></left1_3>
|
</div>
|
</div>
|
</div>
|
<div class="content center">
|
<iframe src="https://bxgft.shouguang.gov.cn/ditu"
|
style="width: 100%; height: 100%"
|
class="mapindex"></iframe>
|
<!-- <iframe
|
src="../turnjs/Code/index.html"
|
style="width: 100%; height: 100%"
|
></iframe> -->
|
<!-- <maodatamanage></maodatamanage>
|
<map-view></map-view> -->
|
<div class="center_mask">
|
<center1_1 @dataState="dataState(arguments)"></center1_1>
|
<center1_2></center1_2>
|
</div>
|
</div>
|
<div class="content right">
|
<div class="layout">
|
<div class="layout_box">
|
<right1_1 @vaideoShow="vaideoShow"></right1_1>
|
<right1_2 @showToGoRester="imgShow"></right1_2>
|
</div>
|
<div class="layout_box">
|
<right2_1 @ifreamShow="ifreamShow(arguments)"></right2_1>
|
<right2_2 @ifreamShow="ifreamShow(arguments)"></right2_2>
|
</div>
|
</div>
|
</div>
|
<el-dialog :visible.sync="isShow"
|
width="50%"
|
:append-to-body="true"
|
:modal-append-to-body="false">
|
<div class="rollTitle">
|
<!-- 六个列表表头可根据传id值切换 -->
|
<el-row v-if="ids == '1'">
|
<el-col :span="4">序号</el-col>
|
<el-col :span="5">时间</el-col>
|
<el-col :span="5">名称</el-col>
|
<el-col :span="5">数据量</el-col>
|
<el-col :span="5">状态</el-col>
|
</el-row>
|
<el-row v-if="ids == '2'">
|
<el-col :span="4">序号</el-col>
|
<el-col :span="5">时间</el-col>
|
<el-col :span="5">名称</el-col>
|
<el-col :span="5">数据量</el-col>
|
<el-col :span="5">状态</el-col>
|
</el-row>
|
<el-row v-if="ids == '3'">
|
<el-col :span="2">序号 </el-col>
|
<el-col :span="4">数据项名称 </el-col>
|
<el-col :span="4">模式名</el-col>
|
<el-col :span="3">表名</el-col>
|
<el-col :span="2">数据量</el-col>
|
<el-row :span="2">字段数</el-row>
|
<el-row :span="2">已关联画像</el-row>
|
<el-row :span="3">数据提供部门</el-row>
|
<el-row :span="2">数据使用单位</el-row>
|
</el-row>
|
<el-row v-if="ids == '4'">
|
<el-col :span="4">序号</el-col>
|
<el-col :span="20">部门</el-col>
|
</el-row>
|
<el-row v-if="ids == '5'">
|
<el-col :span="4">序号</el-col>
|
<el-col :span="5">数据项名称 </el-col>
|
<el-col :span="5">部门名称</el-col>
|
<el-col :span="5">模式名称</el-col>
|
<el-col :span="5">表名</el-col>
|
</el-row>
|
<el-row v-if="ids == '6'">
|
<el-col :span="4">序号</el-col>
|
<el-col :span="20">部门</el-col>
|
</el-row>
|
<el-row v-if="ids == 'a1'">
|
<el-col :span="4">序号</el-col>
|
<el-col :span="20">维度名称</el-col>
|
</el-row>
|
</div>
|
<div class="seamless-warp">
|
<!-- 六个列表表格内容可根据传id值切换 -->
|
<ul v-if="ids == '1'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="4"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
|
<el-col :span="5"
|
class="rollItem">{{ item.NY }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.NAME }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{
|
item.ALL_SIZE == undefined ? "0条" : `${item.ALL_SIZE}条`
|
}}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.STATUS }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
<ul v-if="ids == '2'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="4"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
|
<el-col :span="5"
|
class="rollItem">{{ item.NY }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.NAME }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{
|
item.ALL_SIZE == undefined ? "0条" : `${item.ALL_SIZE}条`
|
}}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.STATUS }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
<ul v-if="ids == '3'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="2"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
<el-col :span="4"
|
class="rollItem">{{
|
item.v_table_comments
|
}}</el-col>
|
<el-col :span="4"
|
class="rollItem">{{ item.owner }}</el-col>
|
<el-col :span="3"
|
class="rollItem">{{ item.tablename }}</el-col>
|
<el-col :span="2"
|
class="rollItem">{{ item.v_record }}</el-col>
|
<el-col :span="2"
|
class="rollItem">{{ item.fieldcount }}</el-col>
|
<el-col :span="2"
|
class="rollItem">{{ item.wd }}</el-col>
|
<el-col :span="3"
|
class="rollItem">{{ item.ownername }}</el-col>
|
<el-col :span="2"
|
class="rollItem">{{ item.bmmc }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
<ul v-if="ids == '4'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="4"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
<el-col :span="20"
|
class="rollItem">{{ item.name }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
<ul v-if="ids == '5'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="4"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.comments }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.bmmc }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.owner }}</el-col>
|
<el-col :span="5"
|
class="rollItem">{{ item.tablename }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
<ul v-if="ids == '6'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="4"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
<el-col :span="20"
|
class="rollItem">{{ item.bmmc }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
<ul v-if="ids == 'a1'">
|
<li v-for="(item, index) in tableData"
|
:key="index">
|
<el-row class="click_box">
|
<el-col :span="4"
|
class="rollItem_id">{{ index + 1 }}</el-col>
|
<el-col :span="20"
|
class="rollItem">{{ item.DIC_NAME }}</el-col>
|
</el-row>
|
</li>
|
</ul>
|
</div>
|
</el-dialog>
|
<div v-if="isShowVideo"
|
class="showVideone"
|
@click="showvidetwo()">
|
<div class="ShowVideo1">
|
<video style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/数据应用管理平台视频.mp4"
|
autoplay="autoplay"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"></video>
|
</div>
|
</div>
|
<!-- <el-dialog
|
:visible.sync="isShowVideo"
|
width="37%"
|
top="6vh"
|
:append-to-body="true"
|
:modal-append-to-body="false"
|
>
|
<div class="videodialog_box">
|
<video
|
style="object-fit: fill; width: 100%; height: 100%"
|
src="../../assets/img/数据应用管理平台视频.mp4"
|
autoplay="autoplay"
|
muted="muted"
|
loop
|
x5-playsinline="true"
|
playsinline="true"
|
webkit-playsinline="true"
|
x-webkit-airplay="allow"
|
x5-video-player-type="h5"
|
x5-video-player-fullscreen="true"
|
></video>
|
</div>
|
</el-dialog> -->
|
<el-dialog id="JTY"
|
:visible.sync="isShowImg"
|
width="37%"
|
top="6vh"
|
:append-to-body="true"
|
:modal-append-to-body="false">
|
<el-carousel :interval="5000"
|
arrow="always">
|
<el-carousel-item v-for="(item, index) in imgUrl"
|
:key="index">
|
<img :src="item"
|
alt=""
|
style="width: 100%; height: 100%"
|
class="carousel-img" />
|
</el-carousel-item>
|
</el-carousel>
|
</el-dialog>
|
<!-- <el-dialog
|
:visible.sync="ishowifream"
|
width="50%"
|
top="2vh"
|
:append-to-body="true"
|
:modal-append-to-body="false"
|
>
|
<div
|
style="
|
width: 100%;
|
height: 3000%;
|
position: absolute;
|
background: white;
|
"
|
>
|
<iframe v-bind:src="reportUrl" width="100%" height="100%"></iframe>
|
</div>
|
</el-dialog> -->
|
<div v-show="ishowifream"
|
style="
|
width: 100%;
|
z-index: 100;
|
position: absolute;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.5);
|
"
|
@click="iscloseifream">
|
<div class="ShowIfream">
|
<iframe v-bind:src="reportUrl"
|
width="100%"
|
height="100%"></iframe>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import left1_1 from "./left/left1-1.vue";
|
import left1_2 from "./left/left1-2.vue";
|
import left1_3 from "./left/left1-3.vue";
|
import left2_1 from "./left/left2-1.vue";
|
import left2_2 from "./left/left2-2.vue";
|
import right1_1 from "./right/right1-1.vue";
|
import right1_2 from "./right/right1-2.vue";
|
import right2_1 from "./right/right2-1.vue";
|
import right2_2 from "./right/right2-2.vue";
|
import MapView from "../../components/MapView.vue";
|
import center1_1 from "./center/center1-1.vue";
|
import center1_2 from "./center/center1-2.vue";
|
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {
|
left1_1,
|
left1_2,
|
left1_3,
|
left2_1,
|
left2_2,
|
right1_1,
|
right1_2,
|
right2_1,
|
right2_2,
|
center1_1,
|
center1_2,
|
MapView,
|
},
|
data () {
|
//这里存放数据
|
return {
|
isShowImg: false,
|
isShowVideo: false,
|
ishowifream: false,
|
isShow: false,
|
ids: "",
|
reportUrl: "",
|
tableData: [],
|
imgUrl: [
|
require("../../assets/img/shujuguanli/64d56c445da36a95cedf60fd1ba550d.png"),
|
require("../../assets/img/shujuguanli/2a596f3425f9f1965c8aec70a241b84.png"),
|
require("../../assets/img/shujuguanli/1d11b594f0c9755476925c70ea2eaef.png"),
|
],
|
};
|
},
|
computed: {
|
defaultOption () {
|
return {
|
step: 0.2, // 数值越大速度滚动越快
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
hoverStop: true, // 是否开启鼠标悬停stop
|
direction: 1, // 0向下 1向上 2向左 3向右
|
openWatch: true, // 开启数据实时监控刷新dom
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
};
|
},
|
},
|
//方法集合
|
methods: {
|
showvidetwo () {
|
this.isShowVideo = false;
|
},
|
//接受子组件参数 多参数数组形式返回
|
iscloseifream () {
|
this.ishowifream = false;
|
},
|
ifreamShow (val) {
|
this.ishowifream = val[0];
|
this.reportUrl = val[1];
|
},
|
dataState (val) {
|
this.isShow = val[0];
|
this.ids = val[1];
|
this.tableData = val[2];
|
},
|
vaideoShow (val) {
|
this.isShowVideo = val;
|
},
|
imgShow (val) {
|
this.isShowImg = val;
|
},
|
},
|
created () { },
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.ShowIfream {
|
border: 1px solid white;
|
width: 48%;
|
top: 7vh;
|
position: absolute;
|
height: 92%;
|
left: 26%;
|
}
|
.box {
|
width: 100%;
|
// height: 2624px;
|
height: calc(100vh);
|
position: relative;
|
overflow: hidden;
|
display: flex;
|
|
.showVideone {
|
background: rgba(0, 0, 0, 0.5);
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
z-index: 100;
|
}
|
.ShowVideo1 {
|
background: rgba(0, 0, 0, 0.5);
|
width: 45%;
|
height: 93%;
|
position: absolute;
|
z-index: 100;
|
left: 26%;
|
top: 5vh;
|
}
|
.content {
|
font-size: 80px;
|
width: 4616px;
|
// background: url("../../assets/img/zuo.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 0 102px;
|
box-sizing: border-box;
|
height: 100%;
|
overflow: hidden;
|
.layout {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
.layout_box {
|
width: 49%;
|
height: 100%;
|
}
|
}
|
}
|
.center {
|
width: 100%;
|
background-image: none !important;
|
padding-right: 0;
|
padding-left: 0;
|
position: relative;
|
.center_mask {
|
width: 4648px;
|
height: 100%;
|
box-sizing: border-box;
|
padding-top: 316px;
|
padding-left: 100px;
|
padding-right: 100px;
|
position: absolute;
|
left: 4516px;
|
top: 0;
|
z-index: 29;
|
// background: url("../../assets/img/图层 32.png") no-repeat center;
|
// background: rgba(0, 0, 0, 0.5);
|
background-size: 100% 100%;
|
}
|
}
|
.left {
|
padding-top: 316px;
|
position: absolute;
|
// background: rgba(8, 32, 58, 0.5);
|
left: 0;
|
top: 0;
|
z-index: 30;
|
}
|
.right {
|
// background: url("../../assets/img/you.png") no-repeat center;
|
// background: url("../../assets/img/zuo.png") no-repeat center;
|
// background: rgba(8, 32, 58, 0.5);
|
background-size: 100% 100%;
|
padding-top: 316px;
|
position: absolute;
|
right: 0;
|
top: 0;
|
z-index: 30;
|
}
|
}
|
.seamless-warp {
|
height: 2000px;
|
overflow: auto;
|
}
|
|
/* 标题头的设置 */
|
.rollTitle {
|
// margin-top: 10px;
|
height: 140px;
|
line-height: 140px !important;
|
color: #fff !important;
|
font-size: 52px !important;
|
background: #054b75;
|
// opacity: 0.27;
|
}
|
/* 标题中文字居中 */
|
.rollTitle .el-col {
|
text-align: center !important;
|
color: #fff;
|
}
|
/* 滚动项的字体大小 */
|
.rollItem {
|
font-size: 50px !important;
|
color: #fff;
|
background: rgba(0, 0, 0, 0.7);
|
}
|
.rollItem_id {
|
font-family: dig;
|
font-size: 50px;
|
font-weight: 300;
|
color: #fff;
|
background: rgba(0, 0, 0, 0.7);
|
}
|
/* 去除ul的左内边距 */
|
.seamless-warp ul {
|
padding: 0 !important;
|
margin: 0 !important;
|
}
|
/* 去除li的小点 */
|
.seamless-warp ul li {
|
list-style-type: none !important;
|
border-bottom: 1px solid white;
|
}
|
.seamless-warp ul li:hover {
|
background-color: rgba(0, 162, 255, 0.7);
|
cursor: pointer;
|
}
|
/* 每行数据的样式调整 */
|
.seamless-warp ul li .el-row .el-col {
|
text-align: center !important;
|
height: 140px !important;
|
line-height: 140px !important;
|
}
|
.videodialog_box {
|
width: 100%;
|
position: absolute;
|
height: 88vh;
|
}
|
.el-carousel {
|
width: 100%;
|
height: 88vh;
|
}
|
.el-carousel__item {
|
width: 100%;
|
height: 100%;
|
}
|
/deep/ .el-carousel__container {
|
width: 100%;
|
height: 100% !important;
|
}
|
/deep/ .el-carousel__button {
|
width: 250px !important;
|
height: 40px !important ;
|
}
|
/deep/ .el-carousel__arrow {
|
height: 240px !important;
|
width: 240px !important;
|
i {
|
font-size: 140px !important;
|
font-weight: 600;
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.ShowIfream {
|
border: 1px solid white;
|
width: 69%;
|
top: 4vh;
|
position: absolute;
|
height: 92%;
|
left: 14%;
|
}
|
.box {
|
height: 100%; //有问题，不能被撑开
|
.ShowVideo1 {
|
background: rgba(0, 0, 0, 0.5);
|
width: 40%;
|
height: 50%;
|
position: absolute;
|
z-index: 100;
|
left: 31%;
|
top: 15%;
|
}
|
.left {
|
width: 3800px;
|
background: rgba(8, 32, 58, 0.7);
|
.Left1_1 {
|
position: absolute;
|
bottom: -15%;
|
}
|
}
|
.content {
|
height: 100%;
|
|
.layout {
|
height: 100%;
|
|
.layout_box {
|
height: auto;
|
width: 100% !important;
|
}
|
}
|
}
|
|
.center {
|
.center_mask {
|
background: rgba(0, 0, 0, 0.7);
|
width: 44.6%;
|
left: 27.7%;
|
}
|
}
|
.right {
|
width: 3800px;
|
background: rgba(8, 32, 58, 0.7);
|
// right: -1%;
|
}
|
}
|
.el-carousel {
|
width: 100%;
|
height: 40vh;
|
margin-top: 23%;
|
}
|
.seamless-warp {
|
height: 4000px;
|
overflow: auto;
|
}
|
.seamless-warp ul li .el-row .el-col {
|
text-align: center !important;
|
height: 0.18rem !important;
|
line-height: 0.18rem !important;
|
}
|
.rollTitle {
|
height: 0.18rem;
|
line-height: 0.18rem !important;
|
color: #fff !important;
|
font-size: 0.04rem !important;
|
background: #054b75;
|
}
|
}
|
|
@media only screen and (min-width: 6840px) {
|
.layout_box {
|
width: 49% !important;
|
}
|
}
|
</style>
|
<style lang="less">
|
.el-dialog {
|
background: transparent !important;
|
}
|
</style>
|
