parent
3cfb3de1b3
commit
f0a2a47062
@ -0,0 +1,15 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function singleLoginOne() {
|
||||
return request({
|
||||
url: '/tcZz/networkEcology/singleLogin/login1',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function singleLoginTwo() {
|
||||
return request({
|
||||
url: '/tcZz/networkEcology/singleLogin/login2',
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<iframe :src="iframeSrc" id="disposeMeet" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { singleLoginOne } from "@/api/login.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iframeSrc:"",
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getToken();
|
||||
},
|
||||
methods:{
|
||||
getToken() {
|
||||
singleLoginOne().then(res=>{
|
||||
console.log(res);
|
||||
this.iframeSrc = res.data;
|
||||
// document.cookie = "a=1";
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#disposeMeet {
|
||||
width: $ScreenWidth;
|
||||
height: $iframeHeight;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,549 @@
|
||||
<template>
|
||||
<!-- <div class="pc"> -->
|
||||
<div class="container">
|
||||
<div class="main-container">
|
||||
<div class="top_nav">
|
||||
<div class="top_left">
|
||||
<router-link
|
||||
v-for="item in menus.slice(0, 2)"
|
||||
:key="item.id"
|
||||
class="nav_item left_nav"
|
||||
active-class="selected_nav"
|
||||
exact
|
||||
:to="{ path: item.path }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="center_title">太仓市网络综合治理平台</div>
|
||||
<div class="top_right">
|
||||
<router-link
|
||||
v-for="item in menus.slice(2, 4)"
|
||||
:key="item.id"
|
||||
class="nav_item right_nav"
|
||||
active-class="selected_nav"
|
||||
exact
|
||||
:to="{ path: item.path }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="time-wrap">
|
||||
<div class="icon" />
|
||||
<span class="date">{{ now.date }}</span>
|
||||
<span class="time">
|
||||
{{ now.hour + ":" + now.minute + ":" + now.second }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="year-wrap"></div>
|
||||
</div>
|
||||
<router-view />
|
||||
</div>
|
||||
<div>
|
||||
<el-button
|
||||
v-if="!dialogDetails && $route.name === '网络舆情'"
|
||||
type="primary"
|
||||
style="
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
left: 1600px;
|
||||
z-index: 9999;
|
||||
"
|
||||
@click="dialogDetails = !dialogDetails"
|
||||
>切换</el-button
|
||||
>
|
||||
</div>
|
||||
<el-dialog
|
||||
v-if="dialogDetails"
|
||||
v-el-drag-dialog
|
||||
class="screen-dialog"
|
||||
:visible.sync="dialogDetails"
|
||||
width="2530px"
|
||||
top="20px"
|
||||
:modal-append-to-body="true"
|
||||
center
|
||||
:modal="false"
|
||||
>
|
||||
<div class="iframeBox">
|
||||
<commandControl />
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import commandControl from "@/views/privateOrder/sentiment/components/commandControl/index.vue";
|
||||
export default {
|
||||
components: {
|
||||
commandControl,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogDetails: false,
|
||||
// 当前选中菜单项id
|
||||
selectMenuId: 0,
|
||||
// 菜单项集合
|
||||
menus: [],
|
||||
// 当前时间
|
||||
now: {
|
||||
date: "",
|
||||
hour: "",
|
||||
minute: "",
|
||||
second: "",
|
||||
},
|
||||
// 时间切换
|
||||
yearChange: [
|
||||
{ label: "近1月", rightLine: true },
|
||||
{ label: "近3月", rightLine: true },
|
||||
{ label: "近1年", rightLine: false },
|
||||
],
|
||||
isActive: 0,
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
created() {
|
||||
this.menus = [
|
||||
{ id: 1, name: "网络安全", path: "/screen/exhibition/security" },
|
||||
{ id: 2, name: "网络舆情", path: "/screen/exhibition/sentiment" },
|
||||
{ id: 3, name: "网络管理", path: "/screen/exhibition/ecosphere" },
|
||||
{ id: 4, name: "网络生态", path: "/screen/exhibition/positiveEnergy" },
|
||||
];
|
||||
|
||||
setInterval(() => {
|
||||
this.now.date = this.$moment().format("YYYY-MM-DD");
|
||||
this.now.hour = this.$moment().format("HH");
|
||||
this.now.minute = this.$moment().format("mm");
|
||||
this.now.second = this.$moment().format("ss");
|
||||
}, 1000);
|
||||
|
||||
setInterval(() => {
|
||||
// this.getHoursWeather();
|
||||
}, 1000 * 60 * 10);
|
||||
},
|
||||
methods: {
|
||||
changeTime(val, index) {
|
||||
this.isActive = index;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pc {
|
||||
width: 100%;
|
||||
height: $ScreenHeight;
|
||||
overflow: scroll;
|
||||
}
|
||||
.iframeBox {
|
||||
position: relative;
|
||||
width: 3305px;
|
||||
height: 1006px;
|
||||
margin-left: 14px;
|
||||
margin-top: -16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// .container {
|
||||
// width: $ScreenWidth;
|
||||
// height: $ScreenHeight;
|
||||
// width: 1920;
|
||||
// height: 1080;
|
||||
// position: relative;
|
||||
// background: url("~@/assets/privateOrder/topNar/line_right_left.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
|
||||
.top_nav {
|
||||
width: $ScreenWidth;
|
||||
position: absolute;
|
||||
height: 130px;
|
||||
background: url("~@/assets/privateOrder/topNar/topNav.png");
|
||||
background-size: 100% 100%;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.top_left {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-right: 230px;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.center_title {
|
||||
width: 737px;
|
||||
line-height: 106px;
|
||||
height: 100%;
|
||||
font-family: PangMenZhengDao;
|
||||
font-size: 56px;
|
||||
letter-spacing: 6px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.top_right {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding-left: 230px;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.nav_item {
|
||||
width: 281px;
|
||||
height: 69px;
|
||||
font-family: PangMenZhengDao;
|
||||
font-size: 44px;
|
||||
letter-spacing: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: #85c9ff;
|
||||
}
|
||||
|
||||
.selected_nav {
|
||||
width: 281px;
|
||||
height: 69px;
|
||||
background: url("~@/assets/privateOrder/topNar/seleted_nav.png");
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.left_nav {
|
||||
margin-left: 187px;
|
||||
}
|
||||
|
||||
.right_nav {
|
||||
margin-right: 187px;
|
||||
}
|
||||
|
||||
/* .top-nar {
|
||||
width: $ScreenWidth;
|
||||
position: absolute;
|
||||
height: 107px;
|
||||
background: url("~@/assets/privateOrder/topNar/bg_banner.png");
|
||||
background-size: 100% 100%;
|
||||
z-index: 2;
|
||||
justify-content: space-between;
|
||||
border: 1px solid red;
|
||||
}
|
||||
|
||||
.top-content {
|
||||
width: $ScreenWidth;
|
||||
height: 107px;
|
||||
// background: url("~@/assets/privateOrder/topNar/top_bg.png");
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
margin: 23px 0 0 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
& > span:nth-child(1) {
|
||||
font-size: 42px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 4px;
|
||||
text-align: center;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
background-image: -webkit-linear-gradient(#fff, #b2ddff);
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
& > span:nth-child(2) {
|
||||
font-family: ConthraxSb-Regular;
|
||||
font-size: 11px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 1px;
|
||||
color: rgba($color: #fff, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-wrap {
|
||||
display: flex;
|
||||
margin-top: 21px;
|
||||
height: 110px;
|
||||
& > a {
|
||||
width: 241px;
|
||||
height: 65px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 34px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 2px;
|
||||
color: #b7dfff;
|
||||
text-align: center;
|
||||
line-height: 65px;
|
||||
}
|
||||
|
||||
.active {
|
||||
color: #fff;
|
||||
background: url("~@/assets/privateOrder/topNar/bg_nav_item.png");
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
} */
|
||||
|
||||
.time-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 33px;
|
||||
|
||||
.icon {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: DIN-Medium;
|
||||
font-size: 32px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 32px;
|
||||
letter-spacing: 2px;
|
||||
color: #b7dfff;
|
||||
margin-left: -15px;
|
||||
margin-top: -17px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-family: DIN-Bold;
|
||||
margin-left: 48px;
|
||||
margin-top: -17px;
|
||||
font-size: 37px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 32px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.year-wrap {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: space-between;
|
||||
right: 30px;
|
||||
width: 460px;
|
||||
height: 67px;
|
||||
//background-color: #1fb6e5;
|
||||
}
|
||||
|
||||
.time_name {
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
height: 27px;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0;
|
||||
color: #68cff9;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active_time {
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
height: 27px;
|
||||
font-family: SourceHanSansCN-Bold;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 54px;
|
||||
letter-spacing: 0;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.line-style {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 24px;
|
||||
background: #b7dfff url("~@/assets/privateOrder/topNar/top-cutline.png");
|
||||
opacity: 0.5;
|
||||
margin: 0 30px;
|
||||
}
|
||||
.wrap-bottom {
|
||||
margin-top: 10px;
|
||||
width: 110px;
|
||||
height: 4px;
|
||||
background: url("~@/assets/privateOrder/topNar/tab-act-line.png") 50% 100%;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.line {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.line-top {
|
||||
top: 8px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.line-bottom {
|
||||
bottom: 8px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.line-left {
|
||||
top: 15px;
|
||||
left: 10px;
|
||||
height: 1590px;
|
||||
}
|
||||
|
||||
.line-right {
|
||||
top: 15px;
|
||||
right: 10px;
|
||||
height: 1590px;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: $ScreenWidth;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: rgba(#1fb6e5, 0.06);
|
||||
}
|
||||
.screen-dialog {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
.dialog-btn {
|
||||
background: url("~@/assets/dialog/btn-bg.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 160px;
|
||||
height: 50px;
|
||||
font-family: SourceHanSansCN-Regular;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 10px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
}
|
||||
// ::v-deep .el-button {
|
||||
// border: none;
|
||||
// }
|
||||
.dialog-footer :hover {
|
||||
.dialog-btn {
|
||||
background: url("~@/assets/dialog/btn-bg-act.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog__header {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
text-align: left;
|
||||
padding-left: 40px;
|
||||
.el-dialog__title {
|
||||
font-family: SourceHanSansCN-Bold, san-serif;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0px;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
::v-deep .el-dialog {
|
||||
background: url("~@/assets/dialog/弹窗背景-一般.png") no-repeat;
|
||||
width: 1820px;
|
||||
height: 1092px;
|
||||
overflow: hidden;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
::v-deep .el-dialog_body {
|
||||
height: 1092px;
|
||||
}
|
||||
::v-deep .el-dialog__headerbtn {
|
||||
top: 0;
|
||||
font-size: 30px;
|
||||
font-weight: bolder;
|
||||
}
|
||||
::v-deep .el-dialog__footer {
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
::v-deep .el-table {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep.el-table::before {
|
||||
display: none;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
font-size: 26px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
::v-deep .el-table__header {
|
||||
background-color: rgba(76, 162, 248, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
::v-deep .el-table__row {
|
||||
font-family: SourceHanSansCN-Regular, sans-serif;
|
||||
font-size: 26px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
letter-spacing: 0px;
|
||||
color: #b7dfff;
|
||||
background-color: rgba(106, 184, 255, 0.2);
|
||||
border: solid 1px #6ab8ff;
|
||||
}
|
||||
::v-deep .el-table {
|
||||
tbody tr {
|
||||
&:hover {
|
||||
td {
|
||||
background-color: rgba(228, 223, 223, 0.3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell {
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<div class="left-tabs-box">
|
||||
<router-link
|
||||
v-for="item in menus"
|
||||
:key="item.id"
|
||||
class="nav_item left_nav"
|
||||
active-class="selected_nav"
|
||||
|
||||
:to="{ path: item.path }"
|
||||
>
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
<iframe :src="iframeSrc" id="supplyChain" allowtransparency="true" style="background-color: rgba(0, 24, 50, 0.5);"></iframe>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { singleLoginTwo } from "@/api/login.js"
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
iframeSrc:"",
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getToken();
|
||||
},
|
||||
methods:{
|
||||
getToken() {
|
||||
singleLoginTwo().then(res=>{
|
||||
console.log(res);
|
||||
this.iframeSrc = res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
#supplyChain {
|
||||
width: $ScreenWidth;
|
||||
height: $iframeHeight;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue